Yarn 3.0 Plug'n'Play (PnP) 安装和迁移

前言

以前用 npm, 后来 yarn 火了就用 yarn. 火来 yarn 2.0 大改版, Angular 不支持就一直没有.

一直到去年的 Angular 13 才开始支持. 最近又开始写 Angular 了, 所以来补上它吧.

这篇会讲到 Node.js v16 + Yarn 3 运行 TypeScript esbuild 和 Webpack 的例子. (刚好我之前有写过 Webpack 和 TypeScript esbuild)

还有如何从 Yarn 1 升级到 Yarn 3 (我之前写的 Webpack 和 TypeScript esbuild 是用 Yarn 1 的) 

最后是 Angular 的例子.

一点点历史 npm, yarn, cnpm, pnpm

参考: 

主流包管理工具npm、yarn、cnpm、pnpm之间的区别与联系——原理篇

JavaScript package managers compared: npm, Yarn, or pnpm?

npm 是最早的, 很多问题, 后来

yarn 出现了, 解决了很多问题, 后来 

pnpm 出现了, 比 npm 和 yarn 都好

yarn 出现后, npm 也一直在进步.

pnpm 出现后, yarn 也一直在进步

cnpm 是 for china 的 npm, 只是这样而已

目前 yarn 1.x 是经典版 (classic) 已经没有在开发了, 但还是有维护

yarn 2.0 (berry 版) 时代是比较苦难的年代, 因为改版太大了, node_modules 直接没了. 所以很多 library 更不上.

yarn 3.0 才比较好一些. 这篇主要就是介绍这个.

Uninstall Yarn 1 and Node.js (npm)

Yarn 3 是搭配 Node.js 一套的, 为了测试我直接把 Yarn 1 和所有 Node.js, npm 统统删除. 一个干净的开始

删除 Node.js 的方式: stackoverflow – How to completely remove node.js from Windows

Yarn 1 的删除方式: Windows start > add or remove > search yarn > remove (如果没有找到就算了)

安装 Node.js & Yarn 3

参考: Getting Started with Yarn 3 with TypeScript

安装 Node.js

去 Node.js 官网下载 v16 或以上, 然后安装.

安装 Yarn 3

参考: 官网 installation

安装好 Node.js 后, 打开 cmd (run as administrator). 

corepack enable

 Yarn 安装和管理是靠它的, 这个是 v16 才有的功能. 默认是关闭的, 以后可能默认会开哦

这个时候 Yarn 就安装好了.

Yarn update version

for future 要更新 to latest version 

yarn set version stable

for update to next version (pre-release)

yarn set version from sources

Yarn 3 with VS Code

参考: Editor SDKs

为了让 VS Code 知道 TypeScript, ESLint, Prettier 等等

需要安装 yarn sdk

yarn dlx @yarnpkg/sdks vscode

没有安装的话, TypeScript 会找不到 node_modules/@types, 就报错了.

还需要安装 VS Code ZipFS extension

这是因为 Yarn 3 会用到 zip file

p.s. 每个项目都需要安装一次哦

Multiple wordspace issue

如果你通过项目的 parent folder 打开 VS Code, 你会发现 ESLint 会报错

error log

如果是在 test-material-web folder 打开, 则一切正常, 所以我觉得应该是 multiple workspace 的问题.

然后我找到了一个 VS Code 关于 Yarn PnP 的 issue: Choose different Typescript version for projects in multi root workspaces (needed for Yarn PnP)

他的问题是使用 Yarn PnP 无法在 multiple workspace 情况下选择不同版本的 TypeScript. 虽然和我遇到的不同但是应该是类似的问题.

Yarn 3 with TypeScript esbuild

之前有写过一篇 TypeScript – Work with JavaScript Library (using esbuild).

可以 follow 搭环境的部分去做.

和 Yarn 1 主要的区别有几点

1. 需要安装 plugin for esbuild

yarn add @yarnpkg/esbuild-plugin-pnp --dev

2. 需要使用 esbuild.js (类似一个 config file, 为了引入 plugin)

const esbuild = require("esbuild");
const { pnpPlugin } = require("@yarnpkg/esbuild-plugin-pnp");

esbuild
  .build({
    entryPoints: ["./index.ts"],
    minify: process.env.NODE_ENV === "production",
    bundle: true,
    outfile: "./bundle.js",
    plugins: [pnpPlugin()],
  })
  .catch(() => process.exit(1));

3. 运行 command 需要加上 yarn

yarn node esbuild.js

Yarn 3 with Webpack

之前有写过一篇 Webpack 学习笔记

Webpack 5.0 直接支持 Yarn 3, 什么都不需要安装. 

用 yarn init -2 做初始化, 然后照着把所有需要的加进去就可以了.

关键: 只有一个点不一样. 不可以用 npm start, 要改成 yarn start, 这样就 ok 了.

Migration Yarn 1 to 3

为了测试, 我是像上面那样 uninstall Node.js, 然后重新安装 Node.js 和 Yarn 1 (下载 msi)

接着就 follow 官网的 step 做: Yarn Migration

Without PnP

它分 2 个环节

第一个是升级 Yarn, 但没有使用 Plug'n'Play (PnP), node_modules 依然还在那里.

因为不是所有 library 都支持 PnP, 比如 esbuild 需要一个 PnP plugin 才支持, Webpack 要 v5 才支持 (v4 需要 plugin).

所以要确保你依赖的 library 支持 Yarn 3 才可以转去 PnP 哦.

叉的部分是不重要或我的项目不需要的, 所以我不重视.

注意第 10, yarn outdated 没有了, 却而代之的是 yarn upgrade-interactive, 要运行这个需要安装 yarn plugin import interactive-tools

它用起来是这样的.

keyboard 上下左右 enter 操作

 With PnP

without PnP 会把 nodeLinker set 成 node_modules, 在这里换成 pnp 或者删除它 (因为默认就是 pnp 了)

建议大家可以 yarn init -2 创建一个新项目来对比一下 migration 的版本.

比如 .gitignore

我的发现是 .yarn 里面有些 folder 是必须的, cache (最大的) 则可以不要

.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

# Swap the comments on the following lines if you don't wish to use zero-installs
# Documentation here: https://yarnpkg.com/features/zero-installs
!.yarn/cache
#.pnp.*

.editor.config

root = true

[*]
end_of_line = lf
insert_final_newline = true

[*.{js,json,yml}]
charset = utf-8
indent_style = space
indent_size = 2

migration 可能会撞, 要小心哦.

遇到 Bug

我以为等了一个 version, 从 Yarn 2 到 Yarn 3 应该不会遇到什么 Bug 了吧. 不可能还算早鸟吧.

还是太天真...

今天遇到一个 error: The TypeScript language service died 5 times right after it got started. The service will not be restarted

我猜是 Yarn 3 造成的, 于是拿一个 Yarn 1 来跑. 果然是

然后就开始排查. 最后确定是 sdk 的问题, 就去 Github 开 Issue

Yarn 开 Issue 很苛刻, 指明要用 Sherlock 做 reproduction. 不然不处理. 但我不会啊, 而且这个又牵涉到 VS Code 和 TypeScript, Sherlock 未必就搞的出来吧.

不管就直接提交了.

结果他们不到 5 分钟就回复我了, 给了我一个 RC 版本.

安装以后问题就解决了, 也不知道是我倒霉还是怎么着...纳闷...