module.exports、require和export、import的关系

当我们在用到模块化写法的时候，常常会用到module.exports、require和export、import，由于他们过于相似，有时会搞混。今天我们来区分好好区分下。

非官方的模块化导入导出

模块化最早是在社区中提出(2009年)，并在commonJS规范中应用，这种模块化的方法并非是官方标准，但也可以正常使用。
我们先来看看这种模块化方法的导出和导入是如何实现的。
导出的写法有以下两种：
calculator.js

// 写法1 - 直接使用exports
exports.count = 2;
exports.add = function(sum){
  return sum*3
}

// 写法2 - 定义一个对象
module.exports = {
  count: 2,
  add: function(sum){
    return sum*3
  }
}

导入的方法
index.js

const calculator = require('./calculator.js');
const num = calculator.add(6);
console.log(num); // 18

官方的模块化导入导出

2015是个好年份，这一年TC39标准委员会正式发布了ES6，JavaScript语言具备了模块这一特性。
我们先看下导出方法，这里有三种
calculator.js

// 写法1 - 声明和导出写在一行
export const name = 'calculator';
export const add = function(a,b){ return a+ b};

// 写法2 - 先声明，后导出
const name = 'calculator';
const add = function(a,b){ return a+ b;};
export { name,add };
// 指定属性的名称
// export {name, add as mounted }

// 写法3
export default {
  name: 'calculator',
  add: function(a,b){return a+b;}
}
// 我们可以将export default理解为对外输出了一个名为default的变量

导入方法
index.js

// export {name, add};  指定导出
import {name,add} from './calculator.js';
import {name,add as computed} from './calculator.js';
import * as calculator from './calculator.js';

// export default {....}；  默认导出
import myComputed from './calculator.js';

总结

单词很多，我们最后给他们做个分类。
非官方（commonJS）： exports 、module.exports、require
官方（ES6）： export (default)、import (... from ...)

进阶

动态与静态

commonJS对模块依赖的解决是动态的，代码明确依赖关系发生在代码的运行阶段。
ES6 模块的导入、导出语句是声明式的，它不支持导入的路径是一个表达式，并且导入、导出语句必须位于模块的顶层作用域（比如不能放在if语句中）。代码明确依赖关系发生在代码的编译阶段。

commonJS和ES6 Module是目前使用较为广泛的模块标准。它们的主要区别在于前者建立模块关系是在运行时，后者是在编译时；在模块导入方面，commonJS导入的是值拷贝，ES6 Module导入的是只读的变量映射；
ES6 Module通过其静态特性可以进行编译过程中的优化，并且具备处理循环依赖的能力。

最后编辑于：2019.06.28 14:05:37