还在使用eject命令配置React项目？快来试试craco

大家好，欢迎来到IT知识分享网。

一、为什么使用craco？

使用 Create-React-App 创建的项目，我们可以使用 eject 命令来弹出配置项，但eject命令是不可逆的，执行命令后需要自己管理配置项目。

二、安装

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" } 

五、注意版本匹配