一、简介
- craco 官方文档、craco Github。
craco是一个用于扩展Create React App（CRA）的工具，CRA是一个用于快速搭建React应用的脚手架工具。CRA提供了一个简单的项目结构和配置，使得开发者可以快速开始一个React项目的开发。
然而CRA的配置是被隐藏的，开发者无法对其进行自定义和扩展。这就是craco出现的原因。craco（Create React App Configuration Override）允许开发者覆盖和扩展CRA的配置，以满足更复杂的项目需求。
使用craco，开发者可以在不弹出CRA的配置的情况下，修改webpack 配置、babel 配置、ESLint 配置、devServer配置等。craco提供了一种简单的方式来覆盖CRA的默认配置，同时保留了CRA的简洁性和易用性。
通过craco，开发者可以使用自定义的webpack 插件、babel 插件和其他工具，以满足项目的特定需求。例如：可以添加自定义的webpack loader，配置自定义的babel preset或plugin，或者修改webpack的输出路径等。
二、使用
- 安装
$ npm i -D @craco/craco
- 根目录创建
craco.config.js配置文件，可以理解为Vue项目中外抛的vue.config.js。
my-app ├── node_modules + ├── craco.config.js └── package.json
- 配置文件名其他写法支持，如果找到多个配置文件，
craco将使用上面列表中最高的一个：
1、craco.config.ts 2、craco.config.js 3、craco.config.cjs 4、.cracorc.ts 5、.cracorc.js 6、.cracorc
- 如果多个配置文件，也可以通过
package.json添加字段指定配置文件：
... { "cracoConfig": "config/craco-config-with-custom-name.js" } ...
- 或
scripts指令中指定配置文件进行编译：
{ "scripts": { "start": "craco start --config config/craco-config-with-custom-name.js" } }
- 修改
package.json文件中scripts配置的react-scripts替换为craco，例如：
"scripts": { - // "start": "react-scripts start", - // "build": "react-scripts build", - // "test": "react-scripts test", + "start": "craco start", + "build": "craco build", + "test": "craco test", "eject": "react-scripts eject" }
- 在
craco.config.js文件中，可以根据需要修改和扩展CRA的配置。以下是一个示例配置文件的基本结构：
基本可以覆盖正常业务的所有需求配置，更多配置可以查看下 官方文档：
const path = require('path') const lessPlugin = require('craco-less') module.exports = { // 插件配置 plugins: [ { plugin: lessPlugin, options: { lessLoaderOptions: { lessOptions: { // modifyVars: { '@primary-color': '#1DA57A' }, javascriptEnabled: true } } } } // ... ], // 修改 babel 配置 babel: { // plugins: [ // ['@babel/plugin-proposal-decorators', { legacy: true }], // [ // 'import', // { // 'libraryName': 'antd', // 'libraryDirectory': 'es', // 'style': 'css' // 设置为 true 即是 less 这里用的是 css // } // ] // ] // ... }, // 修改 eslint 配置 eslint: { // ... }, // 修改 module 配置 module: { // rules:[// 规则，在写 style.module.scss 的时候发现引入后缀为 .scss 会报错，在这里配置一下即可 // { // test: /.scss$/, // loaders: ['style-loader', 'css-loader', 'sass-loader'] // } // ] // ... }, // 跨域配置 devServer: { proxy: { '/api': { target: 'https://xxx:8080', changeOrigin: true, pathRewrite: { '^/api': '' } } } // ... }, // webpack 配置 webpack: { // 配置别名 alias: { // 约定：使用 @ 表示 src 文件所在路径 '@': path.resolve(__dirname, 'src') }, // webpack 插件 plugins: { add: [ /* ... */], remove: [ /* ... */], }, // plugins: [ // new ConfigWebpackPlugin(), // ...whenDev(() => [new CircularDependencyPlugin()], []), // ], // 这里面是 webpack 原始配置，这里追加的配置，将与原始配置合并 configure: { resolve: { fallback: { 'path': false, 'util': false, 'url': false, 'http': false, 'https': false, 'stream': false, 'assert': false, 'querystring': false, 'zlib': false } } } // ... } }
