create-react-app脚手架修改底层配置的方法

craco 是 CRA + Config Override 的缩写，意思是“对 Create React App 的配置进行覆盖”。

背景说明：

你可能知道，React 官方提供了一个脚手架工具叫做 Create React App（简称 CRA），它可以帮助我们快速创建一个 React 项目。但 CRA 的一大限制是：默认不支持直接修改内部的 Webpack、Babel、PostCSS 等构建配置。

而 craco 正是为了在不弹出（eject）CRA 的前提下，允许我们自定义这些底层配置的工具。它是一个对 CRA 配置进行增强和覆盖的第三方工具，非常流行且使用简单。

所以 @craco/craco 是什么？

它是 craco 的核心包，安装后可以让我们通过一个配置文件（通常是 craco.config.js 或 .ts 文件）来修改 CRA 的 Webpack、Jest、Babel 等配置。

使用方式简要：

1. 安装：

   yarn add @craco/craco --dev
   

2. 修改 package.json 中的启动命令：

   将原来的：

   "scripts": {
     "start": "react-scripts start"
   }
   

   改为：

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

3. 创建 craco.config.js（或 .ts）并进行自定义配置，比如设置别名、加载 Sass、添加 Babel 插件等。

示例：配置别名 @

// craco.config.js
const path = require("path");

module.exports = {
  webpack: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
};

这样配置之后，在你的 React 组件中就可以这样导入模块了：

import Component from "@/components/Component";

而不是：

import Component from "../../components/Component";

总结：

• craco 是一个用于修改 Create React App 默认配置的工具。
• 不需要 eject，即可灵活定制 Webpack、Babel 等配置。
• 特别适合需要配置别名、预处理器（如 Sass/Less）、环境变量等场景。
• 安装包名为 @craco/craco，用法简单。