前言

可能有同學(xué)（wo）內(nèi)心暗想：不是吧！阿sir，vue3、vite、前端工程化、前端可視化、前端框架已經(jīng)把自己折磨的夠嗆了，怎么現(xiàn)在又來(lái)了個(gè) Bun；

真是楚漢爭(zhēng)霸之路尚未結(jié)束，三足鼎立之勢(shì)怎能來(lái)臨！

話雖如此，但是身為一名合（mo）格（yu）的前端 er，只能邊含淚邊訴苦了；

順便說(shuō)說(shuō) Bun 最近有多火：短短幾天 star 數(shù)量就從 2k 漲到了現(xiàn)在（2022-07-14）的 24.7k；

長(zhǎng)話短說(shuō)，下面開(kāi)始我們直接帶走他 ~

什么是 Bun

Bun (讀音類似于[b?n]，包子的意思) 是一個(gè)像 Node 或 Deno 這樣的現(xiàn)代 JavaScript 運(yùn)行時(shí);

通俗一點(diǎn)講就是你可以在 Bun 上運(yùn)行 JavaScript 代碼，你是不是在想這不是跟 Node 和 Deno 一樣的嗎，這也能火？

別急嘛，咱們往后看；

all-in-one

官方還稱其為： all-in-one JavaScript runtime；

所謂 all in one，是因?yàn)?Bun 和傳統(tǒng)的 Node.js 這種傳統(tǒng)的 javaScript 運(yùn)行時(shí) 不同； Bun 提供了 打包、轉(zhuǎn)譯、安裝和運(yùn)行 JavaScript & TypeScript 項(xiàng)目的功能，內(nèi)置原生打包器 (native bundler)、轉(zhuǎn)譯器、task runner、npm 客戶端，以及數(shù)百個(gè) Node.js API 和 Web API，包括約 90% 的 Node-API 函數(shù)（本機(jī)模塊）、fs、path、Buffer 等。

這就意味著你可以實(shí)現(xiàn)在 Bun 上運(yùn)行的大部分 Node API 和 Web API， 還可以在不需要使用 Webpack、Rollup、esbuild、babel 等工具的前提下直接運(yùn)行 TypeScript 、JSX 了；

乍一看，是不是瞬間檔次高了許多？

但是這樣還不足以讓你在同事、面試官的跟前吹 ?? ??

各位看官，您繼續(xù)往下看…

為什么用 Bun

性能測(cè)試結(jié)果

服務(wù)器端渲染 React：每秒的 HTTP 請(qǐng)求數(shù)

加載一個(gè)大型數(shù)據(jù)表：每秒平均查詢次數(shù)

FFI：每秒操作數(shù)

根據(jù)上面 服務(wù)器端渲染、加載大型數(shù)據(jù)表、FFI 三個(gè)方面來(lái)對(duì)比，可見(jiàn) Bun 可以說(shuō)在性能方面是吊打 Node.js 和 Deno；

為什么快

• 引擎差異

不同于 Node.js 和 Deno，Bun 并沒(méi)有基于 V8 引擎，而是使用了 JavaScriptCore 引擎，它的執(zhí)行速度往往要比 V8 等更傳統(tǒng)引擎要快。

• 語(yǔ)言差異

Bun.js使用的是新興的系統(tǒng)編程語(yǔ)言 ZIG 編寫(xiě)的，主要通過(guò)手動(dòng)內(nèi)存管理對(duì)內(nèi)存進(jìn)行更細(xì)粒度的控制、無(wú)隱藏的控制流來(lái)提升程序的性能；

• 從零開(kāi)始

在上兩點(diǎn)的前提下，Bun.js 的大部分內(nèi)容都是完全從零開(kāi)始編寫(xiě)的，包括 JSX/TypeScript 轉(zhuǎn)譯器、npm 客戶端、打包器、SQLite 客戶端、HTTP 客戶端、WebSocket 客戶端等等。

注意：Zig 是一門(mén)系統(tǒng)級(jí)編程語(yǔ)言，專為穩(wěn)定性、可維護(hù)性和性能而設(shè)計(jì)，是追求替代 C 語(yǔ)言在系統(tǒng)編程上的最佳地位。

內(nèi)置兼容性

Web API 支持：對(duì) fetch、WebSocket、 ReadableStream 等 API 都提供了內(nèi)置支持；

Node.js模塊：Bun 實(shí)現(xiàn)了 Node.js 的模塊解析算法，，以便我們可以在 Bun 中使用 npm 包，同時(shí)支持 ESM 和 CommonJS，但 Bun 內(nèi)部使用 ESM；

