JavaScript パッケージマネージャーの比較: Npm vs Yarn vs Pnpm

2016 年 10 月、Facebook は、新しいパッケージ マネージャーを開発するために Google および他の多くの企業と提携することを発表しました (engineering.fb.com / 2016/10/11/…) は、当時 npm に存在していた一貫性、セキュリティ、パフォーマンスの問題に対処します。彼らは、代替品を Yarn と名付けました。

Yarnは依然としてnpmの多くの概念とプロセスに基づいて設計および構築されていますが、Yarnは依然として次の分野に大きな影響を与えています。パッケージマネージャーの影響。Yarnは操作を並列化して、npmと比較してインストール プロセスを高速化します。これは、npmの以前のバージョンの大きな問題点でした。

Yarnは、読み取りと書き込み、セキュリティとパフォーマンスに関するより高い標準を設定し、次のような多くの概念を考案しました (後にnpmもこれについて多くの改良を加えました):

• monorepoサポート
• キャッシュのインストール
• オフライン ダウンロード
• ファイル ロック (ロック)

Yarn v12020 年にメンテナンス モードに入りました#。それ以来、v1.x シリーズはレガシーとみなされ、Yarn Classicに名前が変更されました。その後継となる Yarn v2 (Berry) は、現在、より活発な開発ブランチです。

pnpm

ZoltanKochanによる初版、2017 年にリリース。これはnpmの代替となるため、npmプロジェクトがある場合は、すぐにpnpmを使用できます。

を作成する主な理由は、npmとYarnがプロジェクト間で使用される依存関係のストレージ構造にとって非常に冗長であるためです。Yarn Classicはnpmよりも速度の面で優れていますが、pnpmでは不可能な同じ依存関係解決方法を使用します:npmとYarn Classicは、前の構造を最適化せずにhoistingを使用してnode_modules.

をタイリングしますが、別の構造が導入されます。依存関係解決戦略:コンテンツ アドレス指定を備えたストレージ構造。このメソッドで生成されたnode_modulesフォルダーは、実際には、メイン フォルダーにグローバルに保存されている~/.pnpm-store/ディレクトリに依存します。依存関係の各バージョンは、このディレクトリ フォルダーに物理的に一度保存され、単一のソース アドレスを形成して、ディスク領域を大幅に節約します。

構造は、symlinksを使用して作成された依存関係のネストされた構造です (フォルダー内の各ファイル/パッケージはハード リンクStorage) 公式ドキュメントの次の画像は、これを示しています。 (記入予定: ソフトリンクとハードリンク)

pnpmの影響は 2021 年のレポートで確認できます: なぜなら彼らはコンテンツ アドレス可能ストレージのイノベーションに取り組んでおり、競合他社はシンボリック リンクの構造やパッケージの効率的なディスク管理などのpnpm概念の採用を検討しています。Yarn (v2、Berry)、プラグアンドプレイによる車輪の再発明

は 2020 年 1 月にリリースされ、オリジナルの ## A として昇格されました。 #Yarnのメジャー アップグレード。Yarnチームは、本質的に新しいコード ベースと新しい原則仕様を備えた新しいパッケージ マネージャーであることをより明確にするために、これをYarn Berryと名付けました。

Yarn Berryの主な革新は、プラグ アンド プレイ (PnP)アプローチであり、node_modulesを修復するための戦略として機能します。node_modulesを生成する戦略の代わりに、依存関係ルックアップ テーブルを含むファイル.pnp.cjsを生成します。これは、ネストされたフォルダー構造ではなく単一のファイルであるため機能します。依存関係をさらに処理します。効率的に。さらに、各パッケージは.yarn/cache/ではなくzip ファイルとしてフォルダーに保存され、占有ディスク容量はnode_modulesよりも少なくなります。

これらの変更はすべて非常に迅速に行われたため、リリース後に多くの論争を引き起こしました。 PnPに対するこのような重大な変更を行うには、保守者は既存のパッケージを更新して互換性を持たせる必要があります。デフォルトで新しい PnP アプローチを使用し、node_modulesに戻すことは最初は簡単ではありませんでした。そのため、多くの著名な開発者がそれを検討せず、Yarn 2を公に批判しました。

それ以来、Yarn Berryチームは、その後のリリースで多くの問題を解決してきました。PnP の非互換性の問題を解決するために、チームはデフォルトの動作モードを簡単に変更する方法を提供しました。node_modules プラグインを使用すると、1 行の設定のみで従来のnode_modules方式に切り替えることができます。

さらに、JavaScript エコシステムは時間の経過とともに PnP のサポートをますます提供してきました。この互換性表でわかるように、いくつかの大規模プロジェクトはYarn Berryの採用を開始しました。

Yarn Berryはまだ若いですが、すでにパッケージ マネージャー領域に影響を与えています -pnpmはPnP アプローチを 2020 年後半に採用しました ## ＃。

