前端模块化的前因后果

1.避免全局变量污染局部

2.需要将代码拆分成更小的可维护模块

早期通过全局变量或 IIFE（立即执行函数表达式）实现模块化，但这些方法有局限性（如命名冲突、依赖顺序手动管理）。这推动了真正的模块化方案的出现。

CommonJS（CJS） - 2009年

• 出现背景：

  • 2009年，Ryan Dahl 发布 Node.js，目标是将 JavaScript 从浏览器扩展到服务器端。
  • 服务器端需要同步加载模块（文件系统访问快），而浏览器端的 AMD（异步模块定义，稍后介绍）过于复杂。

• 特点：

  • 使用 require() 同步加载模块，module.exports 导出。
  • 专为 Node.js 设计，强调简单性和运行时动态性。

• 示例：

  javascript

  JAVASCRIPT

  // module.js
  module.exports = { foo: 42 };
  // main.js
  const { foo } = require('./module');

• 因果作用：

  • CJS 是前端模块化发展中的第一个广泛应用的规范，解决了服务器端 JavaScript 的模块需求。
  • 但它不适合浏览器（浏览器不支持同步加载，且无原生 require），推动了后续方案的探索。

UMD（Universal Module Definition） - 2010年代初

• 出现背景：

  • 前端生态分裂：Node.js 用 CJS，浏览器端则有 AMD（如 RequireJS），还有传统的全局变量方式。
  • 库作者希望发布一个模块能同时在多种环境中运行（Node.js、浏览器 AMD、浏览器全局）。

• 特点：

  • UMD 是一个“兼容层”，通过条件判断适配不同模块系统。

• 示例：

  javascript

  JAVASCRIPT

  (function (root, factory) {
    if (typeof define === 'function' && define.amd) {
      define([], factory); // AMD
    } else if (typeof module === 'object' && module.exports) {
      module.exports = factory(); // CommonJS
    } else {
      root.myModule = factory(); // 全局变量
    }
  })(this, function () {
    return { foo: 42 };
  });

• 因果作用：

  • UMD 是对当时模块化生态碎片化的妥协方案，填补了 CJS 和浏览器环境之间的空白。
  • 但 UMD 代码冗长、不够优雅，且未解决模块系统的根本问题（仍需打包工具支持），促使更统一的标准出现

ESM（ES Modules） - 2015年（ES6）

• 出现背景：

  • CJS 和 UMD 的局限性暴露：CJS 不适合浏览器，UMD 是临时方案，社区需要一个原生、统一的模块标准。
  • ECMAScript 2015（ES6）引入了 ESM，作为 JavaScript 的官方模块系统。

• 特点：

  • 使用 import 和 export，支持静态分析和异步加载。
  • 浏览器原生支持（通过 ）。

• 示例：

  javascript

  JAVASCRIPT

  // module.js
  export const foo = 42;
  // main.js
  import { foo } from './module.js';

• 因果作用：

  • ESM 是模块化发展的“终极目标”，由语言标准定义，结束了 CJS 和其他方案的碎片化状态。
  • 它推动了现代工具（如 Vite、Rollup）利用浏览器原生能力，减少了对打包工具的依赖

前端模块化发展的其他关键进程

IIFE（2000年代初）

• 描述：使用立即执行函数表达式模拟模块。

• 示例：

  javascript

  JAVASCRIPT

  var myModule = (function () {
    var privateVar = 42;
    return { getVar: function () { return privateVar; } };
  })();

• 作用：最早的模块化尝试，解决全局变量冲突，但无法管理依赖。

AMD（Asynchronous Module Definition） - 2011年

• 描述：专为浏览器设计，以 RequireJS 为代表，支持异步加载。

• 示例：

  javascript

  JAVASCRIPT

  define(['dependency'], function (dep) {
    return { foo: 42 };
  });

• 作用：解决了浏览器端异步加载需求，但语法复杂，未被广泛采纳（输给了 CJS 和 ESM）。

打包工具的兴起

• Browserify（2011）：将 CJS 模块打包为浏览器可用的单一文件。
• Webpack（2012）：支持多种模块格式（CJS、AMD、ESM），引入模块打包和资源管理的概念。
• Rollup（2015）：专注于 ESM，打包时利用 tree-shaking 优化输出。
• Vite（2020）：直接利用 ESM 和浏览器原生支持，减少打包开销。

工具与生态的演进

• NPM（2010）：模块化生态的基础，统一了包管理和分发。
• TypeScript（2012）：支持 ESM，增强了模块化开发体验。
• Deno（2018）：原生支持 ESM 和 URL 导入，挑战 Node.js 的 CJS 生态。