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

在html中直接调用暴露的方法

问题描述：

vite打包后生成了一个umd文件，如何在html中直接调用该文件暴露的方法？目前已尝试挂载到window上，是否还有其他方法？

配置信息：

import { visualEditorPlugin } from '@jim/visual-editor';
export default function config() {
  return {
    vue: {
      template: {
        compilerOptions: {
          delimiters: [
            '{#',
            '#}'
          ]
        }
      }
    },
    plugins: [
      visualEditorPlugin({
        cachePath: cachePath
      }),
      cssInjectedByJsPlugin({
        styleId: `${name}-style`,
        topExecutionPriority: true
      }),
      {
        ...typescript({
          tsconfig: './tsconfig.json',
          include: ['./src/**']
        }),
        apply: 'build',
        declaration: true,
        declarationDir: 'types/',
        rootDir: '/'
      }
    ],
    build: {
      lib: {
        name,
        fileName: name
      },
      rollupOptions: {
        output: {
          sourcemap: true
        }
      }
    }
  };
}

答案：

目前只能通过挂载到全局对象（即 window）的方式进行调用，之后通过合理路径直接调用即可。

另外，也可以考虑打包多种格式，例如 umd、iife、esm，然后根据需要引用。

以上就是Vite 打包 UMD 文件后，如何直接在 HTML 中调用其暴露的方法？的详细内容，更多请关注硕下网其它相关文章！