使用 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 文件以瞭解更多資訊。