npm Tips and Tricks

Greetings, friends! Let's talk about npm, some useful features it provides, and shortcuts for commonly used commands!

Shortcuts

Helpful Commands

Install packages without modifying the package.json file, useful for testing out dependencies in your project.

npm i --no-save

Install the latest version of a package.

npm i package_name@latest

Install any package version you specify, i.e. 2.0.0 in this example.

npm i package_name@2.0.0

Run an audit over your dependencies to detect if any vulnerabilities exist.

npm audit

Let npm attempt to fix any vulnerabilities that exist in any of your dependencies.

npm audit fix

Passing Parameters to Scripts

Pass commands to a script in package.json.

npm run script -- --param1 --param2

For example, suppose we had the following package.json file.

{
  "name": "parameter-experiment",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jest": "^26.4.2"
  }
}

Normally, we would have to make a new script to run a CLI tool such as Jest with parameters. For instance, if we want to run jest --coverage inside a script, we could make a new line in the package.json file:

"scripts": {
  "test": "jest",
  "coverage": "jest --coverage"
}

It seems unnecessary to create a new script every time we want to pass in different parameters to the Jest CLI. Instead, we can simply use the test script that already calls Jest.

npm t -- --coverage

The -- signifies the end of options and allows you to pass parameters to an npm script.

Shortcut URL to npm Packages

It's very common for us to lookup npm packages to get more information about them such as the Github repo containing all the code for that package. This URL syntax makes it very easy to lookup an npm package: npm.im/PACKAGE_NAME

Example: https://npm.im/react

The Pre- and Post- Commands

Inside your npm scripts, you can define "pre-" and "post-" commands that will run automatically before/after a command you specify, respectively. For example, if you ran the command npm run build, then it will automatically run the prebuild script for you before the build script. Similarly, the postbuild script will run automatically after the build script. Suppose we have the following package.json file.

{
  "name": "babel-tutorial-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "serve",
    "build": "babel src -d lib",
    "prebuild": "node my-prebuild-script.js",
    "postbuild": "node my-postbuild-script.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.10.5",
    "@babel/core": "^7.11.1",
    "@babel/preset-react": "^7.10.4",
    "serve": "^11.3.2"
  }
}

Simply executing npm run build would run the scripts in the following order automatically:

1. prebuild
2. build
3. postbuild

Conclusion

I encourage everyone to read through some of the resources I have posted below. I hope all of these tips and tricks help improve your developer experience 🎉. Happy coding!

Resources

• How npm handles the "script" field
• npm CLI Documentation