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
之前有写过一篇 .
可以 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 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/* !.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 可能会撞, 要小心哦.