tsconfig.json에서 경로를 사용하는 방법은 무엇입니까?

나는 경로 매핑 에 대해 읽고 있었고 tsconfig.json다음과 같은 추한 경로를 사용하지 않기 위해 그것을 사용하고 싶었습니다.

우리는 프로젝트와 라이브러리를 포함하는 단일 저장소를 가지고 있기 때문에 프로젝트 조직은 약간 이상합니다. 프로젝트는 회사 및 브라우저 / 서버 / 유니버설별로 그룹화됩니다.

다음 tsconfig.json대신 경로를 구성하는 방법은 무엇입니까?

import { Something } from "../../../../../lib/src/[browser/server/universal]/...";

나는 사용할 수 있습니다 :

import { Something } from "lib/src/[browser/server/universal]/...";

웹팩 구성에 다른 것이 필요합니까? 아니면 tsconfig.json충분합니까?

tsconfig.json 파일은 TS 기능이므로 설정할 수 있습니다.

당신은 이렇게 할 수 있습니다 :

"compilerOptions": {
        "baseUrl": "src", // This must be specified if "paths" is.
         ...
        "paths": {
            "@app/*": ["app/*"],
            "@config/*": ["app/_config/*"],
            "@environment/*": ["environments/*"],
            "@shared/*": ["app/_shared/*"],
            "@helpers/*": ["helpers/*"]
        },
        ...

참조하려는 경로는 baseUrl을 가리키는 경로의 기준으로 사용하며 문서에 설명 된대로 필수입니다.

문자 '@'은 필수가 아닙니다.

그런 식으로 설정하면 다음과 같이 쉽게 사용할 수 있습니다.

import { Yo } from '@config/index';

당신이 알 수있는 유일한 사실은 intellisense가 현재 최신 버전에서 작동하지 않는다는 것입니다. 따라서 파일 가져 오기 / 내보내기에 대한 색인 규칙을 따르는 것이 좋습니다.

https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

baseUrl및 paths docs 조합을 사용할 수 있습니다 .

루트가 최상위 src디렉토리 에 있다고 가정 하고 이미지를 올바르게 읽습니다.

// tsconfig.json
{
  "compilerOptions": {
    ...
    "rootDir": ".",
    "paths": {
      "lib/*": [
        "src/org/global/lib/*"
      ]
    }
  }
}

들어 webpack당신도 추가해야 할 수도 있습니다 모듈 해상도를 . 들어 webpack2이 같은 볼 수 있었다

// webpack.config.js
module.exports = {
    resolve: {
        ...
        modules: [
            ...
            './src/org/global'
        ]
    }
}

별표를 사용하여 이와 유사한 솔루션을 확인하십시오.

  "baseUrl": ".",
  "paths": {
    "*": [
      "node_modules/*",
      "src/types/*"
    ]
  },

Alejandros 답변이 저에게 awesome-typescript-loader효과적이지만 webpack 4와 함께 사용함에 따라 tsconfig-paths-webpack-plugin올바르게 해결하기 위해 webpack.config 파일에 추가 해야했습니다.

경로를 사용하는 경우을 사용하여 유형 스크립트를 일반 자바 스크립트로 컴파일 한 후 작동하려면 상대 경로로 절대 경로를 다시 변경해야합니다 tsc.

이에 대한 가장 보편적 인 해결책은 지금까지 tsconfig-paths 였습니다.

나는 그것을 시도했지만 복잡한 설정을 위해 나에게 효과가 없었다. 또한 런타임에서 경로를 확인하므로 패키지 크기 측면에서 오버 헤드가 발생하고 성능이 해결됩니다.

그래서, 나는 해결책을 자신을 썼다 tscpaths을 .

컴파일 타임에 경로를 대체하기 때문에 전반적으로 더 좋다고 말하고 싶습니다. 런타임 종속성이나 성능 오버 헤드가 없음을 의미합니다. 사용이 매우 간단합니다. 에 빌드 스크립트에 한 줄만 추가하면됩니다 package.json.

프로젝트는 꽤 젊으므로 설정이 매우 복잡한 경우 몇 가지 문제가있을 수 있습니다. 설정이 상당히 복잡하지만 설정에 완벽하게 작동합니다.

typescript + webpack 2 + at-loader를 사용하는 경우 추가 단계가 있습니다 (@mleko의 솔루션은 부분적으로 만 작동했습니다).

// tsconfig.json
{
  "compilerOptions": {
    ...
    "rootDir": ".",
    "paths": {
      "lib/*": [
        "src/org/global/lib/*"
      ]
    }
  }
}    

// webpack.config.js
const { TsConfigPathsPlugin } = require('awesome-typescript-loader');

resolve: {
    plugins: [
        new TsConfigPathsPlugin(/* { tsconfig, compiler } */)
    ]
}

TypeScript 2.0의 고급 경로 확인

이것은 나를 위해 작동합니다 :

 yarn add --dev tsconfig-paths

 ts-node -r tsconfig-paths/register <your-index-file>.ts

이것은 tsconfig.json의 모든 경로를로드합니다. 샘플 tsconfig.json :

{
    "compilerOptions": {
        {…}
        "baseUrl": "./src",
        "paths": {
            "assets/*": [ "assets/*" ],
            "styles/*": [ "styles/*" ]
        }
    },
}

이것이 작동하려면 baseUrl과 경로가 모두 있는지 확인하십시오.

그런 다음 다음과 같이 가져올 수 있습니다.

import {AlarmIcon} from 'assets/icons'

아래 코드 대신에 상대 경로의 종류

import { Something } from "../../../../../lib/src/[browser/server/universal]/...";

"../../../../../"가 이상하게 보이고 읽을 수없는 것을 피할 수 있습니다.

따라서 Typescript 구성 파일에는 동일한 대답이 있습니다. baseUrl을 지정하면 구성이 상대 경로를 처리합니다.

구성 방법 : tsconfig.json 파일 아래 속성을 추가하십시오.

"baseUrl": "src",
    "paths": {
      "@app/*": [ "app/*" ],
      "@env/*": [ "environments/*" ]
    }

마지막으로 아래처럼 보입니다.

import { Something } from "@app/src/[browser/server/universal]/...";

간단하고 훌륭하고 읽기 쉬운 것처럼 보입니다.

이것을 사용하여 컴파일러 작업을 체크 아웃하십시오.

아래와 같이 프로젝트의 파일에 baseUrl을 추가했습니다.

"baseUrl": "src"

잘 작동합니다. 프로젝트의 기본 디렉토리를 추가하십시오.

/루트에서 시작은, 우리가 사용해야하는 상대 경로를 얻기 위해 ./또는../

더 이상을 설정할 수없는 React에 대한 업데이트가 "paths"있는 것 tsconfig.json같습니다.

멋지게 React는 경고를 출력합니다.

The following changes are being made to your tsconfig.json file:
  - compilerOptions.paths must not be set (aliased imports are not supported)

그런 다음 업데이트 tsconfig.json하고 전체 "paths"섹션을 제거합니다 . 이 달리기를 피할 수있는 방법이 있습니다

npm run eject

그러면 프로젝트에 및 디렉토리 및 빌드 / 구성 파일을 create-react-scripts추가하여 모든 설정을 추출합니다 . 또한 파일 을 업데이트하여 모든 것이 어떻게 작성되고 이름이 지정되는지 등을 훨씬 더 많이 제어 할 수 있습니다.configscripts{project}/config/*

그런 다음 업데이트 tsconfig.json

{
    "compilerOptions": {
        "baseUrl": "./src",
        {…}
        "paths": {
            "assets/*": [ "assets/*" ],
            "styles/*": [ "styles/*" ]
        }
    },
}