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

作者站长头像
站长
· 阅读数 13

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

回复
1个回答
avatar
test
2024-06-19

只能全局引用(即挂载到 window 上),然后通过合理的路径调用。

不过你完全可以多打包几份,比如 umd、iife、esm 各一份,然后按照你的需要引用。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容