JavaScript篇：前端模块化进化史：从CommonJS到ES6的奇幻之旅

混沌初开：为什么需要模块化？

记得我刚入行时，项目里的JavaScript代码全都写在一个文件里，变量到处飞，函数随意调，维护起来简直是一场噩梦。直到我发现了模块化这个概念，才明白原来JavaScript也可以优雅地组织代码。

模块化带来的好处太多了：

避免命名冲突

代码可维护性提高

依赖关系清晰

实现按需加载

CommonJS：Node.js的默认选择

// 我导入了一个模块
const _ = require('lodash');

// 我导出了一个模块
module.exports = {
  add: function(a, b) {
    return a + b;
  }
};

CommonJS是Node.js采用的模块化方案，特点：

同步加载

适合服务端

语法简单直接

但同步加载在浏览器端会有性能问题，于是出现了异步方案。

AMD：浏览器端的异步解决方案

// 我定义了一个AMD模块
define(['jquery', 'lodash'], function($, _) {
  return {
    init: function() {
      $('#app').html(_.join(['Hello', 'world'], ' '));
    }
  };
});

AMD(Asynchronous Module Definition)的代表是RequireJS，特点：

异步加载

适合浏览器环境

前置声明依赖

CMD：更优雅的异步方案

// 我定义了一个CMD模块
define(function(require, exports, module) {
  // 需要时再引入
  const $ = require('jquery');
  const _ = require('lodash');
  
  module.exports = {
    init: function() {
      // 使用$和_
    }
  };
});

CMD是SeaJS推广的规范，与AMD的主要区别：

依赖就近

延迟执行

更符合CommonJS书写习惯

ES6 Module：未来的标准

// 我导入了一个ES模块
import { debounce } from 'lodash-es';

// 我导出了一个ES模块
export const double = n => n * 2;
export default function() {
  console.log('Hello ES Modules!');
}

ES6 Module是语言层面的模块化方案，特点：

静态分析

同时支持服务端和浏览器端

兼容性好（现代浏览器和Node.js都支持）

实战对比：不同场景如何选择？

Node.js项目：CommonJS是默认选择，也可以使用ES6 Module（需要.mjs扩展名或package.json中设置type）

现代前端项目：首选ES6 Module，配合webpack/Rollup等打包工具

旧浏览器兼容：可能需要AMD/CMD，或者用Babel转译ES6 Module

我踩过的坑

循环依赖：模块A依赖B，B又依赖A。CommonJS能处理但结果可能不符合预期，ES Module会直接报错。

动态导入：ES6的import()函数可以实现按需加载，解决了以前需要AMD/CMD的场景。

// 我在需要时动态加载模块
button.addEventListener('click', async () => {
  const module = await import('./module.js');
  module.doSomething();
});

Tree Shaking：只有ES6 Module的静态结构才能被打包工具优化，删除未使用的代码。

未来展望

随着浏览器和Node.js对ES6 Module的支持越来越好，它正在成为事实标准。但了解各种模块化方案的差异，对于维护老项目和深入理解JavaScript模块系统仍然很有帮助。

希望这篇文章能帮你理清前端模块化的发展脉络。如果你有任何问题或有趣的模块化实践，欢迎在评论区分享！

作者：江城开朗的豌豆

链接：https://juejin.cn

https://www.zuocode.com

+友情链接