This article will dive into two popular JavaScript package managers, Yarn and npm, and compare their respective pros and cons to help you choose the right tool for your project.

Core points

• Yarn and npm are both popular package managers, each with their advantages and disadvantages. Yarn, developed by Facebook, is faster, more secure, and more reliable in dependency management. As the default package manager for Node.js, npm has a larger user base, and its simpler syntax is easier for beginners to use.
• Yarn parallel installation packages, usually faster than npm (sequential installation packages). However, the latest versions of these two package managers are at the same speed.
• In terms of security, Yarn uses a checksum to verify the integrity of each installed package before executing the package code. npm has also made significant improvements to its security features in recent releases, including package audits during installation.
• Yarn offers unique features such as Plug’n’Play, zero installation and built-in license checker. However, it requires more disk space than npm. The choice between Yarn and npm should be based on individual needs and workflow preferences.

Basics

In the past, a simple text editor was enough for developers to create and manage most projects. But now, the Internet has undergone earth-shaking changes. Now, even a fairly simple project can contain hundreds or even thousands of scripts, as well as complex nested dependencies that simply cannot be managed without some kind of automation tool. This is where the package manager comes into play.

Package manager is a tool that automatically handles project dependencies in multiple ways. For example, with the package manager, we can install, uninstall, update and upgrade packages, configure project settings, run scripts, and more. All the tedious work is done by the package manager, we just need to focus on the encoding itself.

npm stands for Node Package Manager. It was released in 2010, opening a new era of web development. Prior to this, project dependencies were downloaded and managed manually. npm is the wand that drives the web to a higher level.

npm actually contains three parts:

• A Website for managing all aspects of npm experience;
• A Registration for accessing a huge public JavaScript package database;
• A Command line interface (CLI) for interacting with npm through the terminal.

But when most people talk about npm, they usually refer to the last one - the CLI tool. It is provided as the default package manager with each new Node installation. This means you can start using it right away.

If you want to dig into how to use npm, see our Node Package Manager guide.

Yarn stands for Yet Another Resource Negotiator. Yarn Package Manager is an alternative to npm, released by Facebook in October 2016. Yarn's initial goal was to address the shortcomings of npm, such as performance and security issues. Yarn quickly became a secure, fast and reliable JavaScript dependency management tool.

But the npm team learned the lesson and quickly made up for npm's shortcomings by implementing the missing features.

Let's quickly review history to understand the overall situation:

• 2010: npm released, supporting Node.
• 2016: Published by Yarn. It shows higher performance than npm. It also generates a yarn.lock file, making sharing and precise replication of repositories easier and more predictable.
• 2017: npm 5 released. It provides automatic generation of package-lock.json files in response to yarn.lock.
• 2018: npm 6 is released, security improvements. npm now checks for security vulnerabilities before installing the dependencies.
• 2020: Yarn 2 and npm 7 release. Both packages have powerful new features, which we will see later in this tutorial.
• 2021: Yarn 3 released with various improvements.

These two package managers are comparable in package management competitions and offer similar features. But there are still some differences that help us determine which one to use.

In the rest of this tutorial, we will explore the main similarities and differences between npm and Yarn.

Yarn vs. npm: Installation comparison

We will start with the installation process of npm and Yarn.

Installing the package manager itself

As mentioned above, npm is pre-installed in Node, so there is no need to manually install npm.

Instead, Yarn needs to be installed explicitly. First, we need to install Yarn:

npm install -g yarn

We can then use it on a per-project basis by running the yarn set version command in the project root directory:

yarn set version berry

In this case, berry is the version we want to set.

If we want to update to the latest version, we run the following command:

yarn set version latest

With Yarn, we can use a different version for each project.

To do the same with npm, you need to install nvm (Node version manager). Here is how to install multiple Node versions using nvm.

Installing project dependencies

Now, let's see how to install project dependencies.

When we run npm install, the dependencies are installed in turn. The output logs in the terminal are rich in information, but they are a bit difficult to read.

