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

关于 CommonjsES 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 模块导出的是值的拷贝了。