node.js - 从 package.json 中脚本部分的配置文件中读取

Question

是否可以从 package.json 的 "scripts" 部分中的配置文件中读取内容？

问题背景:我们是几个开发人员，他们都在同一台终端服务器上工作。我们的 package.json 中有以下部分

...
"scripts": {
    "serve": "vue-cli-service serve --port 8080"
}
...

由于我们位于同一服务器上，因此我们需要一种方法来指定不同的端口。一种可能性是使用命令行参数。但我希望有一种“更简单”的方式，我可以将端口存储在配置文件中，并将其添加到 .gitignore 中，这样每个开发人员都可以拥有自己的文件，我们只需键入 npm runserve 无需考虑输入端口。

也许有更好的方法来做我想做的事。我愿意接受建议。

Answer 1

One possibility is to use a command line parameter.

是的，为此您需要配置 serve package.json 中的脚本如下:

"scripts": {
  "serve": "vue-cli-service serve --port"
}

然后通过 CLI 工具运行:

npm run serve -- <port_number>

_{注意:<port_number>参数应替换为真实的端口号，例如8080 , 3000等等...}

<小时/>

...I would appreciate an "easier" way where I can store a port in a config file ...

配置文件:

假设我们有一个任意命名为 .portnumber 的文件它保存在项目的根目录中。例如:

.
├── .gitignore
├── .portnumber    <------ 
├── node_modules
│   └── ...
├── package.json
└── ...

以及 .portnumber 的内容文件包含仅要使用的端口号。例如:

3000

<小时/>

解决方案 A:*仅限 Nix 平台(Linux/MacOS...)

在 *nix 平台上运行 npm 脚本时，npm 使用的默认 shell 是 sh 。因此，以下内容将起作用。

package.json

"scripts": {
  "serve": "vue-cli-service serve --port \"$(<.portnumber)\""
}

$(<.portnumber)上面的部分本质上读取 .portnumber 的内容文件(这就是 <.portnumber 部分的作用)，并利用 command Substitution .

鉴于.portnumber文件包含3000在 npm 脚本中执行的命令实际上是:

vue-cli-service serve --port 3000

您也可以这样做:

package.json

"scripts": {
  "serve-with-default": "port=$(<.portnumber); vue-cli-service serve --port \"${port:-8080}\""
}

这与前面的非常相似，但是如果 .portnumber文件不存在或为空，则默认使用 8080端口号。

<小时/>

解决方案 B:跨平台(Windows/Linux/macOS...)

对于跨平台解决方案(即在 Windows、Linux 和 macOS 上成功运行的解决方案)，您需要利用 Nodejs 来实现您的要求。有几种不同的方法可以解决此问题，如以下标题为以下两个小节中所述:

• 使用外部 Nodejs (.js) 文件
• 将 JavaScript 内联到 package.json 中。

使用外部 Nodejs (.js) 文件

创建一个名为 serve.js 的文件

serve.js

const readFileSync = require('fs').readFileSync;
const execSync = require('child_process').execSync;

const port = readFileSync('.portnumber', {encoding: 'utf8'});

execSync('vue-cli-service serve --port ' + port, {stdio: 'inherit'})

..并将其保存在您的项目目录中:

.
├── .gitignore
├── .portnumber    <------ 
├── node_modules
│   └── ...
├── package.json
├── serve.js       <------ 
└── ...

重新定义您的serve npm脚本如下:

package.json

"scripts": {
  "serve": "node serve"
}

说明:

serve.js文件本质上执行以下操作:

• 利用内置的node.js readFileSync 阅读 .portnumber 的内容文件并将编号分配给 port变量。

• 然后利用内置的node.js execSync 运行vue-cli-service serve --port命令以及之前从 .portnumber 读取的端口号文件。

将 JavaScript 内联到 package.json 中。

或者，您可以将您的 NodeJS/JavaScript 代码内联到 package.json 的脚本部分。在这种情况下，请重新定义您的 npm 脚本，如下所示:

package.json

"scripts": {
  "serve" : "node -e \"require('child_process').execSync('vue-cli-service serve --port ' + require('fs').readFileSync('.portnumber', {encoding: 'utf8'}), {stdio: 'inherit'})\""
}

说明:

• 这实际上与前面提到的使用单独的 .js 的解决方案相同(尽管经过了重构)。文件，但是现在使用单独的 Nodejs 脚本/文件是多余的。
• nodejs 命令行选项 -e 用于评估内联 JavaScript。