Introduction to the Yarn 3 Package Management

Yarn 3 marks a new era in JavaScript package management. As a complete rewrite of previous Yarn versions, it boasts faster installation times, enhanced security features, and improved handling of monorepos.

With backward compatibility and a pluggable architecture, Yarn 3 aims to be the new standard for managing JavaScript dependencies. This article explores the key capabilities of this next-generation package manager.

What is Yarn 3 ? 🤷🏼

Yarn 3 is a next-generation JavaScript package manager built for speed, reliability, and extensibility. Developed by Meta, it represents a complete rewrite of earlier Yarn versions with a focus on overcoming core limitations.

Key changes include a new constraint-solving algorithm for efficient package version resolution, secure offline mirroring of registries for enhanced security, and a modular plugin architecture that enables better customization. Under the hood, Yarn 3 has been rearchitected for performance and stability.

Despite these major changes, Yarn 3 retains seamless compatibility with the vast npm package ecosystem. This streamlines migration from Yarn 1/2 or npm for most projects. In summary, Yarn 3 aims to be the fastest, most robust JavaScript package manager available, overcoming the shortcomings of predecessors while driving innovation in dependency management.

It brings much-needed improvements that position it as a compelling successor to npm and earlier Yarn.

The Key Features

Yarn 3 introduces several notable capabilities that enhance the JavaScript package management experience including

⚡ Improved Performance

Yarn 3 offers a remarkable boost in performance compared to its predecessors. This is achieved through enhanced algorithms for package resolution and parallel fetching of dependencies. The result is quicker installations, saving you valuable time during development.

🎛️ Workspaces

Workspaces in Yarn 3 allow you to manage multiple projects within a single repository more effectively. This feature simplifies dependency management and enables a more cohesive development environment. Developers can easily switch between different projects without the hassle of juggling multiple repositories.

🏢 Plug'n'Play Architecture

Perhaps the most groundbreaking feature of Yarn 3 is its new Plug'n'Play (PnP) architecture. Unlike traditional package managers that place package files in a node_modules folder, PnP eliminates this folder and instead stores package information in a .pnp.js file. This approach reduces disk usage and improves installation speed.

💡

In a traditional setup, installing package "A" that depends on package "B" would result in a node_modules folder like this

node_modules/
|-- A/
|---- node_modules/
|------ B/

With PnP, you don't have a node_modules folder. Instead, the .pnp.js file would have a mapping that directs Yarn to where package "B" is located whenever package "A" requires it.

0️⃣ Zero-Installs

Zero-Installs is another feature that synergizes well with PnP. Essentially, Yarn 3 allows you to commit not just your yarn.lock file, but also your .pnp.js and .pnp.cjs files. This way, anyone cloning your repository won't have to run yarn install, making the process of setting up a new environment faster and more foolproof.

♻️ Selective Dependency Resolutions

Selective dependency resolutions allow you to override specific versions of nested dependencies without changing the original package's settings. This is particularly useful for addressing security vulnerabilities or version conflicts in nested packages.

🤔

Imagine package "X" relies on an outdated version of package "Y" with security issues. Instead of waiting for "X" to update, you can specify a safer version of "Y" directly in your package.json using the resolutions field. This ensures that the secure version is used, mitigating potential risks.

{
  "resolutions": {
    "**/Y": "safe-version"
  }
}

These features collectively make Yarn 3 a robust and efficient package manager, streamlining the development workflow and offering innovative solutions to age-old challenges.

Breaking changes from Yarn 2 🚨

Node 10 will not be supporte

plug’n’play hooks are now called .pnp.cjs rather than .pnp.js

the builtin shell now supports whitespace-only commands

Virtual folders (used to disambiguate peer dependencies) are now called __virtual__ and not $$virtual

The -a alias flag of yarn workspaces foreach got removed

You can find the list here : https://github.com/yarnpkg/berry/blob/master/CHANGELOG.md

Comparison to Other Package Managers: Yarn 3 vs. NPM vs. PNPM 🆚

When it comes to package management in the JavaScript ecosystem, three major players dominate the scene: Yarn, NPM, and PNPM. Each has its own set of features, advantages, and drawbacks.

Let's delve into a comparative analysis of Yarn 3 with NPM and PNPM to help you make an informed decision.

🚄

Speed and Efficiency for Yarn 3 : Utilizes a global cache to speed up installations, making it faster than its predecessors.

NPM : Generally slower compared to Yarn and PNPM, especially in larger projects.

PNPM : Uses a content-addressable filesystem to store packages, making it incredibly efficient and fast.

🗃️

Disk Space Usage for yarn 3 : Improved disk usage with Plug'n'Play (PnP) and Zero-Installs.

NPM : Consumes more disk space as it duplicates dependencies across projects.

