react 및 typescript에서 별칭을 사용하여 가져오기를 더 깔끔하게 ✨✨

상대적 수입 문제

프로젝트가 성장함에 따라 다음과 같이 가져오기를 수행하는 자신을 발견했을 수 있습니다.

import { someUtil } from '../../../../src/utils';
import defaultExport, { SomeModule } from '../../../src/modules/dummy-module';

이로 인해 신속하게 통제할 수 없게 되어 깊게 중첩된 일부 폴더에서 많은 혼란스러운 가져오기가 발생할 수 있습니다. 다음과 같이 할 수 있다면 훨씬 더 깔끔해질 것입니다.

import { someUtil } from '@/utils';
import defaultExport, { SomeModule } from '@dummy-module';

기본적으로 @를 src 폴더로, @dummy-module를 src/modules/dummy-module 폴더로 매핑하여 별칭을 사용하여 직접 참조할 수 있도록 했습니다.

별칭 가져오기 구성

TypeScript 구성

TypeScript가 별칭 경로를 인식하게 하려면 tsconfig.json 아래의 compilerOptions 파일 내에서 별칭 경로를 정의해야 합니다.

// tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    ...,
    "paths": {
      "@/*": ["src/*"], // 👈 This line allows us to import from folders inside "src" folder using "@"
      "@dummy-module": ["src/modules/dummy-module"], // 👈 This line allows us to import from the "dummy-module" folder itself using "@dummy-module"
      "@dummy-module/*": ["src/modules/dummy-module/*"] // 👈 This line allows us to import from folders inside "src/modules/dummy-module" folder using "@dummy-module"
    }
  },
    ...
}

이제 위의 별칭을 사용하여 가져올 수 있습니다. TypeScript가 여전히 가져오기에 대해 불평하는 경우 tsconfig.paths.json(루트 디렉터리 내부) 옆에 별도의 tsconfig.json 파일을 만들어 다음에서 기본 구성을 확장합니다.

// tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"], // 👈 This line allows us to import from folders inside "src" folder using "@"
      "@dummy-module": ["src/modules/dummy-module"], // 👈 This line allows us to import from the "dummy-module" folder itself using "@dummy-module"
      "@dummy-module/*": ["src/modules/dummy-module/*"] // 👈 This line allows us to import from folders inside "src/modules/dummy-module" folder using "@dummy-module"
    }
  }
}

다음과 같이 수정합니다tsconfig.json.

// tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    ... 👈 Remove "paths" option
  },

  "extends": "./tsconfig.paths.json" // 👈 Add this line
}

웹팩 구성

반응 앱에서 create-react-app를 스캐폴드로 사용했을 가능성이 큽니다. 따라서 번들러가 빌드 시간 동안 별칭을 해결하는 방법을 알 수 있도록 내부 웹팩 구성을 재정의해야 합니다. ejecting 없이 그렇게 하려면 craco을 사용할 수 있습니다.

npm i @craco/craco

또는

yarn add @craco/craco

그런 다음 프로젝트의 루트에 craco.config.js 파일을 만들고 다음 코드를 붙여넣습니다.

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@dummy-module': path.resolve(__dirname, 'src/modules/dummy-module'),

    },
  },
};

마지막으로 react-scripts 파일 내부의 craco를 package.json로 바꿉니다.

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
 }

앱을 다시 시작합니다.

yarn start

그리고 그게 다야 여러분 🥳