简介
React 是当前最流行的前端框架之一，而 @bentley/react-scripts 则是一款专门为 React 开发提供的 npm 包，它能够自动化配置开发环境、构建打包、以及提供简便的调试和开发工具。这篇文章将详细介绍 @bentley/react-scripts 的安装和使用，同时帮助读者更好地理解 React 的开发过程。
安装
@bentley/react-scripts 可以通过 npm 安装，需要先在终端命令行中使用以下命令：
npm install @bentley/react-scripts --save-dev
开始使用
一旦成功安装 @bentley/react-scripts 包，就可以通过运行以下命令启动开发服务器：
npm start
此命令将启动一个本地服务器，在该服务器上启动应用程序。开发服务器将监听任何对应用程序进行的更改，并自动重新加载应用程序以确保更改有效。除此之外，还可以通过以下命令构建生产版本：
npm run build
该命令将启动 Webpack 打包程序，生成一个构建好的文件夹并将其发布到 web 服务器上，可以向您的 Web 服务器上传送这个文件夹以供使用。
配置
@bentley/react-scripts 默认使用的是 Webpack 打包器，且自动管理 HTML，CSS 和 JS 的加载。当然，也可以进行配置来更改这些默认值。以下是一些常见的配置项：
修改默认主机和端口号
默认情况下，@bentley/react-scripts 将运行在“localhost：3000”的主机和端口上。但是，你可以使用环境变量HOST和PORT进行修改：
# 使用主机名 HOST=localhost npm start # 使用端口号 PORT=8080 npm start
配置代理服务器
通过修改 package.json 文件，可以在开发过程中设置代理服务器。在 package.json 文件中加入以下代码：
{
"name": "my-app",
"proxy": "http://localhost:3001",
"scripts": {
"start": "react-scripts start",
}
}上述代码将启用代理服务器，将请求发送到默认端口为 3001 的服务器。
实例
在 React 中，我们可以使用 @bentley/react-scripts 运行 React 应用程序，在下面的示例中，我们可以创建一个简单的 React 应用程序：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ --------------
------ --- ---- --------
------ - -- ------------- ---- ------------------
----------------
------------------
---- --
--------------------
-------------------------------
--
---------------------------其中 ./App.js 文件中的代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------
-------- ----- -
------ -
---- ----------------
------- -----------------------
---- ---------- -------------------- ---------- --
---
---- ----------------------- --- ---- -- -------
----
--
--------------------
--------------------------
---------------
------------- -----------
-
----- -----
----
---------
------
--
-
------ ------- ----在上述示例中，index.css 和 App.css 文件分别定义了应用程序的样式。
总结
本文介绍了 @bentley/react-scripts 的安装和使用，以及 React 应用程序的创建和配置。希望通过本文能够帮助读者更好地理解 React 开发过程，使 React 开发更加简单和愉快。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa81b5cbfe1ea06104dc