JavaScript模块加载原理与ES6、CommonJS、AMD对比详解

JavaScript模块系统历经CommonJS、AMD到ES6 Module的演进，三者本质互不兼容——CommonJS仅限Node同步运行，浏览器直接执行会报错；AMD依赖require.js实现异步加载，却非原生支持；而ES6 Module作为现代标准，在浏览器和Node中均原生可用，但需严格遵循静态解析、绑定导出等规则。混用模块不仅需复杂构建工具桥接，还易引发隐蔽bug，因此理解差异、合理迁移而非强行兼容，才是高效开发的关键。

JavaScript 模块加载器不是“一个东西”，而是不同规范在不同时期对「如何拆分代码、声明依赖、按需执行」给出的解决方案。CommonJS、AMD、ES6 Module（import/export）三者本质不兼容，不能混用，也不能靠“改个后缀”就自动转换。

CommonJS 只在 Node.js 里同步工作，浏览器直接跑会报 require is not defined

Node.js 的 require() 是同步读取文件、立即执行、返回模块导出对象。它依赖 Node 的文件系统和运行时封装，浏览器没有 require 全局函数，也没有同步读本地文件的能力。

• 典型错误：把 index.js 用 直接引入，里面写了 const fs = require('fs') → 浏览器报错 require is not defined
• 常见误解：以为 Babel 把 import 编译成 require 就等于支持 CommonJS 浏览器运行 —— 实际上只是语法转换，仍需打包工具（如 Webpack）注入运行时来模拟 require
• Node.js v12+ 虽支持 .mjs 和 type: "module"，但此时 require() 不可用，import 才是默认行为，和传统 CommonJS 环境已隔离

AMD 是为浏览器异步加载设计的，但需要 define() 包裹且依赖 require.js 运行时

AMD（Asynchronous Module Definition）解决的是“页面不卡死”的问题：模块可以并行下载、按依赖顺序执行，不阻塞渲染。但它不是语言原生特性，必须靠库（如 require.js）提供 define() 和 require() 函数。

• 写法必须显式包裹：

  define(['./a', './b'], function(a, b) {
    return { sum: a.val + b.val };
  });

• 没引入 require.js 就调用 define → define is not defined
• 即使用了 require.js，也无法直接 import 一个 ES6 模块文件，除非配置插件或转译；反过来，ES6 模块也不能 require('./xxx') AMD 模块
• 现代构建链路（Vite/Webpack/Rollup）基本不生成 AMD 输出，仅遗留项目或特定 CDN 场景（如 Dojo 1.x）还会遇到

ES6 Module 是浏览器和 Node.js 都原生支持的静态模块系统，但加载时机和 this 行为与 CommonJS 不同

import 和 export 是语法级特性，解析阶段就确定依赖图，不能动态拼接路径（import(expr) 是特例，返回 Promise），且模块顶层 this 是 undefined（CommonJS 中是 exports 对象）。

• 浏览器中必须用