Post

CRA(Create React App) 관련

공식문서에서 CRA는 더 이상 추천하지 않는다.
대신 Vite 추천

디버깅? source map

browserlistrc?

CRA를 쓰더라도 .browserlistrc 적용 된다. 공식 docs에 나와 있지는 않지만..

https://github.com/browserslist/browserslist/issues/391

CRA(Create React App)으로 프로젝트 생성하게 되면 기본적으로 .babelrc 설정이 불가능함.

  • react-script의 webpack.config.json에 babelrc: false로 되어 있기 때문.
    • 일단 이 상태면 .babelrc를 쓰든, babel.config.json를 쓰든, 별도 파일 없이 package.json 안에 “babel” 설정을 두든 다 적용되지 않는다.
  • 이를 해결하려면 두 가지 방법이 있음.

react-app-rewired로 CRA 프로젝트에서 babel 커스텀 설정하기

1. useBabelRc()만 호출하기
2. useBabelRc 뿐만 아니라 configFile도 잡아주기
  • babelrc: false, configFile: false로 되어 있길래 configFile을 잡아줘야 하나? 싶어서 테스트
1
2
3
4
5
6
7
8
9
10
11
// config-overrides.js 아래와 같이 설정
const { useBabelRc, override, getBabelLoader } = require("customize-cra");
const setBabelLoaderConfigFile = (config) => {
    getBabelLoader(config).options.configFile = "./babel.config.json";
    return config;
};
module.exports = override(
    useBabelRc(),
    setBabelLoaderConfigFile
);

1
2
3
4
5
6
BABEL_SHOW_CONFIG_FOR 이용해서 최종 설정 조회
{
  "babelrc": true,
  "configFile": "./babel.config.json",
  ...

  • 적용 잘 된 것 같으나 실제로 babel.config.json가 적용되지는 않았다. (왜?)
3. .babelrc 설정을 모두 config-overrides.js로 옮김
1
2
3
4
5
6
7
8
9
const { override, addBabelPlugin, addBabelPresets } = require("customize-cra");
module.exports = override(
    ...addBabelPresets(
        "@babel/preset-env",
        "@babel/preset-react"
    ),
    addBabelPlugin(["@babel/plugin-transform-runtime",{"corejs":3}])
);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "babelrc": false,
  "configFile": false,
  "presets": [
    "/Users/.../node_modules/babel-preset-react-app/index.js",
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    ...
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3
      }
    ]
  ],
  ...

  • 이제야 preset과 plugin이 제대로 적용된다.
This post is licensed under CC BY 4.0 by the author.