引入 Bun
Bun 是一个由 Jarred Sumner 开发的 JavaScript 运行时环境。它旨在通过单一的可执行文件提供所有必要的工具来构建和运行 Web 应用程序。Bun 的主要优势在于其性能和简洁性。它集成了 Node.js、npm、Yarn 和其他常用的前端工具，使开发者可以更高效地进行开发。
安装 Bun
安装 Bun 非常简单，只需要一行命令：
curl https://bun.sh/install | bash
这将下载并安装 Bun。安装完成后，你可以通过以下命令验证安装是否成功：
bun --version
如果显示了版本号，说明安装成功。
创建项目
使用 Bun 创建一个新的项目目录，并初始化一个新的项目：
mkdir my-bun-project cd my-bun-project bun init
这将在当前目录下生成一个 bunfig.toml 文件，这是 Bun 的配置文件，用于管理项目的依赖和脚本等。
添加依赖
Bun 使用 bun install 来安装项目依赖。你可以在 package.json 文件中添加依赖，然后运行 bun install 来安装这些依赖。例如，如果你想安装 React 和 Babel：
// www.javascriptcn.com code example
{
"name": "my-bun-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "bun run src/index.ts"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.0",
"@babel/preset-react": "^7.16.0"
}
}保存后运行 bun install 来安装这些依赖。
编写代码
在 src/index.ts 文件中编写你的 React 代码：
// www.javascriptcn.com code example
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => (
<div>
<h1>Hello, Bun!</h1>
</div>
);
ReactDOM.render(<App />, document.getElementById('root'));确保你的 HTML 文件中有 id="root" 的元素来渲染 React 组件。
配置 Babel
为了将 TypeScript 转换为 JavaScript，你需要配置 Babel。首先，在根目录下创建一个 .babelrc 文件：
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}然后，更新 bunfig.toml 文件以包含 Babel 脚本：
[[scripts]] name = "build" command = "bunx babel src --out-dir dist"
这将把 TypeScript 文件编译到 dist 目录中。
运行项目
你可以通过以下命令启动项目：
bun run start
或者编译项目：
bun run build
最后，你可以使用任何静态文件服务器来提供 dist 目录中的内容。例如，使用 http-server：
bunx http-server dist
这样，你就可以在浏览器中访问你的项目了。
总结
以上就是使用 Bun 进行 Web 前端开发的基本流程。从安装 Bun 到创建项目，再到编写代码和配置构建工具，每一步都非常直观且高效。Bun 的设计使得整个开发过程更加简洁和高效，非常适合现代前端开发的需求。