typescript(`CRA`)를 사용하여 React js에서 모듈 별칭을 사용하는 방법

5960 단어

TLDR,





먼저 CRA(Create React App)를 사용하여 React 애플리케이션을 만들어야 합니다.

$ npx create-react-app testing-alias --template typescript
# Or 
$ yarn create react-app testing-alias --template typescript


다음 기본 웹팩에 재정의를 추가합니다.craco 대신 react-scripts를 사용하여 애플리케이션을 실행합니다.

$ npm i craco
#Or
$ yarn add craco


craco가 설치되면 다음을 만듭니다craco.cofig.js.
그런 다음 TypeScript 경로를 로드하기 위해 설치tsconfig-paths-webpack-plugin
$ yarn add tsconfig-paths-webpack-plugin
#Or
$ npm i tsconfig-paths-webpack-plugin


다음을 귀하의 craco.config.js에 추가하십시오.

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
  webpack: {
    plugins: [new TsconfigPathsPlugin()],
  },
};

tsconfig.json에 다음을 추가하십시오.

{
 "compilerOptions":{
    "baseUrl": "./src",
    "paths": {
      "@component/*": ["./src/@components/*"],
      "@pages/*": ["./src/@pages/*"],
      "@utils/*": ["./src/@utils/*"],
      "@hooks/*": ["./src/@hooks/*"],
      "@app:state/*": ["./src/state/*"]
    }
  },
  "include": ["src"]
}


그런 다음 tsconfig.json에서 디렉토리 구조와 일치하도록 다음을 추가하십시오.


Finally modify your package.json

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

App.{js|ts}에서 주어진 구성 요소를 가져오고 yarn start 또는 npm start를 사용하여 응용 프로그램을 실행합니다.

결론적으로 우리는 반응 js 패키지에 모듈 앨리어싱을 추가하여 절대 가져오기를 수행하는 방법을 배웠습니다. 응용 프로그램의 성장이 있을 수 있고 페이지 또는 구성 요소 충돌에서 유사한 이름을 갖는 것을 피할 수 있으므로 이 방법이 더 쉽습니다. 반응 앱이 필요하지 않기 때문에eject 이 방법이 더 쉽습니다.

독서 덕분에
막대로 들어가는 차트: 알테어 대 가죽
시간 기반 공격을 피하기 위한 문자열 비교

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage