CRA 절대경로로 import하기

huhu·2020년 3월 26일
0

CRA Project Setup

목록 보기
1/2

1. Add modules

yarn add @craco/craco
yarn add craco-alias -D

2. Modify package.json

start, build, test를 react-scrips에서 craco로 변경

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

3. Add tsconfig.paths.json

root에 tsconfig.paths.json 파일을 생성한다.

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@components/*": ["src/components/*"]
    }
  }
}

4. Modify tsconfig.json

"extends": "./tsconfig.paths.json" 옵션을 추가해준다.

{
  "extends": "./tsconfig.paths.json",
  ...
}

5. Add craco.config.js

const CracoAlias = require('craco-alias');

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        // as you know, CRA doesn't allow to modify tsconfig's compilerOptions
        // so you should create a separate JSON file and extend tsconfig.json from it
        // and then just specify its path here:
        tsConfigPath: 'tsconfig.paths.json',
      },
    },
  ],
};
profile
후후

0개의 댓글