Mariusz Rajczakowski
Software Engineer
10 min read | 2 months ago

Learn and understand NPM

Npm
picture

What is npm?

Npm is a package manager for javascript.

It can be used for managing dependencies of your front-end and backend java script code (default package manager for node.js).

When we talk about npm we could either consider npm as a command line client or online repository of public and paid-for private packages.

Why do I need it?

Npm registry helps reuse and share code with other developers, and it makes easy to manage different versions of code.

Installing npm

Npm comes with node js installation. If you don't have node js yet, head over to https://nodejs.org/en/download and pick up the right installation for your OS

When you installed your node, you can check for npm version by typing:

npm -v
//you should see something like this:
5.5.1
//it might be worth mentioning that npm is updated more often than npm
//so if would like to update it just type:
npm install npm@latest -g

Installing packages

Installing locally is a default behaviour of npm client, which is good, because we can have our dependencies per project basis. If we want to install some dependencies globally then we have to explicitly add global flag.

//default behaviour is to install this package in current working directory
//this will create node_modules directory if it doesn’t exist yet
//and download the latest version of a package or when the package.json is present,
//this will install the latest version satisfying
//semantic versioning rule (major.minor.patch)
npm install package_name

//to install package globally append -g or --global
npm install -g package_name
//or
npm install --global package_name

Using npm when writing Java Script

The online registry is available at https://www.npmjs.com and it's searchable.

That means when you writing some Java Script code and you want some piece of functionality (unless you writing it for learning purposes) you should first check that online repository whether it contains some packages which covering that requirements.

Let's imagine I am working on, let say a booking calendar application.

When it comes to dates manipulation your can use build-in Date object and write functionality yourself.. or try searching on online registry.

To search for specific modules you can use npm client:

npm search date manipulation

npm cli search results

You can also search on npmjs.com website:

npm search website

Using packages

Once installed in node_modules directory, packages can be used within your code by requiring them:

//index.js
const moment = require('moment');
console.log(moment().now());

//then when your run your app
node index.js //you should see the current timestamp

Understanding package.json

When you create a new application and you want to use some js packages for your front-end or back-end (node.js) you may initialize package.json file

There are few benefits of using package.json in your project:

  • It makes your app build really easy to reproduce (normally you will not commit node_modules to your version control, instead you will add package.json which allows other developers to recreate the same environment as you have)
  • it allows you to specify semantic versioning rules for your package and be as granular as required (i.e. 3.2.8)
  • It is kind of documentation for your project
  • It allows you to specify npm scripts

There are few ways of initializing package.json

//you can manually create a file package.json and then populate
//with mandatory properties (name and version)
//name must be lowercase, one word, no space, but dashes and underscores allowed
//version must follow semantic versioning x.x.x
{
   "name":"my-app",
   "version": "1.0.0"
}
//bear in mind - this is json file - not js so it must be a valid json
//you can also use npm client  to populate this file for you:
npm init
//this script will ask you several questions and
//present some clever defaults for you
//however if you want to just get started quickly you can just use
npm init -y
//that will create a default package.json which you can always modify later on
{
  "name": "myapp",
  "version": "1.0.0",
  "description": ",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {},
  "scripts": {
    "test": "echo 'Error: no test specified' && exit 1"
  },
  "keywords": [],
  "author": ",
  "license": "ISC"
}

//if you need to specify defaults you can use npm client set command
npm set init.license 'MIT'
npm set init.author.email 'your_email@example.com'
npm set init.author.name 'Your Name'

Dependencies and DevDependencies

There are 2 types of packages you can list in your package.json: dependencies (required in production) and devDependencies (only for testing and development)

You can specify your dependency names manually and then do npm install:


{
  "name": "myapp",
  "version": "1.0.0",
  "dependencies": {
     "my_prod_dependency" : "^1.0.0"
  },
  "devDependencies": {
      "my_dev_dependency" : "^1.0.0"
  }
}

If you prefer easier route, you can actually flag your command either with --save or --save-dev

npm install my_prod_dependency --save
//in npm >5.x this is default behaviour,
// you can just do npm install my_prod_dependency and it will be save in dependencies
//to install dev dependencies
npm install my_dev_dependcency --save-dev

Updating packages

For your local builds if you go to your project folder you can run npm update.

//local
npm update
//global
npm update -g

Uninstalling packages

You can remove packages from node_modules using npm uninstall.

npm uninstall package_name // to remove package_name from node_modules

// to remove package_name from package.json as well you would use
npm uninstall --save package_name //for dependencies
npm uninstall --save-dev package_name // for devDependencies

Semantic versioning and npm

Semantic versioning is a standard way for projects to communicate what kind of changes are in release.

Semantic versioning is very important, because if your project depends on some modules which introduced some breaking changes, you are in control what kind of changes you are accepting.

This includes cases when you want to lock dependencies to very specific versions

What does certain numbers mean in semantic versioning (major.minor.patch) i.e. v. 2.3.12

  • 2 - major release (changes which break backwards compatibility)
  • 3 - minor release (new features which don't break existing features)
  • 12 - patch release (bug fixes, minor changes)

For the package above you could use different syntax for locking:

  • Patch releases: 2.3 or 2.3.x or ~2.3.12
  • Minor releases: 2 or 2.x or ^2.3.12
  • Major releases: * or x

Summary

Npm is an essential tool for every java script developer.

Knowing it well speed up applications development and helps you keeping your code reusable thanks to online registry.

Why not then start to develop your own package? If you want to create and publish your first npm package click here

References
  1. https://docs.npmjs.com

Share:



Warning! This site uses cookies
By continuing to browse the site, you are agreeing to our use of cookies. Read our privacy policy