[发明专利]ReactNative框架中实现bundle的模块化打包处理的系统

说明书

本发明涉及一种ReactNative框架中实现bundle的模块化打包处理的系统，包括module定义模块，用于将以数字id来标识module修改为以具有业务含义的字符串来标识；主bundle编译模块，用于将ReactNative基础组件和项目代码打包成bundle文件；项目文件编译模块，用于每个文件生成对应的一个bundle编译产物；同步方式加载js模块，用于实现在js环境直接调用pmRequire来动态加载本地文件系统中的js文件；文件加载模块，用于加载打包生成的主bundle，并根据客户端中的配置下加载编译产物的js文件。采用了本发明的ReactNative框架中实现bundle的模块化打包处理的系统，实现了将ReactNative的bundle拆分成主bundle和项目bundle，还实现了将项目bundle拆分成基于项目目录结构的单页面bundle。

技术领域

本发明涉及移动App领域，尤其涉及基于ReactNative开发App领域，具体是指一种ReactNative框架中实现bundle的模块化打包处理的系统。

背景技术

在进入移动互联网时代，移动应用的开发效率也是企业发展重要的竞争力之一，ReactNative作为Facebook开源的跨平台应用开发框架，更是受到不少大公司的青睐。ReactNative并非使用传统的Webview渲染，而是采用JS桥接加Native桥接两个方式合并起来的。ReactNative产出的也不是网页应用，而是一个真正的移动应用。ReactNative使用JSX和CSS开发，学习成本相对于Android和iOS大大降低。同时它的bundle编译机制也使得应用在热更新领域会更加方便。但也是由于ReactNative将项目所有内容打包在一个bundle文件中，导致文件过大，从而在应用启动和首屏渲染上还有很大的提升空间。

ReactNative作为一款优秀的开源的跨平台应用开发框架，在国内已经有大量企业及个人用户使用，针对其bundle文件过大的问题，也有一些优秀的解决方案。

例如将打包产物分为两部分，首页和非首页的页面。为了加快页面打开速度，在打包时将首页和基础包编译为一个bundle文件，再将其他页面打包成一个bundle，在App启动时，只加载首页的模块，待首页模块加载完毕，再去异步加载后续页面的模块。当然，这不但需要修改多个页面的编译逻辑，还需要ReactNative原生代码提供支持。

还有一些分包的方式，比如使用Google的diff-match-patch工具计算业务patch，在集成到主工程并需要加载业务页面时，再合成一个完整的jsbundle进行加载。

现有技术下基于ReactNative打包过程相对复杂，打包产物也比较大，极大地限制了App首屏启动速度，同时也不利于应用的热更新。现有的分包方案也对ReactNative源代码修改过大，使用diff-match-patch工具时加载业务patch包的逻辑不可避免会变得比较复杂同时也存在效率问题，不利于ReactNative技术栈的持续实施。本专利将简化打包过程，同时打包产物结构清晰，方便管理，将ReactNative基础组件和App中页面分别独立打包，解决应用热更新的问题。统一编译生成的基础包也可以供多个项目组使用，解决ReactNative下多团队难以协同开发的问题。

发明内容

本发明的目的是克服了上述现有技术的缺点，提供了一种满足操作简便、协同开发方便、适用范围较为广泛)的ReactNative框架中实现bundle的模块化打包处理的系统。

为了实现上述目的，本发明的ReactNative框架中实现bundle的模块化打包处理的系统如下：

该ReactNative框架中实现bundle的模块化打包处理的系统，其主要特点是，所述的系统包括：

module定义模块，用于将以数字id来标识module修改为以具有业务含义的字符串来标识；