Bun

什么是 Bun?

Bun 是一个用于 JavaScript 和 TypeScript 应用的一体化工具包。它作为一个单独的可执行文件发布,名为 bun。

Bun 的核心是Bun运行时,它是一个快速的 JavaScript 运行时,旨在取代 Node.js。它是用 Zig 语言编写的,并在底层由 JavaScriptCore 提供支持,大大减少了启动时间和内存使用。

bun run index.tsx   # TS and JSX supported out of the box

bun 命令行工具还实现了测试运行器、脚本运行器和与Node.js兼容的包管理器。相比现有的工具,它更快,并且可以在现有的 Node.js 项目中使用,几乎不需要任何修改。

bun run start                 # run the `start` script
bun install              # install a package
bun build ./index.tsx         # bundle a project for browsers
bun test                      # run tests
bunx cowsay "Hello, world!"   # execute a package

什么是运行时

JavaScript(或者更正式地说,ECMAScript)只是一种编程语言的规范。任何人都可以编写一个JavaScript引擎来获取有效的 JavaScript 程序并执行它。目前使用的两个最流行的引擎是 V8 (由Google开发) 和 JavaScriptCore (由 Apple 开发),这两个引擎都是开源的。

Browsers

大多数 JavaScript 程序都不是在孤立的环境中运行的,它们需要与外部世界进行交互以执行有用的任务。这就是运行时的作用所在。运行时提供了额外的API,供JavaScript程序使用。需要注意的是,浏览器提供的JavaScript运行时实现了一组特定于Web的API,这些API通过全局窗口对象进行公开。任何在浏览器中执行的JavaScript代码都可以使用这些API来实现与当前网页上下文的交互或动态行为。

Node.js

类似地,Node.js 是一个在非浏览器环境(如服务器)中使用的 JavaScript 运行时。通过 Node.js 执行的 JavaScript 程序可以访问一组特定于 Node.js 的全局变量,例如 Buffer、process 和 __dirname,以及用于执行操作系统级任务的内置模块,例如读写文件(node:fs)和网络(node:net、node:http)。此外,Node.js 还实现了一个基于 CommonJS 的模块系统和解析算法,早于 JavaScript 的原生模块系统。

Bun 设计的初衷是成为更快、更精简、更现代的 Node.js 替代品。

Bun 的一些特性

  • 速度  -  目前,Bun进程的启动速度比 Node.js 快4倍

  • TypeScript 和 JSX支持  -  你可以直接执行 jsx、ts 和 tsx文件,Bun 的转译器在执行之前将这些转换为普通 JavaScript。

  • ESM 和 CommonJS 兼容性  -  世界正在转向ES模块 (ESM),但 npm 上的数百万包仍然需要 CommonJS。Bun 推荐 ES 模块,但支持 CommonJS。

  • web 标准 api  -  Bun实现了标准的 Web api,如 fetch、WebSocket 和 ReadableStream。Bun 由苹果为 Safari 开发的 JavaScriptCore 引擎提供支持,因此 header 和 URL 等一些 api 直接使用了 Safari 的实现。

  • node.js兼容性  -  除了支持 node 风格的模块解析,Bun 完全兼容内置的 Node.js 全局变量 (process, Buffer) 和模块 (path, fs, http等) 等相关工作正在进行中。

Bun 不仅仅是一个运行时。长期目标是成为一个内聚的基础设施工具包,用于使用 JavaScript / TypeScript 构建应用程序,包括包管理器、转译器、打包器、脚本运行器、测试运行器等等。

#上手入门

使用内置的 Bun 编写一个简单的HTTP服务器。服务API。首先,创建一个新目录。

mkdir quickstart
cd quickstart

运行 bun init 来构建一个新项目。在 enter point 时会自动匹配 js 或 ts 来对应生成配置文件。

bun init
bun init helps you get started with a minimal project and tries to
# guess sensible defaults. Press ^C anytime to quit.

# package name (quickstart):
# entry point (index.ts):

# Done! A package.json file was saved in the current directory.
# + index.ts
# + .gitignore
# + tsconfig.json (for editor auto-complete)
# + README.md

# To get started, run:
# bun run index.ts

打开 index.ts ,敲一个 http server。

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

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

接着启动它。

bun index.ts

