React Native TypeScript 앱에서 경로 별칭을 설정하는 방법

따라서 React Native 앱이 있고 TypeScript를 사용하고 있으며 긴 패키지 가져오기로 인해 사망하고 있습니다. 문제를 해결해 보겠습니다.

아래 프로젝트 구조를 살펴보십시오. 화면의 내 CircleButton에서 구성 요소로 StopWatch.tsx를 가져오려면 다음과 같이 표시됩니다.
import { CircleButton } from '../../components/buttons';

/Users/spencer/Dev/ClockApp
├── App.tsx
├── app.json
├── babel.config.js
├── package.json
├── src
|  ├── components
|  |  ├── buttons
|  |  |  ├── CircleButton.tsx
|  |  |  └── index.tsx
|  ├── index.tsx
|  └── screens
|     └── Clocks
|        └── StopWatch.tsx
├── tsconfig.json
└── yarn.lock

수입 명세서가 다음과 같이 보이도록 수정해 보겠습니다.
import { CircleButton } from 'components/buttons';
또는 더 나은 아직
import { CircleButton } from 'buttons';
이를 수행하려면 두 개의 파일을 업데이트해야 합니다.

TypeScript 경로 별칭

첫 번째는 tsconfig.json 입니다. 이것은 TypeScript가 경로 별칭을 이해하기 위한 것입니다.

먼저 디렉토리의 루트를 나타내는 baseUrl 를 . 로 설정합니다. tsconfig의 모든 경로는 이에 상대적입니다.

그런 다음 경로 별칭을 paths 개체에 추가합니다. 구성 요소 디렉토리( components/buttons )에 하나를 추가하고 버튼 내보내기( buttons )에 직접 하나를 추가하겠습니다.

// tsconfig.json
{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    // Path alias config
    "baseUrl": ".",
    "paths": {
      // This needs to be mirrored in babel.config.js
      // Components is a directory with sub directories
      "components/*": ["src/components/*"],

      // We want to expose the exports of the buttons index file
      "buttons": ["src/components/buttons/index"]
    }
  }
}

그러면 TypeScript가 다음을 구문 분석할 수 있습니다.

import { CircleButton } from "components/buttons"
import { CircleButton } from "buttons"

기본 경로 별칭 반응

이제 패키저가 실제로 파일을 가져올 위치를 알 수 있도록 React Native 경로 별칭을 처리해야 합니다.

먼저 babel-plugin-module-resolver를 개발자 종속 항목으로 설치합니다.

yarn add --dev babel-plugin-module-resolver
npm install babel-plugin-module-resolver --save-dev

이제 babel.config.js 플러그인을 사용하고 디렉터리를 가리키도록 module-resolver 파일을 업데이트할 수 있습니다.

// babel.config.js

module.exports = function (api) {
  api.cache(true)
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          alias: {
            // This needs to be mirrored in tsconfig.json
            components: "./src/components",
            buttons: "./src/components/buttons",
          },
        },
      ],
    ],
  }
}

모든 준비가 완료되었습니다! 이제 가져오기를 줄이고, 더 적게 입력하고, 리팩토링을 쉽게 하고, 코드를 더 쉽게 스캔할 수 있습니다.

Pro tip: Want to use absolute paths but don't want to add an alias for every directory? Add your root directory (such as src) to the alias config as well!

// tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    // Path alias config
    "baseUrl": ".",
    "paths": {
      // This needs to be mirrored in babel.config.js
      "components/*": ["src/components/*"],
      "buttons": ["src/components/buttons/index"],
      "src/*": ["src/*"]
    }
  }
}

// babel.config.js

module.exports = function (api) {
  api.cache(true)
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          alias: {
            // This needs to be mirrored in tsconfig.json
            components: "./src/components",
            buttons: "./src/components/buttons",
            src: "./src",
          },
        },
      ],
    ],
  }
}

이제 import { CircleButton } from "src/components/buttons"와 같은 가져오기도 사용할 수 있습니다.

도움이 되길 바랍니다!