关于javascript:bunjs-一个新的JavaScript运行环境

介绍

Bun 是一个古代的JavaScript运行环境，如Node, Deno。次要个性如下:

启动速度快。
更高的性能。
残缺的工具（打包器、转码器、包治理）。

上面咱们来横向比照下框架所说的性能:

雷同电脑下, 不同 js 运行环境的每秒操作数

加载器

目前，bun实现了以下加载器:

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.js 应用的是 JavaScriptCore 引擎,
它的执行速度往往要比 V8 等更传统引擎要快。

而他自身, 是由叫做 Zig 的语言编写而成的, Zig 是一门新的零碎级编程语言，相当于加强版 C 语言

配置

bunfig.toml 是 bun 的配置文件。

这里给出一个例子:

# 默认框架# 默认状况下，bun会寻找一个相似于`bun-framework-${framework}的npm包，而后是`${framework}`。framework = "next"logLevel = "debug"# publicDir = "public"# external = ["jquery"][macros]# 像这样从新映射的配置:#     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 anywayentryPoints = ["./app/index.ts"][bundle.packages]# 如果设置了`framework'，就不须要这个了，在这里作为一个例子展现一下。"@bigapp/design-system" = true[dev]# dev 的启动端口 3000-5000port = 5000[define]# 环境变量"process.env.bagel" = "'lox'"[loaders]# 如果文件后缀是 .bagel 则应用 JS 的解析器".bagel" = "js"[debug]# 当导航到blob:或src:链接时，在你的编辑器中关上该文件# 如果没有，它会尝试用$EDITOR或$VISUAL# 如果依然失败，它会尝试Visual Studio Code，而后是Sublime Text，而后是其余一些编辑器# 这是由Bun.openInEditor()应用的editor = "code"# List of editors:# - "subl", "sublime"# - "vscode", "code"# - "textmate", "mate"# - "idea"# - "webstorm"# - "nvim", "neovim"# - "vim","vi"# - "emacs"# - "atom"

应用

首先咱们下载 cli

在终端执行如下指令即可进行下载:

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

启用服务

先尝试实现相似于 node 的相干性能:

新建文件 http.js

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

之后在终端执行:

bun run http.js

之后关上浏览器地址 http://localhost:3000/ 即可查看到对应页面的返回 Welcome to Bun!

如果运行中有错误处理, 能够这样判断:

export default {  fetch(req) {    // if(...)    throw new Error("woops!");  },  error(error: Error) {    // 相似与 catch 到fetch 抛出的谬误    return new Response("Uh oh!!\n" + error.toString(), { status: 500 });  },}

创立我的项目

咱们先尝试应用它默认的 react 模板我的项目来创立:

bun create react ./app

运行指令之后的终端局部输入:

之后便呈现如下目录:

在我的项目中, 通过指令 bun dev 即可运行

这就是他的官网 react 我的项目模板, 当然他还能够扩大:

bun create github-user/repo-name destinationbun create local-example-or-remote-example destinationbun create /absolute/path/to-template-folder destinationbun create https://github.com/github-user/repo-name destinationbun create github.com/github-user/repo-name destination

通过初始化本地门路, github 地址, gitlab 地址来初始化我的项目

bun create 工作流程

当咱们运行 bun create ${template} ${destination} 的时候会呈现以下判断

判断近程模板
1. 申请 registry.npmjs.org 相干门路, 下载tgz
2. 解压缩, 提取文件
如果是 GitHub
1. 通过 GitHub API 下载
2. 解析并提取文件
如果是本地模板
1. 关上本地文件夹
2. 清空已有名称的文件
3. 递归复制文件
4. 解析 package, 执行 hook, 下载依赖, 初始化 git

包治理

bun 有他本人的包公里工具: bun install, 能够在 bunfig.toml配置文件中对其进行 registry, dev, cache 等配置

bun install 对等依赖的解决形式与 yarn 相似。不会主动装置对等依赖，会尝试抉择一个现有的依赖。

lock 文件

bun.lockb 是 bun 的二进制 lock 文件格式, 至于为什么抉择二进制, 间接的起因就是为了性能, 和更多的存储

疾速的起因

它对所有数据应用线性数组。包是由一个主动递增的整数 ID 或者包名的哈希值援用的。超过8个字符的字符串会被去掉。
在保留在磁盘之前，lock 文件通过 garbage collection (GC)和遍历包的树形构造确定程序，再按依赖关系下载包。

脚本运行器

bun run是一个疾速的 package.json 脚本运行器

bun run ${script-name} 运行相当于 npm run script-name 的内容。例如，bun run dev 运行 package.json 中的 dev 脚本。

bun 运行会主动从 .env 中加载环境变量到 shell/task 中。.env 文件的加载优先级与 bun 的其余局部雷同:

.env.local 最先加载
if ($NODE_ENV === "production") .env.production else .env.development
.env

如果有什么问题，你能够运行 bun run env 来失去一个环境变量的列表。

问题

目前存在的问题

Zig 的问题

Zig 是一个较新(2016 年)的语言, 他的生态,安全性值得思考

同时如果底层呈现什么问题, 会这门语言的人是非常少的, 就很容易卡主, 过于被动

Issue 的问题

目前存在了 284 个 Issue(2022.07.27), 有一些是特地重要且影响性能的

生态问题

很多罕用的, 较为重要的性能还未反对, 例如:

treeShaking
Source maps
Code splitting
CSS 压缩

具体可查看此处

总结

目前来说 bun 曾经领有的性能还不能满足失常的生产需要, 咱们只能在开发一些小工具的时候应用它来尝尝鲜

他的构造, 专门的下载器, TypeScript & JSX 的开箱即用, 内置的node API 等等目前看来是挺香的, 而后也同样地存在我下面说的一些问题

bun 的饼是很大很圆, 然而将来能不能真正吃上, 就一起等着看吧

介绍

更多具体的长处

加载器

实现

配置

应用