Modern.js 模块工具插件钩子机制详解

Modern.js 的模块工具(module-tools)提供了一套完善的插件钩子(Hooks)机制，让开发者能够在构建和开发流程的不同阶段介入和扩展功能。本文将全面解析这套钩子系统，帮助开发者更好地理解和运用这些扩展点。

钩子类型概述

Modern.js 模块工具的钩子主要分为四大类：

1. 配置钩子(Config hooks)：用于修改用户配置
2. 构建钩子(Build hooks)：在执行build命令时触发
3. 平台构建钩子(buildPlatform hooks)：在执行build --platform命令时触发
4. 开发钩子(Dev hooks)：在执行dev命令时触发

配置钩子详解

resolveModuleUserConfig

这是一个异步瀑布流(AsyncWaterfall)类型的钩子，允许插件修改用户配置。

export const myPlugin = (): CliPlugin<ModuleTools> => ({
  name: 'my-plugin',
  setup() {
    return {
      resolveModuleUserConfig(config: ModuleUserConfig): ModuleUserConfig {
        // 在这里修改配置
        return modifiedConfig;
      },
    };
  },
});

这个钩子在配置解析阶段被调用，非常适合需要根据用户配置进行动态调整的场景。

构建钩子详解

构建钩子在执行build命令时按顺序触发：

1. beforeBuild - 整体构建开始前
2. beforeBuildTask - 每个构建子任务开始前
3. afterBuildTask - 每个构建子任务结束后
4. afterBuild - 整体构建结束后

beforeBuild

这是一个并行工作流(ParallelWorkflow)钩子，在整体构建流程开始前触发。

beforeBuild(options: {
  options: {
    config: BaseBuildConfig[];
    cliOptions: BuildCommandOptions;
  };
}): void

开发者可以在这里进行全局性的构建前准备工作。

beforeBuildTask/afterBuildTask

这对钩子分别在每个构建子任务前后触发：

beforeBuildTask(config: BaseBuildConfig): BaseBuildConfig
afterBuildTask(options: BuildTaskResult): void

beforeBuildTask允许修改单个任务的配置，而afterBuildTask可以获取任务执行结果。

afterBuild

整体构建完成后触发：

afterBuild(options: BuildResult): void

可以在这里进行构建后的清理工作或结果分析。

平台构建钩子详解

平台构建钩子专为build --platform命令设计，执行顺序为：

1. registerBuildPlatform - 注册平台构建任务
2. beforeBuildPlatform - 平台构建开始前
3. buildPlatform - 每个平台构建任务执行前
4. afterBuildPlatform - 平台构建结束后

registerBuildPlatform

这是核心钩子，用于注册平台特定的构建逻辑：

registerBuildPlatform(): RegisterBuildPlatformResult {
  return {
    platform: 'doc', // 平台标识
    build(currentPlatform, context) {
      // 平台构建逻辑
    }
  }
}

其他平台钩子

其他平台钩子提供了构建过程的生命周期管理：

• beforeBuildPlatform：获取所有注册的平台任务
• buildPlatform：每个平台任务执行前
• afterBuildPlatform：所有平台任务完成后

开发钩子详解

开发钩子在执行dev命令时按顺序触发：

1. registerDev - 注册开发工具
2. beforeDev - 开发流程开始前
3. beforeDevMenu - 开发菜单显示前
4. afterDevMenu - 开发菜单选择后
5. beforeDevTask - 开发任务执行前
6. afterDev - 开发流程结束后

registerDev

这是开发工具注册的核心钩子：

registerDev(): DevToolData {
  return {
    name: 'storybook',
    menuItem: {
      name: 'Storybook',
      value: 'storybook'
    },
    subCommands: ['storybook', 'story'],
    async action() {
      // 开发工具启动逻辑
    }
  }
}

开发流程管理

其他开发钩子提供了完整的开发流程管理：

• beforeDev：获取所有注册的开发工具
• beforeDevMenu/afterDevMenu：管理开发工具选择菜单
• beforeDevTask：开发任务执行前
• afterDev：开发流程结束时

最佳实践建议

1. 合理选择钩子类型：根据需求选择瀑布流(顺序执行)或并行工作流(并行执行)钩子
2. 保持钩子轻量：避免在钩子中执行耗时操作
3. 错误处理：在关键钩子中添加适当的错误处理逻辑
4. 性能监控：可以利用afterBuild和afterDev钩子添加性能监控逻辑

通过合理利用这些钩子，开发者可以深度定制Modern.js模块工具的构建和开发流程，满足各种复杂场景的需求。