在前端开发中， React 是一个非常受欢迎的构建用户界面的库，而 create-react-app 是官方推荐的快速创建一个 React 应用的工具。但是 create-react-app 自带的配置是有一定限制的，当需要根据自己的需求进行更改时，我们可以使用另一个 npm 包 quick-react-scripts。quick-react-scripts 提供了许多自定义配置选项，方便我们进行更灵活的工程构建。在本文中，我们将介绍 quick-react-scripts 的使用教程，帮助你更好的管理你的 React 应用。
安装
在开始使用 quick-react-scripts 之前，我们需要在本地安装它。输入以下命令即可完成安装。
npm install quick-react-scripts --save-dev
使用
在安装完成之后，我们可以通过修改 package.json 文件来启动 quick-react-scripts。在 scripts 字段中添加以下命令：
-- -------------------- ---- -------
-
-- ---
---------- -
-- ---
-------- -------------------- -------
-------- -------------------- -------
------- -------------------- ------
-- ---
--
-- ---
-然后，我们就可以在终端中使用以下命令来启动项目:
npm start
配置
在 quick-react-scripts 中，我们可以通过在项目根目录下创建 config-overrides.js 文件来对 webpack 进行配置。config-overrides.js 中可以使用 customize-cra 这个库，它提供了一组简单易用的函数来更改 create-react-app 项目中的 webpack 配置。
以下是常见的配置：
自定义 antd 主题
如果我们需要使用 antd 框架，同时也需要对 antd 的样式进行自定义，可以在 config-overrides.js 文件中添加以下代码：
-- -------------------- ---- -------
----- - --------- ---------- - - -------------------------
-------------- - ---------
------------
------------ -
----------- -
----------------- ----------
-------------- ----------
---------------------- ------
--
------------------ -----
--
---
--支持装饰器
如果我们需要在项目中使用装饰器，则需要为 babel 配置 transform-decorators-legacy 插件。在 config-overrides.js 文件中添加以下代码：
const { override, addDecoratorsLegacy } = require('customize-cra');
module.exports = override(
addDecoratorsLegacy(),
);改变输出路径
默认情况下，create-react-app 打包后的文件输出路径是 build/static/js，如果我们想要修改这个路径，则可以在 config-overrides.js 文件中添加以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -------- ---------------- -
------------- - -
-----------------
----- ----------------------- -------- -- --------
--
------ -------
--以上是常见的配置，更多配置请参考官方文档。
总结
本文介绍了如何使用 quick-react-scripts，通过 config-overrides.js 文件，我们可以定制自己的 React 应用。quick-react-scripts 提供了极大的灵活性，能够满足各种不同的需求。希望本文能够对你有所帮助。如果你有任何问题或疑问，欢迎在下方留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/79980