使用 Yarn 修改 8030 端口
Yarn 是一个用于管理 JavaScript 依赖关系的包管理工具。在开发过程中，我们经常需要使用不同的端口进行测试和开发。本文将介绍如何使用 Yarn 修改 8030 端口，并提供相关的代码示例。
什么是端口？
在计算机网络中，端口是一个用于标识应用程序通信的数字。一个计算机上的服务可以通过不同的端口与其他计算机上的服务进行交互。常用的端口号范围是从 0 到 65535，其中 0 到 1023 是为特殊用途保留的，例如 HTTP 服务使用的 80 端口。
修改 Yarn 开发服务器端口
Yarn 提供了一个方便的命令行工具来创建和管理 JavaScript 项目。在创建一个新项目时，默认情况下，Yarn 使用 3000 端口作为开发服务器的端口。如果需要修改端口，可以通过在项目根目录下创建 .env 文件来实现。
步骤 1: 创建 .env 文件
在项目根目录下创建一个名为 .env 的文件，并在其中添加以下内容：
PORT=8030
上述代码将设置开发服务器的端口为 8030。
步骤 2: 修改 package.json
打开项目根目录下的 package.json 文件，并在其中找到 scripts 部分。修改 start 命令，将其中的 3000 修改为 process.env.PORT，如下所示：
"scripts": {
"start": "react-scripts start"
},
修改后的 scripts 部分应如下所示：
"scripts": {
"start": "PORT=8030 react-scripts start"
},
以上代码将使用环境变量中的端口号作为开发服务器的端口。
使用示例
下面是一个使用 Yarn 修改 8030 端口的示例：
# 安装依赖
yarn install
# 启动开发服务器
yarn start
通过上述命令，Yarn 将会启动一个开发服务器，并监听 8030 端口。你可以在浏览器中访问 http://localhost:8030 来查看项目运行的结果。
状态图
下面是一个使用 Mermaid 语法绘制的状态图，展示了修改 Yarn 端口的过程：
stateDiagram
[*] --> 创建 .env 文件
创建 .env 文件 --> 修改 package.json
修改 package.json --> 启动开发服务器
启动开发服务器 --> [*]
饼状图
下面是一个使用 Mermaid 语法绘制的饼状图，展示了端口分配情况：
pie
"3000" : 3000
"8030" : 8030
"其他端口" : 63505
以上饼状图显示了在 0 到 65535 端口范围内，3000 端口和 8030 端口的分配情况。其中，其他端口包括剩余的 63505 个端口。
总结
通过本文的介绍，你学习了如何使用 Yarn 修改开发服务器的端口。首先，创建一个名为 .env 的文件，并在其中设置 PORT=8030。然后，修改 package.json 中的 start 命令，将端口号改为 process.env.PORT。最后，通过运行 yarn start 命令启动开发服务器。
希望本文对你理解如何使用 Yarn 修改 8030 端口有所帮助！如果你有任何疑问，请随时提问。
