Bun vs Node：必知必會(huì)

作者：大家的林語冰 2024-01-03 07:56:50

雖然 Bun 還處于早期發(fā)展階段，但它名噪一時(shí)毋庸置疑。目前，它針對(duì) MacOS 和 Linux 進(jìn)行了優(yōu)化，雖然 Windows 的支持正在進(jìn)行中，但某些功能即將推出。憑借它提供的一切，Bun 無疑是您應(yīng)該考慮探索的工具包。

大家好，這里是大家的林語冰。

JS 社區(qū)掀起了運(yùn)行時(shí)狂潮：Jarred Sumner 孵化的 Bun 1.0 官宣了。話雖如此，還是有一大坨道友很好奇：Bun 的本質(zhì)是什么鬼物？為什么每個(gè)人都將其與百煉成鋼的 Node 相提并論？Bun 只是另一種曇花一現(xiàn)的過眼云煙，還是會(huì)重新定義這場(chǎng)游戲？在本文中，讓我們深入 Bun，瞄一下其功能，并了解它與成熟的 Node 的異同點(diǎn)。

Bun 是什么鬼物？

Bun 是一款適用于 JS/TS App 的超快速一體化工具包。Bun 的魅力在于它能夠簡(jiǎn)化開發(fā)流程，比以往更絲滑高效。這并非不可能事件，因?yàn)?Bun 不僅僅是運(yùn)行時(shí)，它還是包管理器/打包器/測(cè)試運(yùn)行器。請(qǐng)想象一下，JS 開發(fā)有了一把瑞士軍刀；此乃 Bun 饋贈(zèng)與君之福利。

Bun 解決了什么問題？

Node 于 2009 年橫空出世。雖然但是，與一大坨技術(shù)一樣，隨著技術(shù)的發(fā)展，其復(fù)雜性也與日俱增。請(qǐng)將其想象成一座城市。隨著城市的擴(kuò)張，交通擁堵可能會(huì)成為一個(gè)問題。

Bun 旨在成為緩解這種擁堵的新基建，讓一切運(yùn)行得更絲滑。這絕非反復(fù)造輪子，而是對(duì)其優(yōu)化，確保我們?cè)讷@得速度和簡(jiǎn)單性的同時(shí)，不會(huì)喪失 JS 獨(dú)特和強(qiáng)大的本質(zhì)。

Bun 被設(shè)計(jì)為比 Node 更快、更精簡(jiǎn)、更現(xiàn)代的競(jìng)品，所以讓我們仔細(xì)瞄一下其比較。但首先讓我們按下不表。

Node vs Deno vs Bun

在討論 JS 運(yùn)行時(shí)的進(jìn)化史時(shí)，很難無視 Deno。“Node 之父”Ryan Dahl 推出了 Deno 作為一個(gè)新的運(yùn)行時(shí)，旨在解決在 Node 中發(fā)現(xiàn)的某些挑戰(zhàn)和遺憾。

Deno 是 JS/TS 的安全運(yùn)行時(shí)。它直接解決了 Node 的一大坨短板。舉個(gè)栗子，Deno 原生支持 TS，無需外部工具。與 Node 不同，Node 的腳本默認(rèn)具有廣泛的權(quán)限，Deno 采用安全第一的方法，要求開發(fā)者顯式授予潛在敏感操作的權(quán)限，比如文件系統(tǒng)訪問或網(wǎng)絡(luò)連接。

雖然 Deno 提供了一個(gè)引人注目的 Node 競(jìng)品，但它還沒有達(dá)到 Node 的廣泛采用程度。因此，本文主要將 Bun 與成熟的 Node 對(duì)比。

入門

