关于commonjs:CommonJS的两种导出方式

晓得的敌人应该晓得，CommonJS 有两种导出形式，如下所示：

// module1.js
const name1 = 'Ben';
const name2 = 'Lisa'

// 导出形式 1
module.exports = {
  name1,
  name2,
};

// 导出形式 2
exports.name1 = name1;
exports.name2 = name2;

差别

那么下面这两种导出形式有什么差别呢？
先说论断，从导出的后果来看，没有差别。

import module1 from './module1.js'
// 无论 module1.js 中应用的哪种形式导出，这里失去的 module1 都是一样的构造。console.log(module1)
// {name1, name2}

为什么没有差别

至于为什么两者没有差别，起因也很简略。
module.exports和 exports 是相等的，因为 exports 就是援用自module.exports。

const name = 'Ben';

// 这两个写法是等价的
exports.name = name
module.exports = {name}

看下图，给 exports 增加一个 name 属性，也就是相当于给 module.exports 增加了一个属性。

留神

防止意外切断援用关系

不要应用上面的导出形式，还记得 exports 是援用自 module.exports 吗，上面这种写法，相当于切断了 exports 和module.exports的援用关系，所以也就无奈导出了。

const name = 'Ben';
exports = {name}

防止同时应用两种形式

const name1 = 'Ben';
const name2 = 'Lisa'

// 导出形式 1
module.exports = {name1,};

// 导出形式 2
exports.name2 = name2;

下面同时存在两种导出形式的状况，会导致 导出形式 2 会被疏忽。

还记得他们的援用关系吗？导出形式 1 将援用关系切断了，所以就会导致 导出形式 2 失败。