vocus logo

方格子 vocus

Bun 1.0 初試

更新 發佈閱讀 4 分鐘

Bun 在 2023/9/8 釋出了 1.0 版本,這篇文章就來說一下為什麼 Bun 會被關注,還有該怎麼使用它。

Bun Intro

Bun 用於開發、測試、運行與打包 JavaScript 或 TypeScript 專案,它將執行階段( runtime )和工具包合成一體化的 JavaScript 進而來提升速度。其中包含打包工具( 如:Webpack、Vite )、測試運行器和與 Node.js 兼容的 package manager( 如:npm、pnpm )。

Bun 的目標就是要替代 Node.js,成為世界上最多使用 JavaScript 運行的伺服器,Bun 有著更高的性能和降低複雜度。

有這樣的目標也難怪大家會這麼關注 Bun 了,而目前整體使用下來,這個目標感覺真的有機會成功。( 對的,沒人 care Deno 🤣 )

為什麼能提高速度?

Node.js 和 Deno 它們都是使用 Chrome V8 引擎來執行的,而 Bun 是使用 Safari 的 JavaScriptCore 來建構的,所以速度上更快。

以下是由 Bun 官方所測試出來的比較圖:

Benchmark

Benchmark

Bun APIs

上面有說到,Bun 的目標是為了要取代 Node.js,所以也有很多相對應的 APIs 相應而生,像是讀取檔案就可以使用:

const file = Bun.file(import.meta.dir + '/package.json');

const pkg = await file.json();
pkg.name = 'my-package';
pkg.version = '1.0.0';

await Bun.write(file, pkg);

其他更多的 APIs 可以參考 Bun guides

Bundler

Bundler 就像是 Node.js 的 npm,是用來管理套件管理器,官網標榜比 npm 快 30 倍、比 pnpm 快 17 倍。

用起來的方式基本與 npm 一樣,這邊簡單介紹一下:

npm vs bundler

npm vs bundler

Bun 還可以使用 Git 來獲得 dependency:

bun add git+https://github.com/lodash/lodash.git
bun add github:colinhacks/zod

Installation

首先,先確認自己的環境,如果你的環境是 macOS 與 Linux,那基本上沒什麼問題,但如果你的環境是 Windows,Bun 就會被限制,頂多只能運行不能做其他動作。

這裡我會使用 Linux 環境來示範。如果是 Linux 需要先有 unzip 再輸入:

curl -fsSL https://bun.sh/install | bash 
如果是 Fish Shell 使用者,Bun 在安裝時就會幫你配置好路徑了

Quick Start

新建資料夾:

mkdir test-bun
cd test-bun

運行以下指令初始化專案:

bun init

來建立一個簡單的 HTTP server,修改專案裡的 index.ts

// index.ts
const server = Bun.serve({
port: 3000,
fetch(req) {
return new Response(`Bun!`);
},
});

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

運行:

bun index.ts

接著訪問 http://localhost:3000 就可以看到建立好的伺服器了。

使用 Vite 與 Bun 建構前端

根據 Build a frontend using Vite and Bun 敘述,雖然還沒有優化,不過 Vite 與 Bun 是可以一起使用的。

使用 Bun 來建構 Vite 專案:

bunx create-vite my-app

結語

整體使用下來最有感的莫非就是 bundler,速度比以前介紹的 pnpm 還要快。一些 API 的使用方式比 Node.js 來的簡單並且效能也更好,運用在後端的建構上是非常方便的。

目前前端會使用到的還是打包工具與 bundler,運行的部分可能還是要交由 Vite 之類的,React 是可以直接與 Bun 結合使用的,不過 Vite 可能就還要在等上一陣子了。

Github
Mango Blog