有了 Bun，我們可以使用 bun init -y 命令構(gòu)建一個(gè)空項(xiàng)目。我們生成了若干文件，并在 index.ts 中添加一行 console.log('Hello, Bun!'')。在終端中運(yùn)行命令 bun index.ts，即可看到打印了 'Hello, Bun!'。

JS 運(yùn)行時(shí)

JS 運(yùn)行時(shí)是一個(gè)提供使用和運(yùn)行 JS 程序所需的所有組件的環(huán)境。

Node 和 Bun 都是運(yùn)行時(shí)。Node 主要使用 C++ 編寫，而 Bun 則使用一種名為 Zig 的低級(jí)通用編程語言編寫。但這只是冰山一角。讓我們仔細(xì)瞄一下 Bun 單獨(dú)作為運(yùn)行時(shí)的其他差異。

JS 引擎

JS 引擎是一種將我們編寫的 JS 代碼轉(zhuǎn)換為機(jī)器碼的程序，使計(jì)算機(jī)能夠執(zhí)行特定任務(wù)。

Node 使用為 Chrome 瀏覽器提供支持的谷歌 V8 引擎，而 Bun 使用 JSC（JavaScriptCore），這是蘋果為 Safari 瀏覽器開發(fā)的開源 JS 引擎。

V8 和 JSC 有不同的架構(gòu)和優(yōu)化策略。JSC 優(yōu)先考慮更快的啟動(dòng)時(shí)間和減少內(nèi)存占用，以及稍慢的執(zhí)行時(shí)間。另一方面，V8 優(yōu)先考慮快速執(zhí)行，并進(jìn)行更多運(yùn)行時(shí)優(yōu)化，這可能會(huì)導(dǎo)致更多的內(nèi)存占用。

這使得 Bun 速度更快，啟動(dòng)速度比 Node 快 4 倍。

圖片

總結(jié)：Bun 的運(yùn)行速度比 Deno 快 2.19 倍，比 Node 快 4.81 倍。

轉(zhuǎn)譯器

雖然 Node 是一個(gè)強(qiáng)大的 JS 運(yùn)行時(shí)，但它本身并不支持 TS。要在 Node 環(huán)境中執(zhí)行 TS，需要外部依賴。一種常見方案是使用構(gòu)建步驟將 TS 轉(zhuǎn)換為 JS，然后運(yùn)行生成的 JS 代碼。這是使用 tsx 包的基本設(shè)置：

安裝

pnpm add -D typescript tsx

在 package.json 中，您可以設(shè)置腳本來簡(jiǎn)化流程。

{
  "scripts": {
    "dev": "tsx hello-bun.ts"
  }
}

執(zhí)行

使用上述腳本，您可以輕松運(yùn)行 TS 文件：

pnpm dev

相比之下，Bun 提供了一種更精簡(jiǎn)的方法。它自帶集成到運(yùn)行時(shí)的 JS 轉(zhuǎn)譯器。這允許您直接運(yùn)行 .js/.ts/.jsx/.tsx 文件。Bun 的內(nèi)置轉(zhuǎn)譯器將這些文件無縫轉(zhuǎn)換為普通 JS，無需額外步驟即可立即執(zhí)行。

bun hello-bun.ts

運(yùn)行 TS 文件時(shí)，速度差異會(huì)被放大，因?yàn)?Node 在運(yùn)行前需要一個(gè)轉(zhuǎn)譯步驟。

圖片

ESM 和 CJS 兼容性

模塊系統(tǒng)允許開發(fā)者將代碼組織成可復(fù)用片段。在 JS 中，兩個(gè)主要的模塊系統(tǒng)是 CJS（CommonJS）和 ESM（ES 模塊）。CJS 源自 Node，使用 require/module.exports 處理同步模塊，十分適合服務(wù)器端操作。

ES6 引入的 ESM 采用 import/export 語句，提供更加靜態(tài)和異步的方案，并針對(duì)瀏覽器和現(xiàn)代構(gòu)建工具進(jìn)行了優(yōu)化。讓我們?cè)V諸 CJS 使用 colors，訴諸 ESM 使用 chalk，這兩個(gè)流行的包用于向控制臺(tái)添加彩色輸出，并更好地理解模塊系統(tǒng)。

Node 傳統(tǒng)上與 CJS 模塊系統(tǒng)相關(guān)聯(lián)。這是一個(gè)經(jīng)典用法：

// Node 中的 CJS（index.js）
const colors = require('colors')
console.log(colors.green('Hello, Bun!'))

對(duì)于 Node 中的 ESM，您可以二選一：

您需要在 package.json 中包含 "type": "module"。
使用 .mjs 擴(kuò)展名。

// Node 中的 ESM（index.mjs）
import chalk from 'chalk'
console.log(chalk.blue('Hello, Bun!'))

從 CJS 過渡到 ESM 是一個(gè)復(fù)雜的過程。在 ESM 推出后，Node 花了 5 年時(shí)間才在沒有實(shí)驗(yàn)標(biāo)志的情況下支持它。盡管如此，CJS 在生態(tài)系統(tǒng)中依然人氣爆棚。

Bun 通過支持兩者而無需任何特殊配置，簡(jiǎn)化了模塊系統(tǒng)。Bun 的亮點(diǎn)功能是，它能夠在同一文件中同時(shí)支持 import/require()，這在 Node 中是不可能事件：

