【React】Craco 简介

Bl_a_ck2025-05-14 14:59

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 配置

安装使用

安装：

bash 复制代码

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

在项目根目录创建 craco.config.js 文件
修改 package.json 中的 scripts：

json 复制代码

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

配置示例

js 复制代码

// 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 项目需要自定义配置时的理想选择，平衡了便利性和灵活性。