JavaScript中的模块化

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不会变量提升.