• Bun.js 實(shí)現(xiàn)了大部分 Node-API (N-API)，大部分 Node.js 原生模塊及全局變量（比如Buffer 和 process）都可以正常工作；
• 自動(dòng)加載環(huán)境變量 .env 文件，不需要再 require("dotenv").load()；
• 附帶一個(gè)內(nèi)置的快速 SQLite3 戶端 bun:sqlite；

內(nèi)置 JavaScript、TypeScript、JSX 等（見(jiàn)下表）各種轉(zhuǎn)譯器；

通過(guò)上述大家能發(fā)現(xiàn)，Bun 的目標(biāo)是想在瀏覽器之外運(yùn)行 JavaScript，為我們的基礎(chǔ)架構(gòu)帶來(lái)性能和復(fù)雜性的增強(qiáng)，并通過(guò)更好、更簡(jiǎn)單的工具提高開(kāi)發(fā)人員的生產(chǎn)力。

快速上手

Mac/Linux 上安裝

安裝

 curl https://bun.sh/install | bash

新建 http.js

 export default {
   port: 3000,
   fetch(request) {
     return new Response('Welcome to Bun!');
   },
 };

運(yùn)行

 bun run http.js

瀏覽器中打開(kāi)：http://localhost:3000 即可

注意：如果使用 Linux，強(qiáng)烈推薦內(nèi)核版本 5.6 或更高版本，但最低為 5.1.

windows上安裝

由于 Bun 對(duì) windows 用戶不太友好，安裝起來(lái)并不容易，如果您真的想在windows 上安裝，可以看看如何在windows 上安裝 Bun 這篇文章去進(jìn)行安裝；

Bun 的常見(jiàn)功能使用

1. 當(dāng)做包管理器使用

通過(guò) package.json 安裝依賴

 bun install

新增或刪除 package.json 中的某個(gè)安裝包

 # 刪除
 bun remove react
 # 安裝
 bun add preact

根據(jù)測(cè)試，在 Linux 上 bun install 運(yùn)行安裝包速度往往比 npm install 運(yùn)行腳本快 20 - 100 倍。

2. 直接運(yùn)行scripts腳本

用 bun run 來(lái)代替 npm run

 # Instead of "npm run clean"
 bun run clean
 # This also works
 bun clean

運(yùn)行 package.json 中的腳本

  # package.json 
  {
    "name": "myapp",
    "scripts": {
      "clean": "rm -rf dist out node_modules"
    }
  }
  ?
  # 在終端中運(yùn)行以下命令
  bun run clean

根據(jù)測(cè)試，bun 運(yùn)行 package.json 腳本比 npm 運(yùn)行 package.json 腳本快 30 倍。

3. 快速創(chuàng)建 Next.js 項(xiàng)目

快速創(chuàng)建

 # 創(chuàng)建
 bun create next ./app
 # 運(yùn)行
 cd app
 bun dev # start dev server

關(guān)聯(lián)一個(gè)已經(jīng)存在的 Next.js 應(yīng)用

 bun add bun-framework-next
 echo "framework = 'next'" > bunfig.toml
 bun bun # bundle dependencies
 bun dev # start dev server

注意：Next.js 的需多功能都支持，但是也有小部分暫時(shí)不支持，所以生成環(huán)境使用需謹(jǐn)慎。

4. 快速創(chuàng)建 React 項(xiàng)目

快速創(chuàng)建

 bun create react ./app
 cd app
 bun dev # start dev server

關(guān)聯(lián)現(xiàn)有的React項(xiàng)目

 # To enable React Fast Refresh, ensure it is installed
 bun add -d react-refresh
 # Generate a bundle for your entry point(s)
 bun bun ./src/index.js # jsx, tsx, ts also work. can be multiple files
 # Start the dev server
 bun dev

5. 運(yùn)行 TypeScript

在 Bun 中，天然支持運(yùn)行運(yùn)行 TypeScript，無(wú)需配置，無(wú)需額外安裝；

如果你導(dǎo)入一個(gè).tsor.tsx文件，bun 會(huì)將它轉(zhuǎn)換成 JavaScript；bun 還編譯node_modules中的.ts或.tsx文件；這是由 bun 內(nèi)置了 TypeScript 轉(zhuǎn)譯器，且速度很快。

如果你想在全局使用對(duì)應(yīng)的 API，安裝 bun-typs 到你的項(xiàng)目即可

 # 安裝
 bun add -d bun-types
 # 在tsconfig.json中使用
 {
   "compilerOptions": {
     "types": ["bun-types"]
   }
 }

6. 常用命令

