前端|越来越快的jsRuntime——Bun ts|javascript|前端|Bun|js

【前端|越来越快的jsRuntime——Bun】*（本人github：https://github.com/MichealWayne、博客地址：https://blog.michealwayne.cn/）

在 2020 年起，大家都在谈论 js 的未来发展，其中本人印象最为深刻的就是“js 三时代”一论。大致表达意思是只每隔 10 年，js 就会发生一次变化，而我们正处于 js 第三个时代——整合工具层时期。在 js runtime 这块比较典型的就是Deno，它试图将执行测试、格式化、linting 和捆绑等任务的常用工具合并到一个二进制文件中，使用 TypeScript，甚至包括一个标准库。Rome采取了不同的策略，将所有这些层折叠在 Node.js 之上。
js 第三时代工具的特点：

更快
ESM 优先
折叠层（一个工具做好很多事情，而不是很多工具做好一件事）
Typesafe-er（以强类型语言为核心构建，并以零配置支持用户代码中的 TS）
Secure-er（来自依赖攻击，或宽松的权限）
多语种
Neo-Isomorphic（JS 应该首先在构建时或服务器端运行，然后再到达客户端）

文章图片

所有这些的结果是更好的开发人员体验（更快地构建，标准化行业工具）和用户体验（更小的 bundle 包、更快的功能交付）。它是 js 从站点脚本语言到完整应用平台的最终蜕变。
而本文介绍的也是第三阶段演进中近期快速发展的整合 Runtime ——Bun。

Bun——Incredibly fast JavaScript runtime, bundler, transpiler and package manager – all in one. 官网：https://bun.sh/；Bun Github：https://github.com/oven-sh/bun

概况 Bun 是采用 Zig 语言编写的高性能“全家桶” js runtime，官方称其为“all-in-one JavaScript runtime”，它原生（作者自己手撸）实现了数百个 Node.js 和 Web API，包括约 90% 的 node API 函数、fs、path、Buffer 等，并且 Bun 也可以直接运行 TypeScript 文件。

作者 Jarred Sumner，据说因为肝代码而天天都吃包子，所以取名叫 Bun。

安装
支持系统：macOS x64、Silicon、Linux x64、Windows Subsystem for Linux（WSL）

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

（目前2022.07最新版本 v0.1.4 beta）

*注意 Windows 系统不能像装 Nodejs 一样直接程序安装，Windows 的安装使用可以参照https://juejin.cn/post/7119006461576871973

使用
安装后可以写一个 demo（如官方 http server demo）：

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

然后执行：

bun run http.js

然后可以通过 http://localhost:3000 进行访问。
TypeScript 使用在 Bun 中，天然支持运行运行 TypeScript，无需配置，无需额外安装；
如果你导入一个.ts或.tsx文件，Bun 会将它转换成 js。注意 Bun 还会编译node_modules中的.ts或.tsx文件；这是由 Bun 内置了 TypeScript 转译器，且速度很快。
如果你想在全局使用对应的 API，安装 bun-typs 到你的项目即可：
1.安装

bun add -d bun-types

2.在tsconfig.json中使用

{ "compilerOptions": { "types": ["bun-types"] } }

Bun 目前处于初创和快速迭代器，使用建议看 github 文档（https://github.com/oven-sh/bun#using-bunjs—a-new-javascript-runtime-environment）

命令
与 npm 比较类似：

bun run：执行 js/ts 脚本，可以执行 package.json 中的 “scripts” 脚本，而且官方说比 npm run 快 30 倍；
bun install：安装模块。官方说 bun install 使用最快的系统调用来复制文件，官方说比 yarn 快 20 倍；
- bun remove：删除一个模块；
- bun add：增加安装一个模块；
- bun create：创建一个模板项目，如bun create react ./bun-react-demo创建一个名为 bun-react-demo 的 react 项目
bun wiptest：进行测试，一个类似于 Jest 的测试运行器，用于内置到 bun 的 JavaScript 和 TypeScript 项目。
bun upgrade：升级 bun。

配置文件bunfig.toml
bunfig.toml 是 bun 的配置文件。
通过配置文件我们可以在 bunfig.toml 加载配置，而不是每次都将参数传递给命令行。在解析命令行参数之前加载配置文件，这意味着命令行参数可以覆盖这个配置。
如官方案例（https://github.com/oven-sh/bun#bunfigtoml）：

# 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

其中属性解释：

framework ：指定默认使用的 framework 版本，bun 将根据 bun-framework-${framework} 格式找寻找 npm 包；
logLevel ：指定 log 级别（可用值 error 、 warn 、 info 和 debug ）；
publicDir ：指定 public 目录；
external ：指定外部扩展，作用等同于 Webpack 的 externals；
macros ：宏定义，用于替换 import 路径，比如：

import { graphql } from 'react-relay'; 将被转换为 import { graphql } from "macro:bun-macro-relay/bun-macro-relay.tsx";

dev.port ：指定服务的监听端口（默认 3000 ）；
define ：作用等同于 Webpack 的 DefinePlugin；
loaders ：指定各类文件的解析器；

