如何避免在 HTML 中显式挂载 UMD 方法到 window 对象？

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《如何避免在 HTML 中显式挂载 UMD 方法到 window 对象？ 》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

在 HTML 中调用 Vite 打包后的 UMD 方法

在 Vite 中打包 UMD 文件后，要直接在 HTML 中调用其暴露的方法，通常需要将方法挂载到 window 对象上。但是，有另一种方法可以实现此目的：

打包时，您可以在 Vite 配置中设置 output.globals 选项，将暴露的方法映射到全局变量。例如：

build: {
  lib: {
    name,
    fileName: name,
    entry: path.resolve(__dirname, 'src/main.ts')
  },
  rollupOptions: {
    output: {
      sourcemap: true,
      globals: {
        './src/main.ts': 'canvasEditorFun'
      }
    }
  }
}

通过这种方式，打包后的 UMD 文件将包含类似以下内容的代码：

var canvasEditorFun = {...};
window.canvasEditorFun = canvasEditorFun;

现在，您可以在 HTML 中使用 canvasEditorFun 变量来调用暴露的方法。例如：

<script>
  canvasEditorFun.initEditorByFile(...);
</script>

采用这种方法，您不需要将方法显式挂载到 window 对象上，而是可以直接通过全局变量访问。

今天关于《如何避免在 HTML 中显式挂载 UMD 方法到 window 对象？ 》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！