如何正确证明 Commonjs 模块导出是值的拷贝，而 ES module 是值的引用？

关于 Commonjs 和 ES module 模块导出的区别，一般流行一种说法：CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用，而我发现，绝大部分用于证明 Commonjs 模块导出值的例程都是有问题的，我们一起来看下：

// b.js
let count = 1;
module.exports = {
  count,
  add() {
    count++;
  },
  get() {
    return count;
  }
};

// a.js
const { count, add, get } = require('./b');
console.log(count);    // 1
add();
console.log(count);    // 1
console.log(get());    // 2

b.js 中，module.exports 被赋值为一个对象（暂称为导出对象），而导出对象的 count 属性源自 count 变量，由于 count 变量是数值类型，属于 js 的基本类型之一，是按值传递的，所以 count 属性得到的只是 count 变量的拷贝值，也就是说从赋值之后开始 count 变量的任何变化都与导出对象的 count 属性毫无关系。so，这个例程根本证明不了 Commonjs 模块导出值是值的拷贝还是引用。

为了确保严谨性，我们跑一遍该 demo 在 ES module 下的实现，看看输出是否是一致的：

// b.mjs
let count = 1;
export default {
  count,
  add() {
    count++;
  },
  get() {
    return count;
  }
}

// a.mjs
import b from './b.mjs';
console.log(b.count);    // 1
b.add();
console.log(b.count);    // 1
console.log(b.get());    // 2

与 Commonjs 提供的导出规范不同，ES module 支持以下的导出语法，这易于证明 ES module 模块导出是值的引用，在原始值改变时 import 的加载值也会随之变化：

// b.mjs
export let count = 1;
export function add() {
  count++;
}
export function get() {
  return count;
}

// a.mjs
import { count, add, get } from './b.mjs';
console.log(count);    // 1
add();
console.log(count);    // 2
console.log(get());    // 2

上面代码中，add 函数执行使 count 变量自增，这个变化能在 a 模块中体现，这是由于 b 模块中 count 变量和导出的 count 共用同一个内存空间（准确地说，是模块 export 连接的内存空间地址就是 count 变量的内存地址），所以说 ES module 导出是值的引用。至于详细的导出原理，大家可以浏览这篇文章中对于 ES module 原理的阐述：Commonjs、esm、Amd和Cmd的循环依赖表现和原理。

那么问题来了，我们应该如何证明 Commonjs 模块导出是值的拷贝呢？

目前想到了两个比较靠谱的方案：

• 直接翻看 node 中关于 Module 类的源码实现；
• 参考 Webpack 等构建工具是如何处理 Commonjs 模块的；

第一种方案后续会找时间剖析源码给大家分享，我们先来瞧瞧 Webpack 是如何构建下面的 Commonjs 模块 demo 的：

// a.js
const b = require('./b');
console.log(b.count);

// b.js
module.exports = {
  count: 1,
};

Webpack 输出的 bundle，这里省去了注释和部分无关代码：

(function(modules) {
  // webpackBootstrap
  // ...

  // webpack实现的require函数
  function __webpack_require__(moduleId) {
    if(installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }
    // 模块缓存id、加载状态和导出值
    var module = installedModules[moduleId] = {
      i: moduleId,
      l: false,
      exports: {}    // 关键点：模块导出预置了一个空对象
    };
    // 模块代码执行
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    module.l = true;
    return module.exports;
  }
  // ...
  return __webpack_require__(__webpack_require__.s = 0);
})([
  // a.js
  (function(module, exports, __webpack_require__) {
    const b = __webpack_require__(1);
    console.log(b.count);
  }),

  // b.js
  (function(module, exports) {
    module.exports = {
      count: 1,
    };
  })
])

从编译后的 bundle 看出，Commonjs 模块导出在这里其实只是对 installedModules[moduleId].exports 属性的赋值操作，所以针对以下情况：

// 在预置的`installedModules[moduleId].exports`空对象上新增一个基本类型的`count`属性，相当于基本类型的拷贝。
let count = 1;
exports.count = count;

// `installedModules[moduleId].exports`被赋值一个新的包含`count`属性的对象，相当于对象浅拷贝。
module.exports = {
  count,
};

这就可以说明 Commonjs 模块导出的是值的拷贝了。