关于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失败。