What is npm script?

In the package.json file, script commands defined using scripts fields

{
  // ...
  "scripts": {
    "build": "node build.js"
  }
}

How to execute npm scripts?

$ npm run build
# Equivalent to implementation
$ node build.js

Do you know any npm scripts?

#View all npm script commands for the current project
#(Actually, you can also see what attributes are in the scripts object in package.json)
npm run

Principle of npm??

Whenever npm run is executed, a new Shell is created automatically, in which the specified script commands are executed.
Therefore, as long as it is a command that Shell (usually Bash) can run, it can be written in the npm script.

In particular, the new Shell created by npm run will add the node_modules/.bin subdirectory of the current directory to the PATH variable, and then restore the PATH variable to its original state after execution. This means that all scripts in the node_modules/.bin subdirectory of the current directory can be invoked directly by the script name without adding a path.

Since the only requirement of npm script is that it can be executed in Shell, it is not necessarily a Node script, and any executable file can be written in it. The exit code of npm script also obeys the Shell script rules. If the exit code is not 0, npm considers that the script failed to execute.

Wildcard & escape

Same shell

// * Represents any file name, ** represents any layer of subdirectories
"lint": "jshint *.js"
"lint": "jshint **/*.js"
// Pass wildcards into the original command to prevent Shell escaping and asterisk escaping
"test": "tap test/\*.js"

Biography

Pass in parameters to the npm script, using -- label

# package.json
"deploy": "gulp deploy",
# command line
$ npm run deploy -- --test

Does one command perform multiple tasks?

#Parallel execution (i.e. simultaneous parallel execution), using & Symbols
$ npm run serve & npm run dev
#Secondary execution (that is, only the previous task succeeds before the next one), using & & Symbols
$ npm run build && npm run deploy

Default script

You can use it directly without defining it (provided that there are server.js scripts and rebuild files in the project root directory)

"start": "node server.js"，
"install": "node-gyp rebuild"

hook

The npm script has two hooks, pre and post

Example

# package.json
"prebuild": "echo I run before the build script",
"build": "cross-env NODE_ENV=production webpack",
"postbuild": "echo I run after the build script",
# command line
$ npm run build
# Equivalent to implementation
$ npm run prebuild && npm run build && npm run postbuild

Custom script commands can also be added with pre and post hooks. For example, the script command myscript also has premyscript and postmyscript hooks. However, dual prepres and posts are invalid, such as prepretest and postposttest.

Default hook

prepublish，postpublish
preinstall，postinstall
preuninstall，postuninstall
preversion，postversion
pretest，posttest
prestop，poststop
prestart，poststart
prerestart，postrestart

npm_lifecycle_event variable (returns the name of the script currently running, pretest, test, posttest)

#Using this variable, write code for different npm scripts commands in the same script file
const TARGET = process.env.npm_lifecycle_event;

if (TARGET === 'test') {
  console.log(`Running the test task!`);
}

if (TARGET === 'pretest') {
  console.log(`Running the pretest task!`);
}

if (TARGET === 'posttest') {
  console.log(`Running the posttest task!`);
}

Note that the prepublish hook runs not only before the npm publish command, but also before the npm install (with no parameters) command. This behavior can easily confuse users, so npm 4 introduces a new hook prepare, which is equivalent to prepublish, and from npm 5 onwards, prepublish will only run before the npm publish command.

Abbreviation

• npm start is the abbreviation of npm run start

• npm stop is the abbreviation of npm run stop

• npm test is the abbreviation of npm run test

• npm restart is the abbreviation of NPM run stop & NPM run restart & NPM run start

Execution sequence
1 prerestart
2 prestop
3 stop
4 poststop
5 restart
6 prestart
7 start
8 poststart
9 postrestart

Internal variables of npm

With the npm_package_prefix, the NPM script can get the fields in package.json
(If it's a Bash script, you can prefix the value with $npm_package_

// package.json
{
  "name": "foo", 
  "version": "1.2.5",
  "config" : { "port" : "8080" },
  "scripts": {
    "view": "node view.js",
    "start" : "node server.js"
  }
}

// view.js
console.log(process.env.npm_package_name); // foo
console.log(process.env.npm_package_version_view); // node view.js

The NPM script can also get the configuration variable of NPM through the npm_config_prefix, which is the value returned by the npm config get xxx command.
For example, the release label of the current module can be retrieved through npm_config_tag.

"view": "echo $npm_config_tag",

Note that config objects in package.json can be overridden by environment variables.

$ npm config set foo:port 80

List all environment variables

"env": "env"

Common script examples

// Delete directory
"clean": "rimraf dist/*",

// Build an HTTP service locally
"serve": "http-server -p 9090 dist/",

// Open the browser
"open:dev": "opener http://localhost:9090",

// Real time refresh
 "livereload": "live-reload --port 9091 dist/",

// Building HTML files
"build:html": "jade index.jade > dist/index.html",

// As long as the CSS file changes, the build is re-executed
"watch:css": "watch 'npm run build:css' assets/styles/",

// As long as the HTML file changes, the build is re-executed
"watch:html": "watch 'npm run build:html' assets/html",

// Deploy to Amazon S3
"deploy:prod": "s3-cli sync ./dist/ s3://example-com/prod-site/",

// Constructing favicon
"build:favicon": "node scripts/favicon.js",