在使用 Vite 构建 UMD 库时，你可以通过以下步骤在 HTML 中直接调用其方法：
首先，确保你的 Vite 项目配置为构建 UMD 格式的库。你可以在 vite.config.js 中进行如下配置：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; // 如果你使用的是 Vue
export default defineConfig({
plugins: [vue()],
build: {
lib: {
entry: './src/main.js', // 你的库入口文件
name: 'MyLibrary', // 全局变量名
fileName: 'my-library', // 输出的文件名
formats: ['umd'], // 输出格式为 UMD
},
rollupOptions: {
// 确保外部化处理那些你不想打包进库的依赖
external: ['vue'],
output: {
globals: {
vue: 'Vue',
},
},
},
},
});
运行以下命令来构建你的库：
npm run build
构建完成后，你会在 dist 目录下找到生成的 UMD 文件，例如 my-library.umd.js。
在 HTML 文件中引入生成的 UMD 文件，并调用库中的方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite UMD Library Example</title>
</head>
<body>
<script src="dist/my-library.umd.js"></script>
<script>
// 调用库中的方法
const result = MyLibrary.someMethod();
console.log(result);
</script>
</body>
</html>
在 HTML 中，你可以通过全局变量 MyLibrary（这是在 vite.config.js 中配置的 name）来访问库中的方法。例如：
const result = MyLibrary.someMethod();
console.log(result);
假设你的库入口文件 src/main.js 如下：
export function someMethod() {
return 'Hello from UMD library!';
}
构建后，你可以在 HTML 中调用 someMethod 方法：
<script>
const result = MyLibrary.someMethod();
console.log(result); // 输出: "Hello from UMD library!"
</script>
通过以上步骤，你可以使用 Vite 构建一个 UMD 格式的库，并在 HTML 中直接调用其方法。确保在 vite.config.js 中正确配置了 lib 选项，并在 HTML 中正确引入了生成的 UMD 文件。