ES6模块与CommonJS对比教程

本文深入解析了ES6模块（import/export）与CommonJS（require/module.exports）在Node.js中的核心差异与互操作难题，涵盖启用ES6模块的三种官方方式（package.json设"type": "module"、使用.mjs后缀、启动参数）、静态编译期vs运行时加载的本质区别、作用域限制、路径约束、导出绑定机制（非值拷贝）、默认导出与require的映射逻辑，以及跨环境统一模块化的现实挑战与实用折中方案，为开发者规避常见陷阱、实现平滑迁移和多环境兼容提供清晰、可落地的技术指南。

ES6 模块（import/export）和 CommonJS（require/module.exports）本质不兼容，不能混用；Node.js 从 v14 开始默认支持 ES6 模块需靠 .mjs 后缀或 "type": "module" 声明，否则按 CommonJS 处理。

如何在 Node.js 中正确启用 ES6 模块

Node.js 默认把 .js 文件当 CommonJS 执行。想用 import/export，必须显式开启模块模式：

• 方案一：在 package.json 中添加 "type": "module" —— 整个包所有 .js 文件都按 ES6 模块解析
• 方案二：改用 .mjs 后缀 —— 单个文件生效，无需改 package.json
• 方案三：启动时加 --input-type=module（仅限 inline 脚本）或 --experimental-modules（旧版本）

注意："type": "module" 下，require() 会直接报错 ReferenceError: require is not defined；反之，CommonJS 中也不能用 import。

import 和 require 的加载时机与行为差异

ES6 模块是静态编译期解析，CommonJS 是运行时动态加载：

• import 必须在顶层作用域，不能写在 if 或函数里；require() 可以随时调用
• import 的模块路径必须是字符串字面量（不能拼接变量），否则报 ParseError: 'import' and 'export' may only appear at the top level
• require() 返回的是模块的 exports 对象，可多次赋值；export 是绑定导出，修改原始值会影响所有导入处（如 export let count = 0，另一端 import { count } 后修改它，双方可见）

例如：export { foo } 导出的是对 foo 的只读绑定，不是拷贝；而 module.exports = { foo } 是一次性的值拷贝。

默认导出（export default）和命名导出（export）怎么对应 require

CommonJS 没有“默认导出”概念，所以 import something from 'x' 实际等价于 const something = require('x').default —— 这意味着，如果一个 ES6 模块只有 export default xxx，没有 export 命名项，那它的 require('x') 结果就是 xxx；但一旦同时存在 export default 和 export const y = 1，require('x') 就变成 { default: xxx, y: 1 }。

• 想让 require() 直接拿到默认值？只能用 module.exports = xxx，不能混用 export default
• 想在 ES6 模块中兼容 require？可以显式设置 module.exports = xxx（Node.js 允许在 .mjs 中写，但不推荐）
• 使用 import * as ns from 'x' 时，CommonJS 模块会被包装成命名空间对象：ns.default 存默认导出，ns.xxx 存命名导出（如果有的话）

跨环境（浏览器 + Node.js）统一模块写法的现实约束

目前没有零配置、无妥协的通用方案。常见折中方式：

• 纯前端项目：只用 import/export，打包工具（如 Vite、Webpack）自动处理
• 纯 Node.js 工具库：若需支持旧版 Node（"type": "module" + .mjs
• 双端库（如 UI 组件）：通常提供两种构建产物：dist/index.cjs（CommonJS）和 dist/index.esm.js（ESM），并在 package.json 中分别指定 "main" 和 "module" 字段

真正容易被忽略的是：ES6 模块的循环引用处理机制和 CommonJS 不同——ES6 中导入的是实时绑定，可能拿到 undefined（直到模块执行完才赋值），而 CommonJS 是导出时的快照值，更“稳定”但也更死板。

本篇关于《ES6模块与CommonJS对比教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！