// Bun 中的混合模塊（index.js）
import chalk from 'chalk'
const colors = require('colors')

console.log(chalk.magenta('Hello from chalk!'))
console.log(colors.cyan('Hello from colors!'))

Web APIs

Web API 是瀏覽器筑基的 App 的組成部分，提供用于 Web 交互的工具，比如 fetch/WebSocket。雖然這些已經(jīng)成為瀏覽器標(biāo)準(zhǔn)，但它們對(duì) Node 等服務(wù)器端環(huán)境的支持卻不一致。

在 Node 的早期版本中，瀏覽器中常用的 Web 標(biāo)準(zhǔn) API 本身并不支持。開發(fā)者必須依賴 node-fetch 等第三方包來拷貝此功能。雖然但是，從 Node 18 開始，對(duì) fetch API 提供了實(shí)驗(yàn)性支持，可能消除了這些包的需求。

Bun 通過為這些 Web 標(biāo)準(zhǔn) API 提供內(nèi)置支持來簡(jiǎn)化這一過程。開發(fā)者可以直接使用穩(wěn)定的 fetch/Request/Response/WebSocket 等類似瀏覽器的 API，無需任何額外的包。此外，Bun 對(duì)這些 Web API 的原生實(shí)現(xiàn)，確保它們比第三方備胎更快、更可靠。

下面是一個(gè)兼容 Node（v18 及更高版本）和 Bun 的示例。雖然它在 Node 中是實(shí)驗(yàn)性的，但同款功能在 Bun 中是穩(wěn)定的：

// Node（v18 及更高版本）的實(shí)驗(yàn)性 fetch，以及 Bun 內(nèi)置的 fetch
async function fetchUserData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1')
  const user = await response.json()
  console.log(user.name)
}

fetchUserData() // Leanne Graham

熱重載

熱重載是一項(xiàng)功能，可在代碼更改時(shí)自動(dòng)刷新或?qū)崟r(shí)重新加載 App 的某些部分，提高開發(fā)者的工作效率，而無需完全重新啟動(dòng)。

在 Node 的生態(tài)系統(tǒng)中，您有一大坨選擇來實(shí)現(xiàn)熱重載。一種流行的工具是 nodemon，它會(huì)硬重啟整個(gè)過程：

nodemon index.js

或者，從 Node 18 開始，引入了一個(gè)實(shí)驗(yàn)性的 --watch 標(biāo)志：

node --watch index.js

這兩種方法的目的都是在代碼更改時(shí)提供 App 的實(shí)時(shí)重新加載。雖然但是，它們的行為可能一龍一豬，尤其是在某些環(huán)境或場(chǎng)景下。

舉個(gè)栗子，nodemon 可能會(huì)導(dǎo)致中斷，比如斷開 HTTP 和 WebSocket 連接，而 --watch 標(biāo)志處于實(shí)驗(yàn)階段，可能無法提供全套功能。

Bun 的熱重載更進(jìn)一步。通過使用 --hot 標(biāo)志運(yùn)行 Bun，可以啟用熱重載：

bun --hot index.ts

與可能需要重新啟動(dòng)整個(gè)進(jìn)程的 Node 方法不同，Bun 會(huì)就地重新加載代碼，而不會(huì)終止舊進(jìn)程。這可確保 HTTP 和 WebSocket 連接保持不間斷，并保留 App 狀態(tài)，提供更絲滑的 DX（開發(fā)體驗(yàn)）。

Node 兼容性

當(dāng)過渡到新的運(yùn)行時(shí)或環(huán)境時(shí)，兼容性通常是開發(fā)者最關(guān)心的問題。Bun 通過將自己定位為 Node 的同款競(jìng)品來解決此問題。這意味著，現(xiàn)有的 Node App 和 npm 包無需任何修改即可與 Bun 無縫集成。確保這種兼容性的關(guān)鍵功能包括但不限于：

支持內(nèi)置 Node 模塊，比如 fs/path/net。
識(shí)別全局變量，比如 __dirname/process。
遵守 Node 模塊解析算法，包括熟悉的 node_modules 結(jié)構(gòu)。

Bun 仍在茁壯成長(zhǎng)。它專為增強(qiáng)開發(fā)工作流程而定制，十分適合資源有限的環(huán)境（比如 serverless 函數(shù)）。Bun 背后的團(tuán)隊(duì)正在努力實(shí)現(xiàn)全面的 Node 兼容性以及與流行框架的更好集成。

