前言

本篇我们重点介绍以下四种模块加载规范:

  • AMD
  • CMD
  • CommonJS
  • ES6 模块
    最后再延伸讲下 Babel 的编译和 webpack 的打包原理。

require.js

在了解 AMD 规范之前,我们先来看看 require.js 的使用方式。

项目目录为:

  1. * project/
  2. * index.html
  3. * vender/
  4. * main.js
  5. * require.js
  6. * add.js
  7. * square.js
  8. * multiply.js

index.html 的内容如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>require.js</title>
  5. </head>
  6. <body>
  7. <h1>Content</h1>
  8. <script data-main="vender/main" src="vender/require.js"></script>
  9. </body>
  10. </html>

data-main="vender/main" 表示主模块是 vender 下的 main.js

main.js 的配置如下:

  1. // main.js
  2. require(['./add', './square'], function(addModule, squareModule) {
  3. console.log(addModule.add(1, 1))
  4. console.log(squareModule.square(3))
  5. });

require 的第一个参数表示依赖的模块的路径,第二个参数表示此模块的内容。

由此可以看出,主模块依赖 add 模块square 模块

我们看下 add 模块add.js 的内容:

  1. // add.js
  2. define(function() {
  3. console.log('加载了 add 模块');
  4. var add = function(x, y) { 
  5. return x + y;
  6. };
  7.  
  8. return {      
  9. add: add
  10. };
  11. });

requirejs 为全局添加了 define 函数,你只要按照这种约定的方式书写这个模块即可。

那如果依赖的模块又依赖了其他模块呢?

我们来看看主模块依赖的 square 模块square 模块的作用是求出一个数字的平方,比如输入 3 就返回 9,该模块依赖一个乘法模块,该乘法模块即 multiply.js 的代码如下:

  1. // multiply.js
  2. define(function() {
  3. console.log('加载了 multiply 模块')
  4. var multiply = function(x, y) { 
  5. return x * y;
  6. };
  7.  
  8. return {      
  9. multiply: multiply
  10. };
  11. });

square 模块就要用到 multiply 模块,其实写法跟 main.js 添加依赖模块一样:

  1. // square.js
  2. define(['./multiply'], function(multiplyModule) {
  3. console.log('加载了 square 模块')
  4. return {      
  5. square: function(num) {
  6. return multiplyModule.multiply(num, num)
  7. }
  8. };
  9. });

require.js 会自动分析依赖关系,将需要加载的模块正确加载。

requirejs 项目 Demo 地址:https://github.com/mqyqingfeng/Blog/tree/master/demos/ES6/module/requirejs

而如果我们在浏览器中打开 index.html,打印的顺序为:

  1. 加载了 add 模块
  2. 加载了 multiply 模块
  3. 加载了 square 模块
  4. 2
  5. 9

AMD

在上节,我们说了这样一句话:

requirejs 为全局添加了 define 函数,你只要按照这种约定的方式书写这个模块即可。

那这个约定的书写方式是指什么呢?

指的便是 The Asynchronous Module Definition (AMD) 规范。

所以其实 AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。

你去看 AMD 规范) 的内容,其主要内容就是定义了 define 函数该如何书写,只要你按照这个规范书写模块和依赖,require.js 就能正确的进行解析。

sea.js

在国内,经常与 AMD 被一起提起的还有 CMD,CMD 又是什么呢?我们从 sea.js 的使用开始说起。

文件目录与 requirejs 项目目录相同:

  1. * project/
  2. * index.html
  3. * vender/
  4. * main.js
  5. * require.js
  6. * add.js
  7. * square.js
  8. * multiply.js

index.html 的内容如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>sea.js</title>
  5. </head>
  6. <body>
  7. <h1>Content</h1>
  8. <script src="vender/sea.js"></script>
  9. <script>
  10. // 在页面中加载主模块
  11. seajs.use("./vender/main");
  12. </script>
  13. </body>
  14.  
  15. </html>

main.js 的内容如下:

  1. // main.js
  2. define(function(require, exports, module) {
  3. var addModule = require('./add');
  4. console.log(addModule.add(1, 1))
  5.  
  6. var squareModule = require('./square');
  7. console.log(squareModule.square(3))
  8. });

add.js 的内容如下:

  1. // add.js
  2. define(function(require, exports, module) {
  3. console.log('加载了 add 模块')
  4. var add = function(x, y) { 
  5. return x + y;
  6. };
  7. module.exports = {      
  8. add: add
  9. };
  10. });

square.js 的内容如下:

  1. define(function(require, exports, module) {
  2. console.log('加载了 square 模块')
  3. var multiplyModule = require('./multiply');
  4. module.exports = {      
  5. square: function(num) {
  6. return multiplyModule.multiply(num, num)
  7. }
  8. };
  9.  
  10. });

