{"id":13835254,"url":"https://github.com/smallnew/react-native-multibundler","last_synced_at":"2025-07-10T07:31:36.026Z","repository":{"id":41045457,"uuid":"153231904","full_name":"smallnew/react-native-multibundler","owner":"smallnew","description":"react native可视化bundle拆包,支持远程加载和debug,支持官方的0.57~0.63.2版本,使用官方的metro拆包,适用于Android、iOS","archived":false,"fork":false,"pushed_at":"2020-11-06T09:01:08.000Z","size":71830,"stargazers_count":861,"open_issues_count":31,"forks_count":186,"subscribers_count":17,"default_branch":"master","last_synced_at":"2024-11-20T20:39:03.590Z","etag":null,"topics":["android","ios","jsbundle","metro","react","react-native","split"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/smallnew.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-16T06:12:51.000Z","updated_at":"2024-10-25T06:21:05.000Z","dependencies_parsed_at":"2022-09-20T21:07:44.528Z","dependency_job_id":null,"html_url":"https://github.com/smallnew/react-native-multibundler","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/smallnew/react-native-multibundler","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smallnew%2Freact-native-multibundler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smallnew%2Freact-native-multibundler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smallnew%2Freact-native-multibundler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smallnew%2Freact-native-multibundler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smallnew","download_url":"https://codeload.github.com/smallnew/react-native-multibundler/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smallnew%2Freact-native-multibundler/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264545167,"owners_count":23625404,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","ios","jsbundle","metro","react","react-native","split"],"created_at":"2024-08-04T14:00:58.631Z","updated_at":"2025-07-10T07:31:31.018Z","avatar_url":"https://github.com/smallnew.png","language":"Java","funding_links":[],"categories":["目录"],"sub_categories":[],"readme":"# react-native-multibundler\n基于react native的metro bundler的配置化开发来处理分包，支持iOS和Android，支持远程加载，metro bundler为官方打包的工具，使用官方分包方法更灵活稳定，比网上的一些方法更实用可靠。\n\n支持debug、可选模块路径或者递增id作为模块id\n\nmetro官方：https://facebook.github.io/metro/\n\n\n支持react native 0.57~0.63.2，由于采用的是官方metro拆包，理论上日后的rn版本无需修改就能兼容\n\niOS和Android都有加载多bundle实例，经测试稳定可靠\n\n### demo使用说明：\n\n     1、进入项目文件夹：npm install\n\n     2、android：使用android studio打开android项目 iOS：使用xcode打开iOS项目\n\n     3、直接运行android或iOS项目，jsbundle包已经事先打好\n     \n\u003cimg src=\"https://github.com/smallnew/react-native-multibundler/raw/master/imgs/readme/demo-android.gif\" width=\"250\" alt=\"Demo Android\"\u003e\u003c/img\u003e\n\u003cimg src=\"https://github.com/smallnew/react-native-multibundler/raw/master/imgs/readme/demo-ios.gif\" width=\"250\" alt=\"Demo iOS\"\u003e\u003c/img\u003e\n     \n\n### 如何接入原有项目：\n#### android\n\n    1、拷贝除了demo文件夹下的所有代码文件到项目\n    \n    2、根据自己的需要自定义platformDep.js和platform57.config.js，这里确定基础包包含的js module\n    \n    3、根据自己的需要确定你的业务入口js和buz57.config.js，这里确定业务包包含的js代码\n    \n    4、打包：根据底下给出的打包命令打包\n    \n    5、业务的UI入口使用继承自AsyncReactActivity的activity，重写getScriptPath和getScriptPathType确定业务bundle路径，重写getMainComponentName确定加载的业务module\n    \n    6、根据需要事先加载基础包，如果没有事先加载基础包，AsyncReactActivity会自动加载，加载基础包代码如下\n    \n    ReactInstanceManager reactInstanceManager = ((ReactApplication)getApplication()).getReactNativeHost().getReactInstanceManager();\n        reactInstanceManager.createReactContextInBackground();//这里会先加载基础包platform.android.bundle，也可以不加载\n        \n      \n    7、重写ReactApplication返回基础包的位置\n    \n#### iOS\n\n    1、暴露RCTBridge的executeSourceCode方法，做法为将本项目中的RCTBridge添加到自己的工程\n    \n    2～4、与android的做法一样，见上方\n    \n    5、事先加载基础包：\n    \n    jsCodeLocation = [[NSBundle mainBundle] URLForResource:@\"platform.ios\" withExtension:@\"bundle\"];\n    bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation\n                                 moduleProvider:nil\n                                  launchOptions:launchOptions];\n                                  \n    6、加载业务包：\n    \n    NSURL *jsCodeLocationBuz = [[NSBundle mainBundle] URLForResource:bundleName withExtension:@\"bundle\"];\n      NSError *error = nil;\n      NSData *sourceBuz = [NSData dataWithContentsOfFile:jsCodeLocationBuz.path\n                                             options:NSDataReadingMappedIfSafe\n                                               error:\u0026error];\n      [bridge.batchedBridge executeSourceCode:sourceBuz sync:NO];\n      \n    7、创建RCTRootView，并绑定业务代码\n    \n    RCTRootView* view = [[RCTRootView alloc] initWithBridge:bridge moduleName:moduleName initialProperties:nil];\n    \n\n### DEBUG\n```\n从2.1版本之后加入了debug调试功能，主要工作原理：将需要debug的业务模块代码复制到debug入口文件MultiDebugEntry.js中，然后在原生端加载该入口文件来调试；\n使用步骤：\n1、配置需要调试的业务入口文件DegbugBuzEntrys.json，在这个json数组中加入业务入口js文件相对主工程的相对路径\n2、在Android中的ScriptLoadUtil.java中的MULTI_DEBUG变量设置成true，或者在iOS中将MULTI_DEBUG设置为true\n3、主工程目录下执行：node multiDebug.js\n4、启动你的原生app，开始调试\n\n```\n\n### 模块ID\n```\n从2.2版本之后加入了递增index作为模块id的选项。\n使用步骤：\n1、该选项的开关在getModulelId.js文件中的useIndex，设置为true就能开启递增index作为moduleId的功能\n2、配置ModuleIdConfig.json文件，格式为 入口文件js:起始的moduleId，如下：\n{\n  \"index.js\":100000,\n  \"index2.js\":200000,\n  \"index3.js\":300000\n}\n基础包的moduleId是固定从0开始，因此业务包的moduleId起始值建议从100000开始，以防止和基础重复\n不同业务包的起始moduleId也要避免重复\n3、执行打包命令或者使用UI打包，multibundler目录下会生成platformMap.json、indexMap.json等模块对应的ID映射表，用于后续模块id增量打包\n使用递增index作为moduleId的好处：\n1、比路径名作为moduleId更短，减小包大小\n2、打包后模块名得到保护\n3、可以使用debug模式打包，即打包命令中--dev可以为true,方便调试\n\n```\n### 远程bundle加载\n```\n从v3.0之后加入了远程的bundle加载功能。\n使用步骤：\n1、打包远程包，远程包是一个zip压缩包，打包命令和普通的业务包的打包命令一致，\n最好修改保存bundle和assets的目录，这样压缩的时候直接在专门的目录压缩，打包后需自己手动将bundle压缩，\n压缩时要把bundle文件和assets放在第一级(即压缩包内不要有上层目录)\n2、把压缩的zip包放在网络上，重写AsyncReactActivity(Android)或者创建一个ReactController对象(iOS)，\n指定加载类型为network，并指定链接、模块名、bundle名\n3、启动这个Activity或者Controller就能将远程的业务包加载成功\n友情提示：\n1、该功能顺便把\"不同业务包放在不同目录下的需求\"给解决了，这个也归功于新的react-native-smartassets\n2、远程的bundle加载功能并没有做md5校验，这个需要开发者自己解决，主要由于md5主要还是需要服务端返回的信息，\n作为通用的拆包开源项目不会提供md5校验\n3、rn 0.62版本经测试会出现爆红的问题，主要是因为新增的LogBox模块擅自runApplication导致崩溃，最新的RN版本0.63已经没有该问题\n\n```\n### js项目结构：\n\n```\n.\n├── App.js               业务界面1\n├── App2.js              业务界面2\n├── App3.js              业务界面3\n├── LICENSE\n├── README.md\n├── android              android项目目录\n├── app.json \n├── buzDep.json        UI打包中，打业务包的中间产物，这里面包含的是当前业务包的依赖\n├── buz.config.js      业务包的打包配置\n├── buz-ui.config.js     UI打业务包配置\n├── index.js             业务1入口js\n├── index2.js            业务2入口js\n├── index3.js            业务3入口js\n├── ios ios目录\n├── multibundler         包含着debug配置和公用方法模块\n├── multiDebug.js        debug node命令行工具\n├── multiDebugEntry.js   debug生成的rn调试入口，里面拼接着需要调试模块的入口代码     \n├── multibundler_cmd.txt 打包命令\n├── package.json\n├── platform-ui.config.js UI打基础包配置\n├── platformDep-ui.js    UI打基础包入口\n├── platform.config.js 基础包打包配置\n├── platformDep.js       基础包打包入口\n├── platform-import.js   UI打包中生成的基础包依赖的模块import代码\n└── platformDep.json     UI打包中生成的基础包所依赖模块的配置文件\n```\n### android目录结构\n```\n.\n├── AndroidManifest.xml\n├── assets\n│   ├── index.android.bundle   业务包\n│   ├── index2.android.bundle  \n│   └── platform.android.bundle 基础包\n└── java\n    └── com\n        ├── facebook\n        │   └── react\n        │       ├── AsyncReactActivity.java 重要！rn业务加载入口，业务activity重写该类\n        │       ├── ReactUtil.java\n        │       └── bridge\n        └── reactnative_multibundler\n            ├── FileUtils.java\n            ├── ScriptLoadUtil.java\n            └── demo   demo目录，集成项目可删除\n                ├── Buz1Activity.java\n                ├── Buz2Activity.java\n                ├── MainActivity.java\n                └── MainApplication.java\n```\n\n\n\n\n### UI打包(现在支持mac os，windows)：\n     使用方式：下载https://github.com/smallnew/RN-MultiBundler-UI，并根据项目中的readme来运行\n     选择打包选项后点击打包,该方法可代替命令打包并帮助计算业务包依赖并去重\n\u003cimg src=\"https://github.com/smallnew/react-native-multibundler/raw/master/imgs/readme/package-ui-demo.png\" width=\"650\" alt=\"Demo Android\"\u003e\u003c/img\u003e\n\n\n打包命令如下：\n## android\n### 打android基础包\nnode ./node_modules/react-native/local-cli/cli.js bundle --platform android --dev false --entry-file platformDep.js --bundle-output ./android/app/src/main/assets/platform.android.bundle --assets-dest android/app/src/main/res/ --config /{你的绝对路径}/platform.config.js\n### 打android业务包\nnode ./node_modules/react-native/local-cli/cli.js bundle --platform android --dev false --entry-file index.js --bundle-output ./android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/ --config /{你的绝对路径}/buz.config.js\n\n\n## iOS\n### 打iOS基础包\nnode ./node_modules/react-native/local-cli/cli.js bundle --platform ios --dev false --entry-file platformDep.js --bundle-output ./ios/platform.ios.bundle --assets-dest ./ios/ --config /{你的绝对路径}/platform.config.js\n### 打iOS业务包\nnode ./node_modules/react-native/local-cli/cli.js bundle --platform ios --dev false --entry-file index.js --bundle-output ./ios/index.ios.bundle --assets-dest ./ios/ --config /{你的绝对路径}/buz.config.js\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmallnew%2Freact-native-multibundler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmallnew%2Freact-native-multibundler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmallnew%2Freact-native-multibundler/lists"}