为什么说cjs导出的是值的拷贝，而esm导出的是值的引用？

[rankangkang]

以前网上看见的示例都不能良好地说明如题所示问题，有没有什么示例能够完美解释？🤔

[rankangkang]

🧐 为什么说 cjs 输出的是值的拷贝？

现有以下示例：

• export.js：

  // 模块 count.js
  let count = 0
  
  module.exports = {
  count,
  getCount: () => {
    return count
  },
  increment: function () {
    count++
  },
  }
  
  setTimeout(() => {
  console.log('count', count)
  })

• index.js

  const c = require('./count')
  
  console.log('index c.count', c.count); // 输出 0
  console.log('index c.getCount', c.getCount()); // 输出 0
  c.increment();
  console.log('index c.count', c.count); // 输出 0
  console.log('index c.getCount', c.getCount()); // 输出 1

运行 index.js ，有如下输出：

index c.count 0
index c.getCount 0
index c.count 0
index c.getCount 1
count 1

可以发现，对 c.count 的输出不会随着增加 count 而改变，而通过 getCount 闭包方法获取的 count 则是正常的，由此可以证明 cjs 导出的是值得拷贝。 （基础类型的值拷贝为直接赋值，引用类型的拷贝会把引用赋给对应属性，这也是为什么通过闭包方法可以获取到更新后的输出）

[rankangkang]

🧐 为什么说 esm 输出的是值的引用？

现有以下示例：

• export.mjs：

  export let count = 0
  
  export function addCount() {
  count++
  }
  
  setTimeout(() => {
  console.log('count', count)
  })

• index.mjs

  import { count, addCount } from './count.mjs'
  
  console.log('index', count) // 0
  
  addCount()
  
  console.log('index', count) // 1

运行 index.mjs ，有如下输出：

index 0
index 1
count 1

可以发现，当调用 addCount 闭包方法改变 count 后，导入的 count 值也发生了改变。由此可以证明，esm 输出的是值的引用。

[rankangkang]

esm 转 cjs：esm 命名导出 --> cjs module.exports 对应属性；esm default 导出 --> module.exports.default 且 module.exports.__esModule 为 true

详见：https://juejin.cn/post/7205897684624474168