【React】Craco 简介

Craco 简介

Craco (Create React App Configuration Override) 是一个用于自定义 Create React App (CRA) 配置的工具，无需 eject（弹出）项目。

为什么需要 Craco

Create React App 虽然提供了零配置的 React 开发体验，但其配置是封装好的，要自定义配置通常需要：

1. 运行 npm run eject 暴露所有配置（不可逆）
2. 或者 fork react-scripts

Craco 提供了第三种选择 - 在不 eject 的情况下覆盖 CRA 的默认配置。

主要功能

• 覆盖 webpack 配置：修改 loader、plugin 等
• 覆盖 Babel 配置：添加自定义 presets/plugins
• 覆盖 PostCSS 配置
• 覆盖 Jest 配置
• 覆盖 DevServer 配置

安装使用

1. 安装：

npm install @craco/craco
# 或
yarn add @craco/craco

2. 在项目根目录创建 craco.config.js 文件

3. 修改 package.json 中的 scripts：

{"scripts": {"start": "craco start","build": "craco build","test": "craco test"}
}

配置示例

// craco.config.js
module.exports = {webpack: {alias: {"@": path.resolve(__dirname, "src/")},plugins: [new MyWebpackPlugin()]},babel: {plugins: ["babel-plugin-styled-components"]},jest: {configure: {moduleNameMapper: {"^@/(.*)$": "<rootDir>/src/$1"}}}
};

优势

1. 无侵入性：不需要 eject，保留 CRA 的所有优点
2. 灵活性：可以按需覆盖特定配置
3. 社区支持：丰富的插件生态系统（如 craco-antd、craco-less 等）

常见使用场景

• 添加路径别名
• 添加自定义 webpack loader/plugin
• 集成 CSS 预处理器（Less/Sass/Stylus）
• 自定义 Ant Design 主题
• 修改构建输出结构

Craco 是 CRA 项目需要自定义配置时的理想选择，平衡了便利性和灵活性。