【React】Craco 简介
Craco 简介
Craco (Create React App Configuration Override) 是一个用于自定义 Create React App (CRA) 配置的工具，无需 eject（弹出）项目。
为什么需要 Craco
Create React App 虽然提供了零配置的 React 开发体验，但其配置是封装好的，要自定义配置通常需要：
- 运行
npm run eject暴露所有配置（不可逆） - 或者 fork react-scripts
Craco 提供了第三种选择 - 在不 eject 的情况下覆盖 CRA 的默认配置。
主要功能
- 覆盖 webpack 配置：修改 loader、plugin 等
- 覆盖 Babel 配置：添加自定义 presets/plugins
- 覆盖 PostCSS 配置
- 覆盖 Jest 配置
- 覆盖 DevServer 配置
安装使用
- 安装：
npm install @craco/craco
# 或
yarn add @craco/craco
-
在项目根目录创建
craco.config.js文件 -
修改 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"}}}
};
优势
- 无侵入性：不需要 eject，保留 CRA 的所有优点
- 灵活性：可以按需覆盖特定配置
- 社区支持：丰富的插件生态系统（如 craco-antd、craco-less 等）
常见使用场景
- 添加路径别名
- 添加自定义 webpack loader/plugin
- 集成 CSS 预处理器（Less/Sass/Stylus）
- 自定义 Ant Design 主题
- 修改构建输出结构
Craco 是 CRA 项目需要自定义配置时的理想选择，平衡了便利性和灵活性。