JS模块化怎么实现？CommonJS和ES6区别详解

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《JavaScript模块化怎么实现？CommonJS与ES6区别解析》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

JavaScript模块化分CommonJS和ES6两种：前者用require/module.exports，同步动态加载，Node原生支持；后者用import/export，静态编译解析，浏览器原生支持，具实时绑定与循环引用优化。

JavaScript模块化是把代码拆分成独立、可复用的单元，避免全局污染和依赖混乱。CommonJS 和 ES6 模块（即 import/export）是两种主流方案，它们在语法、加载时机、运行环境和行为逻辑上都有本质区别。

语法写法和导出导入方式不同

CommonJS 使用 module.exports 和 require()，是同步、动态的函数调用：

• 导出：可以赋值给 module.exports（整个对象替换），或用 exports.xxx = ...（仅限添加属性）
• 导入：const utils = require('./utils')，返回的是模块导出值的浅拷贝（实际是引用，但 CommonJS 缓存的是 module.exports 对象本身）

ES6 模块使用 export 和 import，是静态声明、编译时确定的：

• 导出：支持 export default（一个默认导出）、export const x = 1（具名导出）、export { a, b } 等多种形式
• 导入：必须在顶层作用域，不能在条件语句或函数内；导入的是对原始绑定的实时只读引用（修改导出变量会影响其他模块）

加载机制和执行时机不同

CommonJS 是运行时同步加载，require() 执行时才去读文件、执行模块代码、返回结果。这意味着你可以把 require 写在 if 里，或者拼接路径动态引入（虽然不推荐）。

ES6 模块是编译时静态分析，JavaScript 引擎在代码执行前就解析所有 import，构建依赖图。因此无法真正“条件导入”，import() 动态导入函数是特例，返回 Promise，属于按需异步加载。

运行环境和兼容性差异明显

• CommonJS 原生支持 Node.js（v14+ 默认仍支持，v12 起也支持 ES 模块但需加 .mjs 或 "type": "module"）
• ES6 模块 是浏览器原生支持的标准（