记录react-app-rewired 爬坑

  1. 创建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配置

  1. 方法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

你可能感兴趣的:(记录react-app-rewired 爬坑)