DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 970,177 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Urfan Guliyev
Urfan Guliyev

Posted on


In this blog, I’m going to compare and contrast two well-known JavaScript package managers.

NPM stands for Node Package Manager. It is:

  • the default package manager that comes with the Node.js
  • an online repository of javascript packages and modules.
  • a command-line utility works with said repository to manage packages.

Yarn is an alternative JavaScript package manager that uses npm’s registry, giving you access to the same packages as npm. It was developed under the leadership of Facebook and supported by Google, Exponent and Tilde engineers to address the problems that they were dealing with npm.

lock file:

In npm versions 3 and earlier, many developers faced a dependency versions problem where the app broke when moving a project from one machine to another. Npm did have a shrinkwrap command in an earlier version that created a lock file. The problem with this was that the file could not be generated automatically, you had to always update it yourself. To fix this problem, yarn automatically installs (updates) a yarn.lock file that contains the exact same version of the dependency that should be installed on every device. After yarn, Npm 5 introduced the package-lock.json file to replace npm-shrinkwrap.

Package Installation:

NPM installs packages one by one, waiting for the first package to be installed before beginning the next. Yarn, by contrast, speeds up the process by installing multiple packages at the same time. Additionally, yarn stores the package to your disk such that for the next installation, the package is immediately used instead of waiting for an HTTP request to get it.

CLI Commands:

  • After creating a React app by using the following command:
npx create-react-app my-app-name

We can create a package.json file by using:

npm init //or
yarn init
  • The following commands are used for adding/updating/deleting packages
//using npm
npm install <package..>
npm upgrade <package..>
npm uninstall <package..>

//using yarn
yarn add <package..>
yarn upgrade <package..>
yarn remove <package..>

Top comments (1)

heytulsiprasad profile image
Tulsi Prasad

Nice review about beginning with yarn!

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

⭐️🎀 JavaScript Visualized: Promises & Async/Await

async await