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

Question

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

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

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

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

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

Answer 1

\n

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

\n

\n

是的，为此您需要serve在package.json中配置脚本，如下所示：

\n

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

\n

然后通过 CLI 工具运行：

\n

npm run serve -- <port_number>\n

\n

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

\n\n

\n

...我希望有一种“更简单”的方式可以将端口存储在配置文件中...

\n

\n

配置文件：

\n

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

\n

.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 .gitignore\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 .portnumber    <------ \n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ...\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ...\n

\n

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

\n

3000\n

\n\n

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

\n

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

\n

包.json

\n

3000\n

\n

上面的部分$(<.portnumber)本质上是读取文件的内容.portnumber（这就是该<.portnumber部分的作用），并使用命令 Substitution。

\n

因此，鉴于该.portnumber文件包含3000npm 脚本中正在执行的命令，则有效：

\n

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

\n

你也可以这样做：

\n

包.json

\n

vue-cli-service serve --port 3000\n

\n

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

\n\n

解决方案 B：跨平台（Windows/Linux/macOS...）

\n

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

\n

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

\n

使用外部 Nodejs (.js) 文件

\n

创建一个名为serve.js

\n

服务.js

\n

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

\n

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

\n

const readFileSync = require(\'fs\').readFileSync;\nconst execSync = require(\'child_process\').execSync;\n\nconst port = readFileSync(\'.portnumber\', {encoding: \'utf8\'});\n\nexecSync(\'vue-cli-service serve --port \' + port, {stdio: \'inherit\'})\n

\n

重新定义您的servenpm 脚本，如下所示：

\n

包.json

\n

.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 .gitignore\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 .portnumber    <------ \n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ...\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 serve.js       <------ \n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ...\n

\n

解释：

\n

该serve.js文件主要执行以下操作：

\n

\n

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

  \n
\n

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

  \n
\n

\n

将 JavaScript 内联到 package.json 中。

\n

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

\n

包.json

\n

"scripts": {\n  "serve": "node serve"\n}\n

\n

解释：

\n

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

\n