在window上尝鲜Bun@1.0.0

Bun @1.0.0 Bun官网已经可以尝鲜了，但是目前对Window用户不是很友好，对于已经是Window用户，怎么解决呢

答案是： window的子系统， Ubuntu

我当前系统是 Window10

安装ubuntu

在应用商店安装 ubuntu

(window官方教程-window开启Linux子系统)

安装Bun环境到 Linux环境

打开Linux子系统

bash 复制代码

# 先更新基础环境
sudo apt update

# 安装bun 之前必须安装unzip 环境
sudo apt install unzip

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

配置环境变量

shell 复制代码

# 配置全局环境变量
sudo vim ~/.bashrc

在文件的最后一行，检查是否有以下环境变量，如果没有，粘贴进去（需要懂怎么操作基础的Linux, 比如 i 进入交互模式， :wq 保存并退出）

bash 复制代码

# bun
export BUN_INSTALL="$HOME/.bun"
export PATH=$BUN_INSTALL/bin:$PATH

保存并退出后，刷新环境

bash 复制代码

#  刷新环境变量
source /home/xiaqilin/.bashrc

运行

复制代码

bun

目前在Linux中，既没有 vscode编辑器，也没有可视化界面，开发过程不好，解决一下

vscode 连接 Linux子系统

vscode 插件安装 wsl

快捷键 ctrl + shift + p , 选择 wsl

此时， vscode会新开一个窗口，当前上下文环境已经连接到 Linux 子系统中了

选择一个目录， bun-test 是我之前通过命令创建的目录 mkdir bun-test

安装vscode 对 bun 这个语言的支持插件

打开扩展，安装 Bun for Visual Studio Code , 目前我看到最新版本是 0.0.8

案例

写一个简单的http 服务

typescript 复制代码

Bun.serve({
 port: 3002,
 fetch(req) {
  console.log(req);

  return new Response('你好 bun')
 }
})

console.log('服务启用， http://localhost:3002')

启动

bash 复制代码

bun run index.ts

request对象包含的内容

json 复制代码

Request {
  method: "GET",
  url: "http://localhost:3002/",
  headers: Headers {
    "host": "localhost:3002",
    "connection": "keep-alive",
    "upgrade-insecure-requests": "1",
    "user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36 Edg/116.0.1938.76",
    "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7",
    "sec-fetch-mode": "navigate",
    "sec-fetch-dest": "document",
    "accept-encoding": "gzip, deflate, br",
    "accept-language": "zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6",
    "cookie": "sensorsdata2015jssdkcross=%7B%22distinct_id%22%3A%221880004592410c2-0d255bd9c5afd8-7b515477-2073600-18800045925145a%22%2C%22first_id%22%3A%22%22%2C%22props%22%3A%7B%22%24latest_traffic_source_type%22%3A%22url%E7%9A%84domain%E8%A7%A3%E6%9E%90%E5%A4%B1%E8%B4%A5%22%2C%22%24latest_search_keyword%22%3A%22url%E7%9A%84domain%E8%A7%A3%E6%9E%90%E5%A4%B1%E8%B4%A5%22%2C%22%24latest_referrer%22%3A%22url%E7%9A%84domain%E8%A7%A3%E6%9E%90%E5%A4%B1%E8%B4%A5%22%7D%2C%22%24device_id%22%3A%221880004592410c2-0d255bd9c5afd8-7b515477-2073600-18800045925145a%22%7D; ws_jssdk_localhost=%7B%22uuid%22%3A%22c33ef1db-00da-c220-6de0-5fec9df1fc5f%22%2C%22user_id%22%3A%22%22%7D",
    "sec-ch-ua": "\"Chromium\";v=\"116\", \"Not)A;Brand\";v=\"24\", \"Microsoft Edge\";v=\"116\"",
    "sec-ch-ua-mobile": "?0",
    "sec-ch-ua-platform": "\"Windows\"",
    "sec-fetch-site": "none",
    "sec-fetch-user": "?1"
  }
}

在window的浏览器中访问 http://localhost:3002/

Bun 编写代码，增加语法提示

目前，我们写的文件，在vscode 中是不知道Bun有什方法，也不知道方法中参数表达什么意思，没有类型提示

csharp 复制代码

# 安装类型依赖 和 npm i xxx -D 是一样的
bun add -d bun-types

新建 tsconfig.json

根据自己需要，自行修改

json 复制代码

{
  "compilerOptions": {
    // add Bun type definitions
    "types": ["bun-types"],

    // enable latest features
    "lib": ["esnext"],
    "module": "esnext",
    "target": "esnext",

    // if TS 5.x+
    "moduleResolution": "bundler",
    "noEmit": true,
    "allowImportingTsExtensions": true,
    "moduleDetection": "force",
    // if TS 4.x or earlier
    "moduleResolution": "nodenext",

    "jsx": "react-jsx", // support JSX
    "allowJs": true, // allow importing `.js` from `.ts`
    "esModuleInterop": true, // allow default imports for CommonJS modules

    // best practices
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true
  }
}

重启vscode

鼠标移入，已经有类型提示了

注意：我们当前Linux并没有安装 node 环境，是无法直接使用 npm 等命令的，需要单独安装node到 Linux中

有需要可以安装一下

Ubuntu中安装最新版Node

Nodesource Node.js DEB --- Nodesource Node.js DEB

bash 复制代码

# 第一条命令
sudo apt-get update && sudo apt-get install -y ca-certificates curl gnupg

# 第二条
curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg

# 第三条，设置一个变量，我们要安装的目标版本
NODE_MAJOR=20

# 第4条命令， 这里会读取上面的NODE_MAJOR 这个值
echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list

# 安装
sudo apt-get update && sudo apt-get install nodejs -y

安装过程如果提示 keyrings 目录不存在，也就是执行到第2条命令的时候。自己手动创建一下目录

shell 复制代码

cd /etc/apt/
mkdir keyrings

复制代码

node -v

到此， Bun的环境安装，开发环境搭建，简单项目运行已经全部ok，剩下的就是逐步学习一些API操作，案例练习