JavaScript模块化从CommonJS到ES6模块逐步演进,解决了早期代码组织混乱问题。CommonJS采用同步加载,适用于Node.js环境,通过require引入模块,module.exports导出;而ES6模块为语言原生标准,支持静态分析、tree-shaking及异步解析,使用import和export语法,更适合浏览器。两者主要差异在于加载时机(运行时值拷贝 vs 编译时动态引用)、语法风格及循环依赖处理。现代浏览器原生支持ES6模块,需通过引入。当前开发中二者常共存,Node.js可通过.mjs扩展名或package.json设置启用ES6模块,构建工具如Webpack、Vite等支持格式转换,Babel可将ES6语法转为CommonJS以兼容旧环境。混合使用时需注意互操作性,如用默认导入引入CommonJS模块。理解其差异有助于提升代码可维护性。

JavaScript模块化是现代前端开发的基础。早期的JavaScript缺乏原生模块机制,开发者不得不依赖全局变量或立即执行函数来组织代码,导致命名冲突和依赖混乱。为解决这些问题,社区逐步发展出CommonJS、AMD、UMD等规范,最终迎来了ES6模块(ESM)的标准化。
CommonJS:服务器端的模块方案
CommonJS 是最早被广泛采用的模块规范,主要应用于 Node.js 环境。
它通过 require 加载模块,通过 module.exports 或 exports 导出内容。每个文件是一个独立模块,变量不会污染全局作用域。
示例:
// math.js
function add(a, b) {
return a + b;
}
module.exports = { add };
// app.js
const { add } = require('./math');
console.log(add(2, 3)); // 5
CommonJS 使用同步加载机制,适合服务端文件读取,但在浏览器中会阻塞主线程,因此不适合直接用于前端。
立即学习“Java免费学习笔记(深入)”;
ES6 模块:语言层面的标准化
ES6(ECMAScript 2015)引入了原生模块系统,成为 JavaScript 的官方标准。它使用 import 和 export 语法,支持静态分析和 tree-shaking,有助于构建工具优化打包体积。
示例:// math.mjs export const add = (a, b) => a + b; export const mul = (a, b) => a * b;// app.mjs import { add, mul } from './math.mjs'; console.log(add(2, 3)); // 5
ES6 模块是异步解析的,设计上更适合浏览器环境。它支持默认导出(export default)和具名导出,导入时可重命名或整体导入。
ShopNum1拥有强大的网店促销模块,里面就包括商品团购、捆绑销售、品牌专卖、积分换购、优惠券促销、打折促销等众多促销功能,通过合理的组合使用,能帮助商家更好的提高消费者的忠诚度,有效发展新用户,从而带来订单数量的提升。 ShopNum1通过对网店系统软件本身的众多细节优化,有效提升了各主要搜索引擎对其收录的友好程度,从而帮助商家通过搜索引擎带来更多的直接有效客户,以达到提升订单销量的目的。 强
CommonJS 与 ES6 模块的主要差异
两者在行为和使用上有显著不同:
- 加载时机:CommonJS 是运行时加载,值拷贝;ES6 模块是编译时加载,动态引用(活绑定)。
- 语法风格:CommonJS 使用 require() 函数,ES6 使用 import 关键字(必须在顶层)。
- 循环依赖:CommonJS 返回缓存值,可能拿到未执行完的模块;ES6 模块能处理循环依赖,但需注意初始化顺序。
- 浏览器支持:现代浏览器原生支持 ES6 模块,需用 引入。
实际开发中的共存与转换
目前很多项目同时存在 CommonJS 和 ES6 模块。Node.js 从 v12 开始支持 .mjs 扩展名或 package.json 中设置 "type": "module" 来启用 ES6 模块。
构建工具如 Webpack、Vite、Rollup 默认支持两种格式,并能在打包过程中自动转换。Babel 可将 ES6 模块语法转为 CommonJS,便于在旧环境运行。
如果在同一个项目中混合使用,需要注意互操作性。例如,ES6 模块导入 CommonJS 模块时,可用默认导入方式:import _ from 'lodash'。
基本上就这些。从 CommonJS 到 ES6 模块,JavaScript 的模块化不断演进,最终走向统一标准。理解两者的原理和差异,有助于写出更清晰、可维护的代码。不复杂但容易忽略。









