Make sure you have NPM installed before you start.

What is NPM Scripts

When we say ‘NPM scripts’, we are talking about the ‘scripts’ property value in package.json. You can specify various commands and scripts to expose here, and then execute them using NPM run

.

We use thenpm initInitialize a project generated bypackage.jsonSomething like this:

Use:

npm run test
Copy the code

Will print an error and exit.

To demonstrate how to install the typescript module, we can use NPM I –save-dev typescript to install typescript in the current directory and change the scripts section to:

  "scripts": {
    "build": "tsc"
  }
Copy the code

Pre-/post-scripts

Pre-execute scripts versus post-execute scripts.

Suppose you have the following script:

"scripts": {
    "prebuild": "rimraf dist"."build": "tsc"."postbuild": "npm run test"."test": "jest"
  }
Copy the code

When you execute NPM run build:

  1. Prebuild will execute first, deletedistfolder
  2. Build performs typescript compilation
  3. Postbuild will execute the test step (test command)
  4. Test Performs the JEST test (actually performed in Step 3)

This process is executed because NPM automatically detects if a script command has other commands with the same name, starting with pre or POST, and executes them in that order. You can see detailed instructions and the order in which each command is executed in the NPM documentation.

The environment variable

When running a command or script: NPM run

, your environment variables will automatically add a set of variables from NPM.

All variables are prefixed with nPM_ and classified into two types:

  • In order tonpm_config_Anything at the beginning is either from global NPM config or project-specific.npmrcFile configuration.
  • In order tonpm_package_Everything at the beginning comes from your project

If you are interested in a list of environment variables, add the following command to scripts:

{
  "scripts": {
    "check-env": "node -e 'console.log(process.env)' | grep npm"}}Copy the code

usenpm run check-env, you can see:And so on.

Parameter passing

So far, we’ve covered how to create the script, which environment variables to set, and how to invoke the script. However, sometimes you want to be able to pass parameters to scripts to make them more dynamic.

You can pass parameters to NPM scripts in two ways:

The first method simply passes the parameters directly to your actual command. Such as:

TSC –watch;

The second option is to use NPM’s built-in parameter parser. This is probably one of the lesser-known features of NPM scripts. Essentially, NPM parses any argument you pass to the script, except after the argument is passed — followed by a space. After NPM parses them, they make NPM_config_ available under environment variables.

To test this, create a new Scripts entry:

{
  "scripts": {
    "demo": "echo \"Hello $npm_config_first $npm_config_last\""}}Copy the code

It should outputHello Dominik Kundel. It is important to note that since we have not configured this parameter parser, we are not very flexible with the parameter syntax. For example, if we delete=Flag and run the same command again:We will getHello true true Kundel DominikBecause it will--lastand--firstInterpret it as Boolean and set it totrueAnd pass the remaining parameters to the script as unparsed parameters.

conclusion

NPM is a constant part of our development process, and properly planned use of NPM scripts can improve our development experience.