にはNode.jsが同梱されているため、追加の手順は必要ありません。オペレーティング システムのNode.js インストーラーをダウンロードすることに加えて、CLI ツールを使用してソフトウェア バージョンを管理することが一般的になってきています。 Node のコンテキストでは、Node Version Manager (nvm)またはVoltaが非常に便利なユーティリティになっています。

Yarn 1

npmなど、さまざまな方法でインストールできます。パッケージをインストールするには:.$ npm i -gyarnYarn Classic から Yarn Berry

を最新バージョンにインストールまたは更新します

• コマンドを使用して最新バージョンにアップグレードします

  yarn set version berry

  ログイン後にコピー

• ただし、Yarn Berry

  をインストールする
推奨方法は Corepack を使用することです。

Corepack是由 Yarn Berry 的开发者创建的。该计划最初被命名为包管理器管理器（pmm）?，并在 LTS v16 中与 Node 合并。

在 Corepack 的帮助下，因为 Node 包含Yarn Classic、Yarn Berry和pnpm二进制文件所以您不必“单独”安装的npm的替代包管理器。这些垫片允许用户运行 Yarn 和 pnpm 命令而无需先显式安装它们，也不会弄乱 Node 发行版。

Corepack 预装了 Node.js ≥ v16.9.0。但是，对于较旧的 Node 版本，您可以使用⬇️

npm install -g corepack

在使用之前先启用 Corepack。该示例显示了如何在 Yarn Berry v3.1.1 中激活它。

# you need to opt-in first $ corepack enable # shim installed but concrete version needs to activated $ corepack prepare yarn@3.1.1 --activate

pnpm

您可以将pnpm作为npm包来安装：$ npm i -g pnpm。您还可以使用 Corepack 安装 pnpm:

$ corepack prepare pnpm@6.24.2 --activate

项目结构

在本节中，您将一目了然地看到不同包管理器的主要特征。您可以轻松发现配置特定包管理器涉及哪些文件，以及哪些文件是由安装步骤生成的。

所有包管理器都将所有重要的元信息存储在项目清单package.json文件中。 此外，根级别的配置文件可以被用来设置不同的私有包或者不同的依赖项解析配置。

在安装步骤中，依赖项dependencies被存储在文件结构中,例如node_modules并生成锁定文件locking。本节不考虑工作区设置，因此所有示例仅显示存储依赖项的单个位置。

npm

使用$ npm install或较短的$ npm i会生成一个package-lock.json文件和一个node_modules文件夹。还有.npmrc这种可配置的文件可以放在根级别目录里面。有关locking文件的更多信息，请参阅下一节。

. ├── node_modules/ ├── .npmrc ├── package-lock.json └── package.json

yarn

运行$ yarn会创建一个yarn.lock文件和一个node_modules文件夹。.yarnrc文件也可以是配置的选项，Yarn Classic也支持.npmrc文件。或者可以使用缓存文件夹.yarn/cache/和本地存储的最近的Yarn Classic版本.yarn/releases/。

. ├── .yarn/ │ ├── cache/ │ └── releases/ │ └── yarn-1.22.17.cjs ├── node_modules/ ├── .yarnrc ├── package.json └── yarn.lock

yarn berry: node_modules

因为这种特殊的安装模式，比使用其他包管理器您必须在Yarn Berry项目中处理更多的文件和文件夹。有些是可选的，有些是强制性的。

Yarn Berry不再支持.npmrc或者.yarnrc；他需要一个.yarnrc.yml。对于传统的生成node_modules文件夹的工作流程，您必须提供nodeLinker配置来使用node_modules或者pnpm的配置（这块没看懂）。

# .yarnrc.yml nodeLinker: node-modules # or pnpm

运行$ yarn会将所有依赖项安装在一个node_modules文件夹中。并且生成一个yarn.lock文件，该文件较新但与Yarn Classic不兼容。此外，还会生成一个用于离线安装的.yarn/cache/文件夹。该文件夹是可选的，用于存储项目使用的Yarn Berry版本。

. ├── .yarn/ │ ├── cache/ │ └── releases/ │ └── yarn-3.1.1.cjs ├── node_modules/ ├── .yarnrc.yml ├── package.json └── yarn.lock

yarn berry: pnp

无论是对于PnP 的严格模式还是松散模式，跟着.pnp.cjs和yarn.lock来执行$ yarn都会生成一个.yarn/cache/还有.yarn/unplugged。PnP strict 是默认模式，如果想要配置 loose 模式，需要如下形式开启⬇️：

# .yarnrc.yml nodeLinker: pnp pnpMode: loose

在 PnP 项目中，除了releases文件夹之外，.yarn文件夹很可能还包含一个提供IDE 支持的sdk/文件夹。根据您的用例，.yarn甚至可以包含更多的文件夹。

