如何在 Vite 打包的 UMD 文件中使用暴露的方法？

在 Vite 打包的 UMD 文件中使用暴露的方法，可通过以下两种方式实现，具体操作和原理如下：

这是最通用的方法，适用于所有模块化场景，尤其当目标环境不确定是否为浏览器时。

• 步骤 1：导出方法并挂载到 window在打包入口文件（如 main.ts）中，显式将方法挂载到 window：

  const canvasEditorFun = { initEditorByFile, getHtml, saveCeData, initEditorByData};// 挂载到 window 对象(window as any).canvasEditorFun = canvasEditorFun;export default canvasEditorFun; // 可选：同时保留模块导出

• 步骤 2：在 HTML 中直接调用打包后生成的 UMD 文件会通过 <script> 引入，挂载的方法可直接通过 window 访问：

  <script src="./umd.js"></script><script> // 直接调用挂载的方法 canvasEditorFun.initEditorByFile(); // 或 window.canvasEditorFun.initEditorByFile()</script>

• 优点

  兼容性强，适用于非浏览器环境（如 Node.js）。

  无需额外配置 Vite。

• 缺点

  污染全局命名空间，可能与其他库冲突。

此方法利用 Vite 的 build.lib 和 rollupOptions.output.external 配置，将方法直接暴露到全局作用域，无需手动挂载 window。

• 步骤 1：配置 Vite 打包选项在 vite.config.ts 中，设置 build.lib 和 external：

  import { defineConfig } from 'vite';import path from 'path';export default defineConfig({ build: { lib: { entry: path.resolve(__dirname, 'src/main.ts'), // 入口文件 name: 'canvasEditorFun', // 全局变量名 fileName: 'canvasEditorFun', // 输出文件名 formats: ['umd'] // 指定 UMD 格式 }, rollupOptions: { output: { // 声明外部依赖（可选，若需排除某些模块） external: ['my-external-module'], // 示例：排除外部模块 globals: { // 若 external 模块需映射到全局变量（如 jQuery） 'my-external-module': 'MyExternalModule' } } } }});

• 步骤 2：导出方法（无需挂载 window）在入口文件（如 main.ts）中直接导出对象：

  export const canvasEditorFun = { initEditorByFile, getHtml, saveCeData, initEditorByData};// 无需手动挂载到 window，Vite 会自动处理

• 步骤 3：在 HTML 中调用打包后的 UMD 文件会通过全局变量 canvasEditorFun 暴露方法：

  <script src="./canvasEditorFun.umd.js"></script><script> // 直接调用全局变量 canvasEditorFun.initEditorByFile();</script>

• 原理说明

  Vite 的 build.lib.name 会指定 UMD 模块的全局变量名（如 canvasEditorFun）。

  若配置了 external，被排除的模块不会打包进 UMD 文件，而是作为外部依赖（需通过 <script> 另行引入）。

• 优点

  避免手动挂载 window，代码更简洁。

  可通过 external 优化打包体积，排除已知外部依赖。

• 缺点

  仅在浏览器环境有效（依赖全局变量）。

  需确保 build.lib.name 与调用时的全局变量名一致。

1. 方法未暴露到全局

   检查 build.lib.name 是否配置正确。

   确保打包格式为 umd（非 es 或 cjs）。

2. external 模块报错

   若使用 external，需在 HTML 中手动引入外部依赖：<script src="

   https://cdn.example.com/my-external-module.js"></script><script
   src="./canvasEditorFun.umd.js"></script>

3. TypeScript 类型提示

   在全局声明文件中补充类型（如 global.d.ts）：declare global { interface Window { canvasEditorFun: { initEditorByFile: () => void; // 其他方法类型... }; }}

• 浏览器环境：优先使用方法二（Vite 配置暴露），代码更简洁且避免全局污染。
• 跨环境兼容：使用方法一（手动挂载 window），确保在 Node.js 等非浏览器环境可用。
• 外部依赖管理：若需排除大型库（如 Lodash），结合 external 优化打包体积。