사용자 지정 가져오기 경로 및 도움이 되는 방법

수입품을 더 우아하고 체계적으로 만들기

많은 파일이 있는 응용 프로그램을 개발할 때 귀찮은 문제가 있다면 해당 파일이 다른 파일을 가져올 때 해당 파일의 가져오기에서 초과../가 발생합니다.

응용 프로그램이 커짐에 따라 프로젝트 파일의 폴더가 다른 폴더 안에 점점 더 많이 중첩되는 것을 보는 것이 일반적이며, 예상하지 못한 경우 다음 가져오기 예제를 보게 됩니다.

import ExampleComponent from '../../../../../../src/components/ExampleComponent/'

위의 예는 실제이며 우리가 생각하는 것보다 훨씬 더 일반적입니다. 안타깝게도 이들../을 과도하게 사용하면 코드를 유지 관리해야 할 때 약간의 문제가 발생합니다. 그 중에서도 가져온 파일 또는 가져오기 파일의 위치를 ​​변경해야 할 때마다 상대 경로를 수정하는 재작업이 필요합니다.

이 가져오기를 보다 우아하고 체계적으로 만드는 가장 간단한 방법 중 하나는 사용자 지정 경로를 만들고 절대 경로로 두는 것입니다. 따라서 위의 예는 다음과 같을 수 있습니다.

import ExampleComponent from '~/components/ExampleComponent/'

위의 예에서 ~ 접두사는 프로젝트의 디렉터리에 대한 절대 경로로 설정되었으며, 이 경우 디렉터리는 src 폴더입니다. 이렇게 하면 파일이 있는 폴더에 관계없이 ~/ 접두사를 사용할 때 항상 src 폴더의 절대 경로를 가져옵니다.

정말 좋죠?!

실현하기

종속성 설치

먼저 이 마법이 작동하려면 세 가지 종속성을 설치하고 구성해야 합니다. 그리고 그들은:

react-app-rewired 및 customize-cra

우리 프로젝트의 루트에서 아래 명령을 실행하여 이젝트를 사용할 필요 없이 react-scripts 포크를 생성할 필요 없이 webpack 설정을 사용자 지정해 보겠습니다.

yarn add -D react-app-rewired customize-cra

바벨-플러그인-루트-가져오기

이제 아래 명령을 실행하여 사용자 지정 경로를 사용하여 파일을 가져오겠습니다.

yarn add -D babel-plugin-root-import

config-overrides.js 만들기

또한 프로젝트의 루트에 config-overrides.js라는 파일을 생성합니다. 그는 우리 프로젝트의 루트 폴더 설정을 담당할 것입니다.

이 코드를 파일에 삽입해 보겠습니다.

const { addBabelPlugin, override } = require('customize-cra')

module.exports = override(
  addBabelPlugin([
    'babel-plugin-root-import',
    {
      rootPathSuffix: 'src',
    },
  ])
)

개발자 편집자의 삶을 더 쉽게 만들기

여전히 프로젝트의 루트에 jsconfig.json라는 파일을 생성합니다. 그는 VSCODE가 사용자 지정 경로를 이해하도록 만드는 일을 담당합니다.

이 코드를 파일에 삽입해 보겠습니다.

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "~/*": ["*"]
    }
  }
}

마지막 세부정보

마지막으로 package.json 파일의 스크립트를 업데이트합니다. 다음과 같이 두십시오.

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

보시다시피 react-scripts 스크립트를 제외하고 모두 react-app-rewired를 eject로 바꿉니다.

준비 완료!

이제 가져올 때 ~/를 사용하여 src 폴더 내의 모든 파일을 사용할 수 있습니다.

import ExampleComponent from '~/components/ExampleComponent/'

그리고...

이 예제를 실제로 보고 싶다면 여기에서 내가 React 프로젝트용으로 만든 템플릿을 살펴볼 수 있습니다.

디에고실바테크 / 상용구-cra-typescript

이 프로젝트는 React 프로젝트의 상용구입니다. 이 템플릿은 ReactJS 및 TypeScript로 제작되었습니다.

가져오기에서 이 접근 방식에 대해 어떻게 생각하는지 댓글로 남겨주세요 :)