使用Vite构建的UMD库在HTML中的直接调用方法
许多开发者在使用Vite构建UMD库后，希望在HTML文件中直接调用库中暴露的方法，避免复杂的模块导入步骤。本文探讨在不依赖额外模块加载器的情况下，如何直接在HTML中调用Vite构建的UMD库的方法。
问题描述：开发者使用Vite构建了一个名为umd.js的UMD库，其导出方式如下：
const canvaseditorfun = {
initeditorbyfile,
gethtml,
savecedata,
initeditorbydata
};
export default canvaseditorfun;
Vite配置文件vite.config.ts中配置了UMD构建选项：
立即学习“前端免费学习笔记（深入）”；
plugins: [
// ... other plugins
],
build: {
lib: {
name,
fileName: name,
entry: path.resolve(__dirname, 'src/main.ts')
},
rollupOptions: {
output: {
sourcemap: true
}
}
}
开发者希望直接在HTML中使用initeditorbyfile、gethtml等方法，无需额外的模块加载器。
虽然可以通过构建不同的模块格式（例如UMD、IIFE、ESM）来适应不同的使用场景，但直接在HTML中调用UMD库方法最便捷的方式仍然是将其挂载到window对象上。这是因为UMD库的设计初衷就是兼容各种模块系统，而全局变量是所有模块系统都支持的访问方式。 如果希望避免全局变量污染，需要采用ESM模块并使用标签导入，但这与使用UMD库的初衷相悖。 因此，在UMD库的场景下，将方法挂载到window对象上仍然是最直接、兼容性最好的方案。
