DEV Community

loading...

What are NPM scripts?

Mario
Software Engineer from Vienna, Austria. Building things, mainly in JavaScript.
Originally published at mariokandut.com on ・6 min read

NPM scripts are a way to bundle shell commands. Typically, they are a string of commands, which would be entered the terminal, or they are part of a pipeline in a CI/CD.

What exactly are NPM scripts?

NPM scripts are terminal commands that run in a terminal. That's all there is to it. 🎉

Scripts are stored in the project's package.json file and everyone who has access to the project, also has access to these scripts. They help automate repetitive tasks, like generating types for an API, and can be shared within the project, and you have to learn fewer tools.

Common use cases for npm scripts are:

  • building your Node project (think of multiple environments like develop and production)
  • starting a development server
  • compiling SCSS to CSS
  • linting
  • minifying
  • testing
  • basically anything you repetitive type in the shell during the project.

Scripts are executed using the npm run NAME-OF-YOUR-SCRIPT command. There are also some predefined aliases that convert to npm run, like npm test or npm start, you can use them interchangeably.

There are also pre- and post-hooks, which are scripts that run before a script lifecycle event. For example, running npm start would first trigger prestart, then start and finally poststart. You can also use only one of these lifecycle hooks, like postinstall, which would run automatically after every npm install or npm install <package> command.

To create pre or post scripts for any scripts defined in the scripts section of the package.json, simply create another script with a matching name and add pre or post to the beginning of them. For example:

{
  "scripts": {
    "precompress": "{{ executes BEFORE the `compress` script }}",
    "compress": "{{ run command to compress files }}",
    "postcompress": "{{ executes AFTER `compress` script }}"
  }
}
Enter fullscreen mode Exit fullscreen mode

In the above example running the command npm run compress would execute these scripts as described. Read more about Pre & Post Scripts in the NPM docs.

Simple NPM script

It's very common to have commands that you run regularly as an npm script, like linting, building production apps, starting your application, etc.

A simple example for a npm script would be:

"scripts": {
    "start": "node index.js",
}
Enter fullscreen mode Exit fullscreen mode

Running npm start with the above script would start a node server. Commands like this come very handy, when you have to set additional parameters and/or flags, when starting an application. Let's say you want to set the port node index.js --port=8000, just replace the command and running npm start would do that.

Compose NPM script

You can also compose npm scripts, so scripts can call other scripts.

"scripts": {
    "start": "node index.js",
    "dev": "NODE_ENV=development npm run lint && npm start",
    "lint": "eslint ./*.js",
    },
Enter fullscreen mode Exit fullscreen mode
  • Running npm start would start a node server.
  • Running npm run lint would lint all the *.js files.
  • Running npm run dev would first set the node environment variable to development, then run npm run lint and then start the application with npm start.

Scripts have the ability to access commands provided by installed packages by name, no complete path required. The npm run command will first try, and resolve to a locally-installed package (node_modules), if this fails, it falls back to a globally-installed package.

TL;DR

  • NPM scripts let you bundle aliases for commonly executed commands.
  • Script definitions are stored in the scripts key in the package.json file.
  • NPM scripts are executed via npm run <YOUR-SCRIPT-NAME>.

Thanks for reading and if you have any questions , use the comment function or send me a message @mariokandut.

If you want to know more about Node, have a look at these Node Tutorials.

References (and Big thanks):

NPM docs,HeyNode

Discussion (0)