tsconfig.json 경로 사용 방법

tsconfig.json 경로 사용 방법

패스맵에 대해 읽고 있었는데tsconfig.json그리고 나는 그것을 다음과 같은 추악한 경로를 사용하지 않기 위해 사용하고 싶었다.

프로젝트 조직이 좀 이상해요. 프로젝트와 라이브러리가 포함된 단일 저장소가 있거든요.프로젝트는 회사별 및 브라우저/서버/범용별로 그룹화됩니다.

「」의 하려면 , 어떻게 요.tsconfig.json다음과 같이 합니다.

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

사용할 수 있는 기능:

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

웹웹른른른른른른른른른 or or or or or or or or or? 는 the the the?tsconfig.json★★★★★★★★★★★★★★★★★★?

이것은 TS 기능이기 때문에 tsconfig.json 파일로 설정할 수 있습니다.

다음과 같이 할 수 있습니다.

"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';

다만, 최신 버전에서는 인텔리센스가 동작하지 않기 때문에, 파일의 Import/export에 대해서는 인덱스 규약을 따르는 것을 추천합니다.

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

'어울리다'를할 수 요.baseUrl ★★★★★★★★★★★★★★★★★」paths 문서를 참조하십시오.

가 맨 합니다.src읽었습니다) ( 리고고 dir dir)))))))))))))))))))))))))))))))))

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

★★★의 webpack모듈 해상도를 추가해야 할 수도 있습니다.위해서webpack2은 마치 치치처럼 수 .

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

아스타리스크를 사용하여 이 유사한 솔루션을 확인합니다.

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

이것으로 충분합니다.

 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할 수 있습니다.

import {AlarmIcon} from 'assets/icons'

사용하는 절대 . , 「javascript」를 사용해 타입 한 후, 「javascript」를 사용합니다.tsc.

지금까지 가장 일반적인 솔루션은 tsconfig-paths입니다.

시도해 보았지만, 복잡한 설정에는 효과가 없었습니다.또한 런타임에 경로를 해결하므로 패키지 크기와 성능 측면에서 오버헤드를 의미합니다.

그래서 내가 직접 해결책을 썼지, tscpaths.

컴파일 시 경로를 대체하기 때문에 전체적으로 더 낫다고 할 수 있습니다.즉, 런타임 의존성이나 성능 오버헤드가 없습니다.사용법은 꽤 간단합니다.에 한 .package.json.

이 프로젝트는 아직 초기 단계이기 때문에 설정이 매우 복잡하면 문제가 발생할 수 있습니다.설정이 상당히 복잡하지만 내 설정에서는 완벽하게 작동합니다.

하기 위한 .@음음음같 뭇매하다

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    }
  }
}
// Example usage: import * as logUtils from '@/utils/logUtils';

아예 에는 '아까운 게 없다' 이런 거 있잖아요.src폴더 또는 Import에 명시적으로 포함시키고 싶은 경우, 이 방법도 유효합니다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["*"]
    }
  }
}
// Example usage: import * as logUtils from '@/src/utils/logUtils';

에게 효과가 i한드 the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the 를 사용하고 있다.awesome-typescript-loaderwebpack 4의 경우 webpack.config 파일에 추가해야 올바르게 해결됩니다.

tsconfig-paths를 사용하고 있는데 이 방법이 효과가 없는 경우tsconfig.json:

{
  // ...
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src",
    "baseUrl": ".",
    "paths": {
      "@some-folder/*": ["./src/app/some-folder/*", "./dist/app/some-folder/*"],
      // ...
    }
  },
  // ...
}

에 「」가 표시되는 .@some-folder/some-class 에서../src... ★★★★★★★★★★★★로./dist....

아래 코드 대신 상대 경로입니다.

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

"../../..//../"를 피할 수 있습니다./" 이상하게 보이고 읽을 수도 없습니다.

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

구성 방법: tsconfig.json 파일에 다음 속성을 추가합니다.

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

그래서 마지막으로 아래와 같이 될 것이다.

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

간단해 보이고, 놀랍고, 읽기 쉬워요.

