반응형
CRA로 작업을 하다 보면 사용하는 모듈 때문에 추가로 babel plugin를 사용해야 되는 경우가 있다.
간단한 프로젝트여서 CRA를 사용했는데 eject하게 되면 귀찮아 진다.
최대한 간단하게 eject하지 않고 babel config를 override해서 babel custom하는 방법이다.
npm install react-app-rewired customize-cra --save-dev
# or
yarn add react-app-rewired customize-cra --devInstall react-app-rewired and customize-cra:
필요한 모듈을 설치해준다.
npm install babel-plugin-myPlugin --save-dev
# or
yarn add babel-plugin-myPlugin --dev2. 사용하려고 하는 babel plugin을 설치한다.
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "react-app-rewired start",
+ "build": "react-app-rewired build",
+ "test": "react-app-rewired test",
"eject": "react-scripts eject"
}package.json 명령어를 변경한다.
기존 react-scripts 에서 react-app-rewired로 변경
{
"plugins": ["babel-plugin-myPlugin"]
}.babrlrc 파일 추가
package.json과 동일한 위치에 .babrlrc 파일을 추가 한다.
사용하고자 하는 플러그인 혹은 custom babel config를 추가 한다.
위에서 "babel-plugin-myPlugin"는 예시이다.
// Overrides create-react-app webpack configs without ejecting
// https://github.com/timarney/react-app-rewired
const { useBabelRc, override } = require("customize-cra");
module.exports = override(useBabelRc());config-overrides.js 파일을 babrlrc와 동일한 위치에 생성한다.
위 내용을 추가하고 yarn start를 해보면 추가한 babel 옵션이 적용된것을 확인할수 있다.
babelrc 파일 생성하지 않는 방법
babelrc파일 생성을 원치 않는 경우
config-overrides.js 에 직접 설정을 추가 하면 된다.
예시)
// Overrides create-react-app webpack configs without ejecting
// https://github.com/timarney/react-app-rewired
const { addBabelPlugins, override } = require("customize-cra");
module.exports = override(
...addBabelPlugins(
"babel-plugin-myPlugin"
/* Add plug-in names here (separate each value by a comma) */
)
);참고
https://dev.to/ansonh/simplest-way-to-install-babel-plugins-in-create-react-app-7i5
반응형
