企业官网建设流程全解析

如何在浏览器中打开 esbuild 的 WebAssembly 版 try.html 快速验证行为

【免费下载链接】esbuildAn extremely fast bundler for the web项目地址: https://gitcode.com/GitHub_Trending/es/esbuild

如果你想在浏览器里快速试一下 esbuild 的转换行为——比如某个--target会把新语法降级成什么样子、minify 各开关的输出差异、Bundle 与 Transform 两种模式的区别——esbuild 仓库自带了一个 playground 页面 scripts/try.html。它在浏览器中加载 esbuild 的 WebAssembly 构建，左侧输入代码，右侧实时显示转换结果。官方在 docs/development.md 的 “Running in the browser” 一节给出的操作路径是：先构建 WebAssembly 版，再把仓库目录通过 HTTP 服务出去，最后在浏览器中访问/scripts/try.html。本文按这条路径把前置条件、命令和页面用法串起来。

准备条件

构建 WebAssembly 版由 Makefile 的platform-wasm目标完成，它依赖三样东西：

• Go：docs/development.md 说明构建 esbuild 的前提是 “Assuming you have Go installed”。Makefile 顶部的check-go-version目标要求版本与 go.version 一致，当前仓库中该文件记录的是1.26.5，不满足时会提示Please install Go version 1.26.5。
• node：Makefile 通过NODE = $(shell which node)取 node 路径，platform-wasm的构建命令由 node 执行。
• make：docs/development.md 的替代方案是手动go build ./cmd/esbuild，但platform-wasm目标本身需要 make 调度。

platform-wasm的执行过程（见 Makefile 第 458–463 行）有这些副作用，执行前需要知道：

1. 先构建本机原生esbuild可执行文件（Windows 下为esbuild.exe）；
2. 下载 Go 源码包（https://go.dev/dl/go1.26.5.src.tar.gz，见 Makefile 的go/$(GO_VERSION)目标）并在go/1.26.5/go下本地编译一套定制 Go 工具链，因此需要联网；
3. 最终生成npm/esbuild-wasm/esbuild.wasm，并在终端输出该文件的 SHA-256 值（shasum -a 256 npm/esbuild-wasm/esbuild.wasm）。

构建产物写入仓库目录，属于正常的开发构建行为，不会修改源代码。

第一步：构建 WebAssembly 版

在仓库根目录执行：

make platform-wasm

完成标志：npm/esbuild-wasm/esbuild.wasm存在，且终端打印了其 shasum。这个文件就是 try.html 页面在浏览器中实际运行的 wasm 二进制。

第二步：把仓库目录作为 HTTP 服务

构建完成后，在仓库根目录启动 esbuild 自带的本地 HTTP 服务器：

./esbuild --servedir=.

docs/development.md 原文就是 “Serve the repo directory over HTTP (such as with./esbuild --servedir=.)”。几点需要说明：

• 该命令是一个前台常驻进程，会一直运行直到你在终端按Ctrl+C结束。
• 不传任何 entry point 时 esbuild 不会构建任何文件，只会像普通 web 服务器一样提供静态文件——这一点在 CHANGELOG-2021.md 对--servedir=的描述中被明确记录。
• 服务端口：仓库内 scripts/gradient-tests.html 的例子展示--servedir=scripts后通过http://localhost:8000/访问页面，即未指定端口时的示例地址是 8000。因此根目录服务下，try.html 的完整地址是http://localhost:8000/scripts/try.html。
• 安全提示：CHANGELOG-2021.md 记录--serve类参数的默认监听地址从127.0.0.1改为了0.0.0.0（所有接口）。如果你只打算在本机浏览器验证，可以用--serve=127.0.0.1:8000显式限定回环地址。
• esbuild 的这个内置服务器提供的是源码的只读视图，Makefile 注释中说明它 “is not intended for production use”，不要把它当生产服务器用。

第三步：在浏览器中打开 try.html

访问http://localhost:8000/scripts/try.html（即 docs/development.md 所说的 “Visit/scripts/try.htmlin your browser”）。

页面加载的前提是它引用的两个文件能取到。scripts/try.html 源码中写死的是相对路径：

• <script src="../npm/esbuild-wasm/lib/browser.js">
• esbuild.initialize({ wasmURL: '../npm/esbuild-wasm/esbuild.wasm' })

由于页面位于/scripts/下，这两个相对路径正好落在npm/esbuild-wasm/内。这也解释了为什么服务根必须是仓库根目录：服务根给错时，browser.js或esbuild.wasm会 404，页面无法完成初始化。

页面用法与如何验证行为

页面布局是左右两栏：左侧 Input（输入代码的 textarea），右侧 Output（转换结果）。输入后页面会在 50ms 防抖后自动执行一次转换（runIfIdle），不需要手动触发；页面首次加载时也会自动跑一次。

可选参数都来自 try.html 的控件：

• Target：ES5～ESNext，以及Chrome70～Chrome89，默认ESNext。
• Loader：JS（默认）、JSX、TS、TSX、CSS、JSON、Text、Base64、DataURL、Binary。
• Format：Preserve（默认）、IIFE、CJS、ESM。
• 复选框：Bundle、ASCII、Keep Names、Mangle Props，以及分开的Minify: Syntax / Identifiers / Whitespace。

两种执行模式的区别（对应 try.html 中的代码逻辑）：

• 不勾选Bundle时调用esbuild.transform，只转换你输入的单段代码；
• 勾选Bundle时调用esbuild.build，并挂了一个名为external-all的插件把所有 import 标记为 external——也就是说 bundle 模式只演示单入口的打包结构，不会真的去解析外部依赖。

验证方式很简单：在输入框里写一段代码，观察右侧 Output 随选项变化。判断依据来自页面自身的行为（scripts/try.html）：

• 转换成功时，Output 区域显示结果代码；
• 出现语法或转换错误时，错误信息（以及 warnings，经过esbuild.formatMessages格式化）显示在结果代码上方，并用颜色区分终端风格。

一个仓库自带的转换示例可作参照：Makefile 的test-deno目标断言transform("1+2")的代码输出包含1 + 2;（见 Makefile 第 104 行）。你可以把1+2输入 try.html 对照观察，这只是文档示例，不要当作任何固定数值预期。

另外，所有下拉框、复选框和输入内容都会存入sessionStorage，刷新页面后仍保留上次状态；若页面行为看起来“没变”，先确认是不是上次的选项被恢复了。

限制与收尾

• docs/development.md 对这套流程的定位是 “lets you try out lots of things rapidly”，即快速试验，不等同于完整的 npm 包esbuild-wasm的部署验证；npm 包自身的说明见 npm/esbuild-wasm/README.md。
• 内置服务器的默认监听地址是0.0.0.0，在多用户机器上注意用--serve=127.0.0.1:8000限定；验证完成后记得在终端结束./esbuild --servedir=.进程。
• 若只需要转换单文件而不需要浏览器交互，直接用构建出的原生./esbuild命令行即可，try.html 只覆盖 transform / bundle 两种单入口场景。

【免费下载链接】esbuildAn extremely fast bundler for the web项目地址: https://gitcode.com/GitHub_Trending/es/esbuild