@bm-fe/react-native-multi-bundle 1.0.0-beta.1 → 1.0.0-beta.10

package/scripts/build-multi-bundle.js

@@ -200,6 +200,7 @@ function removePreludeFromBundle(bundlePath) {
 function ensureOutputDir(platform) {
   const platformDir = path.join(OUTPUT_DIR, platform);
   const modulesDir = path.join(platformDir, 'modules');
+  const assetsDir = path.join(platformDir, 'assets');
   
   if (!fs.existsSync(platformDir)) {
     fs.mkdirSync(platformDir, { recursive: true });
@@ -207,6 +208,9 @@ function ensureOutputDir(platform) {
   if (!fs.existsSync(modulesDir)) {
     fs.mkdirSync(modulesDir, { recursive: true });
   }
+  if (!fs.existsSync(assetsDir)) {
+    fs.mkdirSync(assetsDir, { recursive: true });
+  }
   
   return platformDir;
 }
@@ -233,6 +237,16 @@ function buildBundle(entryFile, outputFile, platform, env = 'development', progr
   // ⭐ 关键：判断是否是模块 bundle（通过检查 entry 路径）
   const isModuleBundle = entry.includes('src/modules/');
   
+  // 计算 assets 输出目录（统一放在平台目录下的 assets 文件夹）
+  const platformDir = path.dirname(outputFile);
+  const assetsDest = path.join(platformDir, 'assets');
+  const assetsDestRelative = path.relative(PROJECT_ROOT, assetsDest);
+  
+  // 确保 assets 目录存在
+  if (!fs.existsSync(assetsDest)) {
+    fs.mkdirSync(assetsDest, { recursive: true });
+  }
+  
   const commandParts = [
     // 主 bundle 和模块 bundle 都设置 RN_MULTI_BUNDLE_BUILD，但使用不同的 RN_BUILD_TYPE
     'RN_MULTI_BUNDLE_BUILD=true',
@@ -242,6 +256,7 @@ function buildBundle(entryFile, outputFile, platform, env = 'development', progr
     `--bundle-output ${out}`,
     `--platform ${platform}`,
     `--dev ${dev}`,
+    `--assets-dest ${assetsDestRelative}`,
     '--reset-cache',
   ];
   

package/scripts/sync-bundles-to-assets.js

@@ -4,8 +4,8 @@
  * 同步 Bundle 到 Assets 目录脚本
  * 将构建好的 bundle 文件同步到 Android/iOS 的 assets 目录
  * 
- * Android: android/app/src/main/assets/bundles/
- * iOS: ios/DemoProject/RNModules/Bundles/
+ * Android: android/app/src/main/assets/
+ * iOS: ios/DemoProject/Bundles/
  */
 
 const fs = require('fs');
@@ -14,7 +14,7 @@ const path = require('path');
 const PROJECT_ROOT = path.join(__dirname, '..');
 const BUILD_DIR = path.join(PROJECT_ROOT, 'build/bundles');
 const ANDROID_ASSETS_DIR = path.join(PROJECT_ROOT, 'android/app/src/main/assets');
-const IOS_ASSETS_DIR = path.join(PROJECT_ROOT, 'ios/DemoProject/RNModules/Bundles');
+const IOS_ASSETS_DIR = path.join(PROJECT_ROOT, 'ios/DemoProject/Bundles');
 
 /**
  * ANSI 颜色工具函数

package/src/multi-bundle/LocalBundleManager.ts

@@ -56,14 +56,37 @@ function convertNativeManifestToBundleManifest(nativeManifest: any): BundleManif
 
 /**
  * 获取当前激活包的 manifest
- * - 开发环境：从开发服务器获取 manifest（HTTP 模式）
- * - 生产环境：从 Native CodePush 模块获取 manifest（直接返回 JSON 对象）
+ * - 优先从 Native 模块获取（支持 CodePush 等热更新场景）
+ * - 如果 Native 返回 null，在开发环境下降级到开发服务器获取
+ * - 生产环境下如果 Native 返回 null，抛出异常
  */
 async function getCurrentBundleManifest(): Promise<BundleManifest> {
   // 生产环境：从 Native 模块获取 manifest
-  if (!__DEV__) {
-    try {
-      const nativeManifest = await NativeModules.CodePush.getCurrentBundleManifestContent();
+//   if (!__DEV__) {
+//     try {
+//       const nativeManifest = await NativeModules.ModuleLoader.getCurrentBundleManifestContent();
+//       if (nativeManifest) {
+//         return convertNativeManifestToBundleManifest(nativeManifest);
+//       } else {
+//         // Native 模块返回 null 或 undefined
+//         throw new Error(
+//           '[LocalBundleManager] Native module returned null manifest. ' +
+//           'Please ensure bundle-manifest.json exists in the app bundle.'
+//         );
+//       }
+//     } catch (error) {
+//       console.error(
+//         `[LocalBundleManager] Failed to get manifest from Native: ${error}`
+//       );
+//       // 生产环境无法获取 manifest 时抛出异常
+//       throw new Error(
+//         `[LocalBundleManager] Failed to get manifest from Native module: ${error}`
+//       );
+//     }
+//   }
+      console.log("ReactNativeJS","nativeManifest getCurrentBundleManifestContent")
+      const nativeManifest = await NativeModules.ModuleLoader.getCurrentBundleManifestContent();
+      console.log("ReactNativeJS","nativeManifest "+nativeManifest)
       if (nativeManifest) {
         return convertNativeManifestToBundleManifest(nativeManifest);
       } else {
@@ -73,16 +96,6 @@ async function getCurrentBundleManifest(): Promise<BundleManifest> {
           'Please ensure bundle-manifest.json exists in the app bundle.'
         );
       }
-    } catch (error) {
-      console.error(
-        `[LocalBundleManager] Failed to get manifest from Native: ${error}`
-      );
-      // 生产环境无法获取 manifest 时抛出异常
-      throw new Error(
-        `[LocalBundleManager] Failed to get manifest from Native module: ${error}`
-      );
-    }
-  }
 
   // 开发环境：从开发服务器获取 manifest
   const config = getGlobalConfig();

package/src/multi-bundle/ModuleRegistry.ts

@@ -220,7 +220,7 @@ async function loadModule(moduleId: string): Promise<void> {
             loader = NativeModules.ModuleLoader;
           } else {
             throw new Error(
-              'ModuleLoader not available: Native CodePush module not found in production'
+              'ModuleLoader not available: Native ModuleLoader module not found in production'
             );
           }
         }

package/src/multi-bundle/README.md

@@ -341,3 +341,5 @@ function preloadModule(moduleId: string): Promise<void>
 - [使用指南](../docs/使用指南.md)
 - [多 Bundle 架构设计](../docs/React%20Native%20多%20bundle%20技术方案.md)
 
+
+

package/templates/metro.config.js.template

@@ -12,6 +12,7 @@ const fs = require('fs');
 const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
 const baseJSBundle = require('metro/private/DeltaBundler/Serializers/baseJSBundle');
 const bundleToString = require('metro/private/lib/bundleToString');
+const { sourceMapStringNonBlocking } = require('metro/src/DeltaBundler/Serializers/sourceMapString');
 const {
   getConfigFromEnv,
   isModulePath: isModulePathHelper,
@@ -22,6 +23,7 @@ const {
 
 const projectRoot = __dirname;
 const defaultConfig = getDefaultConfig(__dirname);
+const { assetExts, sourceExts } = defaultConfig.resolver;
 
 // ⚠️ 重要：根据你的项目结构调整以下配置
 const MULTI_BUNDLE_CONFIG_FILE = path.join(projectRoot, 'multi-bundle.config.json');
@@ -33,13 +35,41 @@ const MULTI_BUNDLE_CONFIG_FILE = path.join(projectRoot, 'multi-bundle.config.jso
 const multiBundleConfig = getConfigFromEnv();
 const modulePaths = multiBundleConfig.modulePaths || ['src/modules/**'];
 const sharedDependencies = multiBundleConfig.sharedDependencies || [
-  'node_modules/@bm-fe/react-native-multi-bundle/**',
   'src/navigation/**'
 ];
 
 // ⚠️ 注意：这是"请求级别"的标记，由 middleware 动态设置
 let isDevModuleRequest = false;
 
+const isMultiBundleBuild = process.env.RN_MULTI_BUNDLE_BUILD === 'true';
+const buildType = process.env.RN_BUILD_TYPE || 'main'; // 'main' 或 'module'
+
+/**
+ * Metro/Node 里拿到的路径多数是绝对路径，而 multi-bundle 的 glob helper
+ * 使用的是 ^...$ 的“全匹配”，所以必须先转换成项目相对路径再做匹配。
+ */
+function toProjectRelativePath(filePath) {
+  if (!filePath || typeof filePath !== 'string') return filePath;
+
+  // 统一分隔符，避免 Windows/Metro 混用反斜杠
+  const normalized = filePath.replace(/\\/g, '/');
+
+  // 已经是相对路径（例如 dev server req.url 截出来的 path）就直接用
+  if (!path.isAbsolute(filePath)) {
+    return normalized.replace(/^\.\//, '');
+  }
+
+  // 绝对路径：转成相对 projectRoot 的路径，再规范化
+  return path.relative(projectRoot, filePath).replace(/\\/g, '/');
+}
+
+function isReactNativeRuntime(modulePath) {
+  return (
+    modulePath.includes('__prelude__') ||
+    modulePath.endsWith('/react-native/Libraries/Core/InitializeCore.js')
+  );
+}
+
 /**
  * 加载 multi-bundle.config.json 配置
  */
@@ -104,6 +134,252 @@ function generateManifestFromConfig(config, platform) {
   return manifest;
 }
 
+/**
+ * 检查模块是否是共享依赖（应该使用 segmentId=0，以便跨 bundle 访问）
+ * 使用配置化的共享依赖路径
+ */
+function isSharedModuleForSegmentId(modulePath) {
+  // 共享依赖应该始终使用 segmentId=0，这样主 bundle 和模块 bundle 都能访问
+  // ⚠️ 关键修复：检查 node_modules 时，需要同时处理有前导斜杠和没有前导斜杠的情况
+  if (
+    modulePath.includes('/node_modules/') ||
+    modulePath.includes('node_modules/')
+  ) {
+    const result = sharedNodeModules.some(
+      dep =>
+        modulePath.includes(`/node_modules/${dep}`) ||
+        modulePath.includes(`node_modules/${dep}`)
+    );
+    return result;
+  }
+
+  // 使用配置化的共享依赖路径
+  return isSharedDependencyPathHelper(
+    toProjectRelativePath(modulePath),
+    sharedDependencies
+  );
+}
+
+// 模块名到 segmentId 的映射（确保同一模块的 segmentId 稳定）
+// 主 bundle 使用 segmentId = 0，模块 bundle 从 1 开始
+// ⭐ 使用基于模块名的哈希算法，确保同一模块名总是得到相同的 segmentId，不依赖于构建顺序
+function generateSegmentIdForModule(moduleName) {
+  // 使用 djb2 哈希算法，确保稳定性
+  let hash = 5381;
+  for (let i = 0; i < moduleName.length; i++) {
+    hash = (hash << 5) + hash + moduleName.charCodeAt(i);
+  }
+
+  // 确保 segmentId 在 1-1023 范围内（0 保留给主 bundle）
+  // 使用模运算确保范围，但保留足够的空间避免冲突
+  const segmentId = 1 + (Math.abs(hash) % 1000); // 1-1000 范围，足够大多数项目使用
+  return segmentId;
+}
+
+/**
+ * 基于文件路径生成稳定的 localId
+ * 使用 djb2 哈希算法，确保同一路径总是得到相同的 localId
+ * 范围：0-1048575（20位），避免哈希碰撞
+ */
+function generateStableLocalId(relativePath) {
+  // djb2 哈希算法
+  let hash = 5381;
+  for (let i = 0; i < relativePath.length; i++) {
+    hash = (hash << 5) + hash + relativePath.charCodeAt(i);
+  }
+
+  // 确保 localId 在 0-1048575 范围内（20位）
+  // 之前使用 16 位 (65536) 导致了大量哈希碰撞，导致运行时加载错误的模块
+  const localId = Math.abs(hash) % 1048576;
+  return localId;
+}
+
+/**
+ * 获取模块的 segmentId
+ * - 共享依赖（react-native、react 等）：始终返回 0，确保跨 bundle 访问
+ * - 主 bundle 的模块：返回 0
+ * - 模块 bundle 的业务模块：返回对应的 segmentId（1, 2, 3...）
+ */
+function getSegmentIdForModule(modulePath) {
+  // ⭐ 关键：共享依赖始终使用 segmentId=0，确保主 bundle 和模块 bundle 使用相同的模块 ID
+  if (isSharedModuleForSegmentId(modulePath)) {
+    return 0;
+  }
+
+  const moduleName = extractModuleNameFromPathHelper(
+    toProjectRelativePath(modulePath),
+    modulePaths
+  );
+  if (moduleName) {
+    // 这是模块 bundle 中的业务模块
+    // ⭐ 使用基于模块名的哈希算法，确保同一模块名总是得到相同的 segmentId
+    // 不依赖于构建顺序，确保 HTTP 模式和 Native 模式下的 segmentId 一致
+    const segmentId = generateSegmentIdForModule(moduleName);
+    return segmentId;
+  }
+  // 主 bundle 的模块使用 segmentId = 0
+  return 0;
+}
+
+function createStableModuleIdFactory() {
+  const fileToId = new Map();
+
+  // 存储已分配的入口 id，避免重复计算
+  const entryIdCache = new Map();
+
+  return modulePath => {
+    // 用相对路径作为 key，确保多入口一致
+    let relativePath = path.relative(projectRoot, modulePath);
+    relativePath = relativePath.replace(/\\/g, '/');
+    // ⚠️ 关键修复：使用全局替换，处理所有 node_modules 路径（包括嵌套的）
+    // 同时处理以 node_modules/ 开头的情况（没有前导 /）
+    relativePath = relativePath
+      .replace(/\/node_modules\//g, '/nm/')
+      .replace(/^node_modules\//, 'nm/');
+
+    // ⭐ 关键：共享依赖使用稳定的哈希算法生成模块 ID，确保跨 bundle 一致性
+    // 不再依赖全局 Map，因为每次构建都是新进程
+    // 使用基于路径的稳定哈希，确保同一路径总是得到相同的模块 ID
+    if (isSharedModuleForSegmentId(modulePath)) {
+      // 共享依赖总是使用 segmentId=0，localId 基于路径哈希
+      const segmentId = 0;
+      const localId = generateStableLocalId(relativePath);
+      // 使用 20 位左移，给 localId 留出 20 位空间 (100万+ 文件)
+      const stableId = (segmentId << 20) | localId;
+
+      // 检查当前构建中是否已经分配过（避免重复计算）
+      if (fileToId.has(relativePath)) {
+        return fileToId.get(relativePath);
+      }
+
+      fileToId.set(relativePath, stableId);
+      return stableId;
+    }
+
+    if (fileToId.has(relativePath)) {
+      return fileToId.get(relativePath);
+    }
+
+    // 检查是否是模块入口文件
+    const moduleName = extractModuleNameFromEntryHelper(
+      toProjectRelativePath(modulePath),
+      modulePaths
+    );
+    if (moduleName) {
+      // 为模块入口文件分配唯一的 id
+      if (!entryIdCache.has(moduleName)) {
+        const entryId = generateEntryIdForModule(moduleName);
+        entryIdCache.set(moduleName, entryId);
+        fileToId.set(relativePath, entryId);
+        // console.log(`[ModuleId] Entry ${relativePath} (${moduleName}) -> ${entryId}`);
+        return entryId;
+      } else {
+        // 如果同一个模块的入口文件再次出现（不应该发生），使用缓存的 id
+        const entryId = entryIdCache.get(moduleName);
+        fileToId.set(relativePath, entryId);
+        return entryId;
+      }
+    }
+
+    // ⭐ 关键：根据模块路径判断它属于哪个 bundle，分配对应的 segmentId
+    const segmentId = getSegmentIdForModule(modulePath);
+
+    // ⭐ 关键修复：使用基于路径的稳定 localId，而不是递增的 nextId
+    // 这确保 HTTP 模式和构建模式下，同一文件总是得到相同的模块 ID
+    const localId = generateStableLocalId(relativePath);
+
+    // 使用 Metro 的 packModuleId 格式：segmentId << 20 | localId
+    // 以前是 16 位，现在扩大到 20 位以减少碰撞
+    const finalModuleId = (segmentId << 20) | localId;
+
+    // ⚠️ 重要：存储 finalModuleId 而不是 localId，确保缓存正确
+    fileToId.set(relativePath, finalModuleId);
+
+    return finalModuleId;
+  };
+}
+
+/**
+ * 判断是否是模块 bundle（通过 entryPoint 路径）
+ * 使用配置化的模块路径规则
+ */
+function isModuleBundleEntry(entryPoint) {
+  if (!entryPoint) return false;
+
+  return isModulePathHelper(toProjectRelativePath(entryPoint), modulePaths);
+}
+
+/**
+ * 自定义 serializer：对模块 bundle 移除 prelude 代码
+ *
+ * @param {string} entryPoint - 入口文件路径
+ * @param {Array} prepend - prelude 模块列表
+ * @param {Object} graph - 依赖图
+ * @param {Object} bundleOptions - bundle 选项
+ * @returns {Promise<string | {code: string, map?: string}>}
+ */
+async function customSerializer(entryPoint, prepend, graph, bundleOptions) {
+  const isModuleBundle = isModuleBundleEntry(entryPoint) || isDevModuleRequest;
+
+  // 调用默认 serializer 生成 bundle
+  let bundle = baseJSBundle(entryPoint, prepend, graph, bundleOptions);
+  // Sentry 会在 options 上挂 sentryBundleCallback，用于注入 Debug ID
+  if (
+    bundleOptions &&
+    typeof bundleOptions.sentryBundleCallback === 'function'
+  ) {
+    bundle = bundleOptions.sentryBundleCallback(bundle);
+  }
+  const result = bundleToString(bundle);
+
+  // ⚠️ 重要：如果你使用自定义 serializer，Sentry 需要我们返回 map（JSON 字符串）
+  // 否则它会在内部 JSON.parse(undefined) 并报错。
+  // 这里复用 Metro 的 sourcemap 生成逻辑（与 Metro Server 中的默认行为一致）
+  let map = null;
+  try {
+    const sortedModules = [...graph.dependencies.values()].sort(
+      (a, b) =>
+        bundleOptions.createModuleId(a.path) -
+        bundleOptions.createModuleId(b.path)
+    );
+    map = await sourceMapStringNonBlocking([...prepend, ...sortedModules], {
+      excludeSource: false,
+      processModuleFilter: bundleOptions.processModuleFilter,
+      shouldAddToIgnoreList: bundleOptions.shouldAddToIgnoreList,
+      getSourceUrl: bundleOptions.getSourceUrl,
+    });
+  } catch (e) {
+    // 兜底：保证 map 永远是合法 JSON 字符串，避免 Sentry 解析失败
+    map = '{}';
+  }
+
+  // 如果是模块 bundle，移除 prelude 代码
+  if (isModuleBundle) {
+    // 找到第一个 __d( 调用的位置
+    // Prelude 代码从 bundle 开头到第一个 __d( 之前
+    const firstModuleDefIndex = result.code.indexOf('__d(');
+
+    if (firstModuleDefIndex > 0) {
+      const preludeCode = result.code.substring(0, firstModuleDefIndex);
+
+      // 移除 prelude：从开头到第一个 __d( 之前的所有内容
+      // 保留第一个 __d( 及其之后的所有内容
+      const codeWithoutPrelude = result.code.substring(firstModuleDefIndex);
+
+      return {
+        code: codeWithoutPrelude,
+        map, // 返回 sourcemap 字符串（Sentry 需要）
+      };
+    } else {
+      // 如果没有找到 __d(，说明可能不是标准的 bundle 格式，返回原样
+      return { ...result, map };
+    }
+  }
+
+  // 主 bundle：使用默认行为，保留完整的 prelude
+  return { ...result, map };
+}
+
 const config = {
   projectRoot: path.resolve(__dirname),
 
@@ -186,12 +462,107 @@ const config = {
       };
     },
   },
+  // 你的自定义配置
+  transformer: {
+    babelTransformerPath: require.resolve('./lingui-svg-transformer.js'),
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: true,
+        inlineRequires: true,
+      },
+    }),
+  },
+  resolver: {
+    assetExts: [...assetExts.filter(ext => ext !== 'svg'), 'pdf'],
+    sourceExts: [...sourceExts, 'svg', 'po'],
+  },
+  serializer: {
+    // 1️⃣ 先继承默认 serializer，后面在这个基础上做"定制"
+    ...defaultConfig.serializer,
+
+    // ⭐ 自定义 serializer：对模块 bundle 移除 prelude 代码
+    // 注意：Metro 的 serializer 配置支持 customSerializer 函数
+    // 如果 defaultConfig 已经有 customSerializer，需要包装它
+    customSerializer: defaultConfig.serializer?.customSerializer
+      ? async (entryPoint, prepend, graph, bundleOptions) => {
+          // 先调用默认的 serializer
+          await defaultConfig.serializer.customSerializer(
+            entryPoint,
+            prepend,
+            graph,
+            bundleOptions
+          );
+          // 然后调用我们的处理逻辑
+          return await customSerializer(
+            entryPoint,
+            prepend,
+            graph,
+            bundleOptions
+          );
+        }
+      : customSerializer,
+
+    // 2️⃣ Dev / Prod 统一的 moduleId 工厂（你原来的逻辑）
+    createModuleIdFactory: createStableModuleIdFactory,
+
+    // 3️⃣ 按业务 bundle 过滤模块：把 RN runtime 和公共依赖抽到 base.bundle 里
+    processModuleFilter: module => {
+      const modulePath = module.path;
+
+      // ⭐ 关键：只有在构建模块 bundle 时才过滤共享依赖
+      // 主 bundle 应该包含所有依赖，包括共享依赖
+      const isModuleBundleBuild = buildType === 'module' || isDevModuleRequest;
 
-  // ... 其余配置代码（serializer、transformer 等）请参考完整实现
-  // 完整的 Metro 配置包含：
-  // - serializer: 自定义模块 ID 工厂、processModuleFilter、customSerializer
-  // - transformer: getTransformOptions
-  // 这些配置较为复杂，建议参考 @bm-fe/react-native-multi-bundle 的完整实现
+      if (!isModuleBundleBuild) {
+        // 主 bundle：包含所有模块，不过滤共享依赖
+        return true;
+      }
+
+      // 模块 bundle：过滤共享依赖，让它们从主 bundle 中加载
+      // 过滤 RN runtime（shared runtime 装到 base.bundle 中）
+      if (isReactNativeRuntime(modulePath)) {
+        return false;
+      }
+
+      // 过滤公共依赖（React / RN / shared 代码）
+      // 这些模块会在主 bundle 中，模块 bundle 通过全局的 __r 访问它们
+      if (isSharedModuleForSegmentId(modulePath)) {
+        return false;
+      }
+
+      // 其他模块保留在业务 bundle 中
+      return true;
+    },
+
+    // 4️⃣ ⭐ 关键点：对"业务 bundle"不再注入 prelude，避免重复定义 global.__r 等
+    getModulesRunBeforeMainModule: entryFilePath => {
+      // 判断是否是模块 bundle：
+      // 1. 通过 entryFilePath 路径（使用配置化的模块路径规则）- 最可靠的方式
+      // 2. 通过开发服务器请求标记（仅开发模式）
+      // 注意：不能仅依赖 isMultiBundleBuild，因为主 bundle 和模块 bundle 都会设置这个环境变量
+
+      const isModuleBundle =
+        isDevModuleRequest || isModuleBundleEntry(entryFilePath);
+
+      if (isModuleBundle) {
+        return [];
+      }
+
+      // 对主 bundle：使用默认行为，保留唯一一份 runtime 初始化
+      if (
+        defaultConfig.serializer &&
+        typeof defaultConfig.serializer.getModulesRunBeforeMainModule ===
+          'function'
+      ) {
+        return defaultConfig.serializer.getModulesRunBeforeMainModule(
+          entryFilePath
+        );
+      }
+
+      // 兜底：默认返回空数组（大部分版本其实不会走到这里）
+      return [];
+    },
+  },
 };
 
 module.exports = mergeConfig(defaultConfig, config);