React Native Bundle插件

随着技术的不断进步，我们的应用程序也需要进行升级和改进。在过去，为了改进 App 的功能，我们通常需要发布新的版本并要求用户去下载并安装更新。然而，这种方式并不是最理想的，因为它需要用户的主动参与，并且可能会对用户体验产生负面影响。为了解决这个问题，我们可以使用 React Native JSBundle 来实现动态更新 App 的功能。 React Native 是一种基于 JavaScript 的框架，它可以用于开发跨平台的移动应用程序。React Native JSBundle 是指应用程序的 JavaScript 代码和资产文件（如图像、样式等）的包。通过使用 JSBundle，我们可以将应用程序的逻辑部分从本地代码中分离出来，并将其存储在服务器上。这样，我们就可以通过更新服务器上的 JSBundle 来更新应用程序的逻辑，而无需发布新的应用程序版本。当然这种方式也是多种热更新App功能的一种；

也许就会有人问：什么是jsBundle?

jsBundle是一种JavaScript的打包文件，它将所有的JavaScript代码和资源文件合并成一个单独的文件。在Web开发中，开发者通常会将JavaScript代码和资源分散到多个文件中进行组织和管理，但在实际部署和使用时，这些文件需要进行打包以提高加载性能。JSBundle的打包可以通过工具如Webpack、Parcel等进行，可以将所有的JavaScript代码和资源文件打包成一个文件，并通过减少网络请求和提高加载速度等优化，提供更好的用户体验。JSBundle一般用于前端开发以及一些基于JavaScript的移动应用开发框架如React Native等。

jsbundle对比原生app开发和h5开发有什么优势？

jsBundle对比原生app和h5的好处有以下几点：

简化开发流程：通过使用jsBundle，开发人员可以使用HTML、CSS和JavaScript等前端开发技术进行应用程序的开发，而无需学习和使用原生代码。这可以加快应用程序的开发速度，并简化开发流程。

跨平台兼容：jsBundle可以在多个平台上运行，如iOS、Android和Web等。这意味着开发人员只需编写一次代码，即可将应用程序在多个平台上运行。这提高了开发效率，并降低了开发成本。

动态更新：通过使用jsBundle，应用程序的逻辑和用户界面可以动态地从服务器端进行更新。这意味着开发人员可以在不发布新版本的情况下，快速修复bug、添加新功能或做出其他改进。这让应用程序的维护和升级更加方便和高效。

热更新：jsBundle还支持热更新，即在应用程序运行时，可以动态地加载和替换部分或全部的代码。这允许开发人员在不中断用户使用的情况下，及时发布代码的更新。这对于修复bug、优化性能和提供新特性非常有用。

打包和分发：使用jsBundle，开发人员可以将应用程序的所有代码和资源打包成一个文件进行分发。这简化了应用程序的安装和部署过程，并提高了应用程序的加载速度和性能。

总的来说，jsBundle提供了一种快速、灵活和跨平台的开发方式，可以加速应用程序的开发、维护和更新，降低开发成本，提升用户体验。

现有骑士APP架构图

今天主要说的就是rn插件部分

整体流程

环境准备

这点就不细说了，大家可以参照 react-native官网搭建开发环境需要注意2点：

macos版本与xcode版本
react-native版本

新建项目

npx react-native init youprojectname --version X.XX.X

有的原生对rn版本有限制所以需要下载对应版本的rn，而我们的版本是0.59.10

开发调试

开发

打开xcode运行项目并修改相关报错；
打开android studio 运行项目下载相关依赖
运行 react-native start
输入要加载的模块名称
点击加载即可看见对应模块页面

调试

如何调试？

提示：生产环境release (production) 下Developer Menu是不可用的。如何开启Developer Menu

在模拟器上开启Developer Menu

Android模拟器：

可以通过Command⌘ + M快捷键来快速打开Developer Menu。也可以通过模拟器上的菜单键来打开。心得：高版本的模拟器通常没有菜单键的，不过Nexus S上是有菜单键的，如果想使用菜单键，可以创建一个Nexus S的模拟器。 iOS模拟器：

可以通过Command⌘ + D快捷键来快速打开Developer Menu。

如何通过 Chrome调试React Native程序你可以通过以下步骤来调试你的React Native程序：

第一步：启动远程调试

在Developer Menu下单击"Debug JS Remotely" 启动JS远程调试功能。此时Chrome会被打开，同时会创建一个"http://localhost:8081/debugger-ui." Tab页。

第二步：打开Chrome开发者工具

在该"http://localhost:8081/debugger-ui."Tab页下打开开发者工具。打开Chrome菜单->选择更多工具->选择开发者工具。你也可以通过快捷键(Command⌘ + Option⌥ + I on Mac, Ctrl + Shift + I on Windows)打开开发者工具。打开Chrome开发着工具之后你会看到如下界面：

真机调试

在iOS上

打开"RCTWebSocketExecutor.m "文件，将"localhost"改为你的电脑的ip，然后在Developer Menu下单击"Debug JS Remotely" 启动JS远程调试功能。

在Android上

方式一：

在Android5.0以上设备上，将手机通过usb连接到你的电脑，然后通过adb命令行工具运行如下命令来设置端口转发。

adb reverse tcp:8081 tcp:8081 方式二：

你也可以通过在"Developer Menu"下的"Dev Settings"中设置你的电脑ip来进行调试。

心得：在使用真机调试时，你需要确保你的手机和电脑处在同一个网段内，即它们实在同一个路由器下。

打包测试

本地运行打包命令打包之后生成对应安卓&ios压缩包，如图：

上传对应的压缩包到插件平台

插件平台是什么？

插件平台就是一个存放jsBundle 和原生App包的平台，上传之后根据接口就可以动态获取对应功能最新版本的资源

发布之后开启抓包调用协议或修改路由加载当前jsBundle；

打包上线

打包上线跟打包测试流程一致，只要区分App名称即可；不同App会携带不同的App名称获取最新插件；

替换入口

替换入口前需要把插件全量，然后再替换入口，当然入口也可以灰度这样避免大范围问题发生；

总结：

jsBundle可以动态实现App功能加载，方便业务功能更新，避免频繁发版
减少App包体大小，App开发只关注主流程，精力不会分散
减少开发成本，只需懂react相关即可开发