multiply.js 的内容如下:

  1. define(function(require, exports, module) {
  2. console.log('加载了 multiply 模块')
  3. var multiply = function(x, y) { 
  4. return x * y;
  5. };
  6. module.exports = {      
  7. multiply: multiply
  8. };
  9. });

跟第一个例子是同样的依赖结构,即 main 依赖 add 和 square,square 又依赖 multiply。

seajs 项目 Demo 地址:https://github.com/mqyqingfeng/Blog/tree/master/demos/ES6/module/seajs

而如果我们在浏览器中打开 index.html,打印的顺序为:

  1. 加载了 add 模块
  2. 2
  3. 加载了 square 模块
  4. 加载了 multiply 模块
  5. 9

CMD

与 AMD 一样,CMD 其实就是 SeaJS 在推广过程中对模块定义的规范化产出。

你去看 CMD 规范的内容,主要内容就是描述该如何定义模块,如何引入模块,如何导出模块,只要你按照这个规范书写代码,sea.js 就能正确的进行解析。

AMD 与 CMD 的区别

从 sea.js 和 require.js 的例子可以看出:

1.CMD 推崇依赖就近,AMD 推崇依赖前置。看两个项目中的 main.js:

  1. // require.js 例子中的 main.js
  2. // 依赖必须一开始就写好
  3. require(['./add', './square'], function(addModule, squareModule) {
  4. console.log(addModule.add(1, 1))
  5. console.log(squareModule.square(3))
  6. });
  1. // sea.js 例子中的 main.js
  2. define(function(require, exports, module) {
  3. var addModule = require('./add');
  4. console.log(addModule.add(1, 1))
  5.  
  6. // 依赖可以就近书写
  7. var squareModule = require('./square');
  8. console.log(squareModule.square(3))
  9. });

2.对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。看两个项目中的打印顺序:

  1. // require.js
  2. 加载了 add 模块
  3. 加载了 multiply 模块
  4. 加载了 square 模块
  5. 2
  6. 9
  1. // sea.js
  2. 加载了 add 模块
  3. 2
  4. 加载了 square 模块
  5. 加载了 multiply 模块
  6. 9

AMD 是将需要使用的模块先加载完再执行代码,而 CMD 是在 require 的时候才去加载模块文件,加载完再接着执行。

感谢

感谢 require.js 和 sea.js 在推动 JavaScript 模块化发展方面做出的贡献。

CommonJS

AMD 和 CMD 都是用于浏览器端的模块规范,而在服务器端比如 node,采用的则是 CommonJS 规范。

导出模块的方式:

  1. var add = function(x, y) { 
  2. return x + y;
  3. };
  4.  
  5. module.exports.add = add;

引入模块的方式:

  1. var add = require('./add.js');
  2. console.log(add.add(1, 1));

我们将之前的例子改成 CommonJS 规范:

  1. // main.js
  2. var add = require('./add.js');
  3. console.log(add.add(1, 1))
  4.  
  5. var square = require('./square.js');
  6. console.log(square.square(3));
  1. // add.js
  2. console.log('加载了 add 模块')
  3.  
  4. var add = function(x, y) { 
  5. return x + y;
  6. };
  7.  
  8. module.exports.add = add;
  1. // multiply.js
  2. console.log('加载了 multiply 模块')
  3.  
  4. var multiply = function(x, y) { 
  5. return x * y;
  6. };
  7.  
  8. module.exports.multiply = multiply;
  1. // square.js
  2. console.log('加载了 square 模块')
  3.  
  4. var multiply = require('./multiply.js');
  5.  
  6. var square = function(num) { 
  7. return multiply.multiply(num, num);
  8. };
  9.  
  10. module.exports.square = square;

CommonJS 项目 Demo 地址:https://github.com/mqyqingfeng/Blog/tree/master/demos/ES6/module/commonJS

如果我们执行 node main.js,打印的顺序为:

  1. 加载了 add 模块
  2. 2
  3. 加载了 square 模块
  4. 加载了 multiply 模块
  5. 9

跟 sea.js 的执行结果一致,也是在 require 的时候才去加载模块文件,加载完再接着执行。

CommonJS 与 AMD

引用阮一峰老师的《JavaScript 标准参考教程(alpha)》:

CommonJS 规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作。

AMD规范则是非同步加载模块,允许指定回调函数。

由于 Node.js 主要用于服务器编程,模块文件一般都已经存在于本地硬盘,所以加载起来比较快,不用考虑非同步加载的方式,所以 CommonJS 规范比较适用。

但是,如果是浏览器环境,要从服务器端加载模块,这时就必须采用非同步模式,因此浏览器端一般采用 AMD 规范。

ES6

