create-react-app不用eject的定制方案

2,124 阅读1分钟
原文链接: github.com

react-app-rewired

Tweak the create-react-app webpack config(s) without using 'eject' and without creating a fork of the react-scripts.

All the benefits of create-react-app without the limitations of "no config". You can add plugins, loaders whatever you need.

All you have to do is create your app using create-react-app and then rewire it.

:warning: Please Note:

By doing this you're breaking the "guarantees" that CRA provides. That is to say you now "own" the configs. No support will be provided. Proceed with caution.

1) Install react-app-rewired

$ npm install react-app-rewired --save-dev

2) Create a config-overrides.js file in the root directory

/* config-overrides.js */

module.exports = function override(config, env) {
  //do stuff with the webpack config...
  return config;
}
+-- your-project
|   +-- config-overrides.js
|   +-- node_modules
|   +-- package.json
|   +-- public
|   +-- README.md
|   +-- src

Note: You can use one of the default rewires (see the packages dir) or injectBabelPlugin

3) 'Flip' the existing calls to react-scripts in npm scripts

  /* package.json */

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom"
}

4) Start the Dev Server

$ npm start

5) Build your app

$ npm run build

Utilities (injectBabelPlugin)

Adding a Babel plugin can be done via the injectBabelPlugin(pluginName, config) function. You can also use the "rewire" packages from this repo or listed below to do common config modifications.

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

/* config-overrides.js */
module.exports = function override(config, env) {
  // add a plugin
  config = injectBabelPlugin('emotion/babel',config)
  
  // use the Preact rewire
  if (env === "production") {
    console.log("⚡ Production build with Preact");
    config = rewirePreact(config, env);
  }
  
  // use the MobX rewire
  config = rewireMobX(config,env);
  
  return config;
}

Community Maintained Rewires

Babel plugins

Webpack plugins

Loaders

Other

Why This Project Exists

See: Create React App — But I don’t wanna Eject.