javascript - Vite打包UMD文件后，如何在HTML中直接调用暴露的方法？

Question

有一个打包好的文件umd.js文件，我希望能在html中直接使用他暴露出来的方法，出了将方法挂载到window上还有其他办法吗，这个是我暴露方式，打包是它通过vite打包的

const canvasEditorFun = {  initEditorByFile,  getHTML,  saveCEData,  initEditorByData}export default canvasEditorFun

vite.config.ts

plugins: [        cssInjectedByJsPlugin({          styleId: `${name}-style`,          topExecutionPriority: true        }),        {          ...typescript({            tsconfig: './tsconfig.json',            include: ['./src/**']          }),          apply: 'build',          declaration: true,          declarationDir: 'types/',          rootDir: '/'        }      ],      build: {        lib: {          name,          fileName: name,          // entry: path.resolve(__dirname, 'src/editor/index.ts')          entry: path.resolve(__dirname, 'src/main.ts')        },        rollupOptions: {          output: {            sourcemap: true          }        }      }

我希望可以直接在html中引用暴露出来的方法

Answer 1

要在HTML中直接使用Vite打包的UMD模块中暴露的方法，确实最直接的方式是将这些方法挂载到window对象上。但如果你不想这样做，还有其他几种方法可以实现你的目标。

1. 使用模块加载器

你可以使用像RequireJS或SystemJS这样的模块加载器来在浏览器中动态加载UMD模块，并调用其暴露的方法。这要求你的HTML页面包含模块加载器的脚本，并使用加载器的API来加载和执行你的UMD模块。

2. 使用<script type="module">

如果你的环境支持ES模块（即现代浏览器），你可以使用<script type="module">标签来加载和执行ES模块。然而，Vite默认打包成UMD格式，这可能不是纯粹的ES模块。你需要确保你的Vite配置可以输出ES模块格式的构建产物，然后你可以这样做：

<script type="module">  import { initEditorByFile, getHTML, saveCEData, initEditorByData } from './path/to/umd.js';  // 然后你可以调用这些方法  initEditorByFile();  // ...其他方法调用</script>

请注意，即使你的Vite配置输出UMD文件，你可能需要确保UMD模块暴露一个可以从ES模块导入的接口。这可能需要修改你的模块暴露方式，或者在你的Vite配置中指定一个不同的输出格式。

3. 使用<script>标签并查询全局对象

如果UMD模块确实将某些内容暴露到全局作用域（比如window），你可以通过<script>标签加载UMD文件，然后查询全局对象来获取你想要的方法。但这种方式并不是直接调用暴露的方法，而是间接通过全局对象来访问。

<script src="path/to/umd.js"></script><script>  // 假设UMD模块将canvasEditorFun对象暴露到了window上  if (window.canvasEditorFun) {    window.canvasEditorFun.initEditorByFile();    // ...其他方法调用  }</script>

总结

如果你希望直接在HTML中引用UMD模块暴露的方法而不挂载到window上，那么使用模块加载器或<script type="module">可能是更好的选择。然而，这通常意味着你需要对模块构建和加载有更多的控制，并可能需要修改你的模块暴露方式或Vite配置。如果你只是想要简单地在HTML中使用这些方法，并且不介意将它们添加到全局作用域，那么使用<script>标签并通过全局对象访问这些方法是最简单的方法。