bun之初尝试


本篇是Bun 1.0 推出后的初尝试。Bun是一个集合所有js基础工具的运行时，以迄今为止最快的js 运行时而著称

像Node一样，Bun是一个运行时(runtime), 而非什么新的语言。感觉deno的地位有点尴尬了。大家被他的宣传的速度所折服。

安装

官网推荐的是运行

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

但鉴于国内有墙的原因，bun现在有npm包了，所以我更推荐另一种安装方法，更快更直接：

1
npm i -g bun

用以下命令检查是否安装成功：

1
2
(base) ➜  ~ bun -v
1.0.12

启用

项目初始化：

1
2
3
mkdir bun-learn
cd bun-learn
bun init

可以看到

  • package.json 文件被 bun.lockb 文件替代，比起原来的json文件，这个文件写起来有点类似yml的语法，用了缩进和换行，不用花括号
  • 直接生成了 tsconfig.json 文件, bun原生支持了 ts

跑单个文件，和node用法类似，当然run可以省略：

1
bun run index.ts

简单的服务

我们在 index.ts 里写上：

1
2
3
4
5
6
7
8
const server = Bun.serve({
  port: 5678,
  fetch (req) {
    return new Response("hello Bun!")
  }
})

console.log(`listening on port ${server.port}`)

终端跑 index.ts , 浏览器可以看到 hello Bun! 的字样。当然，直接跑的话我们改 index.ts 要重启项目，可以加上 --watch 参数：

1
bun --watch index.ts

进一步优化，创建一个env文件touch .env，将配置写在该文件里，

1
PORT = 8889

index.ts 文件里 port 参数改：

1
2
--- port: 5678,
+++ port: Bun.env.PORT || 5678,

可以见到，以前用node时，我们须安装 process 包，并且引入，才能用 process.env.PORT的，现在直接用Bun，课件Bun 把很多第三方库，如 process 也集成了, 无需二次下载。

处理路由

把 fecth 函数改写如下：

1
2
3
4
5
6
fetch (req) {
  const url = new URL(req.url);
  const { pathname } = url;    if (pathname === '/') return new Response('home page!')
  if (pathname === '/blog') return new Response('blog!')
  return new Response("404")
}

bunx

类似 npx 的使用，直接运行二进制码，无须下载安装包，他自带了个 cowsay命令，可以体验 bunx的用法，命令行运行 bunx cowsay Hell Bun

1
2
3
4
5
6
7
8
9
(base) ➜  bun-learn bunx cowsay Hello Bun
 ___________
< Hello Bun >
 -----------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

前端脚手架

react 官方脚手架，在 Bun中使用如下：

1
2
3
bun create react-app <yourAppName>
# or
bunx create-react-app <yourAppName>

vite 的脚手架：

1
2
3
bun create vite <yourAppName> --template vue
# or
bunx create-vite <yourAppName> --template vue

模块化引入

bun 直接支持 es module 和 commonjs 两种模块引入，也不用在 package.json 里做出其他配置，解决了困扰了 node 多年的模块引入问题。

下面是一个简单的demo，新建一个文件 module.ts

1
touch module.ts

以下我们用 path 模块举例：

1
2
3
4
5
6
7
import path from 'path';
// const path = require('path'); // commonjs also ok

const filepath = path.join('foo', 'bar', 'img.png');
const filename = path.basename(filepath);

console.log(filename);

跑了后控制台可看到：

1
2
(base) ➜  bun-learn bun module.ts 
img.png

一些常用模块在Bun中的使用

file 模块

Bun.write() 写入文件：
1
touch file-demo.ts

写下：

1
2
const data = 'I love Bun!'
await Bun.write('file-demo.txt', data);

  • 从以上代码可以看出，Bun 和 deno 一样，支持顶层的 await语法，无须像node一样包装在 async 函数里使用 await

  • Bun.write() 接口可写入文件

跑 bun file-demo.ts 可以看到当前目录下生成了 file-demo.txt 文件，并在文件里写下了 data 的内容。

await Bun.file().text() 读取文件

在上面的代码加上：

1
2
3
const file = Bun.file('file-demo.txt');

console.log('file-demo content：', await file.text());

控制台输出

1
2
(base) ➜  bun-learn bun file-demo.ts
file-demo content： I love Bun!
  • 这里值得注意，Bun.file().text() 是异步接口，返回的是 Promise 对象，所以必须用上 await 关键字才能显示出内容

其他几个file的接口：

1
2
3
console.log(await file.stream())
console.log(await file.arrayBuffer());
console.log('file size:', file.size)

测试模块

bun集成了jest的测试模块，我们在项目里直接创建测试文件：

1
touch index.test.ts
1
2
3
4
5
6
7
8
9
10
11
import { describe, expect, test, beforeAll } from "bun:test";

beforeAll(() => {
  console.log('呵呵')
});

describe('math', () => {
  test('addition', () => {
    expect(2+1).toBe(3);
  })
});

可以看出，所有的jest模块都集成在 "bun:test" 原生包里，控制台跑的结果：

1
2
3
4
5
6
7
8
9
10
11
(base) ➜  bun-learn bun test 
bun test v1.0.12 (85c99751)

index.test.ts:
呵呵
✓ math > addition [0.19ms]

 1 pass
 0 fail
 1 expect() calls
Ran 1 tests across 1 files. [11.00ms]

bundle 打包

我们来试试用Bun 进行普通的bundle打包
在项目根目录创建以下文件夹和文件：

1
2
3
---src
  |__ githubApi.ts
  |__ index.ts

githubApi.ts文件

前端js代码打包，所以暂时不用顶层 await 语法：

1
2
3
4
5
6
7
8
import axios from "axios";

const fetchUser = async (user) => {
  const res = await axios.get(`https://api.github.com/users/${user}`)
  return res.data
}

export default fetchUser

index.ts文件

1
2
3
4
5
6
import fetchUser from './githubApi';

(async () => {
  const userData = await fetchUser('ys558')
  document.querySelector('h1').innerHTML = JSON.stringify(userData);
})();

在命令行里运行：

1
bun build ./src/index.ts --outfile=./dist/bundle.js

可以看到dist文件夹下生成了 bundle.js 将该文件放入 HTML的 script标签里则可使用

如果开发时，可以在 bun build 的命令加上 --watch, 则可以热加载模式

1
bun build ./src/index.ts --outfile=./dist/bundle.js --watch

react 在项目中的应用

在我们原来的项目里添加 react 和 react-dom

1
bun i react react-dom

src 下创建 index.tsx , 写一个简单的计数器：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';
import { createRoot } from 'react-dom';

const root = createRoot(document.getElementById('root'));

const App = () => {
  const [count, setCount] = React.useState(0)
  return (
    <div>
      <h1>Count: {count}</h1> 
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  )
};

root.render(<App/>);

在 dist 目录下，创建一个根目录 index.html, 加上一下两行：

1
2
<div id="root"></div>
<script src="./bun.js"></script>

bash下运行:

1
bun build ./src/index.tsx --outfile=./dist/budle.js --watch

打开 index.html 就可以看到该计数器