. ├── .yarn/ │ ├── cache/ │ ├── releases/ │ │ └── yarn-3.1.1.cjs │ ├── sdk/ │ └── unplugged/ ├── .pnp.cjs ├── .pnp.loader.mjs ├── .yarnrc.yml ├── package.json └── yarn.lock`

pnpm

和npm或Yarn Classic项目的初始状态一样，pnpm也需要package.json文件。使用$ pnpm i安装依赖项后，会生成一个node_modules文件夹，但由于其内容是可寻址存储方式，其结构完全不同。

pnpm还会生成自己的锁定文件pnp-lock.yml。 您可以使用可选文件.npmrc提供附加配置。

. ├── node_modules/ │ └── .pnpm/ ├── .npmrc ├── package.json └── pnpm-lock.yml

锁定文件和依赖存储

如上一节所述，每个包管理器都会创建锁定文件。

lock文件准确存储您的项目安装的每个依赖项的版本从而实现更可预测和确定性的安装。因为依赖版本很可能使用版本范围声明（例如，≥ v1.2.5）所以这个lock文件是很重要的，如果您不“lock”您的版本，实际安装的版本可能会有所不同。

锁定文件有时也存储校验和（我记得是一段hash），我们将在安全部分更深入地介绍。

从npmv5+ 开始锁定文件一直是npm主要的功能 (package-lock.json) ，pnpm里是pnpm-lock.yaml，在Yarn Berry中的yarn.lock以新的 YAML 格式出现。

在上一节中，我们看到了传统方法，将依赖项安装在node_modules文件夹结构中。这是npm、Yarn Classic和pnpm都使用的方案，（其中pnpm比其他方案更有效）。

Yarn Berry在 PnP 模式下的做法有所不同。依赖项不是node_modules文件夹，而是以 zip 文件的形式存储为.yarn/cache/和.pnp.cjs文件的组合。

最好将这些锁定文件置于版本控制之下，因为每个团队成员都安装相同的版本，所以它解决了“在你和我的机器上工作”问题。

CLI

下表比较了npm、Yarn Classic、Yarn Berry和pnpm中可用的不同 CLI 命令。这绝不是一个完整的列表，而是一个备忘单。本节不涉及与workflow 相关的命令。

npm和pnpm具有许多特别的命令和选项别名，这意味着命令可以有不同的名称，即$ npm install与$ npm add。 此外，许多命令选项都有缩写版本，例如-D来代替--save-dev。 在表格中，我将所有缩写版本称为别名。使用这些包管理器，您都可以增加、更新或删除多个依赖项。

依赖配置管理

此表涵盖了用于安装或更新package.json中指定的所有依赖项的依赖项管理命令。

次の例は、公開中にパケットを管理する方法を示しています。 ：

パッケージ: 依存関係またはバイナリ

• バイナリ:
node_modules/.bin/
• または.yarn/cache からの 1 つの実行ツール/(PnP)

重要な点をご理解ください。

package.jsonで実行するだけです。bin/ファイル内に指定された 2 つの二重化ファイル。

一般的に使用されるコマンド

この表では、いくつかの便利な組み込みコマンドについて説明します。公式コマンドがない場合は、通常、npmパッケージまたはYarn Berryプラグインを通じてサードパーティのコマンドを使用できます。

// ... "workspaces": [ "hooks", "utils" ] }

# .npmrc @doppelmutzi:registry=https://gitlab.doppelmutzi.com/api/v4/projects/41/packages/npm/

{ // ... "private": true, "workspaces": ["workspace-a", "workspace-b"] }

# .yarnrc.yml yarnPath: .yarn/releases/yarn-3.1.1.cjs

# .yarnrc.yml plugins: - path: .yarn/plugins/@yarnpkg/plugin-semver-up.cjs spec: "https://raw.githubusercontent.com/tophat/yarn-plugin-semver-up/master/bundles/%40yarnpkg/plugin-semver-up.js"

# .yarnrc.yml packageExtensions: "styled-components@*": dependencies: react-is: "*"

# pnpm-workspace.yaml packages: - 'packages/**'

# Installing all dependencies for all workspaces $ npm i --workspaces. # run against one package $ npm run test --workspace=hooks # run against multiple packages $ npm run test --workspace=hooks --workspace=utils # run against all $ npm run test --workspaces # ignore all packages missing test $ npm run test --workspaces --if-present

# 为所有工作空间安装所有依赖项 $ yarn # 显示依赖关系树 $ yarn workspaces info # 再一个包运行启动 $ yarn workspace awesome - package start # 将Webpack添加到包 $ yarn workspace awesome - package add - D webpack # add React 对所有包 $ yarn add react -W

{ // ... "dependencies": { "@doppelmutzi/hooks": "workspace:*", "http-server": "14.0.0", // ... } }

# prune all workspaces pnpm -r exec -- rm -rf node_modules && rm pnpm-lock.yaml # run all tests for all workspaces with scope @doppelmutzi pnpm recursive run test --filter @doppelmutzi/`

以上がJavaScript パッケージマネージャーの比較: Npm vs Yarn vs Pnpmの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。