자동 생성된 TypeScript 별칭을 사용한 탄력적인 가져오기

익숙하지 않은 경우 TypeScriptpaths를 사용하여 프로젝트의 일부 경로에 별칭을 할당할 수 있습니다. 이는 대규모 프로젝트에 특히 유용합니다.

더 열심히 일하다

예를 들어 components/MyComponent/src/hooks/myHook.ts 와 같은 경로에서 코드를 편집하고 일부 서비스 코드를 가져와야 한다고 가정합니다. 서비스 코드는 components/ 옆의 프로젝트 루트에 있을 수 있습니다. 순진하게 다음과 같은 상대 경로를 사용할 수 있습니다.

import { myService } from '../../../services/my-service'

가져오기 도구는 종종 파일을 이동할 때 가져오기를 업데이트하는 것과 같은 더러운 작업을 처리합니다. 이 상대 경로는 여전히 취약하며 구성 요소나 서비스를 이동하기로 결정한 경우 지루한 작업에 적합합니다.

더 똑똑하게 일하기

이제 이 문제를 해결하려면 다음과 같이 tsconfig.json에 경로를 추가합니다.

{
   "compilerOptions":{
      ...
      "paths":{
         "@services":[
            "services/index"
         ],
         "@services/*":[
            "services/*",
            "services/index"
         ]
      }
   },
   ...
}

깨지기 쉬운 가져오기를 보다 탄력적인 것으로 변경하고 새 폴더로 이동할 때 깨지지 않습니다.

import { myService } from '@services/my-service'

그리고 가장 중요한 부분은 vscode 사용자가 이러한 별칭에서도 자유 경로 인텔리전스를 얻을 수 있다는 것입니다. 별칭을 통해 가져오기를 추가하고ctrl+. 추가할 수 있습니다.

자동화로 더 쉽게 만들기

그러나 대규모 프로젝트로 작업하는 경우 수동으로 글롭을 작성하고 마음을 JSON에 복사하여 붙여넣는 작업을 아끼지 않으시겠습니까?

모든 프로젝트 폴더의 별칭을 자동으로 지정하는 tsconfig-paths-autogen(1kB 축소, 0 종속성)을 생성했습니다. 큰 변화는 tsconfig.json에서 tsconfig.js로 이동하는 것입니다. 이것이 어떻게 작동하는지 설명하겠습니다.

이것이 프로젝트 디렉토리 구조라고 가정합니다.

src
├── a
├── b
│   └── c
│       └── d
└── e
    └── f

다음을 수행할 수 있도록 모두 별칭을 지정하려는 경우:

프로젝트 루트 및 src 참조,

인덱스 파일 가져오기(후행 포함 및 제외 / ),

별칭 뒤에 하위 폴더로 이동

그러면 경로는 다음과 같습니다.

"paths": {
  "@a": ["a/index"],
  "@a/*": ["a/*", "a/index"],
  "@d": ["b/c/d/index"],
  "@d/*": ["b/c/d/*", "b/c/d/index"],
  "@c": ["b/c/index"],
  "@c/*": ["b/c/*", "b/c/index"],
  "@b": ["b/index"],
  "@b/*": ["b/*", "b/index"],
  "@f": ["e/f/index"],
  "@f/*": ["e/f/*", "e/f/index"],
  "@e": ["e/index"],
  "@e/*": ["e/*", "e/index"],
  "@/*": ["./*"],
  "~/*": ["../*"]
}

이 모든 것을 올바르게 처리하고 유지 관리하는 것은 지루한 일입니다. 따라서 새tsconfig.js는 다음과 같이 경로를 생성하고 json으로 내보냅니다.

// tsconfig.js
const { generatePaths } = require('tsconfig-paths-autogen');
const { onmyjs } = require('onmyjs'); // or any other tool to export this file to JSON.

module.exports = {
  compilerOptions: {
    ...
    paths: generatePaths(baseUrl, {
      // whatever you'd like to start your aliases with, can be empty.
      rootAlias: '@',
      // how far deep to alias from baseUrl
      maxDirectoryDepth: 2,
      // alias components folder but none under it.
      excludeAliasForSubDirectories: ['components'],
      // aliases for potentially excluded directories
      includeAliasForDirectories: {
        common: 'components/common',
      },
    }),
  }
}
// export to tsconfig.json
onmyjs(module.exports, 'tsconfig.json', true);

이것을 빌드 스크립트에 통합

도구를 재생성tsconfig.json하고 변경 사항에 반응해야 하기 때문에 이제 무엇을 해야 할지 묻고 있을 것입니다. 다음은 nodemon 을 사용하는 package.json의 예입니다(npm에 대한 자세한 내용).

  "scripts": { 
      "dev": "nodemon -w tsconfig.js --exec \"run-s build:tsconfig dev:parcel\"",
      "build:tsconfig": "node tsconfig.js"
      "dev:parcel": "parcel src/index.html"
  }

이 예제에서는 구획을 사용하지만 도구에 구애받지 않습니다. webpack 또는 원하는 모든 것에서 사용하십시오!

이 정보가 수입품을 보다 원활하게 사용하는 데 도움이 되기를 바랍니다. 질문이 있으시면 아래에 의견을 남겨주십시오. 읽어 주셔서 감사합니다!