Bun:一体化的 JavaScript 运行时(javascript可不可以单独运行)

boyanx5个月前技术教程31

Bun 是一个功能丰富的 JavaScript 运行时,它自带包管理功能,还具有工程常用的打包、测试等功能。

Bun 使用 Zig 编程语言开发,基于 Safari 浏览器的 JavaScriptCore 引擎。

如果用一个字表达 Bun 的特点,那就是:快!

Bun 原生支持 TypeScript,可以直接运行 .ts 和 .tsx 文件。

bun run index.tsx

安装

在 Linux 或 macOS 系统的安装命令如下:

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

# to install a specific version
$ curl -fsSL https://bun.sh/install | bash -s "bun-v1.0.0"

在 Windows 平台的安装命令是:

> powershell -c "irm bun.sh/install.ps1 | iex"

检查是否安装成功,执行 bun --version 命令:

$ bun --version
1.1.36

执行 bun --revision,可以查看对应的提交哈希值:

$ bun --revision
1.1.36+ededc168c

如果要升级,执行 upgrade 命令:

$ bun upgrade

如果你不想玩 Bun 了,执行如下命令删除它:

# for macOS, Linux, and WSL
$ rm -rf ~/.bun

# for Windows
> powershell -c ~\.bun\uninstall.ps1

快速起步

我们使用内置的 Bun.serve API,编写一个 HTTP 服务器,感受一下它的用法。

首先,创建空白目录。

$ mkdir quickstart
$ cd quickstart

执行 bun init 搭建项目脚手架,全部选择默认值。

$ bun init

可以看到,命令生成的文件结构如下:

$ tree -L 2
.
├── README.md
├── bun.lockb # 版本锁定文件(二进制)
├── index.ts # 入口文件
├── node_modules # 依赖包目录
│   ├── @types
│   ├── bun-types
│   ├── typescript
│   └── undici-types
├── package.json
└── tsconfig.json # TypeScript 配置文件

修改 index.ts 文件,将其修改为如下代码:

// create a simple http server with port 3000
const server = Bun.serve({
  port: 3000,
  fetch(req) {
    return new Response('Bun!');
  }
})

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

在终端启动服务器:

$ bun index.ts

在浏览器访问 http://localhost:3000,就能看到服务器的响应:

可以在 package.json 中增加一个 npm 脚本:

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

然后执行 bun run start,也可以同样启动服务器。

安装依赖

为了让服务器更加有趣,我们可以安装一个 figlet 包和它的类型声明文件。figlet 的作用是创建 ASCII 艺术字体。

$ bun add figlet
$ bun add -d @types/figlet # TypeScript users only

修改 index.ts 文件,在响应中使用 figlet 绘制 ASCII 艺术字体。

import figlet from 'figlet';

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

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

再次启动服务器,会看到如下输出:

  ____              _ 
 | __ ) _   _ _ __ | |
 |  _ \| | | | '_ \| |
 | |_) | |_| | | | |_|
 |____/ \__,_|_| |_(_)
                      

启动代码时,总体感觉是真的很快,几乎没有延迟。

常见命令

  • bun run start 运行 start 脚本
  • bun add <pkg> 安装项目依赖
  • bun build ./index.tsx 为浏览器构建项目
  • bun test 运行测试用例
  • bunx cowsay 'Hello, world!' 执行一个包

bunx 可以执行远程包的代码,作用类似 npx。举个例子,使用 bunx 命令在终端生成一幅牛说话的漫画。


参考链接

  • https://bun.sh/docs
  • https://bun.sh/docs/quickstart
  • https://www.npmjs.com/package/figlet
标签: tree.js

相关文章

循序渐进Vue+Element 前端应用开发(8)—树列表组件的使用

在我前面随笔《循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用》里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框、多文本框、下拉列表,以及按钮...

通过AI提示词让Deepseek快速生成各种类型的图表制作

在数据分析和可视化领域,图表是传达信息的重要工具。然而,传统图表制作往往需要专业的软件和一定的技术知识。本文将介绍如何通过AI提示词,利用Deepseek快速生成各种类型的图表,包括柱状图、折线图、饼...

js将list转化为tree格式的几种写法

最近在考虑一个树状结构存储。最终需要将list转化为tree格式源数据示例源数据共401条[{ "menuId" : "5f50c5fb8f0d74536bbfb7a4"...

从 “卡顿” 到 “秒开”:外投首屏性能优化的实战锦囊|得物技术

一、背景在互联网时代,网站性能的好坏直接影响用户体验和转化率。对投放的广告页面而言,如何在保证视觉效果和功能的同时提升加载速度,成为了开发者必须面对的挑战。本文将探讨几种有效的外投页面性能优化策略,包...

D3.js 4.0.0 发布,JavaScript 可视化库

D3 现在是许多库的模块化组件,当然也可以独立使用。D3.js 是基于数据操作文档的 JavaScript库,通过 HTML、SVG 和 CSS 绑定数据。D3 包括可视化组件与数据驱动型的 DOM...

一次性搞定JS的DOM操作(js中dom)

一.什么是DOM我们知道,无论是现在的开发框架(底层还是操作DOM)还是传统的开发都离不开DOM的操作,所以了解和学习DOM是必须的,也是成为一个全面的前端开发的必备知识和内容,那接下来我们就来看下什...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。