NPM tips and tricks

NPM Packages (Source: https://www.npmjs.com/)

If you use NPM in your day-to-day workflow, I’m sure you will like these tips.

Generating your package.json

We usually do npm init and then start adding the information that npm requests. But, if we don’t really care about all that info and we want to leave the defaults we then press enter for every single piece of data requested by npm. To avoid that, you can just type npm init -y . This is the no questions asked version.

Installing modules

Instead of typing npm install you can simply do npm i

Installing several modules at once

Instead of typing one npm install command for each module you need, like:

npm i gulp-pug
npm i gulp-debug
npm i gulp-sass

Run one command to install all of them at once

npm i gulp-pug gulp-debug gulp-sass

Even better, don’t type the whole name if all of them start with the same prefix

npm i gulp{-debug,-sass,-pug}

Using some install flags shortcuts

If you want to install a package and save it as a production dependency you would normally do

npm i gulp --save-prod

but instead, you can use the -P flag, like this

npm i gulp -P

The same for development dependencies, instead of typing the full --save-dev flag you can use -D like this:

npm i gulp -D

By default, when you run npm install without any flags, npm will add the package as a dependency in your package.json file. If you want to prevent this, install it using the no-save flag, like this:

npm i vue --no-save

Getting packages information

This will show the relevant information of the vue package like this:

npm view vue or npm v vue

npm view results

If you want to get only the latest version of the package, you can try

> npm v vue version
> 2.5.17

If you want to get the full list of versions of a npm package, then try it in plural

> npm v vue versions
> [ '0.0.0',
  '0.6.0',
  '0.7.0',
  ...
  '2.5.15',
  '2.5.16',
  '2.5.17-beta.0',
  '2.5.17' ]

Install a specific package version

If you want to install a package with a version that is not the latest one, you can type

npm i vue@2.5.15

Given that it’s easier to remember a name than a number (at least for me) you can use the dist-tags listed after running the npm v commmand as shown above, like this:

npm i vue@beta

Searching for a package

Sometimes you can’t simply remember the exact name of that package you used some time ago or that your friend recommended. In that case you can perform a search directly from your terminal with npm search:

npm search gulp debug

or

npm s gulp debug

This will print a list of packages with descriptions, authors and some other information

npm search results

Uninstalling packages

If you don’t want to go to your package.json file and remove the dependencies from there manually, you can remove it with

npm uninstall vue

This will remove the package from the node_modules folder and from the package.json file. Of course, you can use rm , un or r to achieve the same, like:

npm rm vue

If for some reason you only want to remove the package files from the node_modules folder but keep it as a dependency in your package.json file, you can use the no-save flag

npm rm vue --no-save

Listing dependencies

If you want to see a list of your project dependencies, you can use

npm ls

This will list all the dependencies listed in your package.json file as well as all of their dependencies. If you want to list only your dependencies, you can do

npm ls --depth=0

And this will print something like this:

├── jquery@3.3.1
├── vue@2.5.17
└── yarn@1.12.3

Of course, you can use the g flag if you want to see a list of all of your globally installed packages

npm ls -g -depth 0

Listing outdated packages

Most of the time, you will want to keep your local dependencies updated, in order to do this you can run

npm outdate

which will give you a list of all the outdated packages that you may want to update, it looks something like this:

Running Tests

You can run your tests using npm run tests but why should you bother typing all of that if you can do npm test or even better: npm t ?

Showing available scripts

Sometimes, we want to see what scripts are included in the package.json file. We can open the package.json file, of course, but we can also do

npm run

If I have this configuration in my package.json file like this:

"scripts": {
  "test": "jest",
  "build": "gulp build"
}

This is what the npm run command will show:

Lifecycle scripts included in npm:
  test
    jest
available via `npm run-script`:
  build
    gulp-build

Installing a package from a Github repo

You can directly install a package from a Github repo like this

npm i https://github.com/sindresorhus/gulp-debug

Or you can omit the full domain part

npm i sindresorhus/gulp-debug

Open the Github page of a package

You can of course do a Google search, and then look for the page, or you can do this:

npm repo create-react-app

The package doesn’t have to be installed in order to execute the command above.

Listing all the NPM environment variables available

You can see the full list of the NPM variables that are available for our usage by running:

npm run env | grep npm_

The command above will print something like:

npm_config_fetch_retry_maxtimeout=60000
npm_config_tag_version_prefix=v
npm_config_strict_ssl=true
npm_config_sso_type=oauth
.
.
.

The nice thing about these variables is that they’re available to be used in your scripts and you can even create your own, let’s see how.

Adding your own NPM variables

You can add your own NPM variables by adding a new key to the package.json file. It can be any key, but I prefer to keep all my NPM variables inside of a config key just to keep things organized. Like this:

"config": {
  "build_folder":"./dist"
}

Now, if you list your variables with the previous command discussed npm run env | grep npm_ , you’ll see that your new variable is there:

npm_package_config_build_folder=./dist
npm_config_fetch_retry_maxtimeout=60000
npm_config_tag_version_prefix=v
npm_config_strict_ssl=true
npm_config_sso_type=oauth
.
.
.

By default, npm will name your variable prefixing npm_package to it and keeping its structure inside of the package.json file, meaning config_build_folder .

Using an NPM variable in an NPM script

Once you’ve seen the full list of variables and you want to use the value of any of those variables in your scripts, you can do this in your package.json (see the value of the variable npm_package_config_build_folder in the previous section)

"scripts": {
  "build": "gulp build --dist $npm_package_config_build_folder"
}

Once you run this command with npm run build it will be executed as

gulp build --dist ./dist

And those are my favorite shortcuts and commands in my day-to-day workflow, do you have one that is not listed here? I’d love to know about it!

If you found this article helpful, check out my new article NPX makes NPM nicer and even more useful, I’m sure you’ll love it.

This story is published in Noteworthy, where 10,000+ readers come every day to learn about the people & ideas shaping the products we love.

Follow our publication to see more product & design stories featured by the Journal team.