20 useful npm tips and tricks

X @urre

Short list of tips and tricks using npm and npm scripts.

Shortcuts

Save time typing

  • npm i - is a shortcut for npm install
  • npm t - is a shortcut for npm test
  • -g - to save a global dependency
  • -D- to save as development dependency:npm install packagename --save-dev

Info

npm info webpack dist-tags

{
  latest: '5.6.0',
  legacy: '1.15.0',
  'webpack-2': '2.7.0',
  next: '5.0.0-rc.6',
  'webpack-3': '3.12.0',
  'webpack-4': '4.44.2'
}

What version of a package is the latest.

npm ci

npm ci bypasses a package’s package.json to install modules from a package’s lockfile. This ensures reproducible builds - you are getting exactly what you expect on every install. Providing a consistent and fast experience for developers using CI/CD in their workflow.

npm ci

Tagged version

npm install some-package@next

To install not the “latest” version, but the version tagged by “next”

Version shortcuts

// 1.0.0
npm version patch
// 1.0.1
npm version minor
// 1.1.0
npm version major
// 2.0.0

To increase the version.

pre- and post- hooks

Special lifecycle scripts which can be used to run scripts automatically in sequence.

{
  "scripts": {
    "pretest": "eslint .",
    "test": "jest"
  },
}

npm docs → scripts

List installed packages

npm list

List packages

npm list -g

List packages installed globally

Check outdated packages

npm outdated

Package                             Current  Wanted  Latest  Location
@babel/core                           7.4.0  7.12.8  7.12.8  projectname
@babel/preset-env                     7.4.2  7.12.7  7.12.7  projectname

Test your own packages locally

npm link ...

Develop node modules locally using npm link. It enables us to develop our modules and test them in our projects seamlessly.

Silent

The –silent option reduces the output in the Terminal.

{
	"scripts": {
		"something": "npm run something --silent"
	}
}

nls

Missing inspector for npm packages.

nls                     List available npm scripts
nls deps                List dependencies table (d for short)
nls view <prop-path>    Extract info from package.json (v for short)
nls read <package-name> Print readme file from a dependency (r for short)
nls why <package-name>  Identify why a package has been installed (w for short)

Example:

npx nls why @babel/core
Who required @babel/core: tools > @babel/core@7.12.3

nls

Node Task List

Interactive CLI tool that lists and run package.json scripts.

ntl

Run all

Instead of:

npm run clean && npm run build:css && npm run build:js && npm run build:html

Do:

npm-run-all clean build:*

npm-run-all

Initialize package

npm init
npm init -y

Use -y to to automatically generate your package.

npm config set init-license MIT

Tip: Set config to change for example the default license generated by npm init -y

Scan for vulnerabilities

npm audit

Scan your app for vulnerabilities:

npm audit fix

Scan your project for vulnerabilities and automatically install any compatible updates to vulnerable dependencies:

npm-audit

npx

Since npm 5.2.0, npm comes with a tool called npx. It executes a script from your dependencies as node executable.

  • npm - the package manager
  • npx - the package runner

npm vs npx — What’s the Difference?

The prefix flag

npm start --prefix path/to/your/folder

Use the --prefix flag to specify the path:

npm doctor

Check your environments

npm doctor

npm-pack

npm pack --dry-run

Shows which files would be packed when publishing your package to npm.

npm-pack

How to write npm

TL;DR; don’t put it in all caps ever. npm is never capitalized officially.