JavaScript模块化详解：ES6与CommonJS对比

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《JavaScript模块化是什么？ES6与CommonJS区别解析》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

JavaScript模块化是解决全局污染、依赖混乱和构建不可控的核心机制；ES6模块静态且浏览器原生支持，CommonJS动态且Node.js默认使用，二者不兼容，需工具链转换或适配层实现互操作。

JavaScript模块化就是把代码拆成可复用、可独立加载的单元

它不是语法糖，而是解决全局污染、依赖混乱和构建不可控的核心机制。浏览器原生支持 import/export 之前，社区靠打包工具（如 Webpack）和运行时模拟（如 require）来实现模块隔离。现在 ES6 模块是标准，但 CommonJS 仍在 Node.js 默认环境中广泛存在——二者不能混用，强行混用会直接报错，比如 ReferenceError: require is not defined 或 Cannot use import statement outside a module。

ES6模块是静态的，CommonJS是动态的

这是根本差异，直接影响代码能否被 Tree-shaking、是否支持循环引用、以及能否在顶层作用域外使用导入导出。

• import 和 export 只能出现在模块顶层，不能写在 if 或函数里；require() 可以随时调用，甚至拼接路径字符串
• ES6 模块在编译期就确定依赖关系，所以打包工具能安全地移除未使用的导出（Tree-shaking）；CommonJS 的 require() 是运行时执行，无法静态分析
• ES6 模块默认是只读引用（export const x = 1 导出的是绑定，不是值拷贝），而 CommonJS 导出的是对象属性的浅拷贝（module.exports.x = 1）
• ES6 支持命名导出（export function foo(){}）、默认导出（export default function(){}）、重命名导出（export { foo as bar }）；CommonJS 只有单一的 module.exports 对象

Node.js 中 import 和 require 不能共存于同一文件

哪怕只是写了一句 import fs from 'fs'，整个文件就被视为 ES 模块；此时再用 require('path') 就会抛出 ReferenceError: require is not defined。反过来也一样：含 require 的文件若没显式声明为 ES 模块，就不能用 import。

要让 Node.js 正确识别模块类型，必须满足以下任一条件：

• 文件扩展名为 .mjs
• 所在目录的 package.json 中设置了 "type": "module"
• 启动时加参数 node --input-type=module（仅限字符串输入）

注意：.cjs 扩展名强制为 CommonJS，即使 package.json 设了 "type": "module" 也无效。

跨环境互操作必须靠构建工具或适配层

浏览器不支持 require()，Node.js 默认不支持顶层 import（除非启用模块模式）。想在同一个项目中同时用两种风格，不能靠手动改写，得靠工具链转换：

• Webpack/Vite/Rollup 会把 import 和 require 统一处理成闭包内联函数，自动做兼容
• 如果要用 ES 模块语法写 Node.js 脚本，又依赖一个只提供 CommonJS 的包（比如早期版本的 lodash），就得用 createRequire 手动桥接：

import { createRequire } from 'module';
const require = createRequire(import.meta.url);
const lodash = require('lodash');

这种写法只在 Node.js 环境有效，且必须确保该文件本身是 ES 模块（.mjs 或 "type": "module"）。漏掉任何一环，就会卡在解析阶段。

最常被忽略的一点：ES6 模块的 export default 在 CommonJS 里对应的是 module.exports.default，而不是 module.exports 本身——很多老库导出的是 module.exports = function(){}，ES6 中写 import xxx from 'pkg' 没问题，但写 import { xxx } from 'pkg' 就会是 undefined。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。