NPM allows you to define script commands in package.json files using the scripts field, which can be combined to cover the entire project lifecycle

{
  "scripts": {
    "build": "node build.js"}}Copy the code

To execute this script, use the NPM run build command from the command line (execute the build.js file under Node).

To view all NPM script commands for the current project, use the NPM run command with no arguments

Script commands work together

"scripts": {
    "dev": "cross-env NODE_ENV=abc node src/abc.js"."start": "npm run dev "
 }
Copy the code

Script commands set environment variables

"scripts": {
    "dev": "cross-env NODE_ENV=abc node src/abc.js"
 }
Copy the code

NPM run dev will execute the ABC. Js file in the SRC directory of the node service. The ABC file can be obtained from the node environment through process.env.node_env.

If you are using a Webpack project you can get the process.env.node_env environment variable in the window using the DefinePlugin

DefinePlugin can define global variables that we can use directly in modules without any declaration

const webpack = require('webpack');

module.exports = {
    entry: {
        app: './src/app'
    },
    output: {
        path: 'dist'.filename: 'bundle.js'
    },
    plugins: [
        new webpack.DefinePlugin({
          'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        })
    ]
};
Copy the code

You can put environment variables on the stereotype without DefinePlugin

import config from ‘.src/abs’

Vue.prototype.GLOBAL = config

If cross-env is not used

This is how scripts are defined on Linux or MAC

NODE_ENV=production node src/abc.js

window

Set NODE_ENV=production node build.js set NODE_ENV=production node build. Cross-env can be set up across platforms and installed using environment variables: NPM install –save-dev cross-env setup script command

"scripts": {
    "dev": "cross-env NODE_ENV=abc node src/abc.js"
 }
Copy the code

This allows different environments to load different configurations when the script is run

From the pit:

When I use webpack-dev-server@^2.9.1, I will encounter that the environment variables I set in the script will be overwritten by the webpack-dev-server service. Process.env.node_env =undefind The solution to this problem (not used in the project) redefines the process.env.node_env = ‘” ABC “‘ script command in ABS

"scripts": {
    "dev": "cross-env NODE_ENV=abc node src/abc.js & webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 },
abs.js
process.env.NODE_ENV = '"abc"';
module.exports = {
    NODE_ENV: process.env.NODE_ENV
}
Copy the code

It is then introduced in the configuration file so that it is not overwritten by the service. Attention!!

If you are in a vue-cli2 environment configuration, both files need to be modified dev.env.js // project development environment configuration prod.env.js // project production environment configuration

In my own project, if I wanted to define a third environment variable, I could do this by making a copy of webpack.dev.conf.js and calling it webpack.test.conf.js and making a copy of test.env.js and calling it test.env.js and referencing it

Define commands in package.json

 "test": "webpack-dev-server --inline --progress --config build/webpack.test.conf.js"
Copy the code

You can also define environment variables by passing in parameters

How do I get the NPM script custom parameter SegmentFault.com

The wildcard

Since NPM scripts are Shell scripts, Shell wildcards can be used.

"lint": "jshint *.js"
"lint": "jshint **/*.js"
Copy the code

In the above code, * represents any file name and ** represents any level subdirectory. If you want to pass wildcards into the original command to prevent them from being escaped by the Shell, escape the asterisk.

"test": "tap test/\*.js"
Copy the code

Execution order

If multiple tasks need to be executed in an NPM script, you need to know in what order they should be executed.

If the execution is parallel (that is, parallel execution at the same time), you can use the ampersand symbol.

npm run script1.js & npm run script2.js

NPM run script1.js && NPM run script2.js can be used for secondary execution (i.e. the next task is executed only if the previous task succeeds)

NPM passes in parameters

To pass parameters to the NPM script, use the — notation.

Method 1 can be entered manually on the command line

Method two writes multiple arguments in script separated by Spaces

  "scripts": {
    "test": "example=abc node index.js -- --example=123"
  }
Copy the code

Receive in JS with process.argv

console.log(process.argv,'argv')
Copy the code

Practice in webpack segmentfault.com/q/101000001…

Also, default values, hook functions, abbreviations and so on……. If you want to see more attributes, you can refer to teacher Ruan Yifeng’s article.