【js 知识】Commonjs 和 Es Module 的对比

关注

原创最新推荐文章于 2026-06-09 09:28:16 发布 316 阅读 AI 写同款· GEO 优化 ›

前端Javascript模块化 CommonJS与ES Module区别 ES Module 的静态结构支持编译时删除未使用代码（如 Webpack 的 Tree Shaking），而 CommonJS 因动态加载无法实现此优化。ES Module的普及促使npm生态向ESM迁移，工具链（如Webpack、Rollup、Vite）全面支持ESM，形成从开发到构建的完整解决方案。从“脚本堆砌”到“工程化设计”，模块化推动了组件化开发、Monorepo架构和微前端实践，例如通过Webpack和Vite实现模块联邦与即时编译。模块化通过独立作用域隔离变量，避免全局命名冲突。阅读详情

前言

今天简单学习下模块化的知识，准备跳槽面试的同学可以看起来了，基础打牢，啥都不怕了

模块化

模块化的意义是将程序划分成一个一个小的模块结构，每个模块有属于自己小世界，不会影响到其他的结构
没有模块化可能造成全局污染，引入多个 js 文件，可能出现同样命名的方法
没有模块化，依赖管理也是一个难以处理的问题

commonjs

模块同步加载并执行模块文件，拷贝一份值出来

common 变量

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

require

模块导入规则

./ 和 …/ 相对路径的文件模块， / 绝对路径的文件模块，会被当作文件模块处理，require() 方法会将路径转换成真实路径* 没有路径开头则视为导入一个包* fs、http、path 等标识符，为 nodejs 的核心模块，将被优先处理* 不是核心模块会从当前文件的同级目录的 node_modules 寻找 -> package.json 下 main 属性指向的文件 -> index.js ，index.json ，index.node* 如果再没有，在父级目录的 node_modules 查找，一直递归到根目录下的 node_modules，直到找不到为止结束

缓存

模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存* 每个模块内部，module 变量代表当前模块。这个变量是一个对象，它的 exports 属性（即 module.exports）是对外的接口。加载某个模块，其实是加载该模块的 module.exports 属性* 代码分析```
function require(id) {const cachedModule = Module._cache[id];// 模块是否被加载过，加载过则取出来走缓存if (cachedModule) {return cachedModule.exports;}const module = { exports: {} ,loaded: false , …}// 对模块进行缓存Module._cache[id] = module// 这一步执行文件内容// 为 true 则加载完成，返回对象module.loaded = truereturn module.exports
}


##### 循环引用

// a 文件
exports.a = 1;
const b = require(‘./b’);
console.log(b);
exports.a = 2;
// b 文件
exports.b = 3;
const a = require(‘./a’);
console.log(a);
exports.b = 4;
// app 文件
const a = require(‘./a’);
console.log(a);


* 代码流程分析1.执行 app.js 代码，获取 require('./a') -> 无缓存 ->加入缓存 -> 执行模块2.执行 require('./b') -> 无缓存 -> 加入缓存执行模块，进行 b -> require('./a') -> 有缓存，直接读取 -> 回到 b.js3.打印 { a: 1 } -> 执行 exports.b = 4，修改 b 等于 44.回到 a.js -> b 获取完毕，打印 { b: 4 } -> 执行 exports.a = 2，修改 a 为 25.回到 app.js -> 获取 a 完毕，输出 { a: 2 }

#### module.exports 和 exports

##### exports

* 正确写法

// a 模块
exports.name = ‘breeze’;
exports.age = ‘18’;
exports.fun = function () {console.log(‘bao’);
};

// app.js 文件引用
const a = require(‘./a’);
console.log(a); // { name: ‘breeze’, age: ‘18’, fun: [Function] }


* 错误写法：不能直接赋值

// 上文 a.js 修改成如下写法
exports = {name: ‘breeze’,age: ‘18’,fun: function () {console.log(‘bao’);},
};

// app.js 文件引用
const a = require(‘./a’);
console.log(a); // { }


* 错误原因：exports、module、require 都是通过形参的方式传入到模块中，如果直接 exports 新赋值一个对象的话，改变了引用类型的地址
* 模拟一下函数的流程

// js 代码中写的内容
const script = const a = require('./a');module.exports = function say() {return {a: a,};};;

// 通过参数的形式传入函数，所以不能改变引用对象的地址，否则只能输出为空
function wrapper(script) {return ‘(function (exports, require, module, __filename, __dirname) {’ + script + ‘\n})’;
}

// 执行包装函数
const modulefunction = wrapper(script);


##### module.exports

* 和 exports 是同一个引用地址* 支持的写法，可以放在一个对象里```
module.exports = {name: 'breeze',age: '18',fun: function () {console.log('bao');},
};

不同的是 module.exports 可以直接赋值，不导出对象，以下情况生效

module.exports = '1';
module.exports = [1, 2, 3];
module.exports = function () {}; //导出方法

Es Module

提前加载并执行模块文件
在预处理阶段分析依赖关系，在执行阶段执行模块（深度优先遍历，执行顺序先子后父）
ES6 模块不会缓存运行结果，而是动态地去被加载的模块取值，并且变量总是绑定其所在的模块

import、export

引入和导出都是静态的，import 自动提升至顶层* import、export 不能放在块级作用域或条件语句中* 不可以在导入的文件中修改，可以在导出的文件中操作，可以理解为无论是否基本类型都是进行的引用传递

// a 文件
export let count = 1；
export addCount = () => {count++
}

// app 文件
import { count, addCount } from './a'
count = 2 // 报错，不可以修改
addCount() // 可以正常修改

import()

import() 返回 Promise 对象
可以进行动态使用

// a 文件
export name = 'breeze';
export default function fun () {console.log('bao')
}

// app 文件
setTimeout(() => {import('./a').then(res=>{console.log(res) // { name: 'breeze', default: f fun() }})res
}, 0);

经常使用于路由加载：react 路由懒加载

import React, { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';

const dynamicImport = (dirName: string) => {const Module = lazy(() => import(`../pages/${dirName}`)); // 动态加载return <Module />;
};

export const Router = () => {return (<Routes><Route path="/todo" element={dynamicImport('todo')} /></Routes>);
};

export default () => {return (<Suspense fallback={loading}><Router /></Suspense>);
};

tree shaking

tree shaking 原理就是利用的 es6 的 import、export，用来尽可能的删除没有被使用过的代码，不进行打包

// a 文件
export count = 1;
export const addCount = () => {count++
}
export const reduceCount = () => {count--
}

// app 文件
import { addCount } from './a'
addCount()