一、简介
-
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 } } } // ... } }