Introduction to JavaScript Package Managers

A tutorial to extending JavaScript functionality with ease

Now that you have Node.js working, what now? How do you manage code in different files and external libraries? Package managers have become very popular with scripting languages, and here’s how they work.

What package manager should I use?

When it comes to JavaScript package managers, it always comes down to NPM (Node Package Manager). This is usually installed automatically when you install Node, and is one of the most widely used managers.

Another rapidly rising package manager is Yarn by Facebook. This is built on top of NPM, but it’s insanely faster. I would recommend using Yarn over NPM, but you have to install it separately. This can be done the easiest via NPM itself!

npm install yarn -g

How do I install packages?

To install a package, it’s as simple as writing npm install <package> . A folder called node_modules should appear, which would contain the library you just installed. With Yarn, the command is yarn add <package> instead. You can see what packages are available via the NPM registry.

When using source control to track your project, it’s best practice to ignore your node_modules directory as it can get very big. You can track what packages a project requires via initialising a package.json file. You can set this up via npm init or yarn init .

Now that you have your package.json in your project, adding packages is as simple as marking it to save as a dependency or devDependency. A dependency is something the project needs in order to run, whilst a devDependency is something that is only used for the project’s development.

To save something as a dependency, use npm install <package> -S or yarn add <package> . To save something as a devDependency, use npm install <package> -D or yarn add <package> --dev .

How do I use packages?

In Node.js, there’s a new method available for you: require() . This allows you to import files from your project directory and packages you have installed.

To import a package:

require('package');

To import a package and store it’s logic:

var something = require('package');

Packages will mostly have clear instructions for their usage, so head to the NPM registry if you don’t know how to work with your package. A package with more stars means it’s more popular, and probably more stable.

To import a separate file, you need to specify that the file logic can be imported:

// data.js
var data = function() {
  console.log('Hello World!');
}
module.exports = data;

Then you can import it via specifying the relative filepath:

var data = require('./data');
data(); // Hello World!

You can even import JSON and it’ll be ready for use with JavaScript too:

var pkg = require('./package');
console.log(pkg.name); // Your package name

Now you know how to extend your JavaScript functionality with a wide range of packages. Customise your package.json to your liking and experiment with anything you can find.

In the next tutorial we’ll look at how to make the most of JavaScript with the ECMAScript (ES6) format, and how to setup a linter for it.