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

Question

Is there a possibility to read from a config file within the "scripts" section in package.json?

Background of the question: We are several developers who all work on the same terminal server. And we have a the following section in our package.json

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

Since we are on the same server we need a way to specify a different port. One possibility is to use a command line parameter. But i would appreciate an "easier" way where i can store a port in a config file which i add to .gitignore , so that every developer can have his own file and we can just type npm run serve without thinking about to enter a port.

Maybe there is a better way of doing what i want. I am open to suggestions.

Answer 1

One possibility is to use a command line parameter.

Yes, for that you'll need to configure your serve script in package.json like this:

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

Then via you CLI tool run:

npm run serve -- <port_number>

_{Note: the <port_number> argument should replaced with a real port number, eg 8080 , 3000 etc ...}

---

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

The config file:

Let's say we have a file arbitrarily named .portnumber which is saved in the root of the project directory. For example:

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

and the contents of the .portnumber file contains the port number to be used only. For example:

3000

---

Solution A: *Nix platforms only (Linux/MacOS...)

When running npm scripts on *nix platforms the default shell that npm utilizes is sh . Therefore the following will work.

package.json

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

The $(<.portnumber) part above essentially reads the contents of the .portnumber file, (that's what the <.portnumber part does), and utilizes command Substitution .

So given that the .portnumber file contains 3000 the command being executed in the npm script is effectively:

vue-cli-service serve --port 3000

You could also do this:

package.json

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

This is very similar to the previous, however if the .portnumber file did not exist or was empty, it would default to using 8080 for the port number.

---

Solution B: Cross Platform (Windows/Linux/macOS...)

For a cross platform solution, (ie one that runs successfully on Windows, Linux, and macOS...), you'll need to utilize nodejs to achieve your requirement. There are a couple of different ways to approach this as described in the following two sub-sections titled:

• Using an external nodejs (.js) file
• Inlining your JavaScript in package.json .

Using an external nodejs (.js) file

Create a file named 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'})

.. and also save it in your project directory:

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

Redefine your serve npm script as follows:

package.json

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

Explanation:

The serve.js file essentially does the following:

• Utilizes the node.js built-in readFileSync to read the contents of the .portnumber file and assigns the number to the port variable.

• Then utilizes the node.js built-in execSync to run the vue-cli-service serve --port command with the port number that was previously read from the .portnumber file.

Inlining your JavaScript in package.json.

Alternatively, you can inline your nodejs/JavaScript code in the scripts section of your package.json instead. In which case redefine your npm script as follows:

package.json

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

Explanation:

• This is effectively the same, (albeit refactored), as the aforementioned solution that utilized a separate .js file, however the use of a separate nodejs script/file is now redundant.
• The nodejs command line option -e is utilized to evaluate the inline JavaScript.

Answer 2

You can do all kinds of things, because npm is just running the command in a subshell.

For example, in Bash (or similar), you can use a config file:

$ cat config.env
PORT=8080

And then source the file before running the actual command:

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

Or, in Windows, you can use a batch file:

C>type config.cmd
set PORT=8080

And then run the batch file before running the actual command:

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

Note the weird call and %^PORT% syntax, that's not a typo. In Windows this is required to delay expansion of the variable.

Or, to make it more portable, use a Python/Node.js/whatever script.

Answer 3

One solution would be to add a .npmrc file in the root directory of the project and specify a different port for each developers:

port=8081

Then you can use this variable in your app ( process.env.npm_config_port ) or package.json :

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

By following your idea, you could add .npmrc to .gitignore .

An even cleaner way in my opinion would be to add .npmrc directly in the home directory of each developers, with a specific configuration for the project.