前端模块简史：从 CJS 到 ES Modules

2024-02-17 04:10:48

在前端开发的漫长旅程中，我们总会遇到一个绕不开的话题：如何让代码结构更清晰，如何让功能模块更易于复用？答案很简单，那就是模块化。在没有模块化概念的蛮荒时代，我们只能把所有代码堆在一起，就像一个杂乱无章的仓库，找东西都费劲。公共逻辑的复用更是让人头疼，只能复制粘贴，代码冗余不说，一旦要修改，那简直是噩梦。

为了解决这个问题，开发者们开始尝试各种方法。最开始，大家把变量都暴露在全局，这样调用起来方便，但全局变量就像一个公共澡堂，谁都能进去，很容易被污染，导致代码出现各种莫名其妙的 bug。后来，有人想到了用命名空间，就像给澡堂划分了不同的区域，虽然能减少一些冲突，但代码还是在一个大池子里执行，副作用还是防不胜防。

幸运的是，随着 JavaScript 的不断发展，前端模块化规范终于出现了，就像给代码穿上了一套定制西装，每个模块都有自己的独立空间，井然有序。其中，最受欢迎的要数 CommonJS (CJS) 了。CJS 就像一个模块工厂，它定义了模块的创建和使用规则，开发者可以用 require() 函数像从工厂取货一样加载需要的模块。CJS 是 Node.js 的默认模块化规范，在服务端开发中扮演着重要角色，也影响了前端模块化的发展。

与 CJS 同时期出现的还有 AMD (Asynchronous Module Definition)，它就像一个快递公司，专门负责异步加载模块。在 CJS 中，模块加载是同步的，就像去工厂取货，必须等货备齐才能走。但在浏览器环境下，同步加载可能会导致页面卡顿，用户体验不好。AMD 则允许异步加载，就像快递一样，下单后可以先做其他事情，等快递到了再签收。AMD 的出现，为前端模块化提供了更多可能性。

时间来到 2015 年，JavaScript 终于迎来了自己的原生模块化规范：ES Modules。ES Modules 就像一个现代化的物流中心，它集成了模块的定义、加载、使用等功能，更加简洁高效。开发者可以用 import 和 export 像操作物流系统一样管理模块，代码也更加清晰易懂。ES Modules 是 JavaScript 语言的一部分，未来有望成为前端模块化的标准，引领前端开发的新潮流。

除了这些模块化规范，还有一些工具可以帮助我们更好地管理模块。比如 SystemJS，它就像一个万能模块加载器，可以加载各种规范的模块，就像一个兼容各种快递公司的物流平台。Webpack 则是一个强大的打包工具，它可以把各种模块打包成一个或多个文件，就像把货物打包成集装箱，方便运输和管理。Webpack 支持各种模块化规范，是目前最流行的前端构建工具之一。

展望未来，前端模块化技术将会继续发展，ES Modules 规范有望成为主流，异步加载、模块热更新等特性将会得到更好的支持。前端开发也将变得更加高效、便捷。