PNPM : Most efficient in disk space usage due to its unique storage mechanism.

🛠️

Dependency Resolution for Yarn 3 : Offers deterministic dependency resolution, ensuring consistency across all environments.

NPM : Less deterministic compared to Yarn and PNPM, which can lead to "works on my machine" issues.

PNPM : Also provides deterministic installs but with a more efficient algorithm.

🏢

Workspaces for Yarn 3 : Native support for workspaces, making monorepo management easier.

NPM : Introduced workspaces in version 7, but not as feature-rich as Yarn.

PNPM : Supports workspaces and offers similar functionalities to Yarn.

🎗️

Community and Ecosystem for Yarn 3 : Backed by Facebook, it has a strong community and is often ahead in feature releases.

NPM : The oldest and most widely used, with a vast ecosystem of packages.

PNPM : Less popular but growing steadily, especially among those who prioritize efficiency.

🤲🏽

Compatibility for Yarn 3 : High compatibility with NPM packages but requires a .yarnrc file for configuration.

NPM : No additional setup required for compatibility.

PNPM : Some compatibility issues may arise due to its unique node_modules structure.

How Yarn 3 Works 📚

At its core, Yarn 3 relies on Plug'n'Play (PnP) to enable many of its performance improvements.

Here's how PnP works

When you install dependencies with Yarn, they are cached globally on your machine rather than copied into each project's node_modules folder.

Instead of node_modules, each project contains a .pnp.js file which imports the dependencies from the global cache and maps them to specific versions based on the import map.

When you import a module, Yarn intercepts the request and serves it from the global cache rather than looking in node_modules. This interception is enabled via the Node module loader hook.

The versions in the import map lock down the exact version returned from the cache for each import. This enables reproducible installs across machines.

Zero-installs are accomplished by only installing dependencies into the global cache when they are first imported rather than all at once.

Additionally, Yarn 3 relies heavily on their Berry CLI instead of node modules for internal commands. The Berry CLI is written in TypeScript and is extendable via plugins. This allows greater flexibility than the previous CLI.

The PnP, the import map, global cache, and Berry CLI allow Yarn 3 to avoid node_modules, lock down versions, install just-in-time, and extend the CLI - enabling faster, more reproducible and flexible installs. Let me know if you need any clarification or have additional questions!

Setting Up Yarn 3 🧰

Here's a simple guide on how to get started with Yarn 3

1. Requirements

Node.js V18 : Ensure you have Node.js version 18 installed. If not, download it from nodejs.org.

2. Installation

Open your terminal or command prompt.

Type npm install -g yarn to install Yarn globally.

3. Upgrading to Yarn 3

If you already have Yarn installed, simply run to upgrade to Yarn 3 (Stable is Yarn 3's codename)

yarn set version stable

4. Verifying Installation

Confirm the installation by typing yarn --version. This should display the version number, ensuring Yarn 3 is set up.

5. Final Steps

Navigate to your project directory.

Run yarn install to fetch all necessary packages.

🙂

With these steps, you're all set to harness the power of Yarn 3 🚀 !

Migrating an Existing Project to Yarn 3 📦

Transitioning to Yarn 3 can seem daunting, but with the right steps, it's a breeze. If you've already installed Yarn 3, you're halfway there!

Below is a straightforward guide to migrate your existing project

1. Backup Your Project

Before making any changes, always backup your project.

⚠️

This ensures you can revert to the original state if needed.

2. Navigate to Your Project

Open your terminal or command prompt.

Use the cd command to navigate to your project's root directory.

3. Check the Current Yarn Version

Run yarn --version to ensure you're indeed on Yarn 3.

4. Update Project Configuration

Run yarn set version stable to set your project to use Yarn 3 (Stable).

5. Migrate Configuration

If you have a .yarnrc file, rename it to .yarnrc.yml.

Manually transfer any configurations from the old file to the new one, ensuring they're compatible with Yarn 3.

6. Update Dependencies

Run yarn install to install all dependencies using Yarn 3.

Check for any deprecated or incompatible packages and update them as necessary.

7. Test Your Project

After migration, thoroughly test your project to ensure everything works as expected. This includes running any unit tests, integration tests, and manual checks.

8. Commit Changes

Once satisfied, commit all changes to your version control system. This ensures you have a record of the migration.

🎈

Congratulations! You've successfully migrated your project to Yarn 3. Enjoy the enhanced features and improvements that come with this version.

Conclusion 🔥

With a rebuilt architecture optimized for speed, reliability, and extensibility, Yarn 3 aims to be the new standard for managing complex codebases and monorepos.

For developers who have struggled with the limitations of predecessors like npm and Yarn 1/2, Yarn 3 promises to deliver secure, highly customizable dependency management for modern needs. Yarns emphasis on performance and innovation positions it as the next-generation solution! 🙂