在前端开发中，经常会遇到需要在本地启动多个不同端口号的服务，例如同时启动前端网站、后端 API 服务以及 WebSocket 服务等。而在默认情况下，同一台计算机上使用的端口号是唯一的，如果不希望手动修改端口号，常常需要借助于一些工具来实现。
其中，一款名为 dev-ports.js 的 npm 包可以帮助前端开发者快速实现端口号的动态分配和使用。本文将详细介绍如何使用 dev-ports.js 这个 npm 包，希望对前端开发者有所帮助。
确认安装
在开始使用 dev-ports.js 之前，我们需要先确认该 npm 包是否已经安装。可以使用如下命令来检查：
npm list | grep dev-ports
如果输出结果中包含了 dev-ports.js，则表示该 npm 包已经安装完毕。
如果还没有安装，可以尝试使用如下命令进行安装：
npm install dev-ports.js --save-dev
安装完成后，就可以开始使用该 npm 包了。
使用示例
假设我们需要在同一台计算机上启动三个不同的服务，分别监听 3000、4000、5000 端口号，则可以使用如下代码：
const devPorts = require('dev-ports.js');
devPorts([3000, 4000, 5000]).then(ports => {
console.log(`Start services at: ${ports}`);
// Start three services here
}).catch(err => {
console.error('Failed to allocate ports:', err);
});在上述示例代码中，我们首先通过 require 函数引入了 dev-ports.js 这个 npm 包。然后，我们调用了 devPorts 函数，传入了一个数组参数 [3000, 4000, 5000]，该数组包含了我们需要监听的端口号。
在调用 devPorts 函数之后，该函数会返回一个 Promise 对象。当 Promise 对象成功 resolve 时，表示端口号已经成功分配，并可以在控制台中输出。我们在控制台中输出了起始端口号，随后可以编写启动服务的代码；当 Promise 对象 reject 时，则表示在分配端口号时出现了错误。
深入了解
在上述示例代码中，我们使用了 devPorts 函数来分配端口号，并输出到控制台中。那么 devPorts 函数内部又做了哪些事情呢？下面，我们来逐步分析 dev-ports.js 的工作原理。
-- -------------------- ---- -------
----- --- - ---------------
----- -------- ------------- -
------ --- ----------------- ------- -- -
----- ------ - -------------------
---------------
------------------ --------
---------------- -- -- -
----- ---- - ----------------------
--------------- -- -
-------------
---
---
---
-
----- -------- -------------------- -
----- --------- - ---
----- --------- - ---
--- ---- - - -- - - ------ ---- -
----- ---- - ----- --------------
---------------------
------------------- - ---
-
------ ----------
-
----- -------- --------------- -
----- -------- - -------------- -- ---------------------
----- ------- - ----- ----------------------
------ -------------------- ---- -- ---------------- ----
-
-------------- - ---------上述代码中，我们首先引入了 net 模块，用于检测计算机上已经使用的端口号。然后，我们定义了 getFreePort 函数。该函数通过创建一个临时的 TCP 服务器，并监听随机端口号，从而获取一个可用的端口号。
接着，我们定义了 allocatePorts 函数。该函数会调用 getFreePort 函数 count 次，从而获取 count 个可用的端口号。其中，我们将已经使用的端口号保存到 usedPorts 数组中，并将分配给客户端的端口号保存到 freePorts 数组中。
最后，我们定义了 devPorts 函数。该函数接收一个数组参数 ports，并将该数组中的每个元素作为 allocatePorts 函数的参数，从而一次性分配多个端口号。我们将每个 allocatePorts 函数返回的 freePorts 数组合并起来，并最终返回一个包含所有可用端口号的数组。
指导意义
通过本文，我们深入了解了 npm 包 dev-ports.js 的使用方法和工作原理。在开发中，我们可以通过该 npm 包快速实现端口号的动态分配，避免了手动修改端口号的繁琐和错误。
同时，本文提供了 dev-ports.js 的源代码，希望能够帮助读者更加深入地理解该 npm 包的实现。对于前端开发者，这也有助于提高对 Node.js 和网络编程的理解，为后续的开发工作打下坚实的基础。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ead81e8991b448dc2ba