用纯React和Bun

2 年 ago
宇, 华
2 minutes

前言

本文是“日本大学2023年圣诞日历”的第五天的文章。

最近Bun以其「性能优异」的表现而在各个地方成为话题，但其卓越之处不仅在于性能，还包含了各种功能。

在众多选项中，本次我们将尝试使用Bun作为打包工具和转译器，构建一个纯React环境?

已完成的事情

 

最终依赖

非常简单，对吧？

{
  "devDependencies": {
    "@types/react": "^18.2.42",
    "@types/react-dom": "^18.2.17",
    "@types/web": "^0.0.125",
    "bun-types": "latest"
  },
  "peerDependencies": {
    "typescript": "^5.0.0"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

仓库的初始化

建立Bun的环境配置

本次我们将源代码的入口点设为src/index.tsx。

安装Deps

安装所需的包。只需这个命令就能初步运行React。

设定命名空间

由于Bun中不存在像document这样的浏览器命名空间，所以需要安装@types/web，并将其添加到tsconfig.json的”types”中。

写最基本的代码

首先，我们可以简单地创建一个脚本的入口点，如下所示。
没有引入任何库，突然间插入标签可能会让人担心，但没关系的。Bun的包管理器默认支持JSX。

import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import { App } from "./App"

const rootElement = document.getElementById("root")! // これが取得できなければエラーで止まるべき
const root = createRoot(rootElement)
root.render(
  <StrictMode>
    <App />
  </StrictMode>
)

是一个普通的React组件，没有什么特别之处。
我们这次随便这样处理吧：

import { useState } from "react"

export const App = () => {
  const [cnt, setCnt] = useState(0)
  return (
    <div>
      <h1>bun!</h1>
      <button onClick={() => setCnt((prev) => prev + 1)}>count: {cnt}</button>
    </div>
  )
}

好的，这是一个了不起的SPA完成了！

我来试着构建一下

让我们立即进行构建。

% bun build ./src/index.tsx --outdir ./build
image.png

后续需要修正的是，可能存在未经Minify处理的代码或者开发环境下生成的React版本输出。

动作检查

我将创建 build/index.html，并尝试将刚刚构建的 index.js 附加上去。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bun-Minimal-React</title>
  </head>
  <body>
    <div id="root"></div>
    <noscript>
      JavaScript is disabled! You need JavaScript to view this page.
    </noscript>
    <script src="index.js" defer></script>
  </body>
</html>

让我们尝试通过启动本地服务器或双击打开 build/index.html 文件。

image.png

你的表现真是出色啊，而且操作起来真的很方便！

让我们尝试进行生产构建

请你看一下刚刚构建完成的屏幕。

% bun build ./src/index.tsx --outdir ./build

  ./index.js  962.62 KB

[20ms] bundle 11 modules

尽管只实现了基本的计数功能，但仍然可以生成大型捆绑包。这是不可接受的，所以我们会创建小型捆绑包。

% NODE_ENV=production bun build ./src/index.tsx --outdir ./build --minify

  ./index.js  138.29 KB

[9ms] bundle 8 modules

变得小了呢。
编译只用了9毫秒就结束了。快！

虽然情报有限，但潜力是存在的。

当你真正想要创造一些东西时，可能会涉及许多任务，例如引入CSS助手和设置路由等。不过，如果只是让React本身运转起来，只需要这么一点代码就可以了。而且构建速度也很快，一旦过程被建立起来，还有可能改善开发体验。

这次我尝试使用Bun的包管理器和转译器，但Bun中还搭载了其他诸如SQLite3驱动和Jest兼容的测试引擎等各种不同的工具。如果能参与到这些生态系统中，感觉可以做很多有趣的事情！期待有人能写篇文章来介绍一下！

附加：我尝试着做一个类似SPA框架的东西

為了撰寫這篇文章，我試圖開發一個能盡可能利用Bun生態系統進行調查的框架。
由於仍在開發中，可能還存在一些問題。由於資料有限，我有些不知如何下手，所以如果有改進建議或者合適的文章題材，請一定告訴我。

演示地址：https://avaice.github.io/bun-minimal-react/

 

✖
广告
将在 10 秒后关闭
bannerAds