解读

在微前端或大型前端项目中，子应用（Sub-App）往往通过事件总线（Event Bus）进行松耦合通信。随着业务迭代，事件总线的接口契约（Schema）可能发生变化，若子应用版本不一致，就会出现事件格式不兼容、监听失效、数据污染等问题。因此，必须在运行时对事件总线的版本号进行双向校验，确保发布方（Publisher）与订阅方（Subscriber）使用同一套事件协议版本。Grunt 作为构建阶段的任务编排器，需要把「版本号」以静态资源形式注入到子应用，并在运行时由事件总线核心库完成校验。

知识点

1. 语义化版本（SemVer）：主版本号（Major）变动代表不兼容的协议变更，次版本号（Minor）与修订号（Patch）保持向后兼容。
2. Grunt 构建时注入：利用 grunt-string-replace 或 grunt-replace 把 package.json 中的 version 字段写入子应用全局常量 __EVENT_BUS_VERSION__。
3. 运行时注册表：事件总线维护一张版本注册表 Map<subAppId, SemVer>，子应用在 bootstrap 阶段调用 bus.register('subAppId', __EVENT_BUS_VERSION__)。
4. 握手校验算法：
   • 发布前，总线检查自身主版本号与订阅方主版本号是否相等；
   • 若不相等，立即 throw new Error('[EventBus] Major version mismatch') 并阻断事件下发；
   • 若相等，允许通信，但给出兼容性警告（Minor 或 Patch 不一致时）。
5. Grunt 插件选型：
   • grunt-contrib-uglify：压缩前保留 __EVENT_BUS_VERSION__ 全局变量；
   • grunt-contrib-watch：监听 package.json 变化，自动重启注入任务，保证版本号实时同步。
6. 国内部署细节：
   • 在**私有 npm 仓库（Verdaccio/Cnpmjs）**中统一发布「事件协议包」；
   • 利用GitLab CI触发 Grunt 构建，确保版本号与 Git Tag一一对应；
   • 若子应用独立部署，需在Nginx 反向代理层增加 X-Event-Bus-Version 响应头，方便Sentry快速定位版本漂移。

答案

1. 协议版本化：在根仓库维护 event-bus-protocol 包，其 package.json 的 version 字段即为唯一协议版本。
2. Grunt 注入：

   // Gruntfile.js
   module.exports = function(grunt) {
     grunt.initConfig({
       replace: {
         dist: {
           options: {
             patterns: [{
               match: /__EVENT_BUS_VERSION__/g,
               replacement: grunt.file.readJSON('package.json').version
             }]
           },
           files: [{
             expand: true,
             cwd: 'src',
             src: '**/*.js',
             dest: 'dist'
           }]
         }
       }
     });
     grunt.loadNpmTasks('grunt-replace');
     grunt.registerTask('default', ['replace']);
   };
   

3. 运行时校验：

   class EventBus {
     constructor(selfVersion) {
       this.selfVersion = selfVersion;
       this.registry = new Map();
     }
     register(subAppId, remoteVersion) {
       if (semver.major(this.selfVersion) !== semver.major(remoteVersion)) {
         throw new Error(`**主版本号不一致，通信被阻断**：${this.selfVersion} vs ${remoteVersion}`);
       }
       if (semver.diff(this.selfVersion, remoteVersion) === 'minor') {
         console.warn(`**次版本号差异**，可能存在字段扩展：${this.selfVersion} vs ${remoteVersion}`);
       }
       this.registry.set(subAppId, remoteVersion);
     }
     emit(event) {
       for (const [id, ver] of this.registry) {
         if (semver.major(this.selfVersion) !== semver.major(ver)) continue;
         // 真正下发事件
       }
     }
   }
   

4. 上线 checklist：
   • 每次发版前，Git Tag 与 package.json 版本保持一致；
   • 在预发布环境跑 Grunt 构建，确认 __EVENT_BUS_VERSION__ 被正确替换；
   • 利用埋点日志统计「版本不匹配」错误率，超过 1% 立即回滚。

拓展思考

1. 多协议并存：若业务需要灰度升级，可在事件总线中引入版本命名空间（v1.user.login vs v2.user.login），Grunt 构建时通过 grunt-env 区分 LEGACY 与 MODERN 两套入口，实现平滑迁移。
2. 二进制协议：对WebAssembly 子应用，可把版本号写入自定义 Section，Grunt 使用 wasm-opt 工具在编译后注入，运行时通过 WebAssembly.Module.customSections 读取，避免字符串搜索带来的体积膨胀。
3. SSR 场景：在Node 层同样需做版本校验，Grunt 通过 grunt-webpack 打包出同构代码，并在 server.js 启动前读取 process.env.EVENT_BUS_VERSION，确保服务端渲染与客户端水合使用同一版本，防止事件重复触发导致的UI 闪烁。