支持情况

Web API 支持：对 fetch、WebSocket、 ReadableStream 等 API 都提供了内置支持；
Node.js 模块：Bun 实现了 Node.js 的模块解析算法，，以便我们可以在 Bun 中使用 npm 包，同时支持 ESM 和 CommonJS，但 Bun 内部使用 ESM；
Bun.js 实现了大部分 Node-API (N-API)，大部分 Node.js 原生模块及全局变量（比如 Buffer 和 process）都可以正常工作；
自动加载环境变量 .env 文件，不需要再 require(“dotenv”).load()；
附带一个内置的快速 SQLite3 户端 bun:sqlite；
内置 JavaScript、TypeScript、JSX 等（见下表）各种转译器；

Input	Loader	Output
`.js`	JSX + JavaScript	`.js`
`.jsx`	JSX + JavaScript	`.js`
`.ts`	TypeScript + JavaScript	`.js`
`.tsx`	TypeScript + JSX + JavaScript	`.js`
`.mjs`	JavaScript	`.js`
`.cjs`	JavaScript	`.js`
`.mts`	TypeScript	`.js`
`.cts`	TypeScript	`.js`
`.toml`	TOML	`.js`
`.css`	CSS	`.css`
`.env`	Env	`N/A`
`.*`	file	`string`

Bun 对 Node.js 生态实现了良好兼容：

内置了 fetch、WebSocket、ReadableStream 等 Web API；
实现了 Node.js 核心模块（比如 fs、path、Buffer 等）及全局变量（比如 process）；
实现了 Node.js 的模块解析算法，以便我们可以在 Bun 中使用 npm 包；
支持 ESM 和 CommonJS（Bun 内部默认使用 ESM）。

有多快 Bun 的主要优势就是快，那么它快在哪里？
官方对比数据
首先是 React 的服务器端渲染速度（每秒的 HTTP 请求数）：

文章图片

加载一个大型数据表：每秒平均查询次数：

文章图片

FFI：每秒操作数：

文章图片

按作者推特上的测试：

文章图片

还有一篇文章中的多项测试（要）：
https://betterprogramming.pub/is-bun-the-next-big-thing-after-webpack-d683441f77b9
与 npm 对比：

文章图片

与 babel 对比：

文章图片

与 webpack 对比：

文章图片

与 vite、swc 对比：

文章图片

我们可以用 bun 的一些 demo 自行验证：https://github.com/oven-sh/bun/tree/main/examples
按官方的对比数据，Bun 可以说在性能方面是碾压 Node.js 和 Deno。
为什么快
1.js 引擎差异不同于 Node.js 和 Deno，Bun 并没有基于 V8 引擎，而是使用了轻量级的 JavaScriptCore 引擎，jsCore 一般用于移动端，它的执行速度往往要比 V8 等更传统引擎要快。
Bun 中一些 Web API 直接用了 Safari 的实现，如 Headers 和 URL，https://github.com/oven-sh/bun/blob/HEAD/src/bun.js/bindings/webcore/JSFetchHeaders.cpp。
2.开发语言差异 Bun.js 使用的是新兴的系统编程语言 ZIG 编写的，ZIG 一般用于嵌入式和系统级编程，使用 ZIG 主要通过手动内存管理对内存进行更细粒度的控制、无隐藏的控制流来提升程序的性能。

Zig 是一门系统级编程语言，专为稳定性、可维护性和性能而设计，是追求替代 C 语言在系统编程上的最佳地位。

文章图片

其中 C++的代码大部分是 web API 的实现（Safari）
3.独立实现工具在前两点的前提下，作者重新实现了诸如 JSX/TypeScript 转编器、npm 客户端、SQLite 客户端、HTTP 客户端、WebSocket 客户端等类库。
使用评估优势

性能。主要亮点、核心竞争力。至少短期 Node/Deno 是难以超越 Bun；
效率。集成各类工具，能大幅提高开发效率，这也是 js 第三阶段产物的典型特征。

劣势

是起步项目，目前存在内存泄露等问题，连作者也不建议在生产使用；
是个人项目，目前仍有 200+个 issue 待解决
部分 npm 包不兼容

其他

版本较新，最新版本才 v0.1.4；
star 快速上升，目前 26.2k（至 2022.07.17）。油管上也有多了许多讲解视频；
社区维护：https://bun.sh/discord

文章图片
里程碑：https://github.com/oven-sh/bun/issues/159

综上，Bun 是一个有前景的项目，高效的性能能拓宽 js 的应用边界，但是目前项目仍处理起步阶段，整体并不成熟。因此我们目前不能在业务生产中直接使用 Bun，但我们可以尝试试用 Bun 并对 Bun 保持高度关注。
相关链接

《The Third Age of JavaScript》https://www.swyx.io/js-third-age/
《Windows 下安装 Bun》https://juejin.cn/post/7119006461576871973
《Is Bun the Next Big Thing After Webpack?》https://betterprogramming.pub/is-bun-the-next-big-thing-after-webpack-d683441f77b9