To use the Yarn installation package, we run the yarn command. Yarn parallel installation packages, which is one of the reasons why it is faster than npm. If you are using Yarn 1, you will see that the yarn output log is concise and easy to distinguish visually. They are also sorted in tree form for easy understanding. But in versions 2 and 3, the logs are not so intuitive.

So far, we have seen that npm and Yarn have different installation package commands. In the next section, we will explore more commands.

Compare npm and Yarn commands

npm and Yarn share many commands, but there are some different commands. Let's first explore some of the same commands:

• npm init | yarn init: Create a new package
• npm run | yarn run: Run the script defined in package.json
• npm test | yarn test: test package
• npm publish | yarn publish: Publish package
• npm cache clean | yarn cache clean: delete all data in the cache folder

These commands make it easy to switch between two managers, but there are some different commands that can be confusing. Let's see what they are in the next list:

• npm install | yarn: Install dependencies
• npm install [package] | yarn add [package]: Installation package
• npm install --save-dev [package] | yarn add --dev [package]: Install the package as a development dependency
• npm uninstall [package] | yarn remove [package]: uninstall package
• npm uninstall --save-dev [package] | yarn remove [package]: uninstall the development dependency package
• npm update | yarn upgrade: Update dependencies
• npm update [package] | yarn upgrade [package]: Update package

Yarn also has some unique commands that npm does not have. For example, the why command shows why packages are needed: it could be a dependency, a local module, or a project dependency.

Yarn vs. npm: Speed ??and Performance

Whenever Yarn or npm needs to install a package, they perform a series of tasks. In npm, these tasks are performed by packages, meaning that it will continue to the next package after one package is fully installed. Instead, Yarn performs these tasks in parallel, thereby improving performance.

Although both managers provide caching mechanisms, Yarn seems to do a little better. By implementing the zero installation paradigm (which we will see in the Feature Comparison section), it is able to install packages almost immediately. It caches each package and saves it on disk, so the next time you install this package, you don't even need an internet connection because the package is installed offline from disk.

Although Yarn has some advantages, in its latest version, Yarn and npm are at comparable speeds. Therefore, we cannot define a clear winner here.

Yarn vs. npm: Safe comparison

One of the main criticisms of npm is about security. Previous npm versions had some serious security vulnerabilities.

As of version 6, npm audits the package during installation and tells you if you find any vulnerabilities. We can perform this check manually by running npm audit on installed packages. If any vulnerabilities are found, npm will provide us with security advice.

As shown in the above figure, we can run npm audit fix to fix package vulnerabilities, and if it can be fixed, the dependency tree will be fixed as well.

Yarn and npm both use cryptographic hashing algorithms to ensure packet integrity.

Yarn vs. npm: Functional comparison

As with commands, npm and Yarn share some features, but there are some differences. Let's first explore the common functionality shared by these two package managers.

Generate locked file

In package.json (the file that npm and Yarn are used to track project dependencies), the version number is not always accurate. Instead, you can define a version range. This way, you can select a specific major and minor version of the package, but allow npm to install the latest patches that may fix some bugs.

In the ideal world of semantic versioning, the patch version does not contain any significant changes. But unfortunately, this is not always the case. The strategy used by npm may cause both machines to end up with the same package.json file, but have different versions of the package installed - this may introduce an error.

To avoid package version mismatch, the installed exact version is fixed in the package lock file. Each time a module is added, npm and Yarn create (or update) package-lock.json and yarn.lock files, respectively. This way, you can ensure that another machine installs the exact same package while still defining a series of allowed versions in package.json.

Using the workspace

The workspace allows you to have a monorepo to manage dependencies in multiple projects. This means you have a single top-level root package that has multiple subpackages called workspaces.

Run scripts remotely

npx command is used to run scripts from ./node_modules/.bin. It also allows you to execute packages from the npm registry without installing them into your project dependencies. For example, you can create a new React application by running the following command:

npm install -g yarn

In Yarn, you can use the equivalent dlx command to achieve the same result:

yarn set version berry

