JS模块化：从混乱到优雅的进化，Unity游戏基础-1（安装~工作区构建）。-优快云博客

JS模块化的发展历程

早期JavaScript缺乏原生的模块化支持，开发者不得不依赖全局变量或立即执行函数（IIFE）来隔离作用域。随着应用复杂度提升，社区逐渐形成了CommonJS（Node.js）、AMD（Require.js）和ES Modules（ESM）等方案。

CommonJS采用同步加载，通过require和module.exports实现模块化，适合服务端环境。AMD通过define和require实现异步加载，更适合浏览器端。ES Modules是ECMAScript官方标准，通过import和export语法实现静态分析，成为现代前端开发的主流选择。

CommonJS与ES Modules的核心差异

CommonJS模块在运行时加载，模块输出的是值的拷贝，动态require语句可嵌套在条件逻辑中。

// CommonJS示例
const { add } = require('./math');
console.log(add(1, 2)); // 3

ES Modules在编译时解析依赖，输出的是值的引用，且import必须位于模块顶层。

// ESM示例
import { add } from './math.js';
console.log(add(1, 2)); // 3

现代工具链中的模块化实践

Webpack和Rollup等构建工具支持混合使用CommonJS和ES Modules。通过配置package.json的type字段或文件扩展名（.cjs/.mjs）明确模块类型。Tree Shaking等优化功能依赖ES Modules的静态结构。

// 混合使用示例（Webpack环境）
import lodash from 'lodash'; // ESM
const fs = require('fs'); // CommonJS

动态导入与代码分割

ES2020引入的import()函数支持动态加载模块，结合Webpack可实现按需加载与代码分割。

// 动态导入示例
button.addEventListener('click', async () => {
  const module = await import('./dynamicModule.js');
  module.run();
});

模块化最佳实践

优先使用ES Modules语法，搭配type: "module"声明。
第三方库兼容性问题可通过构建工具转译解决。
避免循环依赖，利用工具如madge检测依赖关系。
浏览器环境使用<script type="module">直接支持ESM。

模块化是大型应用可维护性的基石，理解不同方案的适用场景能显著提升代码质量与性能。