如何在浏览器中打开 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目标完成它依赖三样东西Godocs/development.md 说明构建 esbuild 的前提是 “Assuming you have Go installed”。Makefile 顶部的check-go-version目标要求版本与 go.version 一致当前仓库中该文件记录的是1.26.5不满足时会提示Please install Go version 1.26.5。nodeMakefile 通过NODE $(shell which node)取 node 路径platform-wasm的构建命令由 node 执行。makedocs/development.md 的替代方案是手动go build ./cmd/esbuild但platform-wasm目标本身需要 make 调度。platform-wasm的执行过程见 Makefile 第 458–463 行有这些副作用执行前需要知道先构建本机原生esbuild可执行文件Windows 下为esbuild.exe下载 Go 源码包https://go.dev/dl/go1.26.5.src.tar.gz见 Makefile 的go/$(GO_VERSION)目标并在go/1.26.5/go下本地编译一套定制 Go 工具链因此需要联网最终生成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.)”。几点需要说明该命令是一个前台常驻进程会一直运行直到你在终端按CtrlC结束。不传任何 entry point 时 esbuild 不会构建任何文件只会像普通 web 服务器一样提供静态文件——这一点在 CHANGELOG-2021.md 对--servedir的描述中被明确记录。服务端口仓库内 scripts/gradient-tests.html 的例子展示--servedirscripts后通过http://localhost:8000/访问页面即未指定端口时的示例地址是 8000。因此根目录服务下try.html 的完整地址是http://localhost:8000/scripts/try.html。安全提示CHANGELOG-2021.md 记录--serve类参数的默认监听地址从127.0.0.1改为了0.0.0.0所有接口。如果你只打算在本机浏览器验证可以用--serve127.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.jsesbuild.initialize({ wasmURL: ../npm/esbuild-wasm/esbuild.wasm })由于页面位于/scripts/下这两个相对路径正好落在npm/esbuild-wasm/内。这也解释了为什么服务根必须是仓库根目录服务根给错时browser.js或esbuild.wasm会 404页面无法完成初始化。页面用法与如何验证行为页面布局是左右两栏左侧 Input输入代码的 textarea右侧 Output转换结果。输入后页面会在 50ms 防抖后自动执行一次转换runIfIdle不需要手动触发页面首次加载时也会自动跑一次。可选参数都来自 try.html 的控件TargetES5ESNext以及Chrome70Chrome89默认ESNext。LoaderJS默认、JSX、TS、TSX、CSS、JSON、Text、Base64、DataURL、Binary。FormatPreserve默认、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(12)的代码输出包含1 2;见 Makefile 第 104 行。你可以把12输入 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在多用户机器上注意用--serve127.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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何在浏览器中打开 esbuild 的 WebAssembly 版 try.html 快速验证行为
如何在浏览器中打开 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目标完成它依赖三样东西Godocs/development.md 说明构建 esbuild 的前提是 “Assuming you have Go installed”。Makefile 顶部的check-go-version目标要求版本与 go.version 一致当前仓库中该文件记录的是1.26.5不满足时会提示Please install Go version 1.26.5。nodeMakefile 通过NODE $(shell which node)取 node 路径platform-wasm的构建命令由 node 执行。makedocs/development.md 的替代方案是手动go build ./cmd/esbuild但platform-wasm目标本身需要 make 调度。platform-wasm的执行过程见 Makefile 第 458–463 行有这些副作用执行前需要知道先构建本机原生esbuild可执行文件Windows 下为esbuild.exe下载 Go 源码包https://go.dev/dl/go1.26.5.src.tar.gz见 Makefile 的go/$(GO_VERSION)目标并在go/1.26.5/go下本地编译一套定制 Go 工具链因此需要联网最终生成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.)”。几点需要说明该命令是一个前台常驻进程会一直运行直到你在终端按CtrlC结束。不传任何 entry point 时 esbuild 不会构建任何文件只会像普通 web 服务器一样提供静态文件——这一点在 CHANGELOG-2021.md 对--servedir的描述中被明确记录。服务端口仓库内 scripts/gradient-tests.html 的例子展示--servedirscripts后通过http://localhost:8000/访问页面即未指定端口时的示例地址是 8000。因此根目录服务下try.html 的完整地址是http://localhost:8000/scripts/try.html。安全提示CHANGELOG-2021.md 记录--serve类参数的默认监听地址从127.0.0.1改为了0.0.0.0所有接口。如果你只打算在本机浏览器验证可以用--serve127.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.jsesbuild.initialize({ wasmURL: ../npm/esbuild-wasm/esbuild.wasm })由于页面位于/scripts/下这两个相对路径正好落在npm/esbuild-wasm/内。这也解释了为什么服务根必须是仓库根目录服务根给错时browser.js或esbuild.wasm会 404页面无法完成初始化。页面用法与如何验证行为页面布局是左右两栏左侧 Input输入代码的 textarea右侧 Output转换结果。输入后页面会在 50ms 防抖后自动执行一次转换runIfIdle不需要手动触发页面首次加载时也会自动跑一次。可选参数都来自 try.html 的控件TargetES5ESNext以及Chrome70Chrome89默认ESNext。LoaderJS默认、JSX、TS、TSX、CSS、JSON、Text、Base64、DataURL、Binary。FormatPreserve默认、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(12)的代码输出包含1 2;见 Makefile 第 104 行。你可以把12输入 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在多用户机器上注意用--serve127.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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考