CommonJS 和 ES Module的导入导出

CommonJS的导入

const sum = require('./add.js')
console.log(sum(2,3)) // 5

模块加载机制，如果一个模块是第一次被加载，那么会执行该模块并导出内容，如果该模块被执行过，那么这个模块的代码不会再被执行，而是直接导出上次执行的结果。
require可以接受表达式，动态制定模块路径

CommonJS的导出

在CommonJs中每个文件都是一个模块，模块的作用域是属于自身的，而一个模块向外暴露的唯一方式是导出，在CommonJs中导出的是module.exports对象
下面两种写法实质上是一样的

module.exports = {
    name: 'calculater',
    add: function(a, b) {
        return a + b;
    }
};

等同于

exports.name = 'calculater';
exports.add = function(a, b) {
    return a + b;
};

其内在机制是将exports指向了module.exports，而module.exports在初始化时是一个空对象。我们可以简单地理解为，CommonJS在每个模块的首部默认添加了以下代码：

var module = {
    exports: {},
};
var exports = module.exports;

那么上面的2个代码就可以看成：

var module = {
    exports: {},
};
var exports = module.exports;
// 上面的代码可以看成是CommonJS在每个模块的首部默认添加的

module.exports = {
    name: 'calculater',
    add: function(a, b) {
        return a + b;
    }
};

var module = {
    exports: {},
};
var exports = module.exports;
// 上面的代码可以看成是CommonJS在每个模块的首部默认添加的

exports.name = 'calculater';
exports.add = function(a, b) {
    return a + b;
};

因此，为exports.add赋值相当于在module.exports对象上添加了一个add属性
因此，为exports.name赋值相当于在module.exports对象上添加了一个name属性
注意点一：不要直接给exports赋值，否则会导致其失效。 如：

exports = {
    name: 'calculater'
};

上面代码中，由于对exports进行了赋值操作，使其指向了新的对象{name: ‘calculater’}，module.exports却仍然是原来的空对象，因此name属性并不会被导出。

注意点二：不要把module.exports与exports混用。

exports.add = function(a, b) {
    return a + b;
};
module.exports = {
    name: 'calculater'
};

上面的代码先通过exports导出了add属性，相当于module.exports = { add: function(){…}}然后将module.exports重新赋值为另外一个对象。这会导致原本拥有add属性的对象丢失了，最后导出的只有name。

注意点三：导出语句不代表模块的末尾

module.exports = {
    name: 'lcylcy'
};
console.log('end');

module.exports或exports后面的代码依旧会照常执行。比如上面的console会在控制台上打出“end”，但在实际使用中，为了提高可读性，不建议采取上面的写法，而是应该将module.exports及exports语句放在模块的末尾。

ES6 Module

es6也是将每一个文件当做模块，每个模块拥有自身的作用域,导入导出语句是import export，会自动开启use strict控制严格模式。

ES6 Module的导入

//命名式 需要有大括号
import { add } from './add.js'
// 默认导入 等同于 import { default as myAdd } from './add.js'
import myAdd from './add.js'
//混合导入（add是export default导出的，name是export导出的）
//这里的add必须写在大括号前面，而不能顺序颠倒，否则会提示语法错误。
import add, {name} from './add.js'
//全部导入
import * as add from './add.js' 

ES6 Module的导出

//写法1
const add = function(a,b) {return a+b}
export { add }
//写法2
export { add: function (a,b) {return a+b} }
//默认导出1
export default function(a,b) {return a+b}
//默认导出2
export default {
    name: 'calculator',
    add: function(a, b) {
        return a + b;
    }
};
//默认导出3
export default 'This is calculator.js';
// 默认导出4
export default class {...}