

新闻资讯
技术学院JavaScript模块化由运行环境决定:浏览器早期用异步AMD,Node.js用同步CommonJS,现代统一采用原生支持的ES Module;三者机制不同,不可混用,强行桥接易出错。
JavaScript 模块化不是“选一个就完事”的问题,而是运行环境决定模块系统:浏览器端早期靠 AMD(如 RequireJS),Node.js 用 CommonJS(require/module.exports),现代则统一走向 ES Module(import/export)。两者本质不同,不能混用,强行桥接容易出错。
AMD 的核心是解决浏览器中脚本按需、异步加载的问题。它不依赖文件系统路径,而是靠配置或约定来映射模块名到 URL,所有依赖必须在定义时显式列出。
define 函数第一个参数是依赖数组,第二个是工厂函数,执行时机由加载器控制,**不保证顺序执行**define 工厂函数里直接调用 require('./x') 动态加载——这属于“运行时依赖”,AMD 要求“编译时可分析”,否则打包工具(如 r.js)无法处理define(['./math', 'jquery'], function(math, $) { return { add: function(a, b) { return math.add(a, b); } }; });
Node.js 的 require 是同步阻塞式调用,基于真实文件路径查找,模块加载后立即执行,导出结果缓存在 require.cache 中。这意味着:
require 可以出现在任意位置(条件判断、循环内),但实际仍会在模块顶层被提升并预执行(v14+ 有部分优化,但行为不变)module.exports 和 exports 不是引用关系,直接赋值 exports = {...} 会断开与 module.exports 的连接,导致外部 require 得到空对象module.exports 初始空对象(除非 A 提前赋值)const fs = require('fs');
const math = require('./math');
function calc() {
return math.add(2, 3);
}
module.exports = { calc };
看到 require('./xxx') 就以为是 CommonJS?不一定。RequireJS 的 require 是 AMD 规范下的异步加载函数,和 Node 的同步 require 完全不同机制。常见混淆点:
target: 'node',却写了 define([...], ...) —— Webpack 会忽略它,当作普通函数调用,不会触发 AMD 加载逻辑requirejs npm 包并调用 requirejs.define,并不能获得 CommonJS 行为;它只是把 AMD 运行时搬进了 Node,模块路径解析、缓存、执行模型仍是 AMD 的amdefine)或打包成 UMD,而不是改几行 require
import/export 是语言级标准,浏览器和 Node 都已原生支持(Node 需 .mjs 或 "type": "module")。它的静态分析能力远超 AMD/CommonJS,Tree-shaking、循环依赖处理、顶层 await 都更可靠。
module.exports 了,除非要支持 v12 以下;exports 对象可以保留,但导出应统一用 export default 或具名 export
package.json 里写了 "type": "module" 后,所有 .js 文件都必须用 ES Module 语法,require() 会直接报 ERR_REQUIRE_ESM
模块系统不是语法糖,它绑定着加载时机、作用域隔离、缓存策略和错误边界。选错方案,后期迁移成本远高于初期多写几行配置。