JavaScript 模块化：CommonJS vs AMD vs ES6 - js - 前端 - 技术设计

本文主体部分翻译+搬运自外网著名技术博客网站 medium.com 的一篇点赞数 2.7k 的文章 (文章链接在结尾处）

什么是 JavaScript 模块

JavaScript 模块指的是一段可复用的，独立的代码。他们通常都有特定的功能，能在整个代码系统里被引进或删除 —— 这个概念多少类似于 Java 或者 Python 中的类。

模块通常是独立的——与其他代码解耦，因此方便修改。这也提高了代码的可读性和可维护性。模块化在使部分代码保持私有，仅暴露公共部分的的同时，还解决了命名空间模糊性的问题。

史前时代

在标准的 JavaScript 模块化方案还没被提出之前，显示模块化模式（Revealing Module Pattern）被用来模拟模块化。

var revealingModule = (function () {
    var privateVar = "Ben Thomas"; // 私有变量
    function setNameFn( strName ) {
        privateVar = strName;
    }
return {
        setName: setNameFn, // 暴露的公用方法
    };
})(); // 自执行函数 + 闭包
revealingModule.setName( "Paul Adams" );

利用自执行函数和闭包的特性将部分代码封装私有化，仅暴露部分公有的方法。

使用这种模式的优点是可以在一个js文件中定义多个模块，但缺点是无法异步导入模块，也无法动态地导入。

注：

我认为这种模式也一定程度地损害了代码的可读性和可维护性：

想象有多个js文件被同时使用，后面的 js 代码里要保证模块在前面的 js 里被声明了才能安心使用该模块；
当后面的 js 文件中使用到某个模块时，IDE也无法帮你快速找到这个模块的定义是什么、在哪个文件；
一旦模块的命名重复了，后面声明的模块就会覆盖掉前面的，造成bug （命名空间问题）
代码规模到达一定程度后，这种模块化就会失控，无法维护

CommonJS

后来，CommonJS 规范被提出来了。

采用 CommonJS 规范需要使用两个关键字 require 和 exports ，其中 require 用来声明导入某个模块，而 exports 声明当前 js 文件要导出的内容

//------ store/customer.js 文件------
exports = function(){
    return customers.get('store);
}

//------ payments.js 文件------
var customerStore = require('store/customer'); // 导入模块

Nodejs 模块化的实现基本遵循了 CommonJS 规范，稍有不同的是 Nodejs 使用了 module.exports 而不是 exports

//store/customer.js 文件
function customerStore(){
    return customers.get('store);
}
modules.exports = customerStore;

特点：

Nodejs 模块化的实现是同步的，因为 Nodejs 通常在服务端使用，所有js文件都在文件系统上，基本没有异步的问题。

require 即可以传入具体的模块路径也可以传入模块名。当 require 某个模块名时，Nodejs就会在 node_modules 文件夹中查找对应的模块。

缺点：

一个文件一个模块的形式有点僵硬。

只有对象能被导出（函数也是特殊的对象），即无法导出变量/常量。

CommonJS 规范不能直接在浏览器的js环境下使用（必须使用 Webpack 等工具转译处理）

Asynchronous Module Definition (AMD)

AMD 规范的出现就是因为 CommonJS 无法直接在浏览器 js 环境下使用，并且正如它的名字所表达的意思 —— AMD 天然支持异步的模块加载

AMD 使用 define 函数。define 函数有多种重载版本
define 函数最多接收3个参数：模块id，依赖的模块构成的数组，回调函数

   define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
       exports.verb = function() {
           return beta.verb();
           //Or:
           return require("beta").verb();
       }
   });

一个匿名的模块

   define(["alpha"], function (alpha) {
       return {
         verb: function(){
           return alpha.verb() + 2;
         }
       };
   });

直接导出对象字面量

   define({
     add: function(x, y){
       return x + y;
     }
   });

还能兼容 CommonJS 的 require 和 exports

   define(function (require, exports, module) {
     var a = require('a'),
         b = require('b');

     exports.action = function () {};
   });

特点：

AMD 的设计初衷就是给浏览器环境使用的——可以加快页面启动时间，而且这些模块导出内容可以是对象、函数、构造器、字符串、JSON等等。支持多模块多文件。

实现：

RequireJS 是 AMD API 完整的实现者，有兴趣地可以去官方文档看看 RequireJS

ECMAScript 6 模块化 (Native JavaScript)

ECMAScript 6 又名 ES6 又名 ES2015 ，终于推出了 JavaScript 原生的模块化方案

主要使用了两个关键字 imprort 和 export （注意和 CommonJS 不同，没有 s 后缀）

//  lib/math.js
export function sum (x, y) { return x + y }
export var pi = 3.141593

//  someApp.js
import * as math from "lib/math"
console.log("2π = " + math.sum(math.pi, math.pi))

//  otherApp.js
import { sum, pi } from "lib/math"
console.log("2π = " + sum(pi, pi))

还可以使用通配符和 default 关键字

//  lib/mathplusplus.js
export * from "lib/math"  // 把 lib/math 里的内容一起导出
export var e = 2.71828182846
export default (x) => Math.exp(x) // 默认导出幂函数

//  someApp.js
import exp, { pi, e } from "lib/mathplusplus"  // exp 是默认导出的 幂函数； 而 pi 其实是来源于 lib/math
console.log("e^{π} = " + exp(pi))

特点：

不同于 require 和 define ，在 ES6 import 语句是静态的，只能放在 js文件的头部（前几行）—— 在之后的ES版本中，将支持动态/异步的import 参考官方文档

export 语句用来导出模块内容，支持导出对象，函数，变量等等。

由于 import 和 export 都是静态语句，方便代码依赖分析，比如 IDE 就能轻松地帮我们跳转、查询依赖模块。

原生JavaScript的方案，目前已被大多数现代框架使用如 React，Vue， Angular 等等。

缺点：

目前浏览器环境还没有普遍支持es6的模块化语法，还是需要借助 Babel 等工具转译代码。

如果你现在从零开始写一个js项目的话，强烈推荐使用 ES6 的模块化方案，因为这是原生JavaScript的实现而且必定是未来的趋势。

总结

本文回顾了 JavaScript 模块化的历史发展，从显示模块化模式到 CommonJS 到 AMD 最后到 ES6，JavaScript 模块化方案不断在发展，改良和进化。

Bonus

问：我想在现有的 Nodejs 项目中使用 ES6 模块化方案怎么办？

答：由于Nodejs 直到 13.2 版本才支持 ES6 ，很多旧项目还是只能使用传统的 CommonJS 规范。但是有个神奇的库叫 esm （ Github 链接），只需要几行代码或者一个配置就能帮我们在 Nodejs 中愉快地使用 import / export 了，我在个人项目中已经用上了，真的香！

什么是 JavaScript 模块

史前时代

CommonJS

Asynchronous Module Definition (AMD)

ECMAScript 6 模块化 (Native JavaScript)

如果你现在从零开始写一个js项目的话， 强烈推荐使用 ES6 的模块化方案，因为这是原生JavaScript的实现而且必定是未来的趋势。

总结

Bonus

应该在JavaScript中使用Class吗？

8 种方案机智应对后端一次性返回 10万 条数据

如果你现在从零开始写一个js项目的话，强烈推荐使用 ES6 的模块化方案，因为这是原生JavaScript的实现而且必定是未来的趋势。

8 种方案机智应对后端一次性返回 10万条数据