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

Question

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

问题的背景：我们是几个开发人员，他们都在同一终端服务器上工作。我们的package.json

中有以下部分

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

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

也许有一种更好的方式来做我想要的事情。我愿意接受建议。

Answer 1

一种解决方案是在项目的根目录中添加。npmrc文件，并为每个开发人员指定不同的端口：

port=8081

然后您可以在应用程序（process.env.npm_config_port）或package.json中使用此变量：

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

按照您的想法，您可以将。npmrc添加到。gitignore。

我认为，更干净的方法是直接在每个开发人员的主目录中添加。npmrc，并为该项目进行特定配置。

Answer 2

您可以做各种事情，因为npm只是在子shell中运行命令。

例如，在Bash（或类似版本）中，您可以使用配置文件：

$ cat config.env
PORT=8080

然后在运行实际命令之前先获取文件：

"scripts": {
    "serve": "source config.env && vue-cli-service serve --port $PORT"
}

或者，在Windows中，您可以使用批处理文件：

C>type config.cmd
set PORT=8080

然后在运行实际命令之前运行批处理文件：

"scripts": {
    "serve": "config.cmd && call vue-cli-service serve --port %^PORT%"
}

请注意call和%^PORT%奇怪的语法，这不是错字。在Windows中，这需要延迟变量的扩展。

或者，为了使其更具可移植性，请使用Python / Node.js /任何脚本。

Answer 3

一种可能性是使用命令行参数。

是，为此，您需要像这样在package.json中配置serve脚本：

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

然后通过您的CLI工具运行：

npm run serve -- <port_number>

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

---

...我希望能以更轻松的方式将端口存储在配置文件中...

配置文件：

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

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

并且.portnumber文件的内容包含仅可使用的端口号。例如：

3000

---

解决方案A：*仅Nix平台（Linux / MacOS ...）

在* nix平台上运行npm脚本时，npm使用的默认外壳为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）文件
• 在package.json
中嵌入JavaScript。

使用外部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文件基本上执行以下操作：

• 利用内置的readFileSync的node.js读取readFileSync文件的内容，并将数字分配给.portnumber变量。

• 然后利用node.js内置的port以先前从execSync文件读取的端口号运行execSync命令。

在package.json中内联JavaScript。

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

package.json

vue-cli-service serve --port
说明：

• 这实际上与上述利用单独的.portnumber文件的解决方案相同（尽管已重构），但是现在使用单独的nodejs脚本/文件是多余的。
• nodejs命令行选项

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

  用于评估嵌入式JavaScript。