使用Bun build编译浏览器代码时遇Uncaught SyntaxError: Unexpected token 'export'错误

问题根源 #

你编译后的代码是ES模块格式（带有export语句），但如果直接用普通<script>标签在浏览器中引入，浏览器会将其当作普通脚本解析，无法识别ES模块的语法，因此抛出Uncaught SyntaxError: Unexpected token 'export'错误。另外，bun build针对browser目标时，默认输出ES模块，这也是导致问题的直接原因。

解决方法 #

方法1：调整HTML引入方式 #

在HTML中使用type="module"属性引入编译后的文件，告诉浏览器按ES模块规则解析代码：

<script type="module" src="./out/frontindex.js"></script>

方法2：指定bun输出非模块格式 #

修改build命令，添加--format=iife参数，强制输出立即执行函数（IIFE）格式，这种格式不需要模块支持，可直接用普通<script>标签引入：

bun build ./frontindex.ts --outdir ./out --sourcemap=external --target=browser --format=iife

补充说明 #

• 编译结果中hellotest函数被移除是正常的tree-shaking优化行为，bun会自动剔除未被引用或导出的代码。如果需要保留该函数，可添加--no-tree-shaking参数，但会增加最终代码体积，不推荐。

内容的提问来源于stack exchange，提问作者sander