javascript之模块加载方案

前言

主要学习一下四种模块加载规范:

1. AMD
2. CMD
3. CommonJS
4. ES6 模块

历史

前端模块化开发那点历史

require.js

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

define(function () {
    //Do setup work here

    return {
        color: "black",
        size: "unisize"
    }
});

//my/shirt.js now has some dependencies, a cart and inventory
//module in the same directory as shirt.js
define(["./cart", "./inventory"], function(cart, inventory) {
        //return an object to define the "my/shirt" module.
        return {
            color: "blue",
            size: "large",
            addToCart: function() {
                inventory.decrement(this);
                cart.add(this);
            }
        }
    }
);

以上示例代码来源于require.js官网

demo代码详见 https://github.com/BillyQin/jsModule/tree/master/requireJs

AMD

require.js 为全局添加了define 函数，按照这种约定方式写即可。

这个约定方式就是AMD（The Asyncchronous Module Definition）

所以AMD规范就是定义了怎么写define函数。只要按照这个规范来写模块和依赖，require.js就能正确解析。

sea.js

demo代码详见 https://github.com/BillyQin/jsModule/tree/master/seaJs

CMD

同样的道理，CMD就是Sea.js对模块定义对规范化产出。

所以CMD的内容就是描述该如何定义模块，如何引入模块，如何导出模块。只要按照这个规范来写模块和依赖，sea.js就能正确解析。

AMD 和 CMD

1. AMD 推崇依赖前置，

2. CMD推崇依赖就近 
   

3. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。

• AMD 是将需要使用的模块先加载完再执行代码

• CMD 是在 require 的时候才去加载模块文件，加载完再接着执行。

CommonJS

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

CommonJS和sea.js一样，require的时候才去加载模块文件，加载完再接着执行。

demo代码详见 https://github.com/BillyQin/jsModule/tree/master/commonJs

为什么浏览器中不支持 CommonJS 语法呢？

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

ES6

es6定义了新的模块加载方案。

// 导出
const addr = 'China'
const year = 2018
export { addr, year } 

// 导入
import { addr, year } from './index.js'

和require.js(AMD)一致，将需要使用的模块加载完再执行代码。

ES6 和 CommonJS的差异

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

2. CommonJS是运行时加载，ES6是编译时输出接口。 CommonJS加载的是一个对象，就是module.exports属性。该对象只有在脚本运行完成后才会生成。而es6模块不是对象，对外接口只是一种静态定义，在代码静态解析阶段就会生成。

Babel

es6语法在线转换

在浏览器不支持es6的时候，如果要使用es6的语法，一般都会在项目里加入babel。

// es6
let firstName = 'Michael';
const lastName = 'Jackson';
var year = 1958;

export {firstName, lastName, year};

转换后

Object.defineProperty(exports, "__esModule", {
  value: true
});
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

exports.firstName = firstName;
exports.lastName = lastName;
exports.year = year;

webpack

Babel 只是把 ES6 模块语法转为 CommonJS 模块语法，而浏览器不支持CommonJs。这时候webpack出动。

浏览器不支持CommonJs的本质是因为浏览器环境中并没有 module、 exports、 require 等环境变量。 webpack 打包后的文件之所以在浏览器中能运行，就是靠模拟了这些变量的行为。

webpack怎么模拟呢？

// commonJs
let multiply = require('./multiply')
console.log('加载 square 模块')

let square = function (num) {
  return multiply.multiply(num, num)
}

module.exports = {
  square: square
}

模拟后:

// 包裹一层，注入这些变量
function(module, exports, require) {
    console.log('加载了 square 模块');

    var multiply = require("./multiply");
    module.exports = {
        square: function(num) {
            return multiply.multiply(num, num);
        }
    };
}

整个CommonJs项目改写后

// 自执行函数
(function(modules){
    // 存储已加载的模块
    var installModules = {}
    // 关键的require方法 
    function require(moduleName) {
        if (installModules.moduleName) {
            return installModules.moduleName.exports
        }
        
        var module = installModules[moduleName] = {
            exports: {}
        }
        
        modules[moduleName](module, module.exports, require);
        return module.exports;
    }
    
    return require('main')
})({
    'main': function(module, exports, require) {
        var addModule = require("./add");
        console.log(addModule.add(1, 1))

        var squareModule = require("./square");
        console.log(squareModule.square(3));
    },
    './add': function(module, exports, require) {
        console.log('加载 add 模块')
        var add = function (x, y) {
          return x + y
        }
        module.exports = {
            add: add
        }
    },
    './multiply': function(module, exports, require) {
        console.log('加载 multiply 模块')
        var multiply = function (x, y) {
          return x * y
        }
        module.exports = {
            multiply: multiply
        } 
    },
    './square': function(module, exports, require) {
        console.log('加载 square 模块')
        var multiply = require('./multiply')
        var square = function (num) {
          return multiply.multiply(num, num)
        }
        module.exports = {
            square: square
        } 
    }
})

参考

• ES6 系列之模块加载方案
• CommonJS规范
• 手写一个CommonJS打包工具