cd到taro项目根目录，运行yarninstallnpmrundev:rncd到rn_temp目录运行，生成jsbundle，需要在rn_temp目录下新建bundle文件夹node..

最近使用RN开发两端app，遇到了一个诡异的bug,在android端运行正常，但是IOS就会报错：大意就是没有找到jsbundle资源，查遍了网上的解决方案均不使用，后来修改了debug模式下的jsCodeLocation

RN中，发布js代码时，会打包成jsbundle形式。随着业务的增大，jsbundle体积也会逐渐增大，特别是多Module场景下，会生成多个jsbundle（包含相同的基础）。

main.jsbundle生成方法最近在玩ReactNative，刚开始是在模拟器里运行，后想把它装到真机上，这时localhost上的jsbundle就无法访问了。

下多个react-nativejsBundle的解决方案同app下多个react-nativejsBundle的解决方案《ReactNative》之混合开发多入口跳转问题reactnative加载多个jsbundle

Metro（打包工具）将React源码打包成一个单一JS文件(就是图中JSBundle)。然后传给JS引擎执行，现在ios和android统一用的是JSC。

下面是解决方法图3只要把main.jsbundle替换index.ios.jsbundle就行了-(BOOL)application:(UIApplication*)applicationdidFinishL

native.png项目中有些页面是动态的表单，使用原生代码写起来比较麻烦，最后就尝试使用ReactNative写，最后把RN代码打包成index.android.jsbundle，最后集成到项目中，这时候各种坑就来了

ReactNaive分包方法RN中，发布js代码时，会打包成jsbundle形式。

一、Native本地加载流程1.1、React应用打包1、导出.jsbundle包和图片资源//根项目下，即index.js所在文件夹mkdiroutcdoutmkdiriosmkdirandroid/

RN打包的目标产物是一个jsbundle，包含RN基础库、第三方库、业务组件等，随着业务的迭代，模块的增加，这个包往往很大。如果Native调用一个RN业务模块，把整个导入，一个是加载慢、耗内存。

王福林丁某[TOC]目前常见的移动端跨平台开发，采用jsbridge的开发技术，主要分为Weex和RN,以下优缺点主要是通过两者对比总结.优点Weex更加轻量在Native端，两者的最大的区别可能就是在对JSBundle

/android/app/src/main/assets/index.android.jsbundle--platformandroid--assets-dest.

iOS项目被放在了根目录的iOS文件夹下（没做安卓，所以没有安卓的路径）ReactNative的iOS入口是index.ios.js其他ReactNative的代码放在了component文件夹main.jsbundle

/ios/main.jsbundle--assets-dest.

当我们运行一个ReactNative项目的时候，ReactNative会启动一个默认端口号为8081的本地服务，该8081的服务就是ReactNative项目的一个本地服务器，用于提供JSBundle包和一些静态资源

一.iOS1.生成jsbundle根目录执行react-nativebundle--entry-fileindex.js--platformios--devfalse--bundle-output.

Weex框架主要解决的两大痛点：频繁发版和多端统一Weex的工作原理Weex整体架构图VirtualDom技术屏幕适配算法.we文件.js文件Weex工作流组件树模型生成JSBundle过程利用V8引擎打通和本地代码的交互利用

MolesPacker提供的文档地址内容类似，仅是加入了自己在操作过程中出现的问题遗留问题ModuleAppRegistryisnotaregisteredcallablemodule自己打包生成的common.ios.jsbundle

初始化的React-Native会没有main.jsbundle，运行会报错，如图：SimulatorScreenShot-iPhone6-2018-08-29at18.36.52.png解决方案：1、

1、分包——混合开发的必备技术观察现在一些接入Reactnative的大厂，如菜鸟、大搜车、去哪儿，都将reactnative的jsbundle分为几个包来使用。作用是啥？为什么要这么折腾？

问题引申https://github.com/lianyagang/rnhabit最近在开发RN脚手架，发现打包JSBundle给Android客户端使用的时候，客户端需要集成很多配置，如Node环境等发现就算集成了

不过，熟悉RN的开发者也知道，早期的RN版本中打出来的包都只有一个jsbundle，而这个jsbundle里面包含了所有代码（RN源码、第三方库代码和自己的业务代码）。

/ios/ReduxProject/main.jsbundle-

图片资源的drawable相关文件夹要和jsbundle在同级目录，这个JS代码就可以找到图片资源了！

ReactNativeAndroid入门实战及深入源码分析系列(3)——热部署加载离线JSBundle文件本Markdown编辑器使用[StackEdit][6]修改而来，用它写博客，将会带来全新的体验哦

例如：webpackexample1.1.jsbundle1.1.js如果我们直接执行webpack，不加任何参数（且当前目录不存在配置文件），则会显示webpack的帮助信息，里面有非常多的参数可用。

