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
長期以來,西方美學以《維特魯威人》式的幾何比例定義「完美身體」,這種視覺標準無形中成為殖民擴張與種族分類的暴力工具。本文透過分析奈及利亞編舞家庫德斯.奧尼奎庫的舞作《轉轉生》,探討當代非洲舞蹈如何跳脫「標本式」的文化觀看。
Thumbnail
長期以來,西方美學以《維特魯威人》式的幾何比例定義「完美身體」,這種視覺標準無形中成為殖民擴張與種族分類的暴力工具。本文透過分析奈及利亞編舞家庫德斯.奧尼奎庫的舞作《轉轉生》,探討當代非洲舞蹈如何跳脫「標本式」的文化觀看。
Thumbnail
前言這一篇會針對三個名詞做一些解釋,這些名詞是建立 React 專案,需要會的工具,包含了:Babel 是什麼?Webpack 是什麼?Npm 是什麼?當然主要介紹的是使用這些工具的概念,但是還是有其他工具可以做選擇,例如:Npm 之於 Yarn。這一篇會針對三個名詞做一些解釋,這些名詞是建立 R
Thumbnail
前言這一篇會針對三個名詞做一些解釋,這些名詞是建立 React 專案,需要會的工具,包含了:Babel 是什麼?Webpack 是什麼?Npm 是什麼?當然主要介紹的是使用這些工具的概念,但是還是有其他工具可以做選擇,例如:Npm 之於 Yarn。這一篇會針對三個名詞做一些解釋,這些名詞是建立 R
Thumbnail
若說易卜生的《玩偶之家》為 19 世紀的女性,開啟了一扇離家的窄門,那麼《海妲.蓋柏樂》展現的便是門後的窒息世界。本篇文章由劇場演員 Amily 執筆,同為熟稔文本的演員,亦是深刻體察制度縫隙的當代女性,此文所看見的不僅僅是崩壞前夕的最後發聲,更是女人被迫置於冷酷的制度之下,步步陷入無以言說的困境。
Thumbnail
若說易卜生的《玩偶之家》為 19 世紀的女性,開啟了一扇離家的窄門,那麼《海妲.蓋柏樂》展現的便是門後的窒息世界。本篇文章由劇場演員 Amily 執筆,同為熟稔文本的演員,亦是深刻體察制度縫隙的當代女性,此文所看見的不僅僅是崩壞前夕的最後發聲,更是女人被迫置於冷酷的制度之下,步步陷入無以言說的困境。
Thumbnail
Bun 在 2023/9/8 釋出了 1.0 版本,這篇文章就來說一下為什麼 Bun 會被關注,還有該怎麼使用它。
Thumbnail
Bun 在 2023/9/8 釋出了 1.0 版本,這篇文章就來說一下為什麼 Bun 會被關注,還有該怎麼使用它。
Thumbnail
Vue 筆記,Nuxt 簡介
Thumbnail
Vue 筆記,Nuxt 簡介
Thumbnail
本文深度解析賽勒布倫尼科夫的舞臺作品《傳奇:帕拉贊諾夫的十段殘篇》,如何以十段殘篇,結合帕拉贊諾夫的電影美學、象徵意象與當代政治流亡抗爭,探討藝術在儀式消失的現代社會如何承接意義,並展現不羈的自由靈魂。
Thumbnail
本文深度解析賽勒布倫尼科夫的舞臺作品《傳奇:帕拉贊諾夫的十段殘篇》,如何以十段殘篇,結合帕拉贊諾夫的電影美學、象徵意象與當代政治流亡抗爭,探討藝術在儀式消失的現代社會如何承接意義,並展現不羈的自由靈魂。
Thumbnail
全新版本的《三便士歌劇》如何不落入「復刻經典」的巢臼,反而利用華麗的秀場視覺,引導觀眾在晚期資本主義的消費愉悅之中,而能驚覺「批判」本身亦可能被收編——而當絞繩升起,這場關於如何生存的黑色遊戲,又將帶領新時代的我們走向何種後現代的自我解構?
Thumbnail
全新版本的《三便士歌劇》如何不落入「復刻經典」的巢臼,反而利用華麗的秀場視覺,引導觀眾在晚期資本主義的消費愉悅之中,而能驚覺「批判」本身亦可能被收編——而當絞繩升起,這場關於如何生存的黑色遊戲,又將帶領新時代的我們走向何種後現代的自我解構?
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
有一天有位大神問我你知道npm yarn pnpm bun 之間的差別?我突然楞神一下!!!! 好吧我從未想過這個問題於是我開始研究 使用方式:與其他工具類似,通過命令行使用,但具有自己的一些特定命令和功能。 適合情境:目前在市場上使用較少,主要在一些追求性能和速度優化的專案中或者對於新技
Thumbnail
有一天有位大神問我你知道npm yarn pnpm bun 之間的差別?我突然楞神一下!!!! 好吧我從未想過這個問題於是我開始研究 使用方式:與其他工具類似,通過命令行使用,但具有自己的一些特定命令和功能。 適合情境:目前在市場上使用較少,主要在一些追求性能和速度優化的專案中或者對於新技
Thumbnail
Vue3 學習筆記,專案建立與基礎響應式篇
Thumbnail
Vue3 學習筆記,專案建立與基礎響應式篇
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