The rest of the features we will explore are unique to Yarn.

Zero Installation

Zero installation stores the cache in your project directory, located in the .yarn folder. When you use commands such as yarn or yarn add , Yarn creates a .pnp.cjs file. This file contains the dependency hierarchy Node used to load project packages. So you can access them almost immediately.

Plug’n’Play

Plug’n’Play is an alternative installation strategy. Yarn does not generate the node_modules directory and leave parsing to Node, but instead generates a single .pnp.cjs file that maps packages to locations on disk and its dependencies list. This feature can speed up project startup, optimize dependency trees, speed up installation, and of course eliminate the need for node_modules folder.

Limit

Yarn has a license checker built in, which is very useful in different scenarios when developing applications.

Yarn vs. npm: which package manager to choose

We have covered the various similarities and differences between npm and Yarn, but we have not yet determined which one is better and which one should we choose. As always, the answer depends on our desires and needs.

As a general guide, I summarize the following suggestions:

• If you are satisfied with your current workflow, don't want to install other tools, and have insufficient disk space, select npm.
• If you want some powerful features like Plug’n’Play, you need some of the features missing in npm and have enough disk space, choose Yarn.

If you still have a hard time making a clear decision between npm and Yarn, then you can check pnpm, which tries to combine the advantages of these two package managers and is the third largest giant in the package management pool.

Yarn vs. npm: Conclusion

We have learned about the importance of package managers for modern web development and we compare two of the most popular competitors on the market. They all have their own advantages and disadvantages, and in order to choose the one that suits you best, you need to have a clear understanding of your needs. The best way to decide which one is better for you is to try both and see which one performs better.

Lastly, don't overthink. Just select one and go to the fun part: Create a great app!

FAQs about Yarn vs. npm

What is the main difference between Yarn and npm?

Yarn and npm are both package managers for JavaScript, but they have some key differences. Yarn is developed by Facebook and aims to address some of the shortcomings of npm. It provides higher speed, better security, and more reliable dependency management. On the other hand, npm is the default package manager for Node.js, with a larger user base. It is also easier to use by beginners due to its simpler syntax.

Is Yarn faster than npm?

Yes, Yarn is usually faster than npm. This is because Yarn parallel installation packages, which greatly speeds up the installation process. On the other hand, npm installs packages in sequence, which may be slower.

How is Yarn's security compared to npm's security?

Yarn has a feature called checksum that verifies its integrity before executing the installed package's code. This adds an extra layer of security that npm does not have. However, npm has made significant improvements to its security features in recent releases.

Can I use Yarn and npm in the same project?

While technically it is possible to use both Yarn and npm in the same project, this is not recommended. This is because Yarn and npm handle dependencies differently, which can lead to inconsistencies and errors in the project.

How to deal with dependencies in Yarn compared to npm?

Yarn uses lock files to lock versions of project dependencies. This ensures that on all machines, every installation produces the exact same folder structure in node_modules. npm also uses locked files, but it is not as strict as Yarn .

Is Yarn more reliable than npm?

Yarn is generally considered more reliable than npm due to its strict file locking and checksum capabilities. However, npm has made significant improvements in reliability in recent releases.

How does Yarn's community support compare to npm's community support?

Npm has a larger community and more available packages due to its longer existence. However, Yarn is becoming more and more popular and has a growing community.

What are some of the challenges of switching from npm to Yarn?

Some of the challenges of switching from npm to Yarn include learning new syntax, migrating existing projects, and adapting to Yarn's strict dependency management.

How does Yarn's syntax compare to npm's syntax?

Yarn's syntax is slightly different from that of npm. For example, to use the Yarn installation package, you can use the command "yarn add" and with npm, you can use "npm install".

For beginners, is Yarn or npm better?

Num is often considered easier for beginners to use due to its simpler syntax and larger community. However, Yarn offers more advanced features and is a great choice for more experienced developers.

The above is the detailed content of Yarn vs npm: Everything You Need to Know. For more information, please follow other related articles on the PHP Chinese website!