跳转到内容

在 Astro 中使用 Bun

Bun 是一个 all-in-one 的 JavaScript 运行时和工具套件。可请参阅 Bun 的文档 获取更多信息。

  • 在你的机器上安装了 Bun。请参阅 Bun 官方文档的 安装说明

使用 Bun 创建一个新的 Astro 项目

段落标题 使用 Bun 创建一个新的 Astro 项目

使用以下 create-astro 命令并通过 Bun 创建一个新的 Astro 项目:

Terminal window
bunx create-astro@latest my-astro-project-using-bun

如果你正使用 bunx create-astro 创建一个新的项目,CLI 将会自动使用 Bun 安装依赖,所以你可以跳过这一步。

否则,你需要使用 Bun 安装依赖:

Terminal window
bun install

Bun 发布了含有 Bun 的运行时类型的 bun-types 包。

使用以下命令安装 bun-types

Terminal window
bun add -d bun-types

tsconfig.json 文件中将该包添加到你的类型中:

tsconfig.json
"compilerOptions": {
"types": ["bun-types"]
}

你也可以通过 astro add 命令来使用任意 Astro 官方集成:

Terminal window
bunx astro add react

为了运行开发服务器并使用 Bun 作为运行时,请使用以下命令:

Terminal window
bunx --bun astro dev

通过 Bun 构建你的站点

段落标题 通过 Bun 构建你的站点

为了使用 Bun 作为运行时构建你的站点,请使用以下命令:

Terminal window
bunx --bun astro build

Astro 会将你的站点输出到 dist/ 目录。然后,你可以使用 preview 命令来运行你的站点:

Terminal window
bunx --bun astro preview

通过 @astrojs/node 来让 Bun 添加 SSR

段落标题 通过 @astrojs/node 来让 Bun 添加 SSR

Bun 提供了 Node.js API 兼容性 的功能。使用 @astrojs/node 适配器,你可以通过 Bun 的运行时来替代 Node 来为你的 Astro 项目添加 服务器端渲染

运行如下命令来为你的 Astro 项目添加 Node.js 适配器:

Terminal window
bunx astro add node

接着,使用和前面相同的构建命令来再次构建你的站点:

Terminal window
bunx --bun astro build

最后,使用如下命令来运行你构建后的站点。

Terminal window
bun ./dist/server/entry.mjs

Bun 通过 bun test 命令提供了一个快速的、内置的、兼容 Jest 的测试运行器。如果你想使用它,请阅读 bun test 文档

当然,你也可以使用 Cypress 或 Playwright 来测试你的网页应用。

Cypress 是一个前端测试工具,其使命是“让测试体验变得愉快并带来开发者的快乐”。这使你可以为你的 Astro 站点编写端到端测试。

用以下命令安装 Cypress:

Terminal window
bun add cypress --dev

对于其余的配置和开始你的第一个测试,请参阅 Astro 测试指南 中的 Cypress 测试部分。

Playwright 是一个端到端测试框架,它允许你在所有现代渲染引擎上测试你的 Astro 代码,包括 Chromium、WebKit 和 Firefox。

用以下命令安装 Playwright:

Terminal window
bun create playwright

要创建你的第一个 Playwright 测试,请按照 Astro 测试指南 中的其余 Playwright 测试流程。

已经在 Astro 项目中使用 Bun?请在此页面添加你的博客文章或视频!