返回

浅析前端模块化演进：从 AMD、Common.js 到 ESM

前端

模块化的起源：浏览器与 Node.js 的分化

模块化的种子最早可追溯到上世纪九十年代。随着浏览脚本的蓬勃兴起，编写和管理大型脚本变得越发吃力。将复杂的功能拆分成一个个独立的可重用单元，即“模块”应运而生。

但由于浏览上下文和 Node.js 环境的差异，模块化的方案也由此分道扬镳：

  • 浏览器：由于受限于沙箱和安全性考量，诞生了 AMD（Asynchronous Modular Define）和 Common.js 这两种方案。
  • Node.js：采用了 Common.js 标准，并在此基础上又衍生出众多模块加载器，如 Require.js、 Sea.js 等。

模块加载的三驾马车：AMD、Common.js、ESM

AMD：按需加载，模块异步定义

AMD（Asynchronous Modular Define）模块化标准于 2004 年诞生，旨在浏览器上下文中按需异步加载模块。其定义结构为：

define('模块名', ['显性以来模块'], function(以来模块) {
  // 定义模块内容
});

Common.js：基于闭包，模块导出导入

Common.js 与 AMD 诞生于同年，但它的设计初衷是为了满足 Node.js 环境下的模块化。其原理基于闭包：

var module = {
  exports: {}
};

exports.属性 = '属性值';
module.exports.属性 = '属性值';

Common.js 通过 require() 加载模块：

var 以来模块 = require('模块名');
console.log(以来模块.属性);

ESM：原生化模块，简洁轻量

2015 年，ES6 正式提出了原生模块化方案（ES Modules，简称 ESM）

import { 导出成员 } from '模块名';
export { 导出成员 }

ESM 无需借助加载器或打包工具，直接使用 import 导入模块，export 导出模块，原生化和轻量化都是其显著特点。

模块化演进：向标准化与生态完善迈进

从 AMD 到 Common.js，再到 ESM，前端模块化的演进始终围绕着标准化和生态完善这两条主线。

  • 标准化：AMD、Common.js 标准化运动的推动，使模块化有了规范可循。而 ESM 更是直接纳入到了原生浏览之中，奠定了前端模块化的根基。
  • 生态完善：随着前端工程化的兴起，围绕模块化衍生出大量的工具链和库。如 Webpack、Jest、ESLint 等，为模块化开发提供了更加全面和完善的支持。

展望：生态聚合与面向未来的思考

前端模块化历经二十余载，不仅见证了前端工程化的演进，也见证了前端开发从手工到工业化的转变。

展望未来，随着前端技术的进一步演进，模块化生态将向何处去？

  • 生态聚合： 在 ESM 标准化的趋势下，前端模块化工具链和库有望逐步聚合，形成一套标准化的、开箱即用的模块化开发方案。
  • 面向未来： 基于 WebAssembly 等更底层的技术的探索，或许会为前端模块化的未来带来更多的创新和思考。