大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

今天给大家带来的主题是 Bun v0.8.0发布，一起细数下该版本带来的那些新特性。

概览

Bun v0.8.0 添加了调试器支持，实现了获取流，并解锁了 SvelteKit。 实现了来自 node:tty 的 ReadStream 和 WriteStream，并且 .setRawMode() 现在适用于 process.stdin，从而解锁了多个交互式 CLI 工具。 加上 Node.js 兼容性更新、错误修复、稳定性改进。

同时，值得一提的是 Bun 1.0 将于 9 月 7 日推出！

Bun 是一个速度极快的 JavaScript 运行时，集打包器、转译器和包管理器于一身。 最近官方团队对 Bun 进行了很多更改，下面是最近几个版本的变更回顾。

• v0.7.0 ：支持 Web Workers、--smol、structuredClone()、WebSocket 可靠性改进、node:tls 修复等。
• v0.7.1 ：支持 ES 模块加载速度提高 30-250%、fs.watch 修复以及大量 node:fs 兼容性改进。
• v0.7.2 ： 实现 node:worker_threads, node:diagnostics_channel 和 BroadcastChannel。
• v0.7.3 ： Bun 测试中的覆盖率报告，以及使用 Bun Test -t 进行测试过滤。

使用下面命令可以快速安装 Bun：

npm install -g bun
// 安装
bun upgrade
// 更新

接下来一起详细看看每一个具体的特性详情。

调试器（debugger）支持

Bun 现在通过 WebKit 的 Inspector Protocol 实现调试器支持，可以使用 --inspect 标志运行文件或脚本。

const server = Bun.serve({
  fetch(req) {
    console.log(req.url);
    return new Response('Hello world!');
  },
});
console.log(`Listening on http://localhost:${server.port}`);

当使用 --inspect 运行此文件时，会启动 HTTP 服务器并在未使用的端口上启动本地主机 WebSocket 服务器。 该 WebSocket 服务器使用 Inspector 协议与调试工具进行通信，调试工具可以检查和控制正在运行的 bun 进程。

bun --inspect server.ts
Listening on http://localhost:3000
------------------ Bun Inspector ------------------
Listening at:
  ws://localhost:6499/0tqxs9exrgrm

Inspect in browser:
  https://debug.bun.sh/#localhost:6499/0tqxs9exrgrm
------------------ Bun Inspector ------------------

使用 debug.bun.sh

--inspect 标志还会将 https://debug.bun.sh# URL 打印到控制台。 该域 debug.bun.sh 托管专为调试 Bun 而设计的 Safari 开发人员工具的精简版本。 在首选浏览器中打开链接，新的调试会话将自动启动。

从 Web 调试器中，可以检查当前运行的代码并设置断点。 一旦触发断点，可以：

• 查看 scope 内的所有变量
• 在控制台中执行代码，完全访问 scope 内的变量和 Bun API
• 逐步（step-by-step）执行代码

bun update

新的 bun update 命令会将所有项目依赖项更新为与 package.json 中的 semver 范围兼容的最新版本。

bun update
bun update zod
// 更新指定包

值得注意的是，与 npm 不同，bun update 命令是为升级 Bun 本身而保留的，不是 bun update 的别名。

支持 SvelteKit

Worker 中对环境变量的改进支持已为 SvelteKit 打通了道路，可以使用 create-svelte 搭建项目。

bunx create-svelte my-app
create-svelte version 5.0.5

┌  Welcome to SvelteKit!
│
◇  Which Svelte app template?
│  SvelteKit demo app
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◇  Select additional options (use arrow keys/space bar)
│  none
│
└  Your project is ready!

 Typescript
  Inside Svelte components, use <script lang="ts">

Install community-maintained integrations:
  https://github.com/svelte-add/svelte-add

通过下面命令安装依赖项并启动开发服务器：

cd my-app
bun install
bun run dev -- --open

打开 localhost:3000 查看演示 SvelteKit 应用程序的运行情况。

支持 Nuxt（nuxt 开发）

通过改进的 node:tty 和 node:fs 支持，Nuxt 开发服务器现在可以与 Bun 运行时配合使用。首先，请使用 nuxi 命令行工具。

bunx --bun nuxi init my-app
cd my-app
bun install

安装依赖项后，使用“dev”package.json 脚本启动开发服务器。

bun --bun run dev
 $ nuxt dev
Nuxt 3.6.5 with Nitro 2.5.2
  > Local:    http://localhost:3000/
  > Network:  http://192.168.0.21:3000/
  > Network:  http://[fd8a:d31d:481c:4883:1c64:3d90:9f83:d8a2]:3000/

 Nuxt DevTools is enabled v0.8.0 (experimental)
i Vite client warmed up in 547ms
 Nitro built in 244 ms

--bun 标志确保服务器使用 Bun 运行时而不是 Node.js。默认情况下，nuxt CLI 使用 Node.js。然后访问 http://localhost:3000 即可看到默认的 Nuxt 欢迎屏幕。

注意 - Nuxt 的构建命令仍然存在一些问题。进行生产构建时，请使用 bun run build 而不是 bun --bun run build。这将使用 Node.js 来运行 Nuxt 的构建管道。

