JavaScript中如何实现模块化_CommonJS和ES6区别

JavaScript模块化主要有CommonJS和ES6两种方式：前者用require/module.exports，运行时同步加载，Node原生支持；后者用import/export，编译时静态分析，浏览器和新Node版本原生支持；二者长期共存、各司其职。

JavaScript模块化主要靠 CommonJS 和 ES6（ECMAScript 2015）模块系统 两种方式，它们在语法、加载机制、运行时行为和适用环境上差异明显。选错方案容易导致报错或打包异常，尤其在Node.js和浏览器混合开发中。

语法写法不同

CommonJS 使用 require() 和 module.exports（或 exports），是动态、可写多次的赋值式导出：

• 导出：module.exports = { foo: 1 }; 或 exports.bar = () => {}
• 导入：const utils = require('./utils');（路径必须带 ./ 或 ../）

ES6 模块使用 import / export，是静态声明、编译期确定的语法：

• 导出：export const a = 1;、export default function() {}
• 导入：import { a } from './utils.js';（注意：浏览器中路径必须含扩展名或以 .js 结尾）

加载时机与执行顺序不同

CommonJS 是运行时同步加载，require() 执行时才读取并执行模块文件，支持条件加载（如 if (x) require('./a')）。

立即学习“Java免费学习笔记（深入）”；

ES6 模块是编译时静态分析，所有 import 必须在顶层，不能放在 if 或函数内；且 import 语句会被提升到模块顶部，但实际绑定在模块执行阶段完成（即“实时绑定”——导出值变了，导入处也会跟着变）。

默认导出与命名导出处理不同

CommonJS 只有一个导出对象（module.exports），所谓“默认导出”只是把整个对象赋给它，没有语法级区分：

故事AI绘图神器

文本生成图文视频的AI工具，无需配音，无需剪辑，快速成片，角色固定。

77

查看详情

• module.exports = function() {} → 导入后直接调用：const fn = require('./x'); fn();
• 无法同时有多个具名导出和一个默认导出；想模拟需手动挂载：module.exports.default = ...; module.exports.named = ...;

ES6 明确区分 export default 和 export 命名导出：

• 一个模块最多一个 default，导入时可自定义名字：import MyFunc from './x';
• 命名导出必须用对应名字或解构：import { foo, bar } from './x';
• 可同时存在：export default class A {}; export const b = 2;

运行环境与工具链支持不同

CommonJS 是 Node.js 原生支持的模块系统（v14.0+ 默认仍为 CommonJS，除非设置 "type": "module"），不被浏览器原生支持（需打包器如 Webpack/Babel 转译）。

ES6 模块被现代浏览器原生支持（通过 <script type="module"></script>），Node.js 从 v12 起支持（需文件后缀为 .mjs 或 package.json 中设 "type": "module"），但 CommonJS 仍是 Node 生态主流（尤其 npm 包）。

实际项目中常见混合场景：Node 后端用 CommonJS，前端用 ES6；或借助工具（如 Vite、Webpack）自动处理两者互调（例如在 ES6 环境中 import _ from 'lodash'，底层其实是解析其 CommonJS 版本）。

基本上就这些。选型看环境：Node 脚本、工具类优先 CommonJS；浏览器项目、新工程、TypeScript 项目推荐 ES6 模块。二者不是谁替代谁，而是长期共存、各司其职。

以上就是JavaScript中如何实现模块化_CommonJS和ES6区别的详细内容，更多请关注php中文网其它相关文章！