雖然 Bun 確保兼容 Node，但它不止于此。Bun 附帶高度優(yōu)化的標(biāo)準(zhǔn)庫 API，可以滿足開發(fā)者的剛需。

Bun APIs

Bun.file()

延遲加載文件并訪問各種格式的內(nèi)容。此方法比 Node 對(duì)應(yīng)的方法快 10 倍。

// Bun (index.ts)
const file = Bun.file('package.json')
await file.text()

// Node.js (index.mjs)
const fs = require('fs/promises')
const fileContents = await fs.readFile('package.json', 'utf-8')

Bun.write()

用于將數(shù)據(jù)（從字符串到 Blob）寫入磁盤的多功能 API。它的寫入速度比 Node 快 3 倍。

// Bun (index.ts)
await Bun.write('index.html', '<html/>')

// Node.js (index.mjs)
const fs = require('fs/promises')
await fs.writeFile('index.html', '<html/>')

Bun.serve()

使用 Web 標(biāo)準(zhǔn) API 設(shè)置 HTTP 服務(wù)器或 WebSocket 服務(wù)器。它每秒處理的請(qǐng)求比 Node 多 4 倍，處理的 WebSocket 消息比 Node 的 ws 包多 5 倍。這種后端功能讓人想起開發(fā)者在 Node 中使用 Express 的方式，但還具有 Bun 性能優(yōu)化的額外優(yōu)勢(shì)。

// Bun (index.ts)
Bun.serve({
  port: 3000,
  fetch(request) {
    return new Response('Hello from Bun!')
  }
})

// Node.js (index.mjs)
import http from 'http'
const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' })
  res.end('Hello from Node.js!')
})
server.listen(3000)

Bun 還內(nèi)置了對(duì) sqlite 和密碼的支持。

包管理器

Bun 不僅僅是一個(gè)運(yùn)行時(shí)；它還是一個(gè)高級(jí)工具包，其中包括但不限于功能強(qiáng)大的包管理器。如果您發(fā)現(xiàn)自己在依賴安裝過程中耐心等待，Bun 提供了一種令人耳目一新的更快競(jìng)品。即使您不使用 Bun 作為運(yùn)行時(shí)，其內(nèi)置的包管理器也可以加快您的開發(fā)工作流程。

瞄一下該表格，將 Bun 命令與 Node 的包管理器 npm 比較：

Bun	npm	目的
`bun install`	`npm install`	安裝 `package.json` 的所有依賴
`bun add <package>`	`npm install <package>`	將新依賴添加到項(xiàng)目中
`bun add <package> --dev`	`npm install <package> --dev`	添加新的開發(fā)依賴
`bun remove <package>`	`npm uninstall <package>`	從項(xiàng)目中刪除依賴
`bun update <package>`	`npm update <package>`	將指定包更新到最新版本
`bun run <script>`	`npm run <script>`	從 `package.json` 執(zhí)行指定腳本

乍一看，Bun 的命令似曾相識(shí)，但體驗(yàn)卻非同尋常。Bun 擁有比 npm 快幾個(gè)數(shù)量級(jí)的安裝速度。它利用全局模塊緩存來實(shí)現(xiàn)這一點(diǎn)，消除從 npm 注冊(cè)表的冗余下載。此外，Bun 采用每個(gè)操作系統(tǒng)可用的最快系統(tǒng)調(diào)用，確保最佳性能。

以下是從緩存安裝入門 Remix 項(xiàng)目依賴的速度比較，Bun vs npm：

圖片

bun CLI 包含一個(gè)兼容 Node 的包管理器，旨在以更快的速度替代 npm/yarn/pnpm。

此外，bun run <command> 只需要 7ms，而 npm run <command> 則需要 176ms。雖然 Node 的 npm 多年來一直是 JS 包管理的標(biāo)準(zhǔn)，但 Bun 確實(shí)是一個(gè)速度強(qiáng)大的引擎，并提供了一個(gè)引人注目的競(jìng)品。

打包器

打包是獲取多個(gè) JS 文件，并將它們合并到一個(gè)或多個(gè)優(yōu)化包中的過程。此過程還可能涉及轉(zhuǎn)換，比如將 TS 轉(zhuǎn)換為 JS，或者壓縮代碼減小體積。

在 Node 的生態(tài)系統(tǒng)中，打包通常由第三方工具而不是 Node 本身處理。Node 世界中某些人氣爆棚的打包器包括但不限于 Webpack、Rollup 和 Vite，提供了代碼分割、樹搖優(yōu)化和熱模塊替換等功能。

