前言
在 React 开发中，我们经常需要使用各种工具来提高开发效率和代码质量。例如，React 官方提供的 Create React App 就是一个快速初始化 React 开发环境的工具。
而 5argon-react-scripts 就是一个用于扩展 Create React App 可以很方便地添加定制化的配置来实现更多的功能，因此在 React 开发中十分有用的工具。
本文将会为大家介绍 5argon-react-scripts 的使用方法，包含详细的教程和示例代码，希望能够对大家的 React 开发有所帮助。
安装
首先，我们需要使用 npm 来安装 5argon-react-scripts 包。在命令行中输入以下指令即可：
--- ------- ---------- --------------------
安装完成后，你可以在你的项目中找到 node_modules/5argon-react-scripts。现在你就可以在项目的 package.json 文件中修改你的 scripts 栏，将 react-scripts 改为 5argon-react-scripts：
---------- - -- --- -------- -------------- ------- -------- -------------- ------- ------- -------------- ------ -------- -------------- ------ -- ---------- -------- --------------------- ------ -- --- -
自定义 webpack 配置
一般来说，我们会使用 eject 命令来将 Create React App 中的 webpack 配置抽离出来导出，从而进行定制，但是这通常会带来冗长繁琐的配置。因此，5argon-react-scripts 为我们提供了一个极佳的解决方案：
----- - --------- --------------- - - -------------------------------------------------
-------------- - ---------
-- -------- ----- --
----------------------------------------------------------------------
-- -------- ------ ----- --- --
-- --------------------
----------------------
----- ---------------------- ---------------
---- - ------- -------------------------------- --
--
--这里，我们使用 config-overrides.js 这个文件来扩展 webpack 的配置，这个文件会在执行 start, build 命令时被引入。
这里示例中使用的是一个 Babel 插件，你可以使用 addBabelPlugins 或 addBabelPreset 等函数来添加你所需要的内容。
自定义 Jest 配置
同样的，你可以在你的项目中使用 jest.config.js 文件来自定义 Jest 的配置。5argon-react-scripts 也提供了通过一个函数进行 Jest 配置扩展的方法：
----- - -------------- - - --------------------------------
-------------- - ----------------------- -- -
-- ---- ---- ---
------------------------ - -
------- -
----------- ----
--------- ----
---------- ----
------ ----
--
--
------ -------
---自定义 React Scripts 文件
如果你需要对 Create React App 的启动命令（start）、编译命令（build）或测试命令（test）进行扩展，你可以从 react-scripts 的源码中复制对应文件，然后通过 config-overrides.js 文件来修改对应的脚本。
结论
通过使用 5argon-react-scripts，我们可以非常方便地对 Create React App 进行扩展并自定义 webpack 和 Jest 配置，大大提高了 React 开发的效率和代码质量。
当然，如果你要自定义的配置比较复杂，你也可以考虑弃用 Create React App，从零开始手动配置 webpack，这会更加灵活和自由，但是可能会花费大量的时间和精力。
感谢大家阅读本篇文章，希望对你的 React 开发有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/93689