type + webpack 2 + at-discript 를 사용하고 있는 경우는, 다음의 스텝이 있습니다(@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의 고급 경로 해결

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

경로를 정의해야 하는지는 잘 모르겠지만 src에 baseUrl을 쓴 후 이렇게 src 폴더에 있는 모든 폴더를 Import할 수 있습니다.

import { Home } from "pages";
import { formatDate } from "utils";
import { Navbar } from "components";

tsconfig.json을 변경한 후 단말기를 재시작하는 것을 잊지 마십시오.

2021년의 솔루션.

메모: CRA.처음에 서드파티 라이브러리를 사용하거나 가명을 위해 앱을 꺼낸다는 생각은 나에게 미친 것처럼 보였다.그러나 8시간 동안 검색(및 이젝트를 사용한 변형 모델 시도)한 결과 이 옵션이 가장 덜 고통스러운 것으로 나타났습니다.

스텝 1

yarn add --dev react-app-rewired react-app-rewire-alias

스텝 2. 프로젝트의 루트에 config-overrides.js 파일을 생성하여 다음과 같이 입력합니다.

const {alias} = require('react-app-rewire-alias')

module.exports = function override(config) {
  return alias({
    assets: './src/assets',
    '@components': './src/components',
  })(config)
}

3단계. 패키지를 수리합니다.json 파일:

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
    "eject": "react-scripts eject"
}

@contributions declarts @ d.ts @ @ @ 。를 들면, '먹다'와 같이요.'@constants': './src/constants', => react-app-env.d.ts 추가 declare module '@constants';

그게 다야.이제 평소와 같이 yarn 또는 npm start/build/test 명령을 계속 사용할 수 있습니다.

문서의 풀 버전입니다.

주의: 문서의 'ts / js config와 함께 사용' 부분은 작동하지 않았습니다.프로젝트를 빌드할 때 "에일리어스 가져오기가 지원되지 않습니다" 오류가 남아 있습니다.그래서 좀 더 쉬운 방법을 썼어요.다행히 효과가 있다.

React에 대한 업데이트가 있었던 것 같습니다."paths"에서tsconfig.json더 이상.

Goodly Respect는 경고만 출력합니다.

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추가에 의한 설정config그리고.scripts디렉토리 및 빌드/구성 파일을 프로젝트에 추가합니다.또한 이 기능을 통해 모든 것이 구축되고 명명되는 방법을 보다 효과적으로 제어할 수 있습니다.{project}/config/*파일을 표시합니다.

그럼 다음 업데이트tsconfig.json

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

이를 사용하여 컴파일러 조작을 체크합니다.

다음과 같은 프로젝트의 파일에 baseUrl을 추가했습니다.

"baseUrl": "src"

잘 되고 있어요.프로젝트의 베이스 디렉토리를 추가합니다.

컴포넌트 라이브러리의 경우

UI 컴포넌트(react-bootstrap 또는 antd 등)를 반환하는 라이브러리에서 작업하는 경우 이 방법이 도움이 됩니다.

"compilerOptions": {
        ....
        "rootDir": "src",
        "baseUrl": ".",
        "paths": {
            "src/*": ["src/*"],
            "components/*": ["src/components/*"],
        }
  },

/루트에서만 시작하여 사용해야 하는 상대 경로를 얻습니다../또는../

이것은 서브패스 패턴을 사용하여 노드만으로 실행할 수 있습니다.

예를 들어, 이 항목을 에 추가하는 경우package.json...

{
    "imports": {
        "#lib": "./build/path/to/lib",
        "#lib/*": "./build/path/to/lib/*",
    }
}

...상대적인 경로를 피하면서 이렇게 Import할 수 있습니다.

import { something } from "#lib"

해시로 시작해야 합니다.package.json노드가 인식할 수 있도록 사용자의 빌드를 가리켜야 합니다.

처럼, 이런 수 .tsconfig.json「 」 「 」:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "#lib": ["./src/path/to/lib"],
            "#lib/*": ["./src/path/to/lib/*"],
        },
    },
}

baseUrl정답은 중요합니다.

import Home from '@app/features/Home';

src/features/Home.tsx

  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@app/*": [
        "src/*"
      ],
    },

{"compileOnSave": true, "compilerOptions": { "paths": {@styles/}, ["assets/scss/"}이(가) 있는지 확인합니다.}

그게 문제였어요.

언급URL : https://stackoverflow.com/questions/43281741/how-to-use-paths-in-tsconfig-json