使用esbuild打包src目录JS文件为浏览器可用文件时遇问题

问题原因 #

1. Tree Shaking 优化：esbuild默认会移除未被引用的代码，你在index.js里仅导入了test1.js和test2.js，但未使用导出的函数，这些代码被自动摇除，导致打包后的文件为空。
2. 模块作用域隔离：ES模块的变量/函数默认处于模块作用域内，不会暴露到全局window对象，因此浏览器中直接调用helloFrom1()会失败。

解决方案 #

方法一：手动将函数挂载到全局对象 #

修改src/index.js，把需要全局调用的函数挂载到window上：

import { helloFrom1 } from './test1.js';
import { helloFrom2 } from './test2.js';

// 挂载到window，让浏览器全局可访问
window.helloFrom1 = helloFrom1;
window.helloFrom2 = helloFrom2;

重新执行构建命令：

./node_modules/.bin/esbuild src/index.js --bundle --sourcemap --outdir=dist --watch

此时打包后的文件会包含两个函数的代码，浏览器中可直接调用helloFrom1()。

方法二：使用esbuild全局变量导出参数 #

若不想修改代码，可通过esbuild的--global-name参数将模块导出绑定到全局变量，同时确保导入的函数被引用：

首先修改src/index.js，导出需要的函数：

export { helloFrom1 } from './test1.js';
export { helloFrom2 } from './test2.js';

然后修改构建命令，添加--global-name指定全局变量名（示例用MyLib）：

./node_modules/.bin/esbuild src/index.js --bundle --sourcemap --outdir=dist --watch --global-name=MyLib

此时在HTML中需通过全局变量调用：

<script>
    MyLib.helloFrom1();
</script>

验证效果 #

执行构建后，dist/index.js会包含test1.js和test2.js的函数代码，打开index.html后，控制台会输出Hello from 1。

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