ES6模块是静态解析、编译时确定依赖,不可动态加载;CommonJS是运行时执行、支持条件引入;二者在浏览器/Node.js中行为不同,互操作需注意默认导出结构、文件后缀、路径写法及循环引用机制。

ES6模块(import/export)是静态解析的
编译时就确定依赖关系,不能放在if或函数里动态加载。浏览器和Node.js(v12+默认启用)都支持,但行为有差异:
- 浏览器中必须用
type="module"声明: - Node.js中需文件后缀为
.mjs,或在package.json里设"type": "module" - 路径必须带扩展名或
/前缀(import {x} from 'lodash'合法,但import {x} from './utils'不合法,得写成./utils.js) - 顶层
this是undefined,不是globalThis
CommonJS(require/module.exports)是运行时执行的
Node.js原生支持(.js文件默认走CommonJS),可以动态调用require,也支持条件加载:
-
require('./utils')会自动尝试.js、.json、.node -
module.exports = {}和exports.xxx = yyy效果不同:后者只是给exports对象加属性,若直接赋值exports = {}会失效(因为exports只是module.exports的引用) - 循环引用时返回已执行部分的对象(可能为空对象),而ES6模块返回一个实时绑定的代理对象
- 无法直接在浏览器中使用,除非经打包工具(如Webpack)转译
默认导出和命名导出的互操作陷阱
ES6模块的export default在CommonJS里对应module.exports.default,但很多库(如Lodash)把默认导出挂到module.exports本身——这就导致:
- ES6中
import _ from 'lodash'能用,但import { debounce } from 'lodash'会报错(未命名导出) - CommonJS中
const _ = require('lodash')拿到的是整个对象,const { debounce } = require('lodash')才解构出方法 - 混用时注意Babel/TypeScript的
esModuleInterop配置:开启后会自动注入__importDefault包装,默认导出变成{ default: xxx }结构
Node.js里同时存在两种模块系统时的实际问题
一个项目里.js是CommonJS,.mjs是ES6,但它们不能直接互相import/require:
- CommonJS
require('./foo.mjs')会失败(报ERR_REQUIRE_ESM),必须用await import('./foo.mjs') - ES6模块里
import foo from './bar.js'可以,但若bar.js用了require或__dirname,运行时可能出错(ES6模块没有__dirname) - 第三方包若没正确声明
"type": "module",即使内容是ES6语法,Node.js仍按CommonJS解析,导致import报错
跨模块边界传值时,尤其要注意对象是否被深拷贝、是否共享引用——ES6模块导出的是活绑定,CommonJS是浅拷贝后的值。











