Recently we have been using npm in several projects to manage our Javascript modules. Starting to use npm is quite easy, but as time goes by new questions pop up how to do specific things. In this post I’ll show you some things about npm that you might bump into also.

Installation

Installing npm on your system is rather straightforward. Besides that you need node.js installed, it is nothing more than a few simple commands. A more in depth installation instruction has been described in our post on the first moments with ESLint.

npm and package.json

The npm packages are listed on the npm website. There are literally tons of packages and you may need to search to find the package you need. Searching for a datepicker may result in tens of results so take your time to find the one you need. Once found, installing a Javascript package with npm is easy, you just execute

npm install <package_name>

from the root of your project and the package will be installed in the directory node_modules. You probably have noticed the package.json file that comes with a npm package. It contains all kinds of information about the package. The package.json file in your root directory contains information about the packages in your project.

For example, dependencies lists all the packages the project depends on. This can be very handy if you are working on a large project with multiple team members, because a new member can just take this package.json file and run npm install, to install all the dependencies for the project. This way there are no more version differences for the libraries used. Note that this only works if a package.json file is available.

The project evolves

But what if the project evolves and new packages are installed via npm? You can save them into the package.json by installing the package with

npm install <package_name> --save

This way your package.json will be up to date.

The packages evolve also

npm modules generally evolve as well over time. For example, libraries such as jQuery, Bootstrap, underscore, Backbone, React etc. bring out new versions every once in a while. To catch up you can update your packages with the command npm update. In my opinion the option –save should be passed to have the package.json file update as well.

Browserify’s ‘require’ and non npm packages

Although nowadays a lot of packages, libraries and plugins are published on npm, it is possible that you need a plugin that is not. When using a common JS dependency manager like Browserify it is still possible to save the module in the node_modules folder and reference it with just it’s name (instead of a long path to the specific file). The key here is the package.json file once more. If you tell your app where it can find the js file, you can include it with a require statement in your code. For example, I used the magiczoom plugin and stored it in node_modules/magiczoom/magiczoom.js. By adding the following line to my package.json file

"browser": {
    "magiczoom": "./node_modules/magiczoom/magiczoom.js"
}

I am able to use it in my code with a simple require(magiczoom). Basically I just created an alias to be used in my code. Quite nice!

Concluding remarks

There a probably a ton of usecases I did not discuss in this post, but I am sure we’ll encounter some more tricks and tips in the coming period. Stay tuned for more!