使用 Remix 和 Bun 构建应用

Remix 3 是一个由独立软件包构建的 Web 框架（路由器、HTML 渲染、会话、表单解析等），这些软件包会作为 remix 软件包一起分发。在处于 beta 阶段期间，它以 npm 上的 next 标签发布，并且其服务器可以直接运行在 Bun 上。

本指南介绍 Remix 3。Remix 2 项目应改用 create-remix 创建。

使用 Remix CLI 搭建一个新项目。

terminal

bunx remix@next new my-remix-app

• Prepare target directory...
✓ Prepare target directory
• Generate scaffold files...
✓ Generate scaffold files
• Finalize package.json...
✓ Finalize package.json

Created My Remix App at my-remix-app

然后安装其依赖项。

terminal

cd my-remix-app
bun install

生成的 server.ts 会创建一个 node:http 服务器，将每个请求交给应用的路由器处理。Bun 会直接运行它；传入 --watch 后，每当它导入的文件发生更改时，服务器都会重启。

terminal

bun --watch server.ts

Server listening on http://localhost:44100

打开 http://localhost:44100 查看起始页面。路由位于 app/routes.ts 和 app/router.ts 中，起始主页由 app/actions/home-page.tsx 渲染。

package.json 中生成的 scripts 会使用 Node.js 和 remix/node-tsx TypeScript 加载器运行服务器。Bun 会自行运行 TypeScript，因此请改为让脚本指向 bun。

package.json

{
  "scripts": {
    "dev": "NODE_ENV=development node --watch --import remix/node-tsx server.ts", 
    "dev": "bun --watch server.ts", 
    "start": "NODE_ENV=production node --import remix/node-tsx server.ts", 
    "start": "NODE_ENV=production bun server.ts"
  }
}

terminal

bun run dev

$ bun --watch server.ts
Server listening on http://localhost:44100

生成的 hmr 脚本（hmr.ts）也会加载 remix/node-tsx，而它依赖 module.registerHooks()。Bun 尚未实现该 API（参见 Node.js 兼容性），因此该脚本无法在 Bun 下运行；而 bun --watch 会在发生更改时重启服务器。

路由器是一个 fetch 处理器，因此也可以使用 Bun.serve() 提供应用服务，而不是使用 node:http。

server.ts

import { router } from "./app/router.ts";

const server = Bun.serve({
  port: 44100,
  fetch: request => router.fetch(request),
});

console.log(`Server listening on ${server.url}`);

请参阅 Remix 文档以了解更多信息。

概述

部署

运行时与调试

实用工具

生态系统与框架

HTTP 与网络

WebSocket

进程与系统

包管理器

测试运行器

运行时与调试

模块系统

文件系统

实用工具

HTML 处理

二进制数据

Streams

使用 Remix 和 Bun 构建应用