记录react-app-rewired 爬坑

创建react 项目

npx create-react-app my-app
cd my-app
npm start

2.方法1: react -cli 自带的webpack 配置显示的方法：
可以再包文件找到

"eject": "react-scripts eject"

当然如果你已经执行过

npm run eject

的话就找不到这条命令了。所以这种方法不可逆（后面提供第二种方法）：

（通过react -cli 快速创建的项目并
这里我们不能像vue-cil3.0一样直接根目录就新建vue.config.js
然后进行配置）

会自动创建script 文件夹 build.js start.js test.js

   "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom"

对应的当然就分别是这三种脚本的webpack配置

方法2：react-app-rewired （对 create-react-app 进行自定义配置的社区解决方案）

npm install react-app-rewired --save

修改package.json,原本的react-script 改为react-app-rewired

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

在根目录下新建config-overrides.js,在config-overrides.js里更改配置项，项目启动的时候会先在config-overrides.js里读数据，对webpack里的默认文件进行整合，最后才会启动。

此后会有n多报错有坑一步一步慢慢解决
原因是：Override webpack configurations for create-react-app 2.0，react-scripts 升级到 2.1.2 以后破坏了 react-app-rewired，react-app-rewired的新版本删除所有方法injectBabelPlugin，这些方法被移动到一个名为’customize-cra’的新包中了

所以要下个新包并修改一下 config-overrides.js配置

npm install customize-cra --save-dev

根目录创建文件config-overrides.js并写下一下内容

const {
    override,
    fixBabelImports,
    // addLessLoader,
} = require("customize-cra");


module.exports = override(
    fixBabelImports("import", {
        libraryName: "antd", libraryDirectory: "es", style: 'css' // change importing css to less
    }),
    // addLessLoader({
    //   javascriptEnabled: true,
    //   modifyVars: { "@primary-color": "#1DA57A" }
    // })

);

此时缺少依赖react-dev-utils报错再引入这个依赖

npm i react-dev-utils --save

然后 react-script 版本太低报错改成2.1.3以上

 "react-scripts": "^2.1.3"

最后以为要成功了结果在报缺少依赖babel-plugin-import 好吧我引入！！！

npm i babel-plugin-import   --save

至此项目成功创建并可以启动注意中间步骤如果有报错的情况可以多次尝试一处node_model 和package.lock
再重新 npm i 如果包下载很慢（国内）建议使用 cnpm

最后编辑于：2020.06.01 17:58:45