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

package/INTEGRATION.md

@@ -326,6 +326,53 @@ export const createHomeScreen = createModuleRouteLoader('home', 'Home');
 <Stack.Screen name="Home" getComponent={createHomeScreen} />
 ```
 
+**路由 Props 传递说明：**
+
+`createModuleRouteLoader` 会自动将 React Navigation 的路由 props 传递给模块组件，包括：
+
+- `navigation`：导航对象，用于页面跳转
+- `route`：路由对象，包含路由参数和配置
+
+模块组件可以直接使用这些 props：
+
+```typescript
+// 在模块组件中（如 HomeScreen.tsx）
+import React from 'react';
+import { View, Text } from 'react-native';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+
+type Props = NativeStackScreenProps<RootStackParamList, 'Home'>;
+
+const HomeScreen = ({ navigation, route }: Props) => {
+  // 可以使用 navigation 进行页面跳转
+  const handleNavigate = () => {
+    navigation.navigate('Details', { id: '123' });
+  };
+
+  // 可以使用 route.params 获取路由参数
+  const params = route.params;
+
+  return (
+    <View>
+      <Text>Home Screen</Text>
+      {/* ... */}
+    </View>
+  );
+};
+
+export default HomeScreen;
+```
+
+如果需要传递额外的 props，可以通过 React Navigation 的 `initialParams` 或 `getInitialProps`：
+
+```typescript
+<Stack.Screen 
+  name="Home" 
+  getComponent={createHomeScreen}
+  initialParams={{ customProp: 'value' }}
+/>
+```
+
 ### 方式二：使用路由注册系统
 
 ```typescript
@@ -364,6 +411,18 @@ const HomeScreen = getModuleRoute('home', 'Home');
 - 检查 `devServer` 配置是否正确
 - 验证 manifest URL 是否可访问
 
