当前位置：首页 > news >正文

Commonjs与ES Module

news 2025/11/3 20:46:06

commonjs

1 commonjs 实现原理

commonjs每个模块文件上存在 module，exports，require三个变量,然而这三个变量是没有被定义的，但是我们可以在 Commonjs 规范下每一个 js 模块上直接使用它们。在 nodejs 中还存在 __filename 和 __dirname 变量。

三个变量分别表示：

module 记录当前模块信息。
require 引入模块的方法。
exports 当前模块导出的属性

在编译的过程中，实际 Commonjs 对 js 的代码块进行了首尾包装，它被包装之后的样子如下：

(function(exports,require,module,__filename,__dirname){const xxx= require('./xxx.js')module.exports = function A(){return {name:xxx(),author:'我不是外星人'}}
})

包装函数

function wrapper (script) {return '(function (exports, require, module, __filename, __dirname) {' + script +'\n})'
}

2 require 文件加载流程

require 加载标识符原则

nodejs中对标识符的处理原则:

首先像 fs ，http ，path 等标识符，会被作为 nodejs 的核心模块。
./ 和 ../ 作为相对路径的文件模块， / 作为绝对路径的文件模块。
非路径形式也非核心模块的模块，将作为自定义模块。

核心模块的处理：

核心模块的优先级仅次于缓存加载，在 Node 源码编译中，已被编译成二进制代码，所以加载核心模块，加载过程中速度最快。

路径形式的文件模块处理：

已 ./ ，../ 和 / 开始的标识符，会被当作文件模块处理。require() 方法会将路径转换成真实路径，并以真实路径作为索引，将编译后的结果缓存起来，第二次加载的时候会更快。

自定义模块处理：

自定义模块，一般指的是非核心的模块，它可能是一个文件或者一个包，它的查找会遵循以下原则：

在当前目录下的 node_modules 目录查找。
如果没有，在父级目录的 node_modules 查找，如果没有在父级目录的父级目录的 node_modules 中查找。
沿着路径向上递归，直到根目录下的 node_modules 目录。
在查找过程中，会找 package.json 下 main 属性指向的文件，如果没有 package.json ，在 node 环境下会以此查找 index.js ，index.json ，index.nod

3 require 模块引入与处理

直接上例子：

a.js文件

const getMes = require('./b')
console.log('我是 a 文件')
exports.say = function(){const message = getMes()console.log(message)
}

b.js文件

const say = require('./a')
const  object = {name:'《React进阶实践指南》',author:'我不是外星人'
}
console.log('我是 b 文件')
module.exports = function(){return object
}

主文件main.js

const a = require('./a')
const b = require('./b')console.log('node 入口文件')

输出

我是b文件
我是a文件
node入口文件

main.js 和 a.js 模块都引用了 b.js 模块，但是 b.js 模块只执行了一次。
a.js 模块和 b.js 模块互相引用，但是没有造成循环引用的情况。
执行顺序是父 -> 子 -> 父；

require 加载原理

首先为了弄清楚上述两个问题。我们要明白两个感念，那就是 module 和 Module。

module ：在 Node 中每一个 js 文件都是一个 module ，module 上保存了 exports 等信息之外，还有一个 loaded 表示该模块是否被加载。

为 false 表示还没有加载；
为 true 表示已经加载

Module ：以 nodejs 为例，整个系统运行之后，会用 Module 缓存每一个模块加载的信息。

require 的源码大致长如下的样子：

 // id 为路径标识符
function require(id) {/* 查找  Module 上有没有已经加载的 js  对象*/const  cachedModule = Module._cache[id]/* 如果已经加载了那么直接取走缓存的 exports 对象  */if(cachedModule){return cachedModule.exports}/* 创建当前模块的 module  */const module = { exports: {} ,loaded: false , ...}/* 将 module 缓存到  Module 的缓存属性中，路径标识符作为 id */  Module._cache[id] = module/* 加载文件 */runInThisContext(wrapper('module.exports = "123"'))(module.exports, require, module, __filename, __dirname)/* 加载完成 *//module.loaded = true /* 返回值 */return module.exports
}

从上面我们总结出一次 require 大致流程是这样的；

require 会接收一个参数——文件标识符，然后分析定位文件，分析过程我们上述已经讲到了，加下来会从 Module 上查找有没有缓存，如果有缓存，那么直接返回缓存的内容。
如果没有缓存，会创建一个 module 对象，缓存到 Module 上，然后执行文件，加载完文件，将 loaded 属性设置为 true ，然后返回 module.exports 对象。借此完成模块加载流程。
模块导出就是 return 这个变量的其实跟 a = b 赋值一样，基本类型导出的是值，引用类型导出的是引用地址。
exports 和 module.exports 持有相同引用，因为最后导出的是 module.exports，所以对 exports 进行赋值会导致 exports 操作的不再是 module.exports 的引用。

