解析craco是如何自定义create-react-app创建的项目config配置的

关键词：react-scripts craco create-react-app antd

背景：

react 项目一般是用 facebook 提供的 create-react-app 创建的。create-react-app 主要负责下载 react-scripts 和模板，然后传参调用 react-scripts 的 init 脚本真正创建项目，项目本地启动/打包时，调用 react-scripts start/build，会调用 react-scripts 内置的 webpack.config.js 等文件。当我们有修改 webpack.config.js 需求时，可以用 craco 配置进行修改，也可以 react-scripts eject 获取到 webpack 所有配置，但是后者会暴露出许多配置，不利于维护，所以 antd 官方也推荐使用 craco 进行自定义配置，那么它是如何自定义 react-scripts 的配置的，学会这个，可以更好的利用 craco 这个工具。

先了解 react-scripts 是如何运行的

react-scripts/scripts/init.js

1. 获取 template 中的 template.json 合并到 package.json
2. 增加 scripts，如 start: 'react-scripts start'
3. 增加 browserslist
4. 将模板文件夹 copy 到项目目录
5. 初始化 git
6. crossSpawn spawn.sync 安装依赖
7. 移除 template 依赖
8. 提交首个 commit，打印项目已成功安装，如何启动等信息

react-scripts/scripts/start.js

1. 加载环境变量
2. 检测端口
3. configFactory('development') 创建 config 配置
4. 调用 webpack 创建 compiler
5. 创建 serverConfig
6. 调用 new WebpackDevServer(serverConfig, compiler)
7. devServer启动后，在浏览器打开 http://localhost:port

react-scripts/scripts/build.js

1. 加载环境变量
2. configFactory('production') 创建 config 配置
3. 读取文件 sizes
4. 调用 webpack 创建 compiler
5. compiler.run 打印日志

craco 是如何用修改的配置运行项目的

1. require react-scripts 中的 webpack.config.js 配置
2. 使用 cosmiconfig 加载用户自定义配置 craco.config.js
3. webpack-merge 合并配置
4. loadsh/mergeWith 合并配置
5. Object.assign 合并配置
6. 使用 require.cache[modulePath].exports = newModule 重写 config 的方式，将 require 过的 webpack.config.js 的导出的缓存修改为最新的 config
7. 调用 react-scripts 的 start/build/test 等脚本执行，这样就实现了覆写 config 的目的

其中涉及获取 loader 修改，增删改查 plugins，修改 css/sass/postcss配置， 有些配置支持传函数或对象，传函数的会给提供部分参数，webpackConfig, devServerConfig, env, paths, rootDir, proxy 等。

解析完这些，相信大家对 craco 是如何用自定义配置合并 config 并调用 react-scripts 启动或打包项目已经掌握了。

链接

create-react-app

craco

react-scripts

码字不易，如果有收获，点个赞再走👍🏻