一、为什么使用craco?
使用 Create-React-App 创建的项目,我们可以使用 eject 命令来弹出配置项,但eject命令是不可逆的,执行命令后需要自己管理配置项目。
craco是一个用来重写覆盖使用 Create-React-App 配置的工具。
官网 https://craco.js.org/docs/getting-started/
二、安装
npm i -D @craco/craco
三、添加配置文件
在项目根目录新建 craco.config.js 文件,并在这个文件中进行配置。
$ touch craco.config.js
例如配置tailwindcss:
添加 tailwindcss 和 autoprefixer 作为 PostCSS 插件。
// craco.config.js
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}
四、修改package.json启动脚本命令
更新 package.json 文件中的 scripts,将 eject 以外的所有脚本都用 craco 代替 react-scripts。
"scripts": {
- "start": "react-scripts start"
- "build": "react-scripts build"
- "test": "react-scripts test"
+ "start": "craco start"
+ "build": "craco build"
+ "test": "craco test"
}
五、注意版本匹配
craco版本需要和 create-react-app版本进行匹配。