留言
avatar-img
Soft Code
2會員
4內容數
簡單的了解一個關於程式相關的主題
Soft Code的其他內容
2024/04/24
最近在練習使用 CSS 來製作一些簡單的動畫,以下是我收集資料與實作的成果。製作一張可以水平翻轉的卡片,這邊會使用 Vue.js 來簡化邏輯,主要是解釋 CSS 的部分。
Thumbnail
2024/04/24
最近在練習使用 CSS 來製作一些簡單的動畫,以下是我收集資料與實作的成果。製作一張可以水平翻轉的卡片,這邊會使用 Vue.js 來簡化邏輯,主要是解釋 CSS 的部分。
Thumbnail
2024/01/28
非同步程式設計(Asynchronous programming) 或是簡單的稱之為 async,它是一種並發程式模型(concurrent programming model),其目的就是讓多個任務能同時在作業系統的執行緒上執行,並透過 async/.await 保留同步。
Thumbnail
2024/01/28
非同步程式設計(Asynchronous programming) 或是簡單的稱之為 async,它是一種並發程式模型(concurrent programming model),其目的就是讓多個任務能同時在作業系統的執行緒上執行,並透過 async/.await 保留同步。
Thumbnail
2023/10/02
對於剛學習 Rust 的人來說,最一開始不是看 Youtube 的影片或是跟著 Rust 官方手冊 The Book 學習,這邊來推薦一個練習 Rust 的專案,名為 rustlings。 rustlings 包含著一些簡單的題目,來讓你更習慣閱讀或編寫 Rust 程式碼。該專案會在每道題目上給予
Thumbnail
2023/10/02
對於剛學習 Rust 的人來說,最一開始不是看 Youtube 的影片或是跟著 Rust 官方手冊 The Book 學習,這邊來推薦一個練習 Rust 的專案,名為 rustlings。 rustlings 包含著一些簡單的題目,來讓你更習慣閱讀或編寫 Rust 程式碼。該專案會在每道題目上給予
Thumbnail
看更多
你可能也想看
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
有一天有位大神問我你知道npm yarn pnpm bun 之間的差別?我突然楞神一下!!!! 好吧我從未想過這個問題於是我開始研究 使用方式:與其他工具類似,通過命令行使用,但具有自己的一些特定命令和功能。 適合情境:目前在市場上使用較少,主要在一些追求性能和速度優化的專案中或者對於新技
Thumbnail
有一天有位大神問我你知道npm yarn pnpm bun 之間的差別?我突然楞神一下!!!! 好吧我從未想過這個問題於是我開始研究 使用方式:與其他工具類似,通過命令行使用,但具有自己的一些特定命令和功能。 適合情境:目前在市場上使用較少,主要在一些追求性能和速度優化的專案中或者對於新技
Thumbnail
前言這一篇會針對三個名詞做一些解釋,這些名詞是建立 React 專案,需要會的工具,包含了:Babel 是什麼?Webpack 是什麼?Npm 是什麼?當然主要介紹的是使用這些工具的概念,但是還是有其他工具可以做選擇,例如:Npm 之於 Yarn。這一篇會針對三個名詞做一些解釋,這些名詞是建立 R
Thumbnail
前言這一篇會針對三個名詞做一些解釋,這些名詞是建立 React 專案,需要會的工具,包含了:Babel 是什麼?Webpack 是什麼?Npm 是什麼?當然主要介紹的是使用這些工具的概念,但是還是有其他工具可以做選擇,例如:Npm 之於 Yarn。這一篇會針對三個名詞做一些解釋,這些名詞是建立 R
Thumbnail
Vue 筆記,Nuxt 簡介
Thumbnail
Vue 筆記,Nuxt 簡介
Thumbnail
 yarn 是由 facebook 開發的一款套件管理工具,用來管理 node.js 套件版本,今天來學習如何使用 yarn 升級 package.json 版號管理,可以對一個專案版號管理更加制式化 major 目標升級版號 指令 yarn version --new-version maj
Thumbnail
 yarn 是由 facebook 開發的一款套件管理工具,用來管理 node.js 套件版本,今天來學習如何使用 yarn 升級 package.json 版號管理,可以對一個專案版號管理更加制式化 major 目標升級版號 指令 yarn version --new-version maj
Thumbnail
Vue3 學習筆記,專案建立與基礎響應式篇
Thumbnail
Vue3 學習筆記,專案建立與基礎響應式篇
Thumbnail
Bun 在 2023/9/8 釋出了 1.0 版本,這篇文章就來說一下為什麼 Bun 會被關注,還有該怎麼使用它。
Thumbnail
Bun 在 2023/9/8 釋出了 1.0 版本,這篇文章就來說一下為什麼 Bun 會被關注,還有該怎麼使用它。
Thumbnail
這一篇文章,我想來談談模板語言(template language/engine)。而其中比較有名的為handlebar、pug、ejs。那我會的事後兩著,因此拿這兩個出來寫一篇文章。 Pug 指令:npm install pug 比起 HTML 的語法,pug 語法可以說簡潔很多。 那下面
Thumbnail
這一篇文章,我想來談談模板語言(template language/engine)。而其中比較有名的為handlebar、pug、ejs。那我會的事後兩著,因此拿這兩個出來寫一篇文章。 Pug 指令:npm install pug 比起 HTML 的語法,pug 語法可以說簡潔很多。 那下面
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News