在 Windows 上建立第一個 Bun 專案

之前在 Bun 是什麼? Bun 介紹和速度對比 這篇中介紹過 Bun,簡單來說就像是 Node.js 或 Deno 一樣的現代 JavaScript 執行環境,只是速度很快。

Bun 最近出了 v1.0.0 版本,筆者撰文當下已經變成 v1.0.3 了,該如何使用呢?在官網上找了半天,只有看到 macOS 和 Linux 的安裝方式,那 Windows 呢?

官網的 Installation 頁面看了半天,只有說 Bun 在 Windows 上提供了有限的、實驗性的功能,目前只有 runtime 可以使用,但是也沒有看到該如何安裝

最後在 Bun 1.0 發布頁面上看到可以加入到 Discord 中的 Windows 頻道:

不過筆者眼力不好,找了很久還是不知道哪裡可以下載:

所以目前還是使用古老的方式: 在 Windows Subsystem for Linux 中安裝,具體的安裝步驟可以查看 Windows 11 Docker 詳細安裝教學 這一篇,除了 Docker 不用安裝以外其他步驟照做一次,就會成功安裝一個 Ubuntu 的 Linux 子系統。開啟終端機,選擇 Ubuntu,接下來的指令都會在這裡輸入:

首先需要先安裝 unzip 套件,不然會出現下列錯誤:
    
curl -fsSL https://bun.sh/install | bash
error: unzip is required to install bun (see: https://github.com/oven-sh/bun#unzip-is-required)
    

安裝 unzip 指令:
    
sudo apt update && sudo apt install unzip
    

安裝 Bun:
    
curl -fsSL https://bun.sh/install | bash
    

範例輸出:
    
curl -fsSL https://bun.sh/install | bash
######################################################################## 100.0%
bun was installed successfully to ~/.bun/bin/bun

Added "~/.bun/bin" to $PATH in "~/.bashrc"

To get started, run:

  source /home/ruyut/.bashrc
  bun --help
    

將 bun 加入至環境變數中:
    
source /home/ruyut/.bashrc
    

檢查更新(確認 bun 安裝成功):
    
bun upgrade
    

範例輸出:
    
bun upgrade
Congrats! You're already on the latest version of bun (which is v1.0.3)
    

建立第一個 bun 專案

接下來就可以依照 bun 官網的快速開始示範建立一個專案了。

在 Linux 子系統裡面也一樣可以存取到本機的檔案,詳細可以參考 Windows 和 WSL 間的檔案存取和傳輸介紹 這篇。以筆者的電腦為例,筆者想要將專案路徑放置在下方的路徑內:
    
C:\Users\ruyut\Documents\WebstormProjects\2023\test\bun-quickstart
    

在 Linux 子系統中相對應的路徑就是:
    
/mnt/c/Users/ruyut/Documents/WebstormProjects/2023/test/bun-quickstart
    

需要注意的是雖然在 Windows 中路徑不區分大小寫,但是在 Linux 子系統中路徑會區分大小寫,如果大小寫不正確就會找不到路徑,可以善用鍵盤上的 Tab 按鍵自動補全路徑。

建立專案:
    
cd /mnt/c/Users/ruyut/Documents/WebstormProjects/2023/test
mkdir bun-quickstart
cd bun-quickstart/
bun init
    


這時候就可以在 Windows 主系統中使用檔案總管開啟這個資料夾,使用自己習慣的編輯器開啟 index.ts 檔案,檔案中預設有以下內容:
    
console.log("Hello via Bun!");
    

把官網的範例抄過去貼上:
    
const server = Bun.serve({
  port: 3000,
  fetch(req) {
    return new Response("Bun!");
  },
});

console.log(`Listening on http://localhost:${server.port} ...`);
    

回到 Linux 子系統中使用下面的指令執行:
    
bun index.ts
    

這時候使用網頁開啟 http://localhost:3000/ 就會收到回應訊息,這樣一個最簡單的 bun 專案就完成了。

參考資料:
Bun
stack overflow - How to install Bun on Windows without Windows Subsystem for Linux?

留言