模块导出的几种方式以及区别

1. ES5 的导出方式

1.1 导出方式

es5 的导出方式有两种，一个是通过 exports，一个是通过 module.exports。
然而这两种导出方式，在我理解是 exports 是 module.exports 的简写

// exportMethod.js
const str = 'str';

console.log('------------------');
console.log('exports = ', exports);
console.log('module.exports = ', module.exports);

exports.a = str;

console.log('------------------');
console.log('exports = ', exports);
console.log('module.exports = ', module.exports);

console.log('equals = ', exports === module.exports);

// importMethod.js
const obj = require('./testExportMethods');

console.log('------------------');

console.log('require obj = ', obj);

运行 node importMethod.js 后，结果如下

输出结果

从结果以及一些资料上的搜索结果可以看出

1. 每个 nodejs 文件都有一个 module 对象，对象有个属性是 exports，默认值是{}
2. module.exports === exports，表明这两者是严格相等的，本质上 exports 是 module.exports 的引用（未看过源码）
3. require 引用的其实是 module.exports 的导出值

1.2 常见的导出写法

var getName = function() {
  console.log('getName method');
}

var name = 'export';

// 1.
exports.name = name;
exports.getName = getName;

// 2.
module.exports.name = name;
module.exports.getName = getName;

// 3.
module.exports = {
  getName: getName,
  name: name
};

// 4. 直接 exports = 的话，会导致它与 module.exports 之间的引用关系断裂
// 需要再加上 module.exports，把 exports 重新引向 module.exports
exports = module.exports = {
  getName: getName,
  name: name
};

---

2. ES6 的导出方式

ES6 的导出有 2 种，分别是 export 和 export default.

// 输出和输入的序号对应
// export.js
const getName = function() {
  console.log('getName method');
}

const name = 'export';

// 1. 输出一个/多个变量，每个变量都需要赋予变量名
export const g = getName;
export const n = name;

// 2. 默认输出的一个变量，不需要赋予变量名，更加方便
export default getName;

// 3. 第一种的简写，看起来更加直观
export { getName, name };

// 4. 和第三种方法相似，但是import的方式不同
export default { getName, name }

// import.js
// 1. 和输出的变量名要一致
import { g, n } from './testExportMethod'

// 2. 名称随意
import getName from './testExportMethod';

// 3. 第一种方式的另外一种写法，importValue = { getName, name };
import * as importValue from './testExportMethod';

// 4. 名称随意
import importValue from './testExportMethod'

---

3. 四种导出方式的区别

综合起来看，ES5 和 ES6 各有两种写法，分别是 module.exports, exports, export, export defalut。下面是一些它们的区别

1. 用法不同

module.exports, exports 后面都是直接接 "="
export, export defalut 后面是导出的目标，不是直接和 "=" 相连

module.exports = {};
export.name = {};

export const method = () => {};
export default () => {};

2. 导出对象不同

module.exports, exports 是对象，而 export, export defalut 是 ES6 的语法