Repack项目中如何配置MiniApp自动执行入口代码

背景介绍

在React Native应用开发中，使用Repack工具进行代码分包和动态加载是一种常见的优化手段。Repack v2和v3版本在动态加载机制上有所差异，这导致了一些开发者在使用新版本时遇到迁移问题。

问题核心

在Repack v2中，通过ChunkManager.loadChunk加载MiniApp时，MiniApp的入口文件(index.js)中的代码会自动执行。但在升级到Repack v3后，使用新的ScriptManager.loadScript方法加载时，发现入口代码不再自动执行。

技术原理分析

Repack v3采用了Webpack 5的Module Federation特性来实现代码共享和动态加载。这种架构变化带来了更灵活的模块管理能力，但也改变了代码执行的机制：

1. v2版本：直接加载chunk后会立即执行入口代码
2. v3版本：需要显式地通过Federated模块系统来获取并执行模块

解决方案

要让MiniApp的入口代码在v3版本中自动执行，可以通过以下配置实现：

1. Webpack配置

在MiniApp的webpack配置中添加ModuleFederationPlugin，暴露入口模块：

new Repack.plugins.ModuleFederationPlugin({
  name: 'MiniAppChunkID',
  exposes: {
    'MiniAppChunkID': './index.js',
  },
})

2. 启动脚本增强

创建一个启动脚本，在加载chunk后自动初始化并执行入口模块：

async function repackScriptStartup() {
  repackRuntime.shared.loadScriptCallback.push([$chunkId$]);
  let chunkId = $chunkId$;
  if (chunkId != 'main') {
    let scope = 'default';
    if (
      repackRuntime.shared.scopes &&
      (!repackRuntime.shared.scopes[scope] ||
        !repackRuntime.shared.scopes[scope].__isInitialized)
    ) {
      await repackRuntime.shared.initSharing(scope);
      repackRuntime.shared.scopes[scope].__isInitialized = true;
    }
    const container = (self as any)[chunkId];
    if (!container.__isInitialized) {
      container.__isInitialized = true;
      await container.init(repackRuntime.shared.scopes[scope]);
    }
    const factory = await container.get(chunkId);
    const exports = factory();
    return exports;
  }
}

实现机制详解

1. 模块共享初始化：通过initSharing方法初始化模块共享作用域
2. 容器初始化：确保模块容器已初始化并准备好提供模块
3. 模块获取与执行：通过容器获取模块工厂函数并执行，触发入口代码

注意事项

1. 确保chunkId与配置中定义的名称一致
2. 作用域管理是模块联邦的关键，需要正确处理初始化状态
3. 此方案适用于需要自动执行入口代码的场景，如果希望延迟执行，可以调整实现

总结

Repack v3通过Module Federation提供了更强大的模块管理能力，但也需要开发者更明确地控制模块加载和执行流程。通过合理的配置和启动脚本增强，可以实现与v2版本相似的自动执行行为，同时保留v3版本的灵活性优势。