JavaScript在es6之前,本身并不支持模块化,随着前端项目的日益复杂化,大型化,让JavaScript不得不做模块化.现在主要有如下模块化解决方案:
这里不讨论各个模块化解决方案的使用,而是讨论区别是应用场景等
- AMD(require.js)
- CMD(sea.js)
- Common.js(node.js支持)
- UMD
- ESM(es6官方支持)
1. AMD和CMD
AMD和CMD是JavaScript中出现较早的模块化解决方案,且都服务于浏览器端,因此放在一起看.
AMD(Asynchronous Module Definition),采用异步加载模块,主要服务于浏览器端.
CMD(Common Module Definition),主要服务于浏览器端.
区别
- 加载和执行顺序不同
AMD官方推荐依赖前置加载并执行,而后执行模块内容; 2.0后也支持就近加载,但是依然不是官方推荐.
CMD推荐就近加载. - 对第三方库友好度
CMD的实现sea.js取义海纳百川,不强行要求别的库遵循CMD标准,但是能很好的兼容之.本人经过项目实践,觉得优于require.js.
AMD不那么友好
2.CommonJS
CommonJS主要服务于服务端,目前node.js支持CommonJS.
CommonJS同步加载模块,一个单独的文件就是一个模块,输出的是一个值的拷贝.
3.UMD
UMD是是AMD和CommonJS的结合.先判断是否是Node.js环境(node支持的exports是否存在), 在判断是否是AMD环境
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.libName = factory());
}(this, (function () { 'use strict';})));
4.ESM
es6推出的JavaScript模块化标准.
使用类似类型化语言的import和export
是静态化的模块系统,输出值只是一个引用,利于做代码静态分析.
5.ESM和CommonJS区别
- 最大的区别是ESM输出值的引用,CommonJS输出值的拷贝; 意味着ESM模块内部变化,会影响外部使用. 但是CommonJS模块内部变化不会影响外部.这也造成了两者巨大的冲突,在node.js中很难兼容,在node.js中只能用mjs后缀来区分使用两者.
- ESM静态编译,CommonJS运行时加载.
- ESM的import和export会变量提升,优先到头部执行; 但是CommonJS不会变量提升.