终端项目根目录输入：react-nativebundle--entry-fileindex.ios.js--platformios--devfalse--bundle-outputrelease_ios/main.jsbundle

如果项目中已经下载和链接了codepush（没有见https://www.jianshu.com/p/da7e8890acec），下面就是插入代码，告诉codepush从何处获取最新的jsBundle代码

WeexAndroid加载远程服务器配置一、服务器生成JSBundle并部署我们在服务器上使用的工具是Node.js，当然也可以是由Node.js打包生成的Weex。

webpack.config.js配置文件当我们安装好webpack之后，就可以使用webpack命令了，比如要将一个main.js文件打包成一个bundle.js文件，可以使用如下命令：webpackmain.jsbundle.js

进行ReactNative的根目录下执行以下命令命令一nodenode_modules/react-native/local-cli/cli.jsbundle--platformandroid--devtrue

[email protected]@1.13.2一个简单的a.js：document.write("hellowebpack");运行打包命令：webpacka.jsbundle.js

一、JSBundle及Asset随着

ReactNative打Release生产包报错error:failedparsingoverlays一，生成静态JSBundle文件在项目根目录下执行以下命令：react-nativebundle--

在使用ReactInstanceManager.Builder构建一个ReactInstanceManager实例的时候只能传入一个bundle，setBundleAssetName和setJSBundleFile分别对应从assets和从一个文件路径加载Bundle。有时需要将业务代码和通用代码分离，也就是分成两个bundle，这时候加载第二个Bundle就要借助反射了。ReactContext

背景需求因为需要将各业务线通过划分jsbundle的形式进行分离，以达到各个业务包独立更新、回滚以及版本管控增量加载，优化启动速度优化增量更新，只对单独某一业务包增量更新案例参考参考了携程以及各种网络版本的做法

本篇内容我们继续对JSBundle文件内容结构，以及当前RN框架默认的打包工具Metro进行分析。

前两篇文章和大家分享了RN中的触摸事件机制。链接如下：ReactNative手势触摸事件机制详解（基础篇）ReactNative手势触摸事件机制详解（进阶篇）接下来的系列内容将结合Android原生层来分析拆包解决方案。如果你具有Android原生开发经验，并且在实践Android+RN的混合模式开发，那么这次连载的文章内容你一定喜欢。拆包解决方案的系列内容目录大致如下（点击进入相应内容）：（1）

实践源码：react-native-split-bundle：https://github.com/songxiaoliang/react-native-split-bundle前面两篇文章分别从源码加载、Bundle文件结构、Metro打包工具等做了简单分析，逐步了解关于RN打包，Bundle文件加载的相关内容。本篇内容将结合代码来完成最终的实现方案。在阅读该篇博客内容前，可以点击如下查看：（1

包体积优化无论是热更新方案走网络下载js，还是直接将js打进apk,减小jsbundle体积都很必要。走网络的js体积大影响首次加载速度，打进apk的增加包体积。

react-native版本：0.55.4react-native-cli版本:1.3.0第一步：创建真机调试需要的资源文件(生成jsbundle和assets获取所有的js文件和资源文件)在项目中的ios

作者|魔笛责编|伍杏玲前景自2015年Facebook发布ReactNative以来，目前已经是跨平台开发的主流产品，但是随着业务复杂度越来越高，单一的JSBundle越来越大，已经不能满足用户需求，需要拆分业务包

在原生应用内嵌入RN，就是需要在原生应用内加载RN模块（1个或多个JSBundle），并得以显示。JSBundle中包含了当前RN模块的js代码。

1、分包观察现在一些接入Reactnative的大厂，如菜鸟、大搜车、去哪儿，都将reactnative的jsbundle分为几个包来使用。作用是啥？为什么要这么折腾？

react-native启动时会装载jsbundle到内存并渲染界面，这段时间界面是一个空View（白屏）。这个过程即为项目初始化过程中。

buildpackagereact-nativebundle--platformios--devfalse--entry-fileindex.ios.js--bundle-outputmain.jsbundle

/ios/bundle/index.ios.jsbundle--platformios--assets-dest.

在react-native(以下称RN)还是0.39的时候，我们开始着手构建了一个纯RNapp，之后由于长列表的性能问题，进行了一次更新，将版本更新到了0.46，并一直维持。直到前段时间，遇到了一个新的需求，要把隔壁部门用RN写的一个app(以下称为Bapp)的一部分业务嵌入我们的app中。由于Bapp的业务重度依赖路由，而Bapp的路由和我们app所用的路由有一些冲突，简单的组件化然后引用的方式

/ios/main.jsbundle--platformios相关参数可以使用如下命令查询：react-nativebundle-help也可以将命令添加到package.json文件中方便使用："scripts