require 避免重复加载

从上面我们可以直接得出，require 如何避免重复加载的，首先加载之后的文件的 module 会被缓存到 Module 上，比如一个模块已经 require 引入了 a 模块，如果另外一个模块再次引用 a ，那么会直接读取缓存值 module ，所以无需再次执行模块。

对应 demo 片段中，首先 main.js 引用了 a.js ，a.js 中 require 了 b.js 此时 b.js 的 module 放入缓存 Module 中，接下来 main.js 再次引用 b.js ，那么直接走的缓存逻辑。所以 b.js 只会执行一次，也就是在 a.js 引入的时候。

require 避免循环引用

那么接下来这个循环引用问题，也就很容易解决了。为了让大家更清晰明白，那么我们接下来一起分析整个流程。

① 首先执行 node main.js ，那么开始执行第一行 require(a.js)；
② 那么首先判断 a.js 有没有缓存，因为没有缓存，先加入缓存，然后执行文件 a.js （需要注意是先加入缓存，后执行模块内容）;
③ a.js 中执行第一行，引用 b.js。
④ 那么判断 b.js 有没有缓存，因为没有缓存，所以加入缓存，然后执行 b.js 文件。
⑤ b.js 执行第一行，再一次循环引用 require(a.js) 此时的 a.js 已经加入缓存，直接读取值。接下来打印 console.log('我是 b 文件')，导出方法。
⑥ b.js 执行完毕，回到 a.js 文件，打印 console.log('我是 a 文件')，导出方法。
⑦ 最后回到 main.js，打印 console.log('node 入口文件') 完成这个流程。

不过这里我们要注意问题：

如上第 ⑤ 的时候，当执行 b.js 模块的时候，因为 a.js 还没有导出 say 方法，所以 b.js 同步上下文中，获取不到 say。

验证：

const say = require('./a')
const  object = {name:'《React进阶实践指南》',author:'我不是外星人'
}
console.log('我是 b 文件')
console.log('打印 a 模块' , say)setTimeout(()=>{console.log('异步打印 a 模块' , say)
},0)module.exports = function(){return object
}我是 b 文件
打印 a 模块 {}
我是 a 文件
node 入口文件
异步打印 a 模块 {say :[Function]}

那么如何获取到 say 呢，有两种办法：

一是用动态加载 a.js 的方法，马上就会讲到。
二个就是如上放在异步中加载。

4 require 动态加载

require 可以在任意的上下文，动态加载模块。我对上述 a.js 修改。
a.js

console.log('我是 a 文件')
exports.say = function(){const getMes = require('./b')const message = getMes()console.log(message)
}

main.js

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

这样在b.js中就能获取到a.js的say方法

5 exports 和 module.exports

exports 使用

第一种方式：exports a.js

exports.name = `《React进阶实践指南》`
exports.author = `我不是外星人`
exports.say = function (){console.log(666)
}

引用

const a = require('./a')
console.log(a){name:"《React进阶实践指南》",author :"我不是外星人",say}

问题：为什么 exports={} 直接赋值一个对象就不可以呢？ 比如我们将如上 a.js 修改一下：

exports={name:'《React进阶实践指南》',author:'我不是外星人',say(){console.log(666)}
}//{}

理想情况下是通过 exports = {} 直接赋值，不需要在 exports.a = xxx 每一个属性，但是如上我们看到了这种方式是无效的。为什么会这样？实际这个是 js 本身的特性决定的。

通过上述讲解都知道 exports ， module 和 require 作为形参的方式传入到 js 模块中。我们直接 exports = {} 修改 exports ，等于重新赋值了形参，那么会重新赋值一份，但是不会在引用原来的形参。举一个简单的例子

function wrap (myExports){myExports={name:'我不是外星人'}
}let myExports = {name:'alien'
}
wrap(myExports)
console.log(myExports)//{name:"alien"}

当我们把 myExports 对象传进去，但是直接赋值 myExports = { name:'我不是外星人' } 没有任何作用，相等于内部重新声明一份 myExports 而和外界的 myExports 断绝了关系。所以解释了为什么不能 exports={...} 直接赋值。

module.exports 使用

module.exports 本质上就是 exports ，我们用 module.exports 来实现如上的导出。

module.exports ={name:'《React进阶实践指南》',author:'我不是外星人',say(){console.log(666)}
}

