Commonjs和ESModule区别

Common js

• 社区标准
• 使用函数实现
• 仅node环境支持
• 动态依赖
• 动态依赖同步执行

// require 函数原理
/**
 * 一个模块（js文件）就是一个 {}，隐形代表的是 module.exports
 * 在模块中直接打印 this，其实就是 module.exports
 * 不管是 this.xx exports.xx 其实都是往 module.exports 的对象挂载
 */

function require(path) {
  // 第一步
  if (该模块有缓存) {
    return 缓存结果
  }

  function _run(exports, require, module, __filename, __dirname) {
    // js文件代码
  }

  // 第二步
  const module = {
    exports: {},
  }

  // 第三步
  _run.call(
    module.exports, // this 指向
    module.exports,
    require,
    module
      .模块路径,
    模块所在目录,
  )

  // 第四步把 module.exports 加入到缓存中

  // 第五步
  return module.exports
}

ES Module

• 官方标准
• 使用新语法实现
• 所有环境均支持
• 静态依赖：在代码运行前就要确定依赖关系
• 动态依赖是异步的
• 符号绑定（引用地址传递）

经典题

require 函数导出相关问题

// 1.js
this.a = 1
exports.b = 2
module.exports.c = 3

// 2.js
const m = require('./1')
console.log(m) // { a: 1, b: 2, c: 3 }

ESModule 符号绑定相关问题

// a.js
export var count = 0
export function increase() {
  count ++
}

// b.js
import { count, increase } from 'a.js';
console.log(count) // 0
increase()
console.log(count) // 1