+### 5. 配置文件找不到
+
+如果执行打包命令时提示 `Config file not found`：
+
+- **确认配置文件位置**：`multi-bundle.config.json` 应该在项目根目录（与 `package.json` 同级）
+- **确认执行目录**：打包命令应该在项目根目录执行，或者通过 npm scripts 执行
+- **手动指定项目根目录**：如果仍有问题，可以通过环境变量指定：
+  ```bash
+  PROJECT_ROOT=/path/to/your/project node node_modules/@bm-fe/react-native-multi-bundle/scripts/build-multi-bundle.js ios
+  ```
+- **检查文件路径**：确认错误信息中的路径是否正确指向你的项目根目录
+
 ## 更多信息
 
 - [API 参考](./src/multi-bundle/README.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bm-fe/react-native-multi-bundle",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.1",
   "description": "React Native 多 Bundle 系统 - 支持模块按需加载和独立更新",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -34,7 +34,7 @@
     "version:patch": "standard-version --release-as patch",
     "version:minor": "standard-version --release-as minor",
     "version:major": "standard-version --release-as major",
-    "version:beta": "npm version prerelease --preid=beta --no-git-tag-version",
+    "version:beta": "npm version prerelease --preid=beta --no-git-tag-version --no-scripts",
     "publish:beta": "npm publish --tag beta",
     "release:beta": "npm run version:beta && npm run publish:beta",
     "release": "npm run version && npm publish"

package/scripts/build-multi-bundle.js

@@ -13,17 +13,41 @@
  * - --env: 'development' | 'staging' | 'production' (默认: 'production')
  * 
  * 环境变量：
- * - PROJECT_ROOT: 项目根目录（可选，默认从脚本位置推断）
+ * - PROJECT_ROOT: 项目根目录（可选，默认从当前工作目录向上查找包含 multi-bundle.config.json 的目录）
  */
 
 const fs = require('fs');
 const path = require('path');
 const { execSync } = require('child_process');
 
-// 支持从任意项目目录运行
-// 如果作为 npm 包使用，PROJECT_ROOT 应该是调用脚本的项目根目录
-// 如果直接运行，PROJECT_ROOT 是脚本所在目录的父目录
-const PROJECT_ROOT = process.env.PROJECT_ROOT || path.join(__dirname, '..');
+/**
+ * 查找项目根目录
+ * 从当前工作目录向上查找，直到找到包含 multi-bundle.config.json 的目录
+ * 如果找不到，则使用当前工作目录（通常打包命令在项目根目录执行）
+ */
+function findProjectRoot() {
+  // 如果通过环境变量指定，直接使用
+  if (process.env.PROJECT_ROOT) {
+    return process.env.PROJECT_ROOT;
+  }
+  
+  // 从当前工作目录开始向上查找
+  let currentDir = process.cwd();
+  const root = path.parse(currentDir).root;
+  
+  while (currentDir !== root) {
+    const configFile = path.join(currentDir, 'multi-bundle.config.json');
+    if (fs.existsSync(configFile)) {
+      return currentDir;
+    }
+    currentDir = path.dirname(currentDir);
+  }
+  
+  // 如果找不到配置文件，使用当前工作目录（通常打包命令在项目根目录执行）
+  return process.cwd();
+}
+
+const PROJECT_ROOT = findProjectRoot();
 const CONFIG_FILE = path.join(PROJECT_ROOT, 'multi-bundle.config.json');
 const OUTPUT_DIR = path.join(PROJECT_ROOT, 'build/bundles');
 

package/src/multi-bundle/ModuleLoaderMock.ts

@@ -9,6 +9,7 @@
 
 import { Platform } from 'react-native';
 import { HMRClient } from './HMRClient';
+import { getGlobalConfig } from './config';
 
 interface LoadResult {
   success: boolean;
@@ -22,29 +23,117 @@ const loadedBundles = new Set<string>();
 // 正在加载中的 bundle（并发复用）
 const inflightBundles = new Map<string, Promise<LoadResult>>();
 
+// 缓存 multi-bundle.config.json（开发环境）
+let cachedMultiBundleConfig: any = null;
+let configLoadPromise: Promise<any> | null = null;
+
+/**
+ * 从开发服务器获取 multi-bundle.config.json
+ */
+async function getMultiBundleConfig(): Promise<any> {
+  // 如果已缓存，直接返回
+  if (cachedMultiBundleConfig) {
+    return cachedMultiBundleConfig;
+  }
+  
+  // 如果正在加载，等待加载完成
+  if (configLoadPromise) {
+    return configLoadPromise;
+  }
+  
+  // 开始加载配置
+  configLoadPromise = (async () => {
+    try {
+      const config = getGlobalConfig();
+      const devServer = config?.devServer;
+      const host = devServer?.host || (Platform.OS === 'android' ? '10.0.2.2' : 'localhost');
+      const port = devServer?.port || 8081;
+      const protocol = devServer?.protocol || 'http';
+      
+      const configUrl = `${protocol}://${host}:${port}/multi-bundle.config.json`;
+      const response = await fetch(configUrl);
+      
+      if (response.ok) {
+        const configData = await response.json();
+        cachedMultiBundleConfig = configData;
+        return configData;
+      } else {
+        console.warn(
+          `[ModuleLoaderMock] Failed to fetch multi-bundle.config.json: HTTP ${response.status}`
+        );
+        return null;
+      }
+    } catch (error) {
+      console.warn(
+        `[ModuleLoaderMock] Failed to fetch multi-bundle.config.json: ${error}`
+      );
+      return null;
+    } finally {
+      configLoadPromise = null;
+    }
+  })();
+  
+  return configLoadPromise;
+}
+
 /**
- * 根据 bundleId 构建 HTTP URL（开发环境）
+ * 根据 bundlePath 构建 HTTP URL（开发环境 HTTP 模式）
  * 
- * 在开发环境中，我们通过 Metro bundler 的 HTTP 服务器加载 bundle
- * 根据 bundleId 直接构建对应的 HTTP URL
+ * 优先从 multi-bundle.config.json 的 entry 字段获取模块路径
+ * 如果无法获取，则使用 bundlePath 进行简单推断
+ * 
+ * @param bundleId 模块 ID
+ * @param bundlePath bundle 文件路径（从 manifest 中获取，开发环境可能不使用）
  */
-function buildHttpUrlFromBundleId(bundleId: string): string {
-  const host = Platform.OS === 'android' ? '10.0.2.2' : 'localhost';
+async function buildHttpUrlFromBundlePath(bundleId: string, bundlePath: string): Promise<string> {
+  const config = getGlobalConfig();
+  const devServer = config?.devServer;
+  const host = devServer?.host || (Platform.OS === 'android' ? '10.0.2.2' : 'localhost');
+  const port = devServer?.port || 8081;
+  const protocol = devServer?.protocol || 'http';
   
-  // 简单的模块 ID 到目录名的映射
-  // 假设模块 ID 为小写，目录名为首字母大写
-  // 例如: home -> Home
-  const moduleName = bundleId.charAt(0).toUpperCase() + bundleId.slice(1);
+  // 优先从 multi-bundle.config.json 的 entry 获取模块路径
+  let sourcePath: string | null = null;
+  
+  try {
+    const multiBundleConfig = await getMultiBundleConfig();
+    if (multiBundleConfig?.modules) {
+      const moduleConfig = multiBundleConfig.modules.find((m: any) => m.id === bundleId);
+      if (moduleConfig?.entry) {
+        sourcePath = moduleConfig.entry;
+      }
+    }
+  } catch (error) {
+    console.warn(
+      `[ModuleLoaderMock] Failed to get entry from multi-bundle.config.json for module ${bundleId}: ${error}`
+    );
+  }
+  
+  // 如果无法从配置文件获取，使用 bundlePath 进行简单推断
+  if (!sourcePath) {
+    // 如果 bundlePath 已经是源码路径，直接使用
+    if (bundlePath.startsWith('src/') || bundlePath.startsWith('./src/')) {
+      sourcePath = bundlePath;
+    } else {
+      // 生产环境路径（如 bundles/home/index.bundle），提取模块名
+      const match = bundlePath.match(/(?:bundles\/|modules\/)(?:[^/]+\/)?([^/]+)\//);
+      const moduleName = match?.[1] || bundleId.charAt(0).toUpperCase() + bundleId.slice(1);
+      sourcePath = `src/modules/${moduleName}/index.bundle`;
+    }
+  }
+  
+  // 确保路径以 .bundle 结尾
+  if (!sourcePath.endsWith('.bundle')) {
+    sourcePath = sourcePath.replace(/\.(ts|tsx|js|jsx)$/, '.bundle') || sourcePath + '/index.bundle';
+  }
   
   // 构建 Metro 请求 URL
-  // 请求源码入口文件，Metro 会自动打包
-  // 注意：使用 .bundle 后缀，Metro 会识别并构建对应的 .ts/.tsx 文件
-  return `http://${host}:8081/src/modules/${moduleName}/index.bundle` +
+  return `${protocol}://${host}:${port}/${sourcePath}` +
      `?platform=${Platform.OS}` +
      `&dev=true` +
      `&minify=false` +
-     `&modulesOnly=true` +      // ✅ 只生成 __d(...)，不带 runtime
-     `&runModule=true`;         // ✅ 不自动执行入口
+     `&modulesOnly=true` +
+     `&runModule=true`;
 }
 
 /**
@@ -74,8 +163,8 @@ async function loadBusinessBundle(bundleId: string, bundlePath: string): Promise
       };
     }
 
-    // 开发环境：根据 bundleId 构建 HTTP URL
-    const httpUrl = buildHttpUrlFromBundleId(bundleId);
+    // 开发环境：根据 bundlePath 动态构建 HTTP URL（优先从 multi-bundle.config.json 获取 entry）
+    const httpUrl = await buildHttpUrlFromBundlePath(bundleId, bundlePath);
 
     // 已经加载过的 bundle，不再重复执行
     if (loadedBundles.has(httpUrl)) {
@@ -166,4 +255,3 @@ export const ModuleLoader = {
 };
 
 export type { LoadResult };
-

package/src/multi-bundle/ModuleRegistry.ts

@@ -137,8 +137,6 @@ function registerModule(moduleId: string, exportsObj: any): void {
     return;
   }
 
-  map[moduleId] = 1;
-
   moduleExports[moduleId] = exportsObj;
   moduleState[moduleId] = 'loaded';
 

package/src/multi-bundle/init.ts

@@ -18,6 +18,10 @@ export interface InitResult {
   manifest?: BundleManifest;
 }
 
+// 初始化状态标记
+let isInitialized = false;
+let initPromise: Promise<InitResult> | null = null;
+
 /**
  * 从 manifestProvider 获取 manifest
  */
@@ -53,6 +57,7 @@ async function getManifestFromProvider(
  * 初始化多 Bundle 系统
  * 
  * @param config 配置对象
+ * @param forceReinit 是否强制重新初始化（默认 false，已初始化时直接返回成功结果）
  * @returns 初始化结果
  * 
  * @example
@@ -64,68 +69,106 @@ async function getManifestFromProvider(
  * });
  * ```
  */
-export async function initMultiBundle(config: MultiBundleConfig = {}): Promise<InitResult> {
-  try {
-    // 1. 合并配置
-    const mergedConfig = mergeConfig(config);
-    
-    // 2. 设置全局配置（供 Metro 配置等使用）
-    setGlobalConfig(mergedConfig);
-
-    // 2.5 初始化 HMR Client (开发环境)
-    if (__DEV__ && mergedConfig.devServer) {
-      HMRClient.getInstance().setup(
-        mergedConfig.devServer.host,
-        mergedConfig.devServer.port
-      );
-    }
+export async function initMultiBundle(
+  config: MultiBundleConfig = {},
+  forceReinit: boolean = false
+): Promise<InitResult> {
+  // 如果已经初始化且不强制重新初始化，直接返回成功
+  if (isInitialized && !forceReinit) {
+    return {
+      success: true,
+      manifest: undefined, // 不返回 manifest，因为已经初始化过了
+    };
+  }
+
+  // 如果正在初始化，等待正在进行的初始化完成
+  if (initPromise && !forceReinit) {
+    return initPromise;
+  }
 
-    // 3. 获取 manifest
-    let manifest: BundleManifest;
+  // 开始新的初始化
+  initPromise = (async () => {
     try {
-      manifest = await getManifestFromProvider(mergedConfig.manifestProvider);
+      // 1. 合并配置
+      const mergedConfig = mergeConfig(config);
+      
+      // 2. 设置全局配置（供 Metro 配置等使用）
+      setGlobalConfig(mergedConfig);
+
+      // 2.5 初始化 HMR Client (开发环境)
+      if (__DEV__ && mergedConfig.devServer) {
+        HMRClient.getInstance().setup(
+          mergedConfig.devServer.host,
+          mergedConfig.devServer.port
+        );
+      }
+
+      // 3. 获取 manifest
+      let manifest: BundleManifest;
+      try {
+        manifest = await getManifestFromProvider(mergedConfig.manifestProvider);
+      } catch (error) {
+        const err = error instanceof Error ? error : new Error(String(error));
+        console.error('[initMultiBundle] Failed to get manifest:', err);
+        config.onError?.(err);
+        return {
+          success: false,
+          error: err,
+        };
+      }
+
+      // 4. 设置自定义 ModuleLoader（如果提供）
+      if (mergedConfig.moduleLoader) {
+        ModuleRegistry.setModuleLoader(mergedConfig.moduleLoader);
+      }
+
+      // 5. 初始化 ModuleRegistry
+      ModuleRegistry.init({ manifest });
+
+      // 6. 预加载模块
+      if (mergedConfig.preloadModules && mergedConfig.preloadModules.length > 0) {
+        const preloadPromises = mergedConfig.preloadModules.map((moduleId) =>
+          preloadModule(moduleId).catch((error) => {
+            // 预加载失败不影响初始化，只记录日志
+            console.warn(`[initMultiBundle] Preload module ${moduleId} failed:`, error);
+            config.onError?.(error instanceof Error ? error : new Error(String(error)));
+          })
+        );
+        await Promise.allSettled(preloadPromises);
+      }
+
+      isInitialized = true;
+      return {
+        success: true,
+        manifest,
+      };
     } catch (error) {
       const err = error instanceof Error ? error : new Error(String(error));
-      console.error('[initMultiBundle] Failed to get manifest:', err);
+      console.error('[initMultiBundle] Initialization failed:', err);
       config.onError?.(err);
+      // 初始化失败时，允许下次重试
+      isInitialized = false;
+      initPromise = null;
       return {
         success: false,
         error: err,
       };
+    } finally {
+      // 如果强制重新初始化，清除 promise（允许下次调用）
+      if (forceReinit) {
+        initPromise = null;
+      }
     }
+  })();
 
-    // 4. 设置自定义 ModuleLoader（如果提供）
-    if (mergedConfig.moduleLoader) {
-      ModuleRegistry.setModuleLoader(mergedConfig.moduleLoader);
-    }
-
-    // 5. 初始化 ModuleRegistry
-    ModuleRegistry.init({ manifest });
-
-    // 6. 预加载模块
-    if (mergedConfig.preloadModules && mergedConfig.preloadModules.length > 0) {
-      const preloadPromises = mergedConfig.preloadModules.map((moduleId) =>
-        preloadModule(moduleId).catch((error) => {
-          // 预加载失败不影响初始化，只记录日志
-          console.warn(`[initMultiBundle] Preload module ${moduleId} failed:`, error);
-          config.onError?.(error instanceof Error ? error : new Error(String(error)));
-        })
-      );
-      await Promise.allSettled(preloadPromises);
-    }
+  return initPromise;
+}
 
-    return {
-      success: true,
-      manifest,
-    };
-  } catch (error) {
-    const err = error instanceof Error ? error : new Error(String(error));
-    console.error('[initMultiBundle] Initialization failed:', err);
-    config.onError?.(err);
-    return {
-      success: false,
-      error: err,
-    };
-  }
+/**
+ * 重置初始化状态（用于测试或特殊场景）
+ */
+export function resetInitState(): void {
+  isInitialized = false;
+  initPromise = null;
 }
 

package/templates/metro.config.js.template

@@ -37,9 +37,161 @@ const sharedDependencies = multiBundleConfig.sharedDependencies || [
   'src/navigation/**'
 ];
 
-// ... 其余配置代码与主 metro.config.js 相同
-// 请参考 @bm-fe/react-native-multi-bundle 的完整实现
+// ⚠️ 注意：这是"请求级别"的标记，由 middleware 动态设置
+let isDevModuleRequest = false;
 
-module.exports = mergeConfig(defaultConfig, {
-  // 你的自定义配置
-});
+/**
+ * 加载 multi-bundle.config.json 配置
+ */
+function loadMultiBundleConfig() {
+  try {
+    if (fs.existsSync(MULTI_BUNDLE_CONFIG_FILE)) {
+      const configContent = fs.readFileSync(MULTI_BUNDLE_CONFIG_FILE, 'utf-8');
+      return JSON.parse(configContent);
+    }
+  } catch (error) {
+    console.warn('[Metro] Failed to load multi-bundle.config.json:', error);
+  }
+  return null;
+}
+
+/**
+ * 获取主 bundle 文件名（根据平台）
+ */
+function getMainBundleFileName(platform) {
+  if (platform === 'ios') {
+    return 'main.jsbundle';
+  } else if (platform === 'android') {
+    return 'index.android.bundle';
+  }
+  throw new Error(`Unsupported platform: ${platform}`);
+}
+
+/**
+ * 获取模块 bundle 文件名（根据平台和模块 ID）
+ */
+function getModuleBundleFileName(moduleId, platform) {
+  if (platform === 'ios') {
+    return `${moduleId}.jsbundle`;
+  } else if (platform === 'android') {
+    return `${moduleId}.bundle`;
+  }
+  throw new Error(`Unsupported platform: ${platform}`);
+}
+
+/**
+ * 从配置生成 manifest
+ */
+function generateManifestFromConfig(config, platform) {
+  if (!config || !config.modules) return null;
+  
+  const mainFileName = getMainBundleFileName(platform);
+  const manifest = {
+    formatVersion: config.formatVersion || 1,
+    main: {
+      file: mainFileName,
+      version: config.main?.version || '1.0.0',
+    },
+    modules: (config.modules || []).map((module) => ({
+      id: module.id,
+      file: `modules/${getModuleBundleFileName(module.id, platform)}`,
+      version: module.version || '1.0.0',
+      dependencies: module.dependencies || [],
+      lazy: module.lazy !== false,
+    })),
+  };
+  
+  return manifest;
+}
+
+const config = {
+  projectRoot: path.resolve(__dirname),
+
+  watcher: {
+    healthCheck: { enabled: true },
+  },
+
+  server: {
+    enhanceMiddleware: (middleware) => {
+      return (req, res, next) => {
+        // ⭐ 处理 bundle-manifest.json 请求
+        // 基于 multi-bundle.config.json 动态生成 manifest
+        if (req.url && req.url.startsWith('/bundle-manifest.json')) {
+          // 从查询参数中提取 platform，默认为 android
+          const urlParts = req.url.split('?');
+          let platform = 'android';
+          if (urlParts.length > 1) {
+            const params = new URLSearchParams(urlParts[1]);
+            platform = params.get('platform') || 'android';
+          }
+          
+          try {
+            // 优先尝试读取已构建的 manifest 文件
+            const manifestPath = path.join(projectRoot, 'build', 'bundles', platform, 'bundle-manifest.json');
+            if (fs.existsSync(manifestPath)) {
+              const manifestContent = fs.readFileSync(manifestPath, 'utf-8');
+              res.setHeader('Content-Type', 'application/json');
+              res.statusCode = 200;
+              res.end(manifestContent);
+              return;
+            }
+            
+            // 如果 manifest 文件不存在，基于 multi-bundle.config.json 动态生成
+            const config = loadMultiBundleConfig();
+            if (config) {
+              const manifest = generateManifestFromConfig(config, platform);
+              if (manifest) {
+                res.setHeader('Content-Type', 'application/json');
+                res.statusCode = 200;
+                res.end(JSON.stringify(manifest, null, 2));
+                return;
+              }
+            }
+            
+            // 如果配置不存在或生成失败，返回错误
+            res.statusCode = 404;
+            res.setHeader('Content-Type', 'application/json');
+            res.end(JSON.stringify({ 
+              error: 'Manifest not found',
+              message: 'bundle-manifest.json not found and multi-bundle.config.json is missing or invalid'
+            }));
+            return;
+          } catch (error) {
+            res.statusCode = 500;
+            res.setHeader('Content-Type', 'application/json');
+            res.end(JSON.stringify({ error: 'Failed to generate manifest', message: error.message }));
+            return;
+          }
+        }
+        
+        // 使用配置化的模块路径规则判断是否是模块 bundle 请求
+        if (req.url) {
+          // 去掉查询参数和 URL 前缀，只保留路径部分
+          let pathToCheck = req.url.split('?')[0];
+          // 去掉前导斜杠（如果存在）
+          if (pathToCheck.startsWith('/')) {
+            pathToCheck = pathToCheck.substring(1);
+          }
+          
+          // 检查路径是否匹配模块路径规则
+          if (isModulePathHelper(pathToCheck, modulePaths)) {
+            isDevModuleRequest = true;
+          } else {
+            isDevModuleRequest = false;
+          }
+        } else {
+          isDevModuleRequest = false;
+        }
+        return middleware(req, res, next);
+      };
+    },
+  },
+
+  // ... 其余配置代码（serializer、transformer 等）请参考完整实现
+  // 完整的 Metro 配置包含：
+  // - serializer: 自定义模块 ID 工厂、processModuleFilter、customSerializer
+  // - transformer: getTransformOptions
+  // 这些配置较为复杂，建议参考 @bm-fe/react-native-multi-bundle 的完整实现
+};
+
+module.exports = mergeConfig(defaultConfig, config);