使用 Remix 和 Bun 构建应用

Remix 3 是一个由独立软件包构建的 Web 框架：路由器、HTML 渲染、会话、表单解析等。这些软件包以 remix 软件包的形式一起分发。Remix 3 在处于 beta 阶段期间以 npm 上的 next 标签发布。其服务器无需修改即可在 Bun 上运行。

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

terminal

bunx remix@next new my-remix-app

Text

• 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

Text

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", // [!code --]
    "dev": "bun --watch server.ts", // [!code ++]
    "start": "NODE_ENV=production node --import remix/node-tsx server.ts", // [!code --]
    "start": "NODE_ENV=production bun server.ts" // [!code ++]
  }
}

terminal

bun run dev

Text

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

路由器是一个 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 文档以了解更多信息。