解决从 yarn 迁移到 bun 的依赖包版本问题

[jrainlau]

最近遇到一个很有意思的东西，就是我们团队的项目，将要从 yarn 迁移到 bun，以利用 bun 更快的速度去完成依赖安装、项目构建等工作。但是在迁移的过程中发现了一个很严重的问题——依赖包的版本号。

在原本的 package.json 中，我们使用了 ^ 去写版本号，比如说

{
  "tdesign-react": "^1.5.0"
}

但是在 yarn.lock 文件中，却是这样的：

tdesign-react@^1.5.0:
  version "1.7.6"

因此我们在很长一段时间内其实用的是 [email protected] 的版本。

当我们尝试把 yarn 迁移到 bun，执行 bun install 的时候，发现真正所安装的 tdesign-react 已然是最新的版本 1.10.4。这个版本相对于之前的 1.7.6 有很多修改，导致我们的应用有许多地方表现有差异。除了这个依赖包意外，我们的项目非常庞大，存在着许多新旧版本并不兼容的依赖，因此不能直接这样暴力升级。

那有什么办法让 bun install 能够以旧的 yarn.lock 为准去安装依赖呢？查遍了 bun 的 ISSUE，发现直到目前为止，bun 还是无法直接读取 yarn.lock。

Support yarn.lock in bun pm migrate #6409oven-sh/bun#6409 这是在 2023 年提的 ISSUE，看起来官方暂时没有计划支持。

好消息是，bun 支持读取 package-lock.json，具体可以看 这条 ISSUE。因此可以猜测，我们是不是可以曲线救国，想办法把 yarn.lock 变成 package-lock.json，再让 bun 基于这个 package-lock.json 生成自己的 bun.lockb 呢？

还真被我找到了，只需要两步：

# 使用 synp 把 yarn.lock 变成 package-lock.json 的 V2 版本（带 --with-workspace 会自动使用支持 workspace 的 V2 版本）
bunx synp --source-file ./yarn.lock --with-workspace

# 基于 package-lock.json 生成 bun.lockb
bun pm migrate

如果这样的两步法失败，可以试试三步法：

1. bunx synp --source-file ./yarn.lock
2. npm i --lockfile-version 3 --frozen-lockfile
3. bun pm migrate

此时根目录下将会获得一个 bun.lockb，仔细看里面的版本号，将会和 yarn.lock 一致。

最后只需要执行 bun install，就可以下载和 yarn 同样版本号的依赖包了。

---

细心的读者会发现，在刚刚执行 synp 的时候，我加了一个 --with-workspace 的选项。回到之前那条 ISSUE，有个老哥说 synp 不支持 workspace，而且 bun 的官网也说自己的 workspace 写法有别与 yarn：

# yarn 的写法

{
  "@my/pkg": "*"
}

# bun 的写法

{
  "@my/pkg": "workspace: *"
}

bun 的这种奇葩写法不仅对 synp 不奏效，如果有一些使用了 workspace 的包发到 npm，当别人用非 bun 的包管理器下载时，也会出现问题。好就好在经过我的反复测试，发现在当前最新版的 bun 中，它已经默默支持了 yarn 的 workspace 写法。简单分享下我的实验项目：

.
├── README.md
├── bun.lockb
├── index.ts
├── package.json
├── packages
│   ├── pkg-a
│   │   ├── index.ts
│   │   └── package.json
│   ├── pkg-b
│   │   ├── index.ts
│   │   └── package.json
│   └── pkg-c
│       ├── index.ts
│       └── package.json
└── tsconfig.json

其中 pkg-a，pkg-b，pkg-c都存放于 workspace 中，通过根目录 package.json 的 "workspaces": ["packages/*"] 配置。其中 pkg-a 和 pkg-b 都分别引用了 pkg-c：

而 index.ts 就是简单的把它俩引用并输出

import a from '@my/pkg-a';
import b from '@my/pkg-b';

console.log(a, b);

无论是执行 bun run index.ts，还是最终通过 bun build index.ts --outfile bundle.js，最后都能获得正确的输出：

 _______
< pkg-a >
 -------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||  _______
< pkg-b >
 -------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

所以可以放心大胆地用起来了！