Learn NPM Scripts today. I wanted to learn Webpack again, but I felt it was too late.

The learning materials are Ruan Yifeng’s tutorials, as well as official documents for reference.

1. NPM Scripts introduction

NPM scripts is written in the “scripts” property of package.json.

{... "scripts": { "test": "node test.js" ... }... }Copy the code
    • performnpm run testIt’s like executingnode test.js.
    • You can usenpm runView all script commands.

  2. yarnYou can also useyarn run testoryarn run.

2. How NPM scripts works

Each time NPM run is executed, a new shell is created and the script command is executed on the shell. NPM scripts can be written to anything that can be executed on a shell, not necessarily node commands, or even scripts that can be run inside scripts. In particular, node_modules/.bin is added to the environment variable.

3. A wildcard

This is essentially using shell wildcards.

  • * indicates any file name, and ** indicates any subdirectory name.

      "scripts": {
  	"testFile": "node *.js",
  	"testDir": "node **/*.js"
  }
Copy the code

  • * You can use escape. “testStar”: “node my\*.js”

4. Add parameters

If you want to add parameters to a script, you need to declare — as follows:

npm run testScript -- --myArg1 
Copy the code
  1. There are two of them--, the first--That means we’re going to add parameters, number two--And the parameter to indicate the entire parameter form.
  2. If it isyarnI don’t need the first one here--Here we go. directlyyarn run testScript --myArg1Can.
  3. You can also wrap a command in package.json, such as:
"scripts": { "test": "npm list -g", "test:ls": "npm list -g --depth=0", "test:ls2": "NPM run test -- --depth=0"Copy the code

The colon is just a colon, no special meaning, run the NPM run test:ls

5. Control the execution sequence of multiple commands

Ampersand (&) indicates to run simultaneously, and ampersand (&) indicates to run the next one after the previous one succeeds.

Change the above "test:ls" to "NPM list -g --depth=0 && exit 1" and run the following command. NPM run test:ls & NPM run test:ls2 // The second one can run NPM run test:ls && NPM run test:ls2 // The second one does not runCopy the code

6. Default scripts

NPM itself provides two scripts that you can run directly.

NPM run start NPM run install // Both scripts are "start": "node server.js" "install": "node-gyp rebuild".Copy the code

These commands won’t work without the server.js files

7. hook

Hook functions are specified by naming commands pre and post, as in:

"scripts": {
	"pretest": "echo 1",
	"test": "echo 2",
	"posttest": "echo 3"
}
Copy the code

In this case, even if only NPM run test is executed, what is actually executed is:

npm run pretest && npm run test && npm run posttest
Copy the code

So try not to give it to other scriptspre/postLet’s name it at the beginning to avoid confusion.

Of course, you can also run multiple scripts as nesting dolls.

  • Dual Pre is not valid, e.gprepretest.

8. Abbreviated

NPM provides abbreviations for several common commands.

NPM start NPM run start NPM stop NPM run stop NPM test NPM run test NPM restart NPM run stop && NPM Run restart && NPM Short for run startCopy the code

NPM restart executes the hooks in a slightly different order:

*npm run prerestart
 
npm run prestop
npm run stop
npm run poststop
 
*npm run restart
 
npm run prestart
npm run start
npm run poststart
 
*npm run postrestart
Copy the code

* Indicates the order in which the restart hooks are run separately.

9. The variable

One feature of NPM Scripts is the ability to provide NPM-related variables. And it can only be used when executing with NPM scripts.

9.1 Use of variables

Suppose we have these two files:

// Package. Json "scripts": {// all execute view.js" preview": "node view.js", "view": "node view.js", "postview": "node view.js" }Copy the code
// view.js
console.log(process.env.npm_lifecycle_event);
Copy the code

  1. The value of the npm_lifecycle_event variable is the name of the script currently executing, so if we run NPM run view, we will print something like this:

     preview
 view
 postview
Copy the code

  2. % npM_lifecycle_event % if accessed directly from Windows without JS.

     // package.json
 "scripts": {
     "preview": "echo %npm_lifecycle_event%",
     "view": "echo %npm_lifecycle_event%",
     "postview": "echo %npm_lifecycle_event%" 
 }
Copy the code

    Print the same content as the JS version.

  3. $npM_lifecycle_event if accessed directly within bash.

9.2 Types of variables

This is a special variable. There are also variables that are named in a similar way to indicate a similar property.

  1. Some of the variables arenpm_package_A variable at the beginning that can be accessedpackage.jsonVarious fields in.

Suppose we have:

Json "name": "red-tea-and-good-weather", "version" : "11.45.14", "description": "best-match", "dependencies": {" lodash ":" ^ 4.17.20}"Copy the code

The first three can be obtained by npM_package_name, nPM_package_version, and npM_package_description. Even the last one can be obtained by name nesting: NPM_package_dependencies_lodash.

  1. There are also variables that start with npM_config_ and get the same value as NPM get XXX. For example, npM_config_init_author_name and NPM_CONFIG_init_license.

  2. If you want to see the names of all environment variables, use NPM run env, but yarn Run env is more user-friendly.