[webpack]模块系统--CommonJS和AMD的模块

[Cuuube]

CommonJS模块语法：

// 定义模块：module1.js:
let addOne = function(num) {
    return num+1;
}
module.export = addOne;

// 使用模块：index.js:
let add1 = require('/module1.js');
console.log(add1(9));//> 10

注意：可能有循环加载问题。循环加载时，b将引用a的不完全版本。

AMD模块语法：

// 定义模块：module2.js:
define('addOne',[],function(num){
    return num+1;
});

// 使用:index.js:
let add1;
define(['./module2.js'], function(addOne){
    add1 = addOne;
});//因为是异步，所以不能直接return过去。
console.log(add1(9));//> 10

注意： CommonJS是同步加载模块，AMD是异步

ES6模块语法：

// 定义模块：module3.js:
let addOne = function (num) {
    return num+1;
}
export {addOne};

// 使用：index.js
import {addOne as add1} from './module3.js';
console.log(add1(9));

//另一种自定义名字的import和export,相当于去掉了大括号，加上了default，import时候不用“as”也能随意重命名
//export in file:
export default foo;
//import in file:
import func from './path.js';

注意：

• import和export只能放在顶层，不可放在区块中（如函数内）
• 不能直接在浏览器中运行，会失败，需要babel转码
• 动态引用，模块中变量变化，引用后也会变化

其他资料： 以下截图文章内容来自zhaoda.net.