CRA(Create React App) 관련
공식문서에서 CRA는 더 이상 추천하지 않는다.
대신 Vite 추천
디버깅? source map
- source map이 함께 생성됨. (default)
- source map은 원본 파일은 아니고 원본 파일과의 mapping 정보를 담고 있는 json 형태의 파일.
- 개발자 도구에서 원본 소스파일과 자동으로 연결해서 보여준다.
- 따라서프로덕션 빌드에서는 제거 옵션 주고 빌드해야 함.
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” 설정을 두든 다 적용되지 않는다.
- 이를 해결하려면 두 가지 방법이 있음.
- npm eject하는 방법 :관리 대상이 너무 늘어나서 권장하지 않음.
- react-app-rewired로 설정을 override하는 방법
react-app-rewired로 CRA 프로젝트에서 babel 커스텀 설정하기
1. useBabelRc()만 호출하기
- https://micalgenus.github.io/articles/2019-02/React-eject-%EC%97%86%EC%9D%B4-babelrc-%EC%A0%81%EC%9A%A9/
- 내 경우에는 적용되지 않았다.
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.