ECMAScript2015 规定了新的模块加载方案。

导出模块的方式:

  1. var firstName = 'Michael';
  2. var lastName = 'Jackson';
  3. var year = 1958;
  4.  
  5. export {firstName, lastName, year};

引入模块的方式:

  1. import {firstName, lastName, year} from './profile';

我们再将上面的例子改成 ES6 规范:

目录结构与 requirejs 和 seajs 目录结构一致。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>ES6</title>
  5. </head>
  6. <body>
  7. <h1>Content</h1>
  8. <script src="vender/main.js" type="module"></script>
  9. </body>
  10. </html>

注意!浏览器加载 ES6 模块,也使用 <script> 标签,但是要加入 type="module" 属性。

  1. // main.js
  2. import {add} from './add.js';
  3. console.log(add(1, 1))
  4.  
  5. import {square} from './square.js';
  6. console.log(square(3));
  1. // add.js
  2. console.log('加载了 add 模块')
  3.  
  4. var add = function(x, y) {
  5. return x + y;
  6. };
  7.  
  8. export {add}
  1. // multiply.js
  2. console.log('加载了 multiply 模块')
  3.  
  4. var multiply = function(x, y) { 
  5. return x * y;
  6. };
  7.  
  8. export {multiply}
  1. // square.js
  2. console.log('加载了 square 模块')
  3.  
  4. import {multiply} from './multiply.js';
  5.  
  6. var square = function(num) { 
  7. return multiply(num, num);
  8. };
  9.  
  10. export {square}

ES6-Module 项目 Demo 地址:https://github.com/mqyqingfeng/Blog/tree/master/demos/ES6/module/ES6

值得注意的,在 Chrome 中,如果直接打开,会报跨域错误,必须开启服务器,保证文件同源才可以有效果。

为了验证这个效果你可以:

  1. cnpm install http-server -g

然后进入该目录,执行

  1. http-server

在浏览器打开 http://localhost:8080/ 即可查看效果。

打印的顺序为:

  1. 加载了 add 模块
  2. 加载了 multiply 模块
  3. 加载了 square 模块
  4. 2
  5. 9

跟 require.js 的执行结果是一致的,也就是将需要使用的模块先加载完再执行代码。

ES6 与 CommonJS

引用阮一峰老师的 《ECMAScript 6 入门》

它们有两个重大差异。

  1. CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。

  2. CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。

第二个差异可以从两个项目的打印结果看出,导致这种差别的原因是:

因为 CommonJS 加载的是一个对象(即module.exports属性),该对象只有在脚本运行完才会生成。而 ES6 模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。

重点解释第一个差异。

CommonJS 模块输出的是值的拷贝,也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。

举个例子:

  1. // 输出模块 counter.js
  2. var counter = 3;
  3. function incCounter() {
  4. counter++;
  5. }
  6. module.exports = {
  7. counter: counter,
  8. incCounter: incCounter,
  9. };
  1. // 引入模块 main.js
  2. var mod = require('./counter');
  3.  
  4. console.log(mod.counter); // 3
  5. mod.incCounter();
  6. console.log(mod.counter); // 3

counter.js 模块加载以后,它的内部变化就影响不到输出的 mod.counter 了。这是因为 mod.counter 是一个原始类型的值,会被缓存。

但是如果修改 counter 为一个引用类型的话:

  1. // 输出模块 counter.js
  2. var counter = {
  3. value: 3
  4. };
  5.  
  6. function incCounter() {
  7. counter.value++;
  8. }
  9. module.exports = {
  10. counter: counter,
  11. incCounter: incCounter,
  12. };
  1. // 引入模块 main.js
  2. var mod = require('./counter.js');
  3.  
  4. console.log(mod.counter.value); // 3
  5. mod.incCounter();
  6. console.log(mod.counter.value); // 4

value 是会发生改变的。不过也可以说这是 "值的拷贝",只是对于引用类型而言,值指的其实是引用。

而如果我们将这个例子改成 ES6:

  1. // counter.js
  2. export let counter = 3;
  3. export function incCounter() {
  4. counter++;
  5. }
  6.  
  7. // main.js
  8. import { counter, incCounter } from './counter';
  9. console.log(counter); // 3
  10. incCounter();
  11. console.log(counter); // 4

这是因为

ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候,遇到模块加载命令 import,就会生成一个只读引用。等到脚本真正执行时,再根据这个只读引用,到被加载的那个模块里面去取值。换句话说,ES6 的 import 有点像 Unix 系统的“符号连接”,原始值变了,import 加载的值也会跟着变。因此,ES6 模块是动态引用,并且不会缓存值,模块里面的变量绑定其所在的模块。

Babel

鉴于浏览器支持度的问题,如果要使用 ES6 的语法,一般都会借助 Babel,可对于 import 和 export 而言,只借助 Babel 就可以吗?

