31. 说说你对模块加载器的理解？

问题解析

模块加载器是用于管理和加载 JavaScript 模块的工具或规范。随着前端应用复杂度增加，模块化开发成为必然趋势。面试中主要考察 CommonJS、ES Modules、AMD、CMD 等规范的区别，以及打包工具的工作原理。

核心概念

1. 为什么需要模块化

// ❌ 没有模块化的问题
// 全局命名空间污染
var name = 'Alice'; // 可能被其他脚本覆盖

// 依赖管理困难
// script 标签顺序很重要
// <script src="a.js"></script>
// <script src="b.js"></script> // b 依赖 a

// 代码难以复用和维护

2. 主流模块化规范

规范	环境	加载方式	特点
CommonJS	Node.js	同步加载	运行时加载，模块输出值的拷贝
AMD	浏览器	异步加载	依赖前置，RequireJS 实现
CMD	浏览器	异步加载	依赖就近，SeaJS 实现
UMD	通用	兼容多种	兼容 CommonJS 和 AMD
ES Modules	通用	编译时/运行时	语言标准，静态分析

详细解答

1. CommonJS

// math.js - 导出模块
const PI = 3.14159;

function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

// 导出方式1：module.exports
module.exports = {
  add,
  multiply
};

// 导出方式2：exports（不能重新赋值）
exports.PI = PI;

// main.js - 导入模块
const math = require('./math.js');
console.log(math.add(2, 3));      // 5
console.log(math.multiply(4, 5)); // 20

// 解构导入
const { add, multiply } = require('./math.js');

// 导入内置模块
const fs = require('fs');
const path = require('path');

// 导入第三方模块
const lodash = require('lodash');

CommonJS 特点：

// 1. 运行时加载（同步）
const config = require('./config'); // 同步加载，阻塞执行

// 2. 值拷贝（不是引用）
// counter.js
let count = 0;
module.exports = {
  count,
  increment: () => count++
};

// main.js
const counter = require('./counter');
console.log(counter.count);    // 0
counter.increment();
console.log(counter.count);    // 0（拷贝的值没有变化）
console.log(counter.increment()); // 1

// 3. 动态 require
if (process.env.NODE_ENV === 'development') {
  require('./dev-config');
}

// 4. 模块缓存
const math1 = require('./math');
const math2 = require('./math');
console.log(math1 === math2); // true（同一个实例）

2. AMD (Asynchronous Module Definition)

// 使用 RequireJS
// math.js
define('math', [], function() {
  function add(a, b) {
    return a + b;
  }

  function multiply(a, b) {
    return a * b;
  }

  return {
    add: add,
    multiply: multiply
  };
});

// main.js - 依赖前置
define('main', ['math', 'jquery'], function(math, $) {
  console.log(math.add(2, 3));
  $('#result').text('Done');
});

// 简化的依赖声明
define(['dependency'], function(dep) {
  // 使用 dep
});

// 无依赖模块
define(function() {
  return {
    name: 'value'
  };
});

3. CMD (Common Module Definition)

// 使用 SeaJS
// math.js
define(function(require, exports, module) {
  // 依赖就近声明
  function add(a, b) {
    return a + b;
  }

  function useAdd() {
    // 使用时再 require
    var helper = require('./helper');
    return helper.format(add(1, 2));
  }

  exports.add = add;
  exports.useAdd = useAdd;
});

// main.js
define(function(require) {
  var math = require('./math');
  var $ = require('jquery');

  console.log(math.add(2, 3));
});

4. ES Modules (ESM)

// math.js - 导出
// 命名导出
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

// 默认导出
export default function calculate() {
  // ...
}

// 重命名导出
export { add as sum };

// main.js - 导入
// 默认导入
import calculate from './math.js';

// 命名导入
import { add, multiply, PI } from './math.js';

// 重命名导入
import { add as sum } from './math.js';

// 命名空间导入
import * as math from './math.js';
math.add(2, 3);

// 混合导入
import calculate, { add, multiply } from './math.js';

// 导入副作用（只执行，不导入值）
import './styles.css';

// 动态导入（返回 Promise）
const module = await import('./math.js');
module.add(2, 3);

// 条件导入
if (condition) {
  const { helper } = await import('./helper.js');
}

ES Modules 特点：

// 1. 静态分析（编译时确定依赖）
import { foo } from './foo'; // 必须在顶层，不能动态

// 2. 值引用（不是拷贝）
// counter.js
export let count = 0;
export function increment() {
  count++;
}

// main.js
import { count, increment } from './counter.js';
console.log(count); // 0
increment();
console.log(count); // 1（实时更新）

// 3. 模块作用域
// 每个模块有自己的作用域
const privateVar = 'secret'; // 不会暴露到其他模块

// 4. 严格模式（默认启用）
// this 是 undefined，不是 window

5. UMD (Universal Module Definition)

// 兼容 CommonJS、AMD 和全局变量
(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['jquery'], factory);
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS
    module.exports = factory(require('jquery'));
  } else {
    // 全局变量
    root.myModule = factory(root.jQuery);
  }
}(typeof self !== 'undefined' ? self : this, function ($) {
  // 模块代码
  function myModule() {
    // ...
  }

  return myModule;
}));

深入理解

1. 模块加载原理

// CommonJS 加载原理（简化版）
function require(modulePath) {
  // 1. 解析绝对路径
  const fullPath = resolve(modulePath);

  // 2. 检查缓存
  if (cache[fullPath]) {
    return cache[fullPath].exports;
  }

  // 3. 创建模块对象
  const module = {
    id: fullPath,
    exports: {},
    loaded: false
  };

  // 4. 缓存模块
  cache[fullPath] = module;

  // 5. 加载并执行模块
  const content = fs.readFileSync(fullPath, 'utf8');
  const wrapper = `(function(exports, require, module, __filename, __dirname) {
    ${content}
  })`;
  const compiledWrapper = eval(wrapper);
  compiledWrapper(
    module.exports,
    require,
    module,
    fullPath,
    path.dirname(fullPath)
  );

  // 6. 标记加载完成
  module.loaded = true;

  // 7. 返回导出内容
  return module.exports;
}

