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重新赋值，也就切断了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失败。