Vite打包UMD文件后,如何在HTML中直接调用暴露的方法?
有一个打包好的文件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个回答

test
2024-06-19
只能全局引用(即挂载到 window
上),然后通过合理的路径调用。
不过你完全可以多打包几份,比如 umd、iife、esm 各一份,然后按照你的需要引用。
回复

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