JavaScript模块化将代码拆分为独立可复用单元，ES6模块（import/export，编译时加载、实时引用）与CommonJS（require/module.exports，运行时加载、值拷贝）核心区别在于设计目标和运行机制不同。
JavaScript模块化是把代码按功能拆分成独立、可复用的单元，每个单元有自己作用域，不污染全局，还能明确声明依赖和对外接口。ES6模块和CommonJS是两种主流规范，核心区别不在“谁更好”，而在设计目标和运行机制不同。
语法写法不一样
ES6用import和export关键字，写在文件顶层，静态声明：
export const name = 'Alice'; export function say() {} import { name, say } from './utils.js'; 支持默认导出：export default function() {}，导入时不用大括号
CommonJS用require()和module.exports，是函数调用，可以出现在代码任意位置：
module.exports = { name: 'Bob', say: () => {} }; 或 exports.say = () => {}; const utils = require('./utils.js'); 不能在if里require，但可以动态拼路径：require('./' + env + '.js')
加载时机和依赖分析方式不同
ES6模块是编译时加载，所有import必须写在文件最上方，引擎在执行前就能知道依赖了哪些模块、用了哪些变量——这支撑了Tree Shaking、IDE自动跳转、打包优化等能力。
立即学习“Java免费学习笔记（深入）”；
CommonJS是运行时加载，require在哪执行，模块就在那时被读取、执行、返回结果。这意味着：
可以条件加载：if (isProd) require('./prod-config') 也可以循环引用，靠缓存机制兜底 但工具无法提前分析依赖，打包或重构时容易出错
导出值是拷贝还是引用
CommonJS导出的是值的拷贝（浅拷贝）：
比如let count = 0; module.exports = { count }，外部拿到的是count当时的数值 后续模块内部改count++，外部读到的count不会变
ES6导出的是绑定的实时引用：
let count = 0; export { count }; count++，其他模块import后能立刻看到更新后的值 函数、对象、类都是活引用，不是快照
适用环境和兼容性
CommonJS原生只跑在Node.js里（.cjs或package.json设"type": "commonjs"），浏览器不支持require。
ES6模块浏览器原生支持（），Node.js从12+也全面支持（.mjs或"type": "module"）。
注意：两者不能混写。一个文件用了import/export，就不能再用require/module.exports；反之亦然。跨环境项目常靠打包工具（如Webpack、Vite）做兼容处理。
基本上就这些。选哪个不取决于新旧，而看场景：写纯Node脚本或老项目维护，CommonJS够用顺手；做前端工程、需要静态分析或跨端统一，ES6模块更稳更现代。
以上就是JavaScript模块化是什么_ES6模块和CommonJS有什么区别呢的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1544098.html
微信扫一扫 
支付宝扫一扫 
