繁體中文
jason's blog關於網頁標準、瀏覽器與前端開發的觀察筆記

文章分類: 前端工具

一份 HTML 就能開始開發:Bun 1.3 的前端工具

用一個小型互動頁面,看 Bun 1.3 如何從 HTML 啟動開發、處理資源,並產生可部署的檔案。

發布 2025/10/10

有時候只是想寫一小段 JavaScript,最後卻先開了一個完整專案。選框架、選範本、等套件裝好,做完這些,原本想試的東西可能才十幾行。不能說工具有錯,只是偶爾會懷念開個 HTML 就開始寫的感覺。

Bun 1.3 在 2025 年 10 月發布時,最吸引我的是這個指令:

bun ./index.html

就這樣,用 HTML 啟動開發伺服器。它會沿著頁面引用去處理 JavaScript、CSS 等資源,也有打包與 HMR 支援。Bun 本來就把執行環境、套件管理和建置工具放在一起,這次只是讓那個入口變得很直覺。

我喜歡這個起點。像是想做一個簡單的費用試算,輸入人數後顯示總額,先有一個畫面、一點程式就夠了。真的需要外部套件時再加,不必一開始就決定整個網站未來要長什麼樣子。

不過也不用把它講成什麼全新的開發方式。直接寫 HTML 一直都可以,Vite 也早就能從 HTML 開始。Bun 這次方便的地方,是如果本來就用它,現在少了另外安排開發伺服器和打包工具的步驟。少一點設定,在小專案裡其實就滿有感。

準備上線時,再把檔案打包:

bun build ./index.html --production --outdir=dist

像前面那種完全在瀏覽器裡算金額的小頁面,把輸出放到能提供靜態檔案的空間就行。但要是後來加了會員、資料庫或自己的 API,那些後端需求不會因為這個指令就一起解決。

至於既有 Nuxt 專案,我不會為了這個把原本的建置流程換掉。框架替我們安排的路由、資料載入和部署方式,都不只是把檔案打包而已。

比較可能的用法,是下次腦中冒出一個小點子,先開個 index.html。試完不好玩,就留在那裡也沒關係。至少不用先花半個晚上把專案弄好,才發現真正想做的畫面其實沒有那麼有趣。

資料來源與延伸閱讀