JavaScript模块化方法及CommonJS与ES6对比
2026-03-07 16:49:36
0浏览
收藏
JavaScript模块化是解决代码组织、复用与依赖管理的关键实践，而CommonJS和ES6模块（import/export）作为两大主流方案，虽目标一致，却在语法设计、加载机制、执行时机、环境支持及循环引用处理等核心维度存在根本性差异：前者以同步、动态、运行时求值为特征，深度扎根Node.js生态；后者以静态、声明式、编译期解析为基础，原生拥抱浏览器并逐步成为现代前端标准。理解二者区别，不仅关乎代码能否正确运行，更直接影响架构设计、打包策略与调试体验——无论你是深耕服务端的Node开发者，还是构建高性能Web应用的前端工程师，掌握这两大模块系统的本质差异，都是跨越环境壁垒、写出健壮可维护代码的必修课。
JavaScript模块化是把代码拆分成独立、可复用的单元，避免全局污染和依赖混乱。CommonJS 和 ES6 模块（即 import/export）是两种主流方案，它们在语法、加载时机、运行环境和行为逻辑上都有本质区别。
语法写法和导出导入方式不同
CommonJS 使用 module.exports 和 require()，是同步、动态的函数调用：
- 导出：可以赋值给
module.exports（整个对象替换），或用exports.xxx = ...（仅限添加属性） - 导入：
const utils = require('./utils')，返回的是模块导出值的浅拷贝（实际是引用，但 CommonJS 缓存的是 module.exports 对象本身）
ES6 模块使用 export 和 import，是静态声明、编译时确定的：
- 导出：支持
export default（一个默认导出）、export const x = 1（具名导出）、export { a, b }等多种形式 - 导入：必须在顶层作用域，不能在条件语句或函数内；导入的是对原始绑定的实时只读引用（修改导出变量会影响其他模块）
加载机制和执行时机不同
CommonJS 是运行时同步加载，require() 执行时才去读文件、执行模块代码、返回结果。这意味着你可以把 require 写在 if 里，或者拼接路径动态引入（虽然不推荐）。
ES6 模块是编译时静态分析，JavaScript 引擎在代码执行前就解析所有 import，构建依赖图。因此无法真正“条件导入”，import() 动态导入函数是特例，返回 Promise，属于按需异步加载。
运行环境和兼容性差异明显
- CommonJS 原生支持 Node.js（v14+ 默认仍支持，v12 起也支持 ES 模块但需加
.mjs或"type": "module"） - ES6 模块 是浏览器原生支持的标准（