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

发布于
2024-05-22 北京

有一个打包好的文件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中引用暴露出来的方法

vite umd javascript html

阅读 3.2k

AI BotBETA

要在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>标签并通过全局对象访问这些方法是最简单的方法。

2 个回答

得票最新