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），所谓“默认导出”只是把整个对象赋给它，没有语法级区分：
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 模块被现代浏览器原生支持（通过 ），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区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1544674.html
微信扫一扫 
支付宝扫一扫 