module.exports 也可以单独导出一个函数或者一个类。比如如下：

module.exports = function (){// ...
}

从上述 require 原理实现中，我们知道了 exports 和 module.exports 持有相同引用，因为最后导出的是 module.exports 。那么这就说明在一个文件中，我们最好选择 exports 和 module.exports 两者之一，如果两者同时存在，很可能会造成覆盖的情况发生。比如如下情况：

exports.name = 'alien' // 此时 exports.name 是无效的
module.exports ={name:'《React进阶实践指南》',author:'我不是外星人',say(){console.log(666)}
}

Es Module

导出 export 和导入 import

所有通过 export 导出的属性，在 import 中可以通过结构的方式，解构出来。

export 正常导出，import 导入

导出模块：a.js

const name = '《React进阶实践指南》' 
const author = '我不是外星人'
export { name, author }
export const say = function (){console.log('hello , world')
}

导入模块：main.js

// name , author , say 对应 a.js 中的  name , author , say
import { name , author , say } from './a.js'

默认导出 export default

导出模块：a.js

const name = '《React进阶实践指南》'
const author = '我不是外星人'
const say = function (){console.log('hello , world')
}
export default {name,author,say
}

导入模块：main.js

import mes from './a.js'
console.log(mes) //{ name: '《React进阶实践指南》',author:'我不是外星人', say:Function }

ES6 module 特性

1 静态语法

ES6 module 的引入和导出是静态的，import 会自动提升到代码的顶层，import , export 不能放在块级作用域或条件语句中。

错误写法一：

function say(){import name from './a.js'  export const author = '我不是外星人'
}

错误写法二：

isexport &&  export const  name = '《React进阶实践指南》'

import 的导入名不能为字符串或在判断语句，下面代码是错误的

错误写法三：

import 'defaultExport' from 'module'let name = 'Export'
import 'default' + name from 'module'

2 执行特性

ES6 module 和 Common.js 一样，对于相同的 js 文件，会保存静态属性。

但是与 Common.js 不同的是，CommonJS 模块同步加载并执行模块文件，ES6 模块提前加载并执行模块文件，ES6 模块在预处理阶段分析模块依赖，在执行阶段执行模块，两个阶段都采用深度优先遍历，执行顺序是子 -> 父。

main.js

console.log('main.js开始执行')
import say from './a'
import say1 from './b'
console.log('main.js执行完毕')

a.js

import b from './b'
console.log('a模块加载')
export default  function say (){console.log('hello , world')
}

b.js

console.log('b模块加载')
export default function sayhello(){console.log('hello,world')
}

3 导出绑定

export let num = 1
export const addNumber = ()=>{num++
}

import {  num , addNumber } from './a'
num = 2

想要修改导入的变量只能这么修改：

import {  num , addNumber } from './a'console.log(num) // num = 1
addNumber()
console.log(num) // num = 2

接下来对 import 属性作出总结：

使用 import 被导入的模块运行在严格模式下。
使用 import 被导入的变量是只读的，可以理解默认为 const 装饰，无法被赋值
使用 import 被导入的变量是与原变量绑定/引用的，可以理解为 import 导入的变量无论是否为基本类型都是引用传递。

import() 可以做一些什么

动态加载

首先 import() 动态加载一些内容，可以放在条件语句或者函数执行上下文中。

if(isRequire){const result  = import('./b')
}

懒加载

import() 可以实现懒加载，举个例子 vue 中的路由懒加载；

[{path: 'home',name: '首页',component: ()=> import('./home') ,},
]

tree shaking

Tree Shaking 在 Webpack 中的实现，是用来尽可能的删除没有被使用过的代码，一些被 import 了但其实没有被使用的代码。

如果引入的文件中有的方法没有被引用，那么构建打包的时候，是不会被打包进来的，

Commonjs 和 Es Module 总结

commonjs的特性如下

CommonJS 模块由 JS 运行时实现。
CommonJs 是单个值导出，本质上导出的就是 exports 属性。
CommonJS 是可以动态加载的，对每一个加载都存在缓存，可以有效的解决循环引用问题。
CommonJS 模块同步加载并执行模块文件。

Es module 的特性如下：

ES6 Module 静态的，不能放在块级作用域内，代码发生在编译时。
ES6 Module 的值是动态绑定的，可以通过导出方法修改，可以直接访问修改结果。
ES6 Module 可以导出多个属性和方法，可以单个导入导出，混合导入导出。
ES6 模块提前加载并执行模块文件，
ES6 Module 导入模块在严格模式下。
ES6 Module 的特性可以很容易实现 Tree Shaking 和 Code Splitting。