JavaScript模块化是什么_ES6模块与CommonJS有何不同？

林译川

2026-09-11 • 👁 0人浏览过

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 正确识别模块类型，必须满足以下任一条件：立即学习 “ Java免费学习笔记（深入） ”； Comet AI 浏览器下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。下载文件扩展名为

.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

。

相关文章