前言
随着前端开发的不断发展和进步，前端开发者也在不断尝试新的技术和工具，其中，generator-cra-rewired 是一款非常实用的 npm 包，它可以帮助我们快速地搭建基于 create-react-app 的自定义配置脚手架，提高我们的开发效率和项目质量。
本文将详细介绍 generator-cra-rewired 的使用方法，包括安装、生成新项目、修改配置以及常见问题的解决方法，同时也会给出实用的示例代码，希望能对前端开发者有所帮助。
安装
使用 generator-cra-rewired 前，需要先安装 yeoman，因为 generator-cra-rewired 是一个 yeoman generator。打开控制台，运行以下命令安装 yeoman：
npm install -g yo
安装完成后，再运行以下命令安装 generator-cra-rewired：
npm install -g generator-cra-rewired
生成新项目
安装完成后，我们可以通过以下命令生成新的 create-react-app 项目：
yo cra-rewired
运行命令后，会出现一些问题需要我们回答，比如项目名称、项目描述、作者等，根据实际情况回答即可。回答完后，generator-cra-rewired 会自动下载 create-react-app 并根据我们的回答生成新的项目。
修改配置
生成的项目基于 create-react-app，但它又不仅仅是 create-react-app，我们可以通过修改配置文件来满足我们项目的需求，而这就是 generator-cra-rewired 的魔力所在。
配置文件位于 config-overrides.js，我们可以在该文件中加入和修改配置。
比如，我们可以通过以下代码，将项目中的 moment 模块改为 dayjs 模块：
-- -------------------- ---- -------
----- - -------- - - -----------------------
-------------- - ---------
-- ---
-------- ---- -- -
------------------------------ - --------
------ -------
-
--这个例子中，我们使用了 override 方法，该方法可以将多个配置函数合并成一个配置函数。在配置函数中，我们通过 config.resolve.alias 修改了模块路径的别名，将 moment 的别名改为了 dayjs。
我们还可以通过以下代码，启用 cssmodules 功能：
-- -------------------- ---- -------
----- - --------- -------------------- - - -----------------------
-------------- - ---------
-- ---
----------------------
----- ---------
---- -
---------------
-
------- -------------
-------- -
-------- -----
-------------- --
----------------- ------------
---------- ----
-
--
----------------
-
--
--在该例子中，我们使用了 addWebpackModuleRule 方法，该方法可以添加一个新的 webpack 模块规则。在该规则中，我们指定了对 css 文件的处理方式，启用了 cssmodules 功能，并设置了一些参数。
常见问题
1. 如何添加新的依赖包？
可以直接在控制台中使用 npm install 命令添加依赖包。
2. 如何配置跨域代理？
在 config-overrides.js 中添加以下代码：
-- -------------------- ---- -------
----- ----- - --------------------------------
-------------- - ---------
-- ---
-------- ---- -- -
---------------- - -
-- ---
------ -
------- -
------- ---------------------
------------- ----
-
-
-
------ -------
-
--在该代码中，我们使用了 http-proxy-middleware 包，该包可以帮助我们配置跨域代理。在配置函数中，我们重写了 config.devServer，为其添加了一个 proxy 配置项，该配置项可以定义一个代理规则，将请求转发到指定的目标地址。
3. 如何在生成的项目中添加 Redux？
可以在控制台中使用 npm install 命令安装 redux 和 react-redux 包，然后在 src 目录中创建 store.js 文件，定义 Redux 状态树和 reducer，最后在 index.js 中通过 Provider 组件将 Redux 状态树注入应用程序。
结论
通过本文，我们学习了如何使用 generator-cra-rewired 快速搭建自定义配置的 create-react-app 项目，并学习了如何修改配置文件来满足项目需求，同时还解决了一些常见问题。希望这篇文章能对前端开发者们有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600561ec81e8991b448df68f