在使用 Vite 构建 UMD 库时，默认情况下，UMD 模块会将导出的内容挂载到全局对象（如 window）上，这可能会导致全局命名空间的污染。为了避免全局污染，你可以通过以下方式在 HTML 中直接调用导出的方法：
library 和 libraryTarget 配置在 Vite 配置中，你可以通过 build.lib 选项来指定库的名称和导出方式。通过设置 library 和 libraryTarget，你可以控制库的导出行为。
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
build: {
lib: {
entry: './src/main.js', // 你的入口文件
name: 'MyLibrary', // 库的全局变量名
formats: ['umd'], // 输出格式为 UMD
fileName: 'my-library', // 输出的文件名
},
},
});
IIFE 包裹为了避免全局污染，你可以将 UMD 模块包裹在一个立即调用的函数表达式（IIFE）中。这样，库的导出内容不会直接暴露在全局对象上。
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
build: {
lib: {
entry: './src/main.js',
name: 'MyLibrary',
formats: ['umd'],
fileName: 'my-library',
},
rollupOptions: {
output: {
// 使用 IIFE 包裹 UMD 模块
intro: '(function() {',
outro: '})();',
},
},
},
});
在 HTML 中，你可以通过 script 标签引入构建后的 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</title>
</head>
<body>
<script src="dist/my-library.umd.js"></script>
<script>
// 调用导出的方法
MyLibrary.myExportedFunction();
</script>
</body>
</html>
export 和 import 语法如果你希望在 HTML 中使用 ES 模块的方式导入库，可以将库构建为 ES 模块格式，并在 HTML 中使用 type="module" 的 script 标签。
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
build: {
lib: {
entry: './src/main.js',
name: 'MyLibrary',
formats: ['es'], // 输出格式为 ES 模块
fileName: 'my-library',
},
},
});
然后在 HTML 中使用 ES 模块的方式导入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite ES Module Library</title>
</head>
<body>
<script type="module">
import { myExportedFunction } from './dist/my-library.es.js';
myExportedFunction();
</script>
</body>
</html>
通过以上方法，你可以避免 UMD 库在全局命名空间中的污染，并在 HTML 中直接调用导出的方法。如果你希望进一步减少全局污染，可以考虑使用 ES 模块格式，并在 HTML 中使用 type="module" 的 script 标签。