在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操作案例练习

相关推荐
y先森5 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy5 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189115 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿6 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡7 小时前
commitlint校验git提交信息
前端
虾球xz7 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇7 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒7 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员8 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐8 小时前
前端图像处理(一)
前端