DEV Community

loading...

Beginner`s guide to NPM

mariokandut profile image Mario Originally published at mariokandut.com on ・7 min read

What is NPM

npm is the package manager for Node.js. In January 2017 over 350 000 packages have been reported being listed in the npmjs (npm registry). This makes it the biggest single language code repository on Earth and there is a package for (almost!) everything. 😉

It was created in 2009 as an open source project with the goal to help JavaScript developers share packaged modules of code easily. The npm Registry is a public collection of packages of open-source code for Node.js, front-end web apps, mobile apps, robots, routers, and countless other needs of the JavaScript community.

Yes, Yarn is another package manager and an alternative to npm. I recommend using npm, since yarn established itself as a competitor, the team behind npm made updates, and there are no significant differences anymore.

Downloads

npm manages downloads of dependencies of your project, hence you need to install, uninstall and update packages on a regular basis.

Installing dependencies

If a project has a package.json file, it depends on node modules, you have to install them. The command npm install or npm i installs all the node modules the project needs. Everything will be installed in the folder node_modules.

💰: $100 (credits) for you to start your cloud journey with DigitalOcean!

Never add the folder node_modules to your git history. Add an entry to your .gitgnore so the folder does not get added to git.

Install a package

With the command npm install <package-name> you can install additional packages to your project, like lodash or styled-components.

When installing a npm package, you can add it as a dependency or as a devDependency in package.json, so that on a fresh install or in a shared project it will be installed with just running npm install.

In devDependencies are usually development tools, like a testing library. While dependencies are bundled with app in production.

You have two options:

  • --save This flag installs and adds the entry to the package.json file in dependencies.
  • --save-dev This flag installs and adds the entry to the package.json file in devDependencies.

Updating packages

To take advantage of security fixes and latest features of the node modules you have to update on a regular basis. This updating process is fairly easy, just run npm update and npm will check all packages for a newer version, that satisfies your versioning constraints.

You can also update a single package only, with the command npm update <package-name>.

Versioning

Npm also manages versioning , so you can specify any specific version of a package, or require a version higher or lower than what you need. Npm follows the semantic versioning (semver) standard.

Since there are several versions of several packages, it occurs quite often, that the library you need is only compatible with a major release of another library, or that a bugfix in the latest release of the library is still in development, and the bug is causing issues. Hence, specifying an explicit version of a library helps to keep everyone on the same exact version of a package and reduces bugs and issues.

Running scripts/tasks

The package.json file supports a format for specifying command line tasks that can be run by using npm run <task-name>.

In the following example the command npm run start-dev executes the script in lib/server-development.

{
  "scripts": {
    "start-dev": "node lib/server-dev"
  }
}
Enter fullscreen mode Exit fullscreen mode

When you are using Webpack , Angular , React or Vue , it is very common to use this feature. The example code below is from a project using Webpack.

{
  "scripts": {
    "watch": "webpack --watch --progress --colors --config webpack.conf.js",
    "dev": "webpack --progress --colors --config webpack.conf.js",
    "prod": "NODE_ENV=production webpack -p --config webpack.conf.js"
  }
}
Enter fullscreen mode Exit fullscreen mode

So instead of typing those long commands, which are easy mistype and hard to remember, you can simply run:

npm run watch
npm run dev
npm run prod
Enter fullscreen mode Exit fullscreen mode

Thanks for reading and if you have any questions , use the comment function or send me a message @mariokandut.

If you want to know more about Node, have a look at these Node Tutorials.

References (and Big thanks):

Node, OpenJSFoundation, NodeJs.dev

Discussion (0)

pic
Editor guide