使用WebPack构建UMD库兼容性原理浅谈

参考如何用webpack打包umd模块并测试打包结果 - JavaShuo的测试例子，

测试例子为：

//add.js
module.exports = function add(a, b) {
  return a + b;
};

为什么打包后可以兼容不同模块化导入方式？

首先来看看使用webpack对测试例子打包后的umd库源代码：

!function (e, t) {
    "object" == typeof exports && "object" == typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define([], t) : "object" == typeof exports ? exports.add = t() : e.add = t()
}(self, (() => {
    return e = {
        716: e => {
            e.exports = function (e, t) {
                return e + t
            }
        }
    }, t = {}, function o(r) {
        var n = t[r];
        if (void 0 !== n) return n.exports;
        var f = t[r] = {exports: {}};
        return e[r](f, f.exports, o), f.exports
    }(716);
    var e, t
}));

很明显，兼容性体现在代码第二行，判断该以何种模块化导出方式进行导出。

为了进一步证实，将该umd文件导入到vue工程里，并且使用commonjs模块化方式引入该文件：

const add = require('./add')
console.log(add(1,2))

开发模式下，在控制台找到构建后add.js的代码如图所示：

构建后针对commonjs模块化导入方式对add.js进行了处理，在其最外层又包了一个函数function(module, exports, __webpack_require__)，打断点发现module和exports是Object类型的，同时add.js的代码内有这个判断：

"object" == typeof exports && "object" == typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define([], t) : "object" == typeof exports ? exports.add = t() : e.add = t()

exports和module即生成函数的实参，根据判断以module.exports = t()方式导出。

可以推断，如果代码中使用require方式引入umd库文件，编译处理后会在umd代码外层生成新的函数，函数实参里存在exports和module关键字，且都是Object类型的，因此umd库文件会判断，最终使用module.exports = t()方式导出。

其余导入方式原理类似，引入umd文件后经过编译处理，最终会在该文件内生成一些代码，不同导出方式生成的代码不一样，umd会根据不同导出方式生成的代码中的关键字或传入的具体实参进行判断，确定相应的导出方式。