使用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会根据不同导出方式生成的代码中的关键字或传入的具体实参进行判断，确定相应的导出方式。

使用WebPack构建UMD库兼容性原理浅谈相关推荐

Java 线上问题排查神器 Arthas 快速上手与原理浅谈
[Arthas 官方社区正在举行征文活动,参加即有奖品拿哦~点击投稿] 作者 | 杨桢栋,笔名叫蛮三刀把刀,是一名一线互联网码农,留美访学一年,主要关注后端开发,数据安全,爬虫,物联网,边缘计算等方向 ...
深度学习 | BN层原理浅谈
深度学习 | BN层原理浅谈文章目录深度学习 | BN层原理浅谈一. 背景二. BN层作用三. 计算原理四. 注意事项为什么BN层一般用在线性层和卷积层的后面,而不是放在激活函数后为什 ...
PS-第十二天-PS色阶的使用原理浅谈
PS色阶的使用原理浅谈色阶是什么:色阶就是用直方图描述出的整张图片的明暗信息. 样图如图,从左至右是从暗到亮的像素分布,黑色三角代表最暗地方(纯黑),白色三角代表最亮地方(纯白).灰色三角代表中间 ...
汽车钥匙芯片工作原理浅谈汽车钥匙芯片作用及分类
工程师谭军发表于 2018-10-08 10:01:00 http://m.elecfans.com/article/791926.html 本文主要是关于汽车钥匙芯片的相关介绍,并着重对汽车钥匙芯 ...
Java线上问题排查神器Arthas快速上手与原理浅谈
前言当你兴冲冲地开始运行自己的Java项目时,你是否遇到过如下问题: 程序在稳定运行了,可是实现的功能点了没反应. 为了修复Bug而上线的新版本,上线后发现Bug依然在,却想不通哪里有问题? 想到可 ...
TreeMap原理(浅谈)
文章目录一. 回顾二. 储备知识 2.1 Comparable和Comparator 2.2 一致性hash 三. TreeMap 3.1 成员变量 3.2 静态常量 3.3 构造方法到这里,提 ...
php smarty 原理,php模板原理PHP模板引擎smarty模板原理浅谈
mvc是开发中的一个伟大的思想,使得开发代码有了更加清晰的层次,让代码分为了三层各施其职.无论是对代码的编写以及后期的阅读和维护,都提供了很大的便利. 我们在php开发中,视图层view是不允许有ph ...
虚拟化构建二分图（BZOJ2080 题解+浅谈几道双栈排序思想的题）
虚拟化构建二分图 ------BZOJ2080 题解+浅谈几道双栈排序思想的题本题的题解在最下面↓↓↓ 不得不说,第一次接触类似于双栈排序的这种题,是在BZOJ的五月月赛上. [BZOJ4881][ ...
[深度学习-原理]浅谈Attention Model
系列文章目录深度学习NLP(一)之Attention Model; 深度学习NLP(二)之Self-attention, Muti-attention和Transformer; 深度学习NLP(三) ...
webpack构建之tree-shaking的原理是什么
我们在开发一个项目的时候,总会遇到这样的问题,就是比如我们写了一个utils工具类,我们在某一个组件内要用到utils这个类里的其中一个或者某几个方法,但是当我们引入utils的时候,实际是将util ...

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

使用WebPack构建UMD库兼容性原理浅谈相关推荐

最新文章

热门文章