Vite构建的UMD库，如何在HTML中直接调用其方法？

使用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模块并使用