디버깅? 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을 잡아줘야 하나? 싶어서 테스트
// 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
);
BABEL_SHOW_CONFIG_FOR 이용해서 최종 설정 조회
{
  "babelrc": true,
  "configFile": "./babel.config.json",
  ...
  • 적용 잘 된 것 같으나 실제로 babel.config.json가 적용되지는 않았다. (왜?)

 

3. .babelrc 설정을 모두 config-overrides.js로 옮김

const { override, addBabelPlugin, addBabelPresets } = require("customize-cra");
module.exports = override(
    ...addBabelPresets(
        "@babel/preset-env",
        "@babel/preset-react"
    ),
    addBabelPlugin(["@babel/plugin-transform-runtime",{"corejs":3}])
);
{
  "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이 제대로 적용된다.

 

 

'JS Stack > Front-end' 카테고리의 다른 글

Babel과 Polyfill  (0) 2023.04.07
webpack 빌드 - 독립 library로 만들기  (0) 2023.04.05
SameSite Cookie  (0) 2020.06.15
Same-origin Policy, CORS  (0) 2020.06.14
HTML5 data-* attribute  (0) 2018.11.23