一张图读懂 CommonJS 模块加载过程

370 阅读1分钟

详解 CommonJS 模块化加载过程

在前端圈,模块化的方案有很多种,如:CommonJS、AMD、CMD、ES6 Modules 等。这里我们主要讲解 CommonJS 模块化加载过程。

CommonJS 中的导入导出

CommonJS 是 Node.js 中的模块化方案,它的导入导出方式如下:

  • a.js

通过 module.exports 导出模块

modeule.exports = {
  fn() {
    console.log('a.js')
  }
}
  • b.js

通过 require 导入 a.js 模块


const a = require('./a.js')

a.fn() // a.js

通过 require 导入模块后我们就可以在 b.js 中使用 a.js 中的方法了。

那么它的加载过程是怎样的呢?

图解

通过这张图,我们来看一下 CommonJS 模块化加载过程:

CommonJS模块加载机制 (1).png

通过这张图,我们很好的解释了 CommonJS 的模块加载过程,需要注意的是,在图片中说到了一点就是,当我们传递的参数是一个相对路径的时候,在执行期间会被转换为绝对路径,我们需要了解的是,相对路径是找不到任何资源的,所有的资源访问都是通过绝对路径来访问的,无论是在 Node.js 还是在浏览器中。