和 node.js 一样,非常简单。

支持 JSX 、TSX、Text、JSON、TOML

Bun 本身就支持开箱即用的 TypeScript。所有文件在执行之前都由 Bun 的快速本机转译器动态编译。与其他构建工具类似,Bun 不执行类型检查,它只是从文件中删除类型注释。

bun index.js
bun index.jsx
bun index.ts
bun index.tsx

JSX

react.tsx

function Component(props: {message: string}) {
  return (
    
      {props.message}
    
  );
}

console.log();

Bun 为 JSX 实现了特殊的日志记录,使调试更容易。

bun run react.tsx
// => 

是的,终于可以单独调试某个组件了。

Text

import text from "./text.txt";

console.log(text);
// => "Hello world!"

JSON 和 TOML

JSON 和 TOML文件可以直接从源文件导入,没什么区别。

import pkg from "./package.json";
import data from "./data.toml";

WASM

从 v0.5.2开始,对WASI (WebAssembly 系统接口)的实验性支持。

自定义 Loader

对于上面没提到的一些文件类型,Bun 支持 plugins 的形式对其进行扩展。

Bun 打包工具

性能

使用内置的 bun .build() 函数或bun build CLI命令来构建前端应用。

Bun.build({
  entrypoints: ['./src/index.tsx'],
  outdir: './build',
  minify: true,
  // additional config
});
Bun_第1张图片

打包 10 个 three.js 副本,包含 sourcemaps 和 minification


在基准测试中(来源于 esbuild 的 three.js 基准测试),Bun 比 esbuild 快 1.75 倍,比 Parcel 2 快 150 倍,比 Rollup Terser 快 180 倍,比 Webpack 快 220 倍。

API

bun 的目标是实现一个最小的功能集,它快速、稳定,并在不牺牲性能的情况下适应大多数现代用例,API 如下:

interface Bun {
  build(options: BuildOptions): Promise;
}

interface BuildOptions {
  entrypoints: string[]; // required
  outdir?: string; // default: no write (in-memory only)
  target?: "browser" | "bun" | "node"; // "browser"
  format?: "esm"; // later: "cjs" | "iife"
  splitting?: boolean; // default false
  plugins?: BunPlugin[]; // [] // see https://bun.sh/docs/bundler/plugins
  loader?: { [k in string]: string }; // see https://bun.sh/docs/bundler/loaders
  external?: string[]; // default []
  sourcemap?: "none" | "inline" | "external"; // default "none"
  root?: string; // default: computed from entrypoints
  publicPath?: string; // e.g. http://mydomain.com/
  naming?:
    | string // equivalent to naming.entry
    | { entry?: string; chunk?: string; asset?: string };
  minify?:
    | boolean // default false
    | { identifiers?: boolean; whitespace?: boolean; syntax?: boolean };
}

引用 Jarred Sumner 的原话,“其他打包工具在追求功能完整性的过程中做出了糟糕的架构决策,最终导致性能受损,这是我们小心翼翼地试图避免的错误”。

模块系统

目前支持 ES、Common,推荐使用 ES,未来将会添加其他。

文件类型

目前支持以下文件类型:.js .jsx .ts .tsx - JavaScript and TypeScript files. Duh..txt — Plain text files. These are inlined as strings..json .toml — These are parsed at compile time and inlined as JSON.


其他一切都被视为静态资源。静态资源被原样复制到 outdir 中,导入被替换为文件的相对路径或URL,例如 /images/logo.png。

input:

import logo from "./images/logo.png";

output:

var logo = "./images/logo.png";

Plugins

与运行时本身一样,打包器被设计为可以通过插件进行扩展。事实上,运行时插件和打包器插件之间没有任何区别。

import YamlPlugin from "bun-plugin-yaml";

const plugin = YamlPlugin();

// register a runtime plugin
Bun.plugin(plugin);

// register a bundler plugin
Bun.build({
  entrypoints: ["./src/index.ts"],
  plugins: [plugin],
});

还有一些现代打包工具的“标配”, 例如 Tree shaking、Source maps 等,Bun 也是支持的。

最后,篇幅有限,其他方面就不在过多介绍了,感兴趣的小伙伴,可以自行查阅官网。

官网:https://bun.sh/

你可能感兴趣的:(Bun)