如何正确证明 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 模块导出的是值的拷贝了。

最后编辑于：2019.03.22 17:16:53