前端新工具 - bun快速上手

733 阅读4分钟

前端新工具 - bun快速上手 Bun.sh

Bun 是一个新的 JavaScript 运行时,内置了打包器、转译器、任务运行器和 npm 客户端

Bun 是一个与 npm 兼容的包管理器。这意味着您可以使用 Bun 来安装和管理 Node.js 包。

image.png

目前 Bun 正式环境是不支持window原生版本的

在正式支持Windows原生版本之前,Windows用户可以通过使用Windows Subsystem for Linux (WSL)来安装和使用Bun.js,这是一种在Windows 10及更高版本中运行Linux环境的方法,从而间接地在Windows上使用Bun.js。

image.png

image.png

直接用window系统下载 cmd 会有提示

image.png

这条警告信息意味着虽然Bun.js可以在Windows系统上进行安装和使用,但是其Windows版本目前仍处于实验阶段,可能存在一些不稳定因素或未优化的功能。为了获得更加稳定和完善的使用体验,官方建议用户在Windows Subsystem for Linux (WSL)环境中安装和使用Bun

如果是在window上面使用,可以安装WSL,再使用

WSL是微软为Windows系统提供的Linux子系统,能够在Windows内核上原生运行Linux环境,从而能够更顺畅地运行像Bun.js这样的Linux兼容工具。

要想运行Linux应用需要安装Windows 11的Linux子系统。并且Linux子系统与Windows 11互相隔离。

在Windows 11中安装Linux子系统的操作步骤如下

1.需要打开两个功能。

在控制面板中打开启用或关闭Windows功能界面,勾选Virtual Machine Platform(虚拟机平台)和适用于Linux的Windows子系统两项点确定

image.png

image.png

2.安装Linux版本
2.1 设置完成后可能需要重启,重启后到Windows 11自带的应用商店(可以直接搜索商城就会出来),在商城中搜索“Linux”,选择一个想要安装的Linux版本安装,可能会让你输入用户名和密码。(我选择Ubuntu)

image.png

2.2.点击获取,等待安装,然后点击打开

image.png

2.3.输入账号密码(注意:可能有格式要求)

image.png

注意!!! 用户名 用小写

2.4.这样就安装成功了

image.png

3.运行Linux的GUI界面应用
3.1 以管理员身份运行“PowerShell” 输入

wsl --update命令检查更新(要更新后才能运行Linux的GUI界面应用)

3.2 输入wsl --shutdown重启。

问题解决

1.WSL安装无法打开(WslRegisterDistribution failed with error: 0x800701bc…)

image.png

直接看 wsl 文档即可

learn.microsoft.com/zh-cn/windo…

在wsl 中安装bun

1.在cmd中输入wsl 会出现在linux中

这里但是直接下载还是会报错

image.png

这个错误信息表明在尝试安装Bun.js的过程中缺少了unzip工具

而该工具对于在MacOS和Linux系统上安装Bun是必需的。

unzip是一个用于解压缩.zip文件的命令行实用程序,在安装过程中通常用来解压Bun的发布包。

所以需要下载

sudo apt update 

sudo apt install unzip

image.png

image.png

这样就下载成功了

image.png

2.结合vscode 使用开发

2.1下载wsl 插件

image.png

2.2vscode 左侧有一个远程资源管理器点击之后

image.png

2.3再点击右边的在新窗口中链接

image.png

第二种方式

点击左下角

image.png

会跳转一个新的vscode页面,点击打开文件夹
输入 /mnt/d/an/work 这里是你新建的文件夹的地方

image.png

在终端输入 bun init

image.png

这个时候已经就全部实现了初步的bun使用

image.png

image.png

总结!!

这个和npm 差不多 ,都是包管理器,但是bun不仅是一个包管理器,还是一个完整的 JavaScript 运行时环境,这意味着你不再需要单独安装 Node.js 和 npm,而是直接通过 Bun 来运行和管理项目

Bun的下载安装速度更快 下载单个依赖是用add
例如: bun add figlet 
bun add -d @types/figlet
而npm 是 i / install
npm i axios

bun 可以直接运行ts文件,node 不可以,需要将ts编译为js bun 直接热更新 bun --hot index.ts

最关键是 Bun 目前在windows 系统并不完善,需要用macOS 或者Liunx 上面使用,windows 必须用WSL,并不算便捷,直接原生的windows目前暂未支持

Bun运行速度快

422a7184a8e3686e243f20914f64183.png