让我们看看 Babel 是怎么编译 import 和 export 语法的。

  1. // ES6
  2. var firstName = 'Michael';
  3. var lastName = 'Jackson';
  4. var year = 1958;
  5.  
  6. export {firstName, lastName, year};
  1. // Babel 编译后
  2. 'use strict';
  3.  
  4. Object.defineProperty(exports, "__esModule", {
  5. value: true
  6. });
  7. var firstName = 'Michael';
  8. var lastName = 'Jackson';
  9. var year = 1958;
  10.  
  11. exports.firstName = firstName;
  12. exports.lastName = lastName;
  13. exports.year = year;

是不是感觉有那么一点奇怪?编译后的语法更像是 CommonJS 规范,再看 import 的编译结果:

  1. // ES6
  2. import {firstName, lastName, year} from './profile';
  1. // Babel 编译后
  2. 'use strict';
  3.  
  4. var _profile = require('./profile');

你会发现 Babel 只是把 ES6 模块语法转为 CommonJS 模块语法,然而浏览器是不支持这种模块语法的,所以直接跑在浏览器会报错的,如果想要在浏览器中运行,还是需要使用打包工具将代码打包。

webpack

Babel 将 ES6 模块转为 CommonJS 后, webpack 又是怎么做的打包的呢?它该如何将这些文件打包在一起,从而能保证正确的处理依赖,以及能在浏览器中运行呢?

首先为什么浏览器中不支持 CommonJS 语法呢?

这是因为浏览器环境中并没有 module、 exports、 require 等环境变量。

换句话说,webpack 打包后的文件之所以在浏览器中能运行,就是靠模拟了这些变量的行为。

那怎么模拟呢?

我们以 CommonJS 项目中的 square.js 为例,它依赖了 multiply 模块:

  1. console.log('加载了 square 模块')
  2.  
  3. var multiply = require('./multiply.js');
  4.  
  5.  
  6. var square = function(num) { 
  7. return multiply.multiply(num, num);
  8. };
  9.  
  10. module.exports.square = square;

webpack 会将其包裹一层,注入这些变量:

  1. function(module, exports, require) {
  2. console.log('加载了 square 模块');
  3.  
  4. var multiply = require("./multiply");
  5. module.exports = {
  6. square: function(num) {
  7. return multiply.multiply(num, num);
  8. }
  9. };
  10. }

那 webpack 又会将 CommonJS 项目的代码打包成什么样呢?我写了一个精简的例子,你可以直接复制到浏览器中查看效果:

  1. // 自执行函数
  2. (function(modules) {
  3.  
  4. // 用于储存已经加载过的模块
  5. var installedModules = {};
  6.  
  7. function require(moduleName) {
  8.  
  9. if (installedModules[moduleName]) {
  10. return installedModules[moduleName].exports;
  11. }
  12.  
  13. var module = installedModules[moduleName] = {
  14. exports: {}
  15. };
  16.  
  17. modules[moduleName](module, module.exports, require);
  18.  
  19. return module.exports;
  20. }
  21.  
  22. // 加载主模块
  23. return require("main");
  24.  
  25. })({
  26. "main": function(module, exports, require) {
  27.  
  28. var addModule = require("./add");
  29. console.log(addModule.add(1, 1))
  30.  
  31. var squareModule = require("./square");
  32. console.log(squareModule.square(3));
  33.  
  34. },
  35. "./add": function(module, exports, require) {
  36. console.log('加载了 add 模块');
  37.  
  38. module.exports = {
  39. add: function(x, y) {
  40. return x + y;
  41. }
  42. };
  43. },
  44. "./square": function(module, exports, require) {
  45. console.log('加载了 square 模块');
  46.  
  47. var multiply = require("./multiply");
  48. module.exports = {
  49. square: function(num) {
  50. return multiply.multiply(num, num);
  51. }
  52. };
  53. },
  54.  
  55. "./multiply": function(module, exports, require) {
  56. console.log('加载了 multiply 模块');
  57.  
  58. module.exports = {
  59. multiply: function(x, y) {
  60. return x * y;
  61. }
  62. };
  63. }
  64. })

最终的执行结果为:

  1. 加载了 add 模块
  2. 2
  3. 加载了 square 模块
  4. 加载了 multiply 模块
  5. 9

参考

ES6 系列

ES6 系列目录地址:https://github.com/mqyqingfeng/Blog

ES6 系列预计写二十篇左右,旨在加深 ES6 部分知识点的理解,重点讲解块级作用域、标签模板、箭头函数、Symbol、Set、Map 以及 Promise 的模拟实现、模块加载方案、异步处理等内容。

如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎 star,对作者也是一种鼓励。