Last update on .

Like Python and other programming languages, JavaScript has packages or libraries that people have written that you can use in your development process. Why reinvent the wheel if someone else has already done the heavy lifting, right? This article covers NPM basics and some common commands frequently used in web development.

Some background...

NPM is an open source package manager for JavaScript and Node.js and works like pip does for Python.

JavaScript packages can be used by the application itself in production (referred to as 'dependencies') or they can be used purely for development purposes ('devDependencies'). Development dependencies are often used to automate processes that occur while you are developing. A common use is to recompile style and script files then refresh the browser after a change is made to CSS or JS files. This saves time and effort for the developer. To read more about NPM, see this link: https://docs.npmjs.com/getting-started/what-is-npm.

Web Developer Automation Tools

There are two main web developer automation tools that you hear about: Grunt and Gulp. A quick Internet search will find articles that describe the differences between the two as this: Grunt is configuration based while Gulp is process based. Grunt has been around longer and has a large follower base, but Gulp is growing in popularity. I happened to learn Gulp first, so that is what I use. Regardless of which tool you use (or if you even use either of these tools), you will still use NPM to access and download packages that work with these tools, Node.js or JavaScript in general.

Global versus Local Packages

NPM packages can be installed globally or locally. A global package will work from the command line no matter what the current directory whereas a local package only works from inside the module that it is installed in. For development purposes, most packages will be installed locally.

The package.json file

NPM uses a file called package.json to manage installed packages. It tracks the packages with versions that the application depends on to run, both in production and in the development environment. Think of it as an ingredients list for a cooking recipe. The package.json file makes it easy to share your application with others or to set up the application on a different machine.

Frequently Used Commands

Update NPM Version

Node comes with NPM installed. However, NPM gets updated more frequently than Node does, so it is a good idea to often check for the latest version. You can check the NPM version you are using with npm -v. Then update with npm install npm@latest -g.

Create Initial package.json File

Run the command npm init which will ask a series of questions about the project. The answers are embedded in the package.json file that is created. It looks something like this:

{
  "name": "my_package",
  "description": "",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/username/my_package.git"
  },
  "author": "",
  "license": "ISC",
}

Install Packages

A package can be installed using the command npm install <packagename>. This command will create a directory named node_modules/ in your project folder, download and install the package in this directory and update your package.json file. To designate a package as either a project dependency (needed in production) or a development dependency (used for development only), use the --save and --save-dev flags as shown below.

    npm install  --save
    npm install  --save-dev

To remove packages, you use the npm uninstall command. To remove them from the package.json, you must specify the same flag as when you added the package.

    npm uninstall  --save

By default, NPM installs packages locally (meaning they will only be used by the project in which they are installed). However, if you need to install a package globally (to be used anywhere by any project), you can use the --global or -g flag as shown below:

    npm install gulp --global --save-dev

To install packages from an existing package.json file, use the following commands:

For production dependencies:

    npm install

For development dependencies:

    npm install --only=dev

Updating Packages

You can easily check to see which packages are outdated by running the command npm outdated. This command will give you a list of any packages that have newer versions along with information about what version you have, what the highest version is within the release you are using and what the latest version available is.

$ npm outdated
Package      Current  Wanted   Latest  Location
glob         5.0.15   5.0.15   6.0.1   test-outdated-output
nothingness  0.0.3    git      git     test-outdated-output
local-dev    0.0.3    linked   linked  test-outdated-output
once         1.3.2    1.3.3    1.3.3   test-outdated-output

It is important to understand how versioning works to fully comprehend what this information means. In the example above, the 'glob' package has a release version of 6.0.1 available. However, because the package.json for this project requires ^5.0.15, the highest possible version that NPM would download is 5.9... (it will never download a version beginning with 6). More about versioning below.

To update the outdated local packages, use the command npm update.

To update global packages that are outdated, use npm update -g <packagename>.

Finding Packages in the Tree

Often packages have dependencies of their own, which creates a 'tree' of packages. Use the command npm ls to list all packages installed.

$ npm ls
simple-blog@1.0.0 C:\myWebsites\simple-blog
+-- del@2.2.2
| +-- globby@5.0.0
| | +-- array-union@1.0.2
| | | `-- array-uniq@1.0.3
| | +-- arrify@1.0.1
| | +-- glob@7.1.2 deduped
| | +-- object-assign@4.1.1 deduped
...

This will show you the tree for that package. You can also tell NPM how many levels to drill down using the depth= flag. The default shows all levels. But if you just want to see the top level list of packages, use npm ls --depth=0.

Level 0

$ npm ls --depth=0
simple-blog@1.0.0 C:\myWebsites\simple-blog
+-- autoprefixer@7.2.1
+-- babel-core@6.26.0
+-- babel-loader@7.1.2
+-- babel-preset-es2015@6.24.1
+-- browser-sync@2.18.13
+-- browser-sync-client@2.5.1
  ...

Level 1

$ npm ls --depth=1
simple-blog@1.0.0 C:\myWebsites\simple-blog
+-- autoprefixer@7.2.1
| +-- browserslist@2.9.1
| +-- caniuse-lite@1.0.30000778
| +-- normalize-range@0.1.2
| +-- num2fraction@1.2.2
| +-- postcss@6.0.14
| `-- postcss-value-parser@3.3.0
  ...

To find a specific package, use npm ls <packagename>@<version>.

Package Versioning

Semantic versioning (or 'semver') is a standard that indicates the level of changes in a new release. The table below shows how it works.

CODE STATUS STAGE RULE EXAMPLE
First Release New Product Start with 1.0.0 1.0.0
Bug fixes and/or other minor changes Patch Release Increment the third digit 1.0.1
New Features that don't break existing features Minor Release Increment the middle digit 1.1.0
Changes that break backward compatibility Major Release Increment the first digit 2.0.0

You can control what versions are used in future installations of your application by how you designate them in the package.json file.

The default notation in your package.json file when you use the npm install --save command is the caret (^). This means that when you install this application in the future, NPM packages that are compatible with the version designated in the package.json will be installed. Not necessarily the latest version available or the same version that you used... just the most up-to-date version that is compatible with the version that you originally used.

The table below shows the most commonly used package.json notations for package versions.

Format Meaning
1.0.0 Must match 1.0.0 exactly
>1.0.0 Must be greater than 1.0.0
>=1.0.0 Must be greater than or equal to 1.0.0
<1.0.0 Must be less than 1.0.0
<=1.0.0 Must be less than or equal to 1.0.0
~1.0.0 Approximately equivalent to 1.0.0
^1.0.0 Compatible with 1.0.0
1.2.x 1.2.0, 1.2.1, etc., but not 1.3.0
* or "" Matches any version
1.0.0 - 1.6.5 Must be greater than or equal to 1.0.0 AND less than or equal to 1.6.5
1.0.0 || 2.0.0 Passes if either 1.0.0 or 2.0.0 are satisfied

For more detailed information, see the semver section on npmjs.com.

To read more about NPM commands, see the documentation at this link.

Additional Information about Entry

Comments

No comments yet.

Post your comment