commonjs module vs es6 module

[mrbone]

es6 module vs commonjs module

commonjs module

commonjs module 就不用详述了，已经使用了很久了总的来说有几个特性

• 依赖运行时
• 导出的是一个缓存对象
• 递归往上查找

关于第二个问题 导出的是一个缓存对象 这是和 es6 module 区别比较大的一个地方，commonjs 导出的是一个缓存

let msg = 'helo';

setTimeout(() => {
  msg = 'hello world!';
}, 1000);

module.exports = {msg};

这个时候我们在 node Repl 中，会发现导出对象的 msg 属性一直是 hello，因为 msg 的变更并不能影响到导出 object 的属性。
而 es6 module 导出的则是一个代码片段，该代码片段会随之后的运算更新。

export let msg = 'hello';
setTimeout(() => {
  msg = 'hello world!'; 
}, 1000);

因为 node v8.4 (v9.2下已经有Stability: 1 的实现) 下仍然没有实现 es6 module 所以我们需要借助 babel 来实现 es6 的 import。

import {msg} from './es6';

console.log(msg);

setTimeout(() => {
  console.log(msg); //会在2秒后看到msg已经更新
}, 2000);

es6 module

• 不依赖运行时，导入导出都是代码片段，可以实现静态代码分析。

babel es6 module transform

babel 仍然是通过将 es6 module 转成 commonjs 实现，我们可以参考下上面的代码被 transform 之后

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
let msg = exports.msg = 'hello';
setTimeout(() => {
  exports.msg = msg = 'hello world!';
}, 1000);

'use strict';

var _es = require('./es6');

console.log(_es.msg);

setTimeout(() => {
  console.log(_es.msg);
}, 2000);

我们在使用的时候其实仍然使用的是 commonjs 导出的缓存对象，而 babel 将我们使用的代码转换为从导出的 object 中获取。