webpack UMD库重复引入报错，如何避免全局变量被重复覆盖？

咱们先捋清楚问题出在哪：你当前的Webpack UMD配置，每次加载bundle.js都会重新初始化库并覆盖全局变量MyLib，重复引入就会导致多个实例互相干扰，进而蹦出各种错误。要解决这个问题，核心思路就是在库初始化前先检查全局环境里有没有已经存在的目标变量，有的话直接复用已有实例，不重新创建。

下面给你两种可行的实现方式：

1. 在库的入口文件添加全局检查逻辑 #

这是最直接好上手的方案，在你的库核心代码执行前，先判断全局环境（浏览器的window、Node.js的global等）中是否已经存在MyLib，如果有就直接导出已有实例，跳过后续初始化流程。

举个具体的代码示例（假设你的入口文件是src/index.js）：

// 先检查全局环境是否已有MyLib实例
const root = typeof self !== 'undefined' ? self : globalThis;
if (root.MyLib) {
  // 如果已存在，直接导出已有实例，终止后续执行
  module.exports = root.MyLib;
  return;
}

// 你的库核心代码
const MyLib = {
  // 这里是你的库方法和属性
  greet: () => console.log('Hello from MyLib!'),
  // ...其他功能代码
};

// 自定义UMD包裹逻辑（替代Webpack默认的UMD模板，更灵活）
(function (global, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD环境（比如RequireJS）
    define([], factory);
  } else if (typeof module === 'object' && module.exports) {
    // Node.js/CommonJS环境
    module.exports = factory();
  } else {
    // 全局变量环境（浏览器）
    global.MyLib = factory();
  }
}(root, function () {
  return MyLib;
}));

这段代码的关键是：

• 先判断全局环境中的MyLib是否存在，存在则直接导出并终止执行
• 自定义UMD包裹逻辑，确保只有在全局变量不存在时才赋值

2. 自定义Webpack的UMD模板（进阶方案） #

如果你不想修改入口文件，也可以通过自定义Webpack的UMD模板来实现检查逻辑。比如用BannerPlugin在生成的bundle.js顶部注入检查代码：

const webpack = require('webpack');

module.exports = {
  // ...其他配置
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    library: 'MyLib',
    libraryTarget: 'umd',
  },
  plugins: [
    new webpack.BannerPlugin({
      banner: `
        const root = typeof self !== 'undefined' ? self : globalThis;
        if (root.MyLib) {
          module.exports = root.MyLib;
          return;
        }
      `,
      raw: true, // 确保代码被原样注入，不被转义
      entryOnly: true, // 只在入口文件顶部注入
    })
  ]
};

不过这种方式需要注意Webpack版本的兼容性，不同版本的UMD模板可能有差异，所以更推荐第一种入口文件直接处理的方案。

验证方案是否生效 #

你可以在HTML中多次引入bundle.js，然后打开浏览器控制台：

<script src="./dist/bundle.js"></script>
<script src="./dist/bundle.js"></script>
<script>
  MyLib.greet(); // 应该只输出一次初始化日志（如果你的库有初始化日志的话），且不会报错
</script>

如果控制台没有报错，且库的功能正常，就说明检查逻辑生效了。

内容的提问来源于stack exchange，提问作者alex88