跳到主要内容位置

2 分钟掌握 Bun js

Bun 是一个高性能的 JavaScript 运行环境。运行环境是 JavaScript 代码运行的必要容器,包含代码执行相关的工具和一系列 API,现在市面常见的有浏览器和 Node.js,而与 Node.js 类似的还有 Deno,Bun 是最近推出正式版的另一种类似 Node.js 的 JavaScript 运行环境,可以开发、测试、运行和打包 JavaScript 和 TypeScript 项目,并兼容 Node.js。

Bun 主打速度和性能,有着 4 倍于 Node.js 的处理速度。它使用 Zig 语言开发并基于 Apple 的 JavaScriptCore 引擎。 Zig 语言是对标 C 语言的一款高性能编程语言,为 Bun 的速度奠定了基础。

Bun 的开发作者是 Jarred Sumner,是一名高中就辍学的高材生,曾就职 stripe,国外主流的在线支付网关公司。

Bun 原生支持 TypeScript、JSX 和 TSX,并把它们转义为原生 JavaScript,还支持 fetch、WebSocket 等 Web API。

Bun 还支持类似于 yarn、vite、webpack 等功能,例如原生支持导入 json 等文件

使用

要安装和使用 Bun,需要在 MacOS 或 Linux 操作系统下,Windows 可以使用 Linux 子系统。运行下面命令:

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

要初始化一个 Bun 项目,可以使用 Bun init 命令,默认入口文件是 index.ts:

bun init

运行 ts 文件可以使用 bun run index.ts:

bun run index.ts

可以看到几乎没有编译过程,因为速度很快。

也可以使用 script 的方式运行项目,这里的 package.json 与 node.js 的配置相同:

"scripts": {
"start": "bun run index.ts"
},

之后直接使用 bun start 运行就可以了:

bun start

当然,bun 也支持运行 js 文件:

bun run index.js

与 Node.js 不同的是, Bun 不使用分开的、类似于 npm 的包管理器,而是直接集成在 bun 命令中了,使用 bun add 添加依赖就可以了,可以看到安装依赖的速度也非常快:

bun add rambda

之后照常在代码中导入并使用就可以了:

import * as R from "rambda";

const range = R.range(0, 10);
console.log(range);

// bun run index.js

我们也可以利用 bun create 来创建一个模板项目,类似于 npx,例如这里创建一个 React + TS + Vite 项目,可以运行:

bun create vite

之后配置一下项目参数,其实这个还是同样的 vite 创建项目的命令。创建完成之后进入到项目里运行 bun install 来安装一下全部依赖,可以体会下速度:

bun install

运行项目,使用 bun dev:

bun dev

可以看到借助 bun 和 vite 的高性能,TypeScript 项目的启动几乎是实时的,页面打开的也非常迅速。我们也可以修改一下组件代码,看到也能很快反应到页面上。

小结

好了,这个就是 2 分钟了解 Bun js。如果有帮助请三连并关注,想学更多的开发知识,可以在评论区留言,感谢观看!

提示

一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑,示例全部都为工作项目简化而来,学完即可直接上手开发!

即使你已经是高级前端工程师,在课程里也可能会发现新的知识点和技巧,让你的工作更加轻松!

《React 完全指南》课程,包含 React、React Router 和 Redux 详细介绍,所有示例改编自真实工作代码。点击查看详情。

《Vue 3.x 全家桶完全指南与实战》课程,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

《JavaScript 基础语法详解》本人所著图书,包含 JavaScript 全面的语法知识和新特性, 可在京东、当当、淘宝等各大电商购买