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