获取响应正文流(Fetch response body streaming)

Bun 现在实现了 fetch() 响应正文流，这意味着开发者现在可以从获取响应流式传输数据，而不是等待下载整个响应。

const res = await fetch('https://example.com/bigfile.txt');

// read the response chunk-by-chunk!
for await (const chunk of res.body) {
  console.log(chunk);
}

在 Bun 中使用 OpenAI

当使用需要一段时间才能响应的 API 时，流式传输尤其有用，现在开发者可以在 Bun 中传输来自 OpenAI API 的响应。

import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: 'my api key',
});

const stream = await openai.chat.completions.create({
  model: 'gpt-4',
  messages: [{ role: 'user', content: 'Say this is a test' }],
  stream: true,
});

for await (const part of stream) {
  process.stdout.write(part.choices[0]?.delta?.content || '');
}

Bun.serve() 流式改进

以前，以下内容将缓冲响应正文，这意味着只有在生成整个正文后才会发送响应。

import { serve, sleep } from 'bun';
serve({
  fetch(req) {
    return new Response(
      new ReadableStream({
        async pull(controller) {
          for (let i = 0; i < 20; i++) {
            controller.enqueue('Hello world!');
            await sleep(42);
          }

          controller.close();
        },
      })
    );
  },
});

// Hello World!Hello World!Hello World!...[~840ms]

现在，响应正文是流式传输的，这意味着它在生成时会发送到客户端。

import { serve, sleep } from 'bun';
serve({
  fetch(req) {
    return new Response(
      new ReadableStream({
        async pull(controller) {
          for (let i = 0; i < 20; i++) {
            controller.enqueue('Hello world!');
            await sleep(42);
          }

          controller.close();
        },
      })
    );
  },
});

// Hello world! [42ms]
// Hello world! [42ms]
// Hello world! [42ms]

以前，只有在使用类型为“direct”的 ReadableStream 时才支持流式传输，这是特定于 Bun 的流式传输快速路径。

import { serve, sleep } from 'bun';
serve({
  port: 3000,
  fetch(req) {
    return new Response(
      new ReadableStream({
        // bun specific option
        type: 'direct',

        async pull(controller) {
          for (let i = 0; i < 20; i++) {
            controller.write('Hello world!');

            // in bun < 0.8.0, flush() was required
            controller.flush();

            // now bun will automatically flush pending writes once the microtask queue is drained
            await sleep(42);
          }

          controller.end();
        },
      })
    );
  },
});

// Hello world! [42ms]
// Hello world! [42ms]
// Hello world! [42ms]
// Hello world! [42ms]

Bun 仍然需要进行优化工作，以使使用默认 ReadableStream 类型的流式传输速度更快。目前，建议使用 type: "direct" 以获得最快的流媒体传输。

支持 node:tty 和 process.stdin.setRawMode()

node:tty 中的 ReadStream 和 WriteStream 类已实现，process.stdin 现在是 ReadStream 的实例。因此，现在可以在 process.stdin 上启用“原始模式（raw mode）”。

process.stdin.setRawMode(true);

支持 inquirer 和其他 prompt 库

这使得用户无需等待换行符即可读取按键，这对于交互式 CLI 工具非常重要，完全支持当前主流的 inquirer, enquirer, and prompts 。

运行以下命令，使用 Bun 和交互式 create-remix 命令行工具以交互方式搭建 Remix 应用程序。

bunx --bun create-remix

Bun test 的改进

Bun 现在支持 Jest 的 test.each 和 describe.each。这使得使用不同的输入运行相同的测试变得容易。

describe.each([
  [1, 1, 2],
  [1, 2, 3],
  [2, 1, 3],
])('add(%i, %i)', (a, b, expected) => {
  test(`returns ${expected}`, () => {
    expect(a + b).toBe(expected);
  });
});

bun test 现在支持额外的匹配器。这些匹配器是 jest-extend 的一部分，现在由 Bun test 原生支持，比如 .toSatisfy() 的示例用法：

const isOdd = (value: number) => value % 2 !== 0;
it('toSatisfy', () => {
  expect(1).toSatisfy(isOdd);
  expect(2).not.toSatisfy(isOdd);
});

其他优化

• Node.js Buffer.toString("hex") 函数通过 SIMD 进行了优化，性能提高了 40 倍。 在下一个版本的 Bun 中 Buffer.toString("hex") 速度提高了 40 倍
• 现在可以使用 Bun.inspect.custom 符号通过自定义格式化程序来增强对象。出于兼容性原因，Node.js 的 node:util 中的 util.inspect.custom 也可以工作。
• File 构造函数已添加为新的全局构造函数，可以构造文件实例。
• 缓冲区相关函数中的 JIT 崩溃已得到修复。 此崩溃是由传递给 DOMJIT 时不正确的副作用引起的，这导致调用函数时在类型验证期间崩溃。 这影响了多个库，并且在 Bun v0.7.3 中的 JavaScriptCore 升级后开始崩溃。

参考资料

https://www.oschina.net/news/255202/bun-v0-8-0-released

https://bun.sh/blog/bun-v0.8.0#fetch-response-body-streaming