2. ES Modules 加载过程

// 1. 构建（Construction）
// - 下载并解析模块
// - 创建模块记录（Module Record）

// 2. 实例化（Instantiation）
// - 为模块分配内存
// - 解析导入导出，建立连接

// 3. 求值（Evaluation）
// - 执行模块代码
// - 填充导出值

// 循环依赖处理
// a.js
import { b } from './b.js';
export const a = 'a' + b;

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

// 结果：循环依赖会导致部分导出为 undefined
// 解决方案：将导出改为函数或使用动态导入

3. Tree Shaking 原理

// Tree Shaking 依赖于 ES Modules 的静态结构
// 可以在编译时确定哪些代码被使用

// utils.js
export function used() {
  return 'I am used';
}

export function unused() {
  return 'I will be removed';
}

// main.js
import { used } from './utils.js';
console.log(used());

// 打包后，unused 函数会被移除

最佳实践

1. 模块设计原则

// ✅ 单一职责原则
// user.js - 只处理用户相关
export function createUser(name) {
  return { name, id: generateId() };
}

export function validateUser(user) {
  return user.name && user.name.length > 0;
}

// ✅ 明确的导出
// 优先使用命名导出
export const utils = {
  formatDate,
  parseJSON,
  debounce
};

// 默认导出用于主功能
export default class Component {
  // ...
}

// ✅ 避免循环依赖
// ❌ 错误
// a.js: import { b } from './b.js';
// b.js: import { a } from './a.js';

// ✅ 正确：提取公共模块
// types.js: export const shared = ...;
// a.js: import { shared } from './types.js';
// b.js: import { shared } from './types.js';

2. 路径管理

// ✅ 使用路径别名
// vite.config.js / webpack.config.js
// alias: { '@': path.resolve(__dirname, './src') }

// 使用前
import Component from '../../../components/Component';

// 使用后
import Component from '@/components/Component';

// ✅ 目录组织
// src/
//   components/     # 通用组件
//   pages/          # 页面组件
//   utils/          # 工具函数
//   hooks/          # 自定义 hooks
//   services/       # API 服务
//   stores/         # 状态管理
//   styles/         # 全局样式
//   assets/         # 静态资源

3. 动态导入优化

// ✅ 路由懒加载
const routes = [
  {
    path: '/dashboard',
    component: () => import('./pages/Dashboard.vue')
  },
  {
    path: '/settings',
    component: () => import('./pages/Settings.vue')
  }
];

// ✅ 条件加载
async function loadPolyfills() {
  if (!('fetch' in window)) {
    await import('whatwg-fetch');
  }
}

// ✅ 预加载
const prefetchModule = () => import(/* webpackPrefetch: true */ './HeavyModule.js');

4. 打包工具配置

// Webpack 配置示例
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

// Vite 配置示例
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'pinia']
        }
      }
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
};

面试要点

1. CommonJS vs ES Modules：

   • CommonJS 运行时加载，值拷贝，同步
   • ES Modules 编译时加载，值引用，支持异步

2. AMD vs CMD：

   • AMD 依赖前置，提前执行
   • CMD 依赖就近，延迟执行

3. Tree Shaking：依赖 ES Modules 的静态结构

4. 循环依赖：尽量避免，CommonJS 部分导出，ESM 可能为 undefined

5. 打包优化：代码分割、懒加载、预加载、缓存策略

常见面试题

// 面试题 1：CommonJS 和 ES Modules 的区别？
// 1. 加载时机：CommonJS 运行时，ESM 编译时
// 2. 导出值：CommonJS 拷贝，ESM 引用
// 3. this 指向：CommonJS 是 module.exports，ESM 是 undefined
// 4. 动态导入：CommonJS 可以，ESM 需要 import()

// 面试题 2：如何解决循环依赖？
// 方案1：重构代码，提取公共模块
// 方案2：延迟导入（函数内部 require/import）
// 方案3：使用事件总线或状态管理

// 面试题 3：Tree Shaking 是什么？如何实现？
// Tree Shaking 是移除未使用代码的优化技术
// 依赖 ESM 的静态结构，在编译时分析依赖
// 需要：使用 ESM、配置 sideEffects、避免副作用

// 面试题 4：import 和 require 可以混用吗？
// Node.js 12+ 支持在 CJS 中使用 ESM（需要配置）
// ESM 中不能直接使用 require（可以使用 createRequire）
// 建议统一使用一种规范

// 面试题 5：实现一个简单的模块加载器
const MyModule = {
  cache: {},

  require(id) {
    if (this.cache[id]) {
      return this.cache[id].exports;
    }

    const module = { exports: {}, id };
    this.cache[id] = module;

    // 模拟加载
    const load = modules[id];
    load(module.exports, this.require.bind(this), module);

    return module.exports;
  }
};

const modules = {
  'math.js': function(exports, require, module) {
    exports.add = (a, b) => a + b;
  },
  'main.js': function(exports, require, module) {
    const math = require('math.js');
    console.log(math.add(1, 2));
  }
};

MyModule.require('main.js');

// 面试题 6：为什么 ES Modules 支持 Tree Shaking 而 CommonJS 不支持？
// ESM 的导入导出在编译时确定，可以进行静态分析
// CommonJS 的 require 是动态的，无法在编译时确定依赖