반응형
create-react-app 에서 eject
를 사용하면?
eject를 사용하는 머리 좋은 똑똑한 사람들이 있지만, 나는 돌고래 지능이라서 해놓고 감당도 안되고, 원복도 안되고, 개빡치면서 관리가 안된다.
eject를 안하고 babel
과 webpack
를 설정을 하려고 여러가지를 찾아보니까 craco
와 react-app-rewired
, customize-cra
같은 패키지가 있었다.
이름이 맘에 들어서, react-app-rewired
와 customize-cra
를 사용해보려고 한다.
react-app-rewired 와 customize-cra 란?
앞서 위에서 말한 그대로 eject를 안하고 babel
, webpack
을 설정할 수 있는 라이브러리이다.
처음 사용할 때는 이해가 안갔는데, 삽질을 통해서 이해가 가기 시작했다.
설치
npm install --save-dev react-app-rewired customize-cra
설정 파일 생성
.babel.config.js
를 생성한다.
// .babel.config.js
const COMMON_PLUGINS = [
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-proposal-nullish-coalescing-operator',
'@babel/plugin-proposal-optional-chaining'
];
const config = {
plugins: [
...COMMON_PLUGINS
]
};
module.exports = () => {
return config;
};
중요파일!!!!
config-override.js
파일을 생성한다.
여기서 웹팩 설정과 다양한 옵션을 넣을 수 있고, useBabelRc
를 사용하면, .babel.config.js
를 가져오는 것 같다.
// config-override.js
/** @format */
const {
useBabelRc,
addWebpackAlias,
override
} = require('customize-cra');
module.exports = override(
useBabelRc(),
addWebpackAlias(),
);
d
실행 설정
package.json
을 설정하여, config-override
를 적용 설정한다.
// package.json
{
"scripts": {
"start": "react-app-rewired start",
...
},
...
}
위처럼 실행을 react-app-rewired start
로 바꾸어주면 된다.
휴 이정도면 돌고래랑 홍차한잔 해도 될까?
반응형
'notion > npm package' 카테고리의 다른 글
react-app-rewired 와 customize-cra를 사용하여 CRA eject 안하고 babel 설정하기. (0) | 2021.03.16 |
---|---|
react styled-components 와 react-nomalize 적용하는 법 (0) | 2021.02.22 |
mockserver 를 이용해 mock서버 만들기[4] (0) | 2021.02.06 |
mockserver 를 이용해 mock서버 만들기[3] (0) | 2021.02.04 |
mockserver 를 이용해 mock서버 만들기[2] (0) | 2021.02.04 |
mockserver 를 이용해 mock서버 만들기[1] (1) | 2021.02.02 |
댓글0