介绍
在项目中使用 React 和 Webpack 时，我们通常会使用 Create React App（CRA）作为项目的初始化工具。CRA 封装了 Webpack 的配置并提供了一个简单易用的开发环境。但是，有时我们需要修改 CRA 的默认配置以适应我们的项目需求。这时，可以使用 npm 包 intsol-react-scripts，它提供了对 CRA 的自定义配置支持。
特性
CRA 使用 react-scripts 来管理 Webpack 配置。intsol-react-scripts 基于 react-scripts 进行二次封装，提供了以下功能：
- 支持自定义 Webpack 配置，通过
config-overrides.js文件来修改 CRA 默认配置。 - 额外支持了 TypeScript 和 Sass，无需手动配置。
- 支持在开发模式下使用环境变量，方便不同环境下的调试。
安装
使用 npm 安装：
--- ------- --------------------
或者使用 yarn 安装：
---- --- --------------------
使用
自定义 Webpack 配置
在项目根目录下，创建一个 config-overrides.js 文件，你可以重写 Create React App 中默认的 Webpack 配置。例如，下面的配置告诉 Webpack 在打包时输出分析报告：
----- -------------------- - --------------------------------------------------------
-------------- - -------- ---------------- ---- -
-- ---- --- ------------- -
-- -- -------------------- --
----------------------- ------------------------
-
------ -------
-详细的 Webpack 配置请参考 Webpack 文档。
TypeScript 支持
intsol-react-scripts 默认开启了 TypeScript 的支持，只需把 .js 文件改成 .ts 或 .tsx 文件，Webpack 会自动处理 TypeScript 代码。
Sass 支持
同样的，intsol-react-scripts 默认开启了 Sass 支持，可直接在代码中使用 .scss 后缀。
环境变量
我们可以通过 .env 文件设置环境变量。例如，我们可以创建一个名为 .env.development 的环境变量文件，以指定开发模式下的 API 地址：
-------------------------------------------
在代码中可以通过 process.env.REACT_APP_API_URL 来获取该值。
示例
我们来创建一个使用 intsol-react-scripts 的示例项目。首先，我们需要在电脑上安装 Node.js 和 npm（或者 Yarn）。打开命令行，执行以下命令：
--- ---------------- ------ ----------------- --------------------
这将在当前目录下创建一个名为 my-app 的新项目，并使用 intsol-react-scripts 作为开发环境。
然后，我们在项目根目录下创建一个新的 Homepage.tsx 文件：
------ ----- ---- --------
------ ------------------
-------- ---------- -
------ -
---- ---------------------
-----------------
------
--
-
------ ------- ---------接着，我们在同级目录下创建一个名为 Homepage.scss 的样式文件：
--------- -
-- -
------ -----
-
-最后，在 App.tsx 中引入 Homepage 组件并渲染即可：
------ ----- ---- -------- ------ -------- ---- ------------- -------- ----- - ------ --------- --- - ------ ------- ----
现在，我们启动开发服务器：
--- -----
或：
---- -----
打开浏览器访问 http://localhost:3000 即可看到项目页面。
结语
intsol-react-scripts 让我们能够使用 CRA 的便利性，同时又能够自定义 Webpack 配置，以满足项目需求。希望这篇文章能帮助你快速掌握 intsol-react-scripts 的使用方法。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b5651ab1864dac66b5c