【亲测免费】 customize-cra 使用教程

项目介绍

customize-cra 是一个用于自定义 create-react-app 配置的工具库。它通过利用 react-app-rewired 的核心功能，提供了一组实用程序来修改 create-react-app 版本 2 和 3 的配置。使用 customize-cra，开发者可以在不弹出配置文件的情况下，轻松地修改 Webpack 配置，从而实现更多的自定义需求。

项目快速启动

安装

首先，你需要安装 customize-cra 和 react-app-rewired：

yarn add customize-cra react-app-rewired --dev

配置

在项目根目录下创建一个 config-overrides.js 文件，并添加以下内容：

const { override, addBabelPlugin } = require('customize-cra');

module.exports = override(
  addBabelPlugin('@babel/plugin-proposal-decorators', { legacy: true })
);

修改 package.json

修改 package.json 中的脚本命令，使用 react-app-rewired 代替 react-scripts：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

启动项目

现在你可以启动你的 React 项目：

yarn start

应用案例和最佳实践

引入 Ant Design

假设你需要在项目中引入 antd，你可以通过以下步骤实现：

1. 安装 antd 和 babel-plugin-import：

   yarn add antd babel-plugin-import
   

2. 修改 config-overrides.js 文件：

   const { override, fixBabelImports } = require('customize-cra');
   
   module.exports = override(
     fixBabelImports('import', {
       libraryName: 'antd',
       libraryDirectory: 'es',
       style: 'css',
     })
   );
   

修改 Webpack 配置

如果你需要修改 Webpack 的其他配置，例如添加一个自定义的 Babel 插件，可以这样做：

const { override, addBabelPlugin } = require('customize-cra');

module.exports = override(
  addBabelPlugin('@babel/plugin-proposal-class-properties')
);

典型生态项目

react-app-rewired

react-app-rewired 是 customize-cra 依赖的核心库，它允许你在不弹出配置文件的情况下，自定义 create-react-app 的配置。

babel-plugin-import

babel-plugin-import 是一个用于按需加载组件的 Babel 插件，常用于优化引入第三方库（如 antd）的体积。

customize-cra

customize-cra 本身就是一个典型的生态项目，它提供了一系列实用函数来修改 config-overrides.js 配置文件，从而实现对 create-react-app 的深度定制。

通过以上步骤，你可以轻松地使用 customize-cra 来定制你的 React 应用构建流程，实现更多的自定义需求。