另一方面，Bun 不僅僅是一個(gè)運(yùn)行時(shí)和包管理器，而且它本身也是一個(gè)打包器。它旨在打包各種平臺(tái)的 JS/TS 代碼，包括瀏覽器中的前端 App（Vue/React App）和 Node。

要使用 Bun 打包，您可以使用一個(gè)簡(jiǎn)單的命令：

bun build ./index.ts --outdir ./build

此命令打包 index.ts 文件，并將結(jié)果輸出到 ./build 目錄中。打包過程非常快，Bun 比 esbuild 快 1.75 倍，并且直接對(duì) Parcel 和 Webpack 等其他打包器“降維打擊”。

圖片

Bun 的一個(gè)天秀功能是它引入了 JS 宏。這允許在打包期間執(zhí)行 JS 函數(shù)，并將結(jié)果直接內(nèi)聯(lián)到最終打包中。這種機(jī)制為打包提供了全新的視角。

瞄一下此栗子，其中在打包過程中利用 Bun 的 JS 宏來獲取用戶名。該宏不是運(yùn)行時(shí) API 調(diào)用，而是在打包時(shí)獲取數(shù)據(jù)，將結(jié)果直接內(nèi)聯(lián)到最終輸出中：

// users.ts

export async function getUsername() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1')
  const user = await response.json()
  return user.name
}

// index.ts

import { getUsername } from './users.ts' with { type: 'macro' }
const username = await getUsername()

// build/index.js

var user = await 'Leanne Graham'
console.log(user)

雖然 Node 擁有成熟的打包工具，但 Bun 提供了一種可集成的、更快的、新穎的競(jìng)品，可以重塑打包格局。

測(cè)試運(yùn)行器

測(cè)試是軟件開發(fā)的一個(gè)重要方面，它確保代碼如期運(yùn)行，并在落地生產(chǎn)之前捕獲潛在問題。除了作為運(yùn)行時(shí)、包管理器和打包器之外，Bun 也是一個(gè)測(cè)試運(yùn)行器。

雖然 Node 開發(fā)者傳統(tǒng)上依賴 Vitest/Jest 來滿足測(cè)試需求，但 Bun 引入了一個(gè)內(nèi)置的測(cè)試運(yùn)行器，它承諾了速度、兼容性和一系列滿足現(xiàn)代開發(fā)工作流程的功能。

Bun 的測(cè)試運(yùn)行器 bun:test 被設(shè)計(jì)為完全兼容 Jest，Jest 是一個(gè)以“expect”風(fēng)格的 API 聞名的測(cè)試框架。這種兼容性確保熟悉 Jest 的開發(fā)者可以無縫銜接到 Bun，而無需經(jīng)歷陡峭的學(xué)習(xí)曲線。

import { test, expect } from 'bun:test'

test('2 + 2', () => {
  expect(2 + 2).toBe(4)
})

使用 bun test 命令執(zhí)行測(cè)試易如反掌。此外，Bun 的運(yùn)行時(shí)支持開箱即用的 TS/JSX，無需額外的配置或插件。

從 Vitest/Jest 遷移

Bun 對(duì)兼容性的承諾體現(xiàn)在對(duì) Jest 全局導(dǎo)入的支持。舉個(gè)栗子，從 @jest/globals 或 vitest 導(dǎo)入將在內(nèi)部重新映射到 bun:test。這意味著，現(xiàn)有的測(cè)試套件可以在 Bun 上運(yùn)行，無需任何代碼修改。

// index.test.ts
import { test } from '@jest/globals'

describe('test suite', () => {
  test('addition', () => {
    expect(1 + 1).toBe(2)
  })
})

性能基準(zhǔn)

Bun 的測(cè)試運(yùn)行器不僅涉及兼容性；還涉及速度。在針對(duì) Zod 測(cè)試套件的基準(zhǔn)測(cè)試中，Bun 比 Jest 快 13 倍，比 Vitest 快 8 倍。Bun 的匹配器進(jìn)一步凸顯了這種速度優(yōu)勢(shì)，它是在快速原生代碼中實(shí)現(xiàn)的。舉個(gè)栗子，Bun 中的 expect().toEqual() 比 Jest 快 100 倍，比 Vitest 快 10 倍。

無論您是想遷移現(xiàn)有測(cè)試還是啟動(dòng)新項(xiàng)目，Bun 都可以提供符合現(xiàn)代開發(fā)需求的強(qiáng)大測(cè)試環(huán)境。