前端模块化演进 —— 从 CommonJS 到 ESM 的完整指南

// 2000年代的主流写法
var MyApp = MyApp || {};

MyApp.Utils = {
  formatDate: function(date) { /* ... */ },
  ajax: function(url) { /* ... */ }
};

MyApp.Widget = {
  init: function() { /* ... */ }
};

// math.js
module.exports = {
  add: function(a, b) { return a + b; },
  subtract: function(a, b) { return a - b; }
};

// 或者导出单个
exports.add = function(a, b) { return a + b; };

// index.js
const math = require('./math');
console.log(math.add(1, 2));

// 定义模块
define('myModule', ['dependency'], function(dep) {
  return {
    doSomething: function() { /* ... */ }
  };
});

// 使用模块
require(['myModule'], function(myModule) {
  myModule.doSomething();
});

define(function(require, exports, module) {
  var dep = require('dependency');
  
  exports.doSomething = function() { /* ... */ };
});

// named exports
export function add(a, b) { return a + b; }
export const PI = 3.14;

// default export
export default class Calculator { /* ... */ }

// import
import { add, PI } from './math';
import Calculator from './Calculator';

// 组合导入
import Calculator, { add } from './math';

// 1. 静态分析（编译时确定依赖）
import { foo } from './module'; // 必须是字符串字面量

// 2. 导入绑定（只读常量）
import { obj } from './module';
obj.prop = 'changed'; // ❌ 报错（严格模式下）
// 注意：这和 CommonJS 不同！
// CommonJS: require 返回的是导出对象的引用，可以修改
// ESM: import 导入的是绑定，不能重新赋值

// 3. 循环引用处理
// a.js
import { b } from './b.js';
export const a = 'a';
export function getB() { return b; }

// b.js
import { a } from './a.js';
export const b = 'b';
export function getA() { return a; }

// 4. 静态结构，天然 tree-shaking
// 打包工具可以分析 import 语句，只打包用到的代码

// package.json
{
  "type": "module",  // 启用 ESM
  "exports": {
    ".": {
      "import": "./dist/index.mjs",  // ESM
      "require": "./dist/index.cjs"  // CommonJS
    }
  }
}

// ESM (.mjs 或 "type": "module")
import fs from 'fs';  // 动态绑定
import { readFile } from 'fs/promises';

// CommonJS (.cjs 或无后缀)
const fs = require('fs');

// 互操作
import cjsModule from './commonjs-module.cjs';  // 可以
import { namedExport } from './commonjs-module.cjs';  // 不行

import utils from './utils/index.js';
import config from '/config/app.js';  // 绝对路径

import lodash from 'lodash';
import React from 'react';

// webpack.config.js
resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src'),
    '@components': path.resolve(__dirname, 'src/components')
  }
}

// 使用
import Button from '@/components/Button';

// 静态导入
import _ from 'lodash'; // 立即加载

// 动态导入 - 代码分割
const _ = await import('lodash'); // 按需加载

// 条件加载
if (isAdmin) {
  const AdminPanel = await import('./AdminPanel');
}

// a.js
import { b } from './b.js';
export const a = 'a';

// b.js
import { a } from './a.js';
export const b = a + 'b'; // 可能是 undefined！

// 更好的设计：避免循环依赖
// 1. 提取共享模块
// 2. 延迟导入（函数内 require）
// 3. 重新设计架构

// HTTP/1: 6个并发连接限制
import './a.js';
import './b.js';
import './c.js';
// ... 需要合并

// HTTP/2: 无限制并发
import './a.js';
import './b.js';
import './c.js';
// 并行加载

// 路由级分割
const Dashboard = lazy(() => import('./Dashboard'));
const Settings = lazy(() => import('./Settings'));

// 组件级分割
const HeavyChart = lazy(() => import('./HeavyChart'));

<link rel="modulepreload" href="./utils.js">