如何在npm脚本中内联运行JavaScript以获取get-port包返回的可用端口

我之前刚好遇到过一模一样的需求！你原来写的${getPort()}之所以不行，是因为npm脚本里的${}是shell的变量替换语法，根本不会执行JavaScript函数。要实现内联运行JS并把返回值传给webpack-dev-server，有两种靠谱的方法：

方法一：内联Node.js代码（适合简单场景） #

直接用node -e在npm脚本里执行一段JavaScript代码，再通过shell的命令替换语法捕获它输出的端口号：

"dev": "webpack-dev-server --config webpack.dev.js --progress --port $(node -e \"const getPort = require('get-port'); (async () => console.log(await getPort({ port: 3000 })))();\")"

关键细节： #

• node -e "<JS代码>"：让Node.js执行后面的字符串形式的JavaScript代码
• 因为get-port的API是异步的，所以我们用立即执行的异步函数(async () => { ... })()包裹调用逻辑，用await拿到端口后通过console.log输出——shell会捕获这个输出，作为--port的参数值
• { port: 3000 }是你设置的默认端口，如果这个端口被占用，get-port会自动找到下一个可用的端口

方法二：单独写JS脚本（更易维护，跨平台友好） #

如果内联代码看起来太杂乱，可以单独创建一个小脚本文件，比如scripts/get-port.js：

const getPort = require('get-port');

// 在这里自定义你的默认端口
(async () => {
  const port = await getPort({ port: 3000 });
  console.log(port);
})();

然后修改package.json里的脚本：

"dev": "webpack-dev-server --config webpack.dev.js --progress --port $(node scripts/get-port.js)"

这种方式更清晰，后续要调整默认端口或者添加其他逻辑也更方便，而且在Windows PowerShell、Linux和macOS的bash下都能正常工作。

注意事项： #

• 如果你的项目用的是ES模块（package.json里有"type": "module"），要把脚本里的导入改成import getPort from 'get-port';
• 要是用的是Windows老式CMD（不是PowerShell），$(...)语法不生效，可以换成下面的写法：

  "dev": "for /f \"delims=\" %p in ('node scripts/get-port.js') do webpack-dev-server --config webpack.dev.js --progress --port %p"
  

  不过现在大多数前端开发者用的是PowerShell或者WSL，这种情况比较少见

内容的提问来源于stack exchange，提问作者Alexander