ES6 Module

[rogerxu]

Module 的语法 - ES6 教程 - 网道

Modules • JavaScript for impatient programmers (ES2020 edition)

[rogerxu]

ECMAScript Modules

Using JavaScript modules on the web  |  Web Fundamentals  |  Google Developers

Module 的语法 - ECMAScript 6入门

let foo = 'a';
let bar = 1;

export { foo, bar };

Rename

let foo = 'a';
let bar = 1;

export { foo as f, bar as b };

// file a.js
export function a() {}
export function b() {}
// file b.js
export default function() {}

import {a, b} from './a.js'
import XXX from './b.js'

[rogerxu]

CommonJS

// a.js
module.exports = {
  a: 1
};
// or
exports.a = 1;

// b.js
var module = require('./a.js');
module.a // -> log 1

module.exports vs exports

var module = {
  exports: {} // exports 就是个空对象
};

// 这个是为什么 exports 和 module.exports 用法相似的原因
var exports = module.exports;

var load = function (module) {
    // 导出的东西
    var a = 1;
    module.exports = a;
    return module.exports;
};

不能对 exports 直接赋值，不会有任何效果。

CommonJS vs ES6 Modules

• CommonJS支持动态导入，也就是 require(${path}/xx.js)，ES6 Modules目前不支持，但是已有提案
• CommonJS是同步导入，因为用于服务端，文件都在本地，同步导入即使卡住主线程影响也不大。ES6 Modules是异步导入，因为用于浏览器，需要下载文件，如果也采用同步导入会对渲染有很大影响
• CommonJS在导出时都是值拷贝，就算导出的值变了，导入的值也不会改变，所以如果想更新值，必须重新导入一次。但是ES6 Modules采用实时绑定的方式，导入导出的值都指向同一个内存地址，所以导入值会跟随导出值变化
• ES6 Modules会编译成 require/exports 来执行的

[rogerxu]

AMD

// AMD
define(['./a', './b'], function(a, b) {
  a.do();
  b.do();
});
define(function(require, exports, module) {   
  var a = require('./a');
  a.doSomething();
  var b = require('./b');
  b.doSomething();
});