如何打包ES6 JavaScript框架以实现Web端可访问内部函数与类？

要让打包后的Web代码能直接在<script>标签里调用自定义函数或类，关键是让esbuild把你的导出内容挂载到全局作用域，具体通过指定打包格式和全局变量名实现：

1. 核心打包命令 #

针对你提供的app.js，运行以下esbuild命令：

esbuild app.js --bundle --minify --format=iife --globalName=MyLib --outfile=bundle.js

参数说明：

• --bundle：将所有依赖（包括你导入的package源码）打包进最终文件
• --minify：生成压缩后的生产环境代码
• --format=iife：采用自执行函数格式，同时支持绑定全局变量
• --globalName=MyLib：指定全局变量名，你的导出内容会挂载到这个变量上
• --outfile=bundle.js：设置输出的打包文件名

2. 网页中调用方式 #

打包完成后，在HTML里引入bundle.js，即可直接通过全局变量调用你的函数：

<script src="bundle.js"></script>
<script>
  // 直接调用自定义函数a
  MyLib.a('测试参数');
</script>

3. 原理说明 #

默认情况下，esbuild的IIFE打包会把代码包裹在闭包里避免污染全局，但--globalName参数会让它在闭包末尾添加全局变量赋值逻辑，相当于：

window.MyLib = { a: a };

这样你的导出对象就被挂载到window上，自然能在全局作用域访问。

4. 拓展说明 #

• 如果你的代码是export function a() {}这类具名导出，打包后同样可以通过MyLib.a访问
• 若需适配非浏览器环境，可通过--define:window=globalThis调整全局对象指向，Web环境默认使用window即可

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