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

相关推荐
低代码布道师几秒前
CSS的三个重点
前端·css
耶啵奶膘1 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^3 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie4 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic4 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具5 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test6 小时前
js下载excel示例demo
前端·javascript·excel
Yaml46 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理