Skip to content

react eject는 그만 react rewired 사용방법 feat. mobx

react-creat-app을 사용하다 보면 babel아니 webpack 설정을 변경하기 위해 eject를 하는 경우가 있다.
eject를 하면 설정 파일을 수정할 수 있어 요긴하긴 한데 설정 파일이 지저분하게 보이게 된다.
무엇보다 잘 모르는 npm들이 package.json에 가득해서 가독성이 떨어진다.

하지만 react-rewired를 사용하면 이런 문제를 해결할 수가 있다.

  1. https://github.com/timarney/react-app-rewired 여기서 npm이나 yarn으로 설치한다.
  2. 가장 상위 디렉터리에 아래 설정 파일을 만들어 준다. (아래는 mobx 설정용 설정 파일)

config-overrides.js


const { injectBabelPlugin } = require("react-app-rewired");
const rewireMobX = require("react-app-rewire-mobx");

module.exports = function override(config, env) {
  config = injectBabelPlugin("babel-plugin-styled-components", config);
  config = rewireMobX(config, env);

  return config;
};
  1. 시작 스크립트를 변경해준다.

package.json


"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test --env=jsdom",
  "eject": "react-app-rewired eject"
}
  1. 끝!
Published inREACT