• bun add：等同于 yarn add 或 npm install
• bun install：等同于 yarn install 或 npm install
• bun run：類似于 npm run
• bun create：通過(guò)該命令，可快速創(chuàng)建一個(gè)模板項(xiàng)目
• bun bun：該命令會(huì)遞歸收集指定文件的導(dǎo)入依賴，然后生成包含這些信息的 node_modules.bun 文件
• bun upgrade：要升級(jí) bun，請(qǐng)運(yùn)行bun upgrade

7. 配置文件 bunfig.toml

bunfig.toml 是 bun 的配置文件。

它允許您在 bunfig.toml 加載配置，而不是每次都將參數(shù)傳遞給命令行。在解析命令行參數(shù)之前加載配置文件，這意味著命令行參數(shù)可以覆蓋這個(gè)配置。

下面是一個(gè)配置例子：

# Set a default framework to use
# By default, bun will look for an npm package like `bun-framework-${framework}`, followed by `${framework}`
framework = "next"
logLevel = "debug"
# publicDir = "public"
# external = ["jquery"]
[macros]
# Remap any import like this:
#     import {graphql} from 'react-relay';
# To:
#     import {graphql} from 'macro:bun-macro-relay';
react-relay = { "graphql" = "bun-macro-relay" }
[bundle]
saveTo = "node_modules.bun"
# Don't need this if `framework` is set, but showing it here as an example anyway
entryPoints = ["./app/index.ts"]
[bundle.packages]
# If you're bundling packages that do not actually live in a `node_modules` folder or do not have the full package name in the file path, you can pass this to bundle them anyway
"@bigapp/design-system" = true
[dev]
# Change the default port from 3000 to 5000
# Also inherited by Bun.serve
port = 5000
[define]
# Replace any usage of "process.env.bagel" with the string `lox`.
# The values are parsed as JSON, except single-quoted strings are supported and `'undefined'` becomes `undefined` in JS.
# This will probably change in a future release to be just regular TOML instead. It is a holdover from the CLI argument parsing.
"process.env.bagel" = "'lox'"
[loaders]
# When loading a .bagel file, run the JS parser
".bagel" = "js"
[debug]
# When navigating to a blob: or src: link, open the file in your editor
# If not, it tries $EDITOR or $VISUAL
# If that still fails, it will try Visual Studio Code, then Sublime Text, then a few others
# This is used by Bun.openInEditor()
editor = "code"
# List of editors:
# - "subl", "sublime"
# - "vscode", "code"
# - "textmate", "mate"
# - "idea"
# - "webstorm"
# - "nvim", "neovim"
# - "vim","vi"
# - "emacs"
# - "atom"
# If you pass it a file path, it will open with the file path instead
# It will recognize non-GUI editors, but I don't think it will work yet

相關(guān)屬性解釋：

• framework ：指定默認(rèn)使用的 framework 版本，

bun 將根據(jù) bun-framework-${framework} 格式找尋找 npm 包；

• logLevel ：指定 log 級(jí)別（可用值 error 、 warn 、 info 和 debug ）；
• publicDir ：指定 public 目錄；
• external ：指定外部擴(kuò)展，作用等同于 Webpack 的 externals；
• macros ：宏定義，用于替換 import 路徑，比如：

import { graphql } from 'react-relay'; 將被轉(zhuǎn)換為

import { graphql } from "macro:bun-macro-relay/bun-macro-relay.tsx";

• dev.port ：指定服務(wù)的監(jiān)聽(tīng)端口（默認(rèn) 3000 ）；
• define ：作用等同于 Webpack 的 DefinePlugin；
• loaders ：指定各類文件的解析器；

當(dāng)然，上述只是舉例說(shuō)明了一些在前端領(lǐng)域常見(jiàn)的一些情況，如果你還想了解更多的使用方法與案例，可查看：

查看官方例子

查看官方文檔

總結(jié)

• 對(duì)于性能方面，值得一探究竟；
• 版本較新，最新版本才 v0.1.4；
• 但是能否真正的用于生產(chǎn)，按照作者目前的原話是不建議的，因?yàn)橛捎趦?nèi)存泄露等問(wèn)題，所以不建議在生產(chǎn)環(huán)境中使用，但是目前作者已經(jīng)在 996 的緊急修復(fù)相關(guān)問(wèn)題了；

不過(guò)作為一門(mén)能吊打 Node 和 Deno 的工具，咱們還是有必要去了解作為茶余飯后吹牛的資本的；

以上就是吊打 Node 和 Deno 的 Bun入門(mén)學(xué)習(xí)教程的詳細(xì)內(nèi)容，更多關(guān)于Bun 入門(mén)學(xué)習(xí)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！