使用craco更改Create-React-App项目配置

一、为什么使用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版本进行匹配。