React Native离线包的构建方法及存储介质.pdf

《React Native离线包的构建方法及存储介质.pdf》由会员分享，可在线阅读，更多相关《React Native离线包的构建方法及存储介质.pdf（15页完成版）》请在专利查询网上搜索。

1、(19)中华人民共和国国家知识产权局 (12)发明专利申请 (10)申请公布号 (43)申请公布日 (21)申请号 201911034065.7 (22)申请日 2019.10.29 (71)申请人 福建天泉教育科技有限公司 地址 350212 福建省福州市长乐区湖南镇 大鹤村 （福建天棣动漫科技有限公司） (72)发明人 刘德建邹锲一郭玉湖陈宏 (74)专利代理机构 福州市博深专利事务所(普 通合伙) 35214 代理人 张明 (51)Int.Cl. G06F 8/41(2018.01) G06F 16/901(2019.01) (54)发明名称 React Native离线包的构建方法及存。

2、储介 质 (57)摘要 本发明公开了ReactNative离线包的构建 方法及存储介质， 方法包括： 合并默认配置和用 户配置， 得到最终配置； 获取项目根目录下文件 路径不在文件路径黑名单中且后缀属于文件后 缀集的文件的绝对路径， 并在内存中建立虚拟文 件树； 将入口文件加入依赖队列， 并依次从依赖 队列中获取一文件作为当前文件； 将当前文件的 代码转换为ES5代码； 获取当前文件声明的依赖 项， 并加入依赖队列中； 获取依赖项对应的模块 标识， 并替换依赖项的值； 对当前文件进行封装 得到对应的模块代码； 当已遍历完依赖队列， 创 建索引表， 并拼接依赖队列中各文件对应的模块 代码， 得到。

3、业务包； 存储业务包至离线包输出路 径。 本发明可提高离线包构建效率。 权利要求书2页 说明书9页 附图3页 CN 110825385 A 2020.02.21 CN 110825385 A 1.一种React Native离线包的构建方法， 其特征在于， 包括： 根据构建命令， 获取配置信息， 并将所述配置信息中的路径值转换为绝对路径， 得到用 户配置； 合并预设的默认配置和所述用户配置， 得到最终配置， 所述最终配置包括项目根目录 路径、 入口文件路径、 离线包输出路径、 文件后缀白名单和搜索路径黑名单； 获取项目根目录下文件路径不在所述搜索路径黑名单中且后缀属于所述文件后缀白 名单的文件。

4、， 并根据所述文件的绝对路径， 在内存中建立虚拟文件树； 将入口文件加入依赖队列， 并依次从所述依赖队列中获取一文件作为当前文件； 将当前文件的代码转换为ES5代码； 通过语法分析获取转换后的当前文件声明的依赖项； 根据所述虚拟文件树， 获取所述依赖项对应的绝对路径， 并将所述依赖项加入所述依 赖队列中； 根据所述依赖项对应的绝对路径， 获取所述依赖项对应的模块标识， 并将所述依赖项 的值替换为所述模块标识； 根据预设的与当前文件的文件类型对应的封装模板， 对依赖替换后的当前文件进行封 装， 得到当前文件对应的模块代码； 当依赖队列中的文件均已遍历后， 根据预设的索引化业务包结构， 创建索引表。

5、， 并拼接 所述依赖队列中各文件对应的模块代码， 得到业务包； 根据所述离线包输出路径， 存储所述业务包。 2.根据权利要求1所述的React Native离线包的构建方法， 其特征在于， 所述根据构建 命令， 获取配置信息之后， 进一步包括： 判断所述配置信息中是否包含所有预设的必填配置参数； 若是， 则判定为有效配置； 若否， 则判定为无效配置， 终止构建。 3.根据权利要求1所述的React Native离线包的构建方法， 其特征在于， 所述将所述配 置信息中的路径值转换为绝对路径具体为： 若所述配置信息中的路径值为相对路径， 则根据所述构建命令的执行路径， 将所述路 径值转换为绝对路径。

6、。 4.根据权利要求1所述的React Native离线包的构建方法， 其特征在于， 所述将当前文 件的代码转换为ES5代码之前， 进一步包括： 判断当前文件是否属于基础包文件； 若是， 则继续执行所述依次从所述依赖队列中获取一文件作为当前文件的步骤； 若否， 则执行所述将当前文件的代码转换为ES5代码的步骤。 5.根据权利要求1所述的React Native离线包的构建方法， 其特征在于， 所述根据所述 依赖项对应的绝对路径， 获取所述依赖项对应的模块标识， 并将所述依赖项的值替换为所 述模块标识具体为： 根据所述依赖项对应的绝对路径和所述项目根目录路径， 计算相对路径， 作为所述依 赖项对。

7、应的模块标识； 将所述依赖项的值替换为所述模块标识。 权利要求书 1/2 页 2 CN 110825385 A 2 6.根据权利要求1所述的React Native离线包的构建方法， 其特征在于， 所述最终配置 还包括是否开发模式的标志位； 所述根据预设的索引化业务包结构， 创建索引表， 并拼接所述依赖队列中各文件对应 的模块代码， 得到业务包之前， 进一步包括： 若所述是否开发模式的标志位为否， 则对所述依赖队列中各文件对应的模块代码进行 代码混淆， 输出混淆后的模块代码。 7.根据权利要求1所述的React Native离线包的构建方法， 其特征在于， 所述最终配置 还包括资源输出路径； 。

8、所述根据所述离线包输出路径， 存储所述业务包之后， 进一步包括： 获取所述依赖队列中的资源文件， 并根据所述资源输出路径， 存储所述资源文件， 所述 资源文件包括多媒体文件。 8.一种计算机可读存储介质， 其上存储有计算机程序， 其特征在于， 所述程序被处理器 执行时实现如权利要求1-7任一项所述的步骤。 权利要求书 2/2 页 3 CN 110825385 A 3 React Native离线包的构建方法及存储介质 技术领域 0001 本发明涉及计算机技术领域， 尤其涉及一种React Native离线包的构建方法及存 储介质。 背景技术 0002 React Native是目前应用最为广泛。

9、的跨平台技术框架之一， 开发者只需编写一套 JavaScript代码就可以同时在Android、 iOS等平台上运行相应的应用程序。 React Native 提供了一套专门的CLI(Command-Line Interface， 命令行界面)工具， 它支持将React Native工程代码整合为一个离线包文件(离线包是一个较为宽泛的概念， 广义上， 基础包、 业务包以及React Native CLI构建出来的既包含基础模块又包含业务模块的包都可以称 为离线包， 此处的离线包指代ReactNative CLI构建生成的包)， 应用可以通过加载离线包 实现业务逻辑， 也可以通过下载替换新的离线。

10、包， 实现业务代码热更新。 现有技术使用 React Native CLI工具构建出离线包， 然后借助拆包工具将离线包拆分为固定不变的基础 包和包含个性化业务逻辑的业务包。 0003 一个应用可能存在多个不同的离线包， 在应用构建时将会多次调用离线包构建命 令和拆包命令。 现有技术在该应用场景下表现不甚理想， 降低了应用整体的构建效率。 因 此， 如何快速构建大量离线包成为有待解决的问题。 发明内容 0004 本发明所要解决的技术问题是： 提供一种React Native离线包的构建方法及存储 介质， 可提高离线包构建效率。 0005 为了解决上述技术问题， 本发明采用的技术方案为： 一种Re。

11、act Native离线包的 构建方法， 包括： 0006 根据构建命令， 获取配置信息， 并将所述配置信息中的路径值转换为绝对路径， 得 到用户配置； 0007 合并预设的默认配置和所述用户配置， 得到最终配置， 所述最终配置包括项目根 目录路径、 入口文件路径、 离线包输出路径、 文件后缀白名单和搜索路径黑名单； 0008 获取项目根目录下文件路径不在所述文件路径黑名单中且后缀属于所述文件后 缀集的文件， 并根据所述文件的绝对路径， 在内存中建立虚拟文件树； 0009 将入口文件加入依赖队列， 并依次从所述依赖队列中获取一文件作为当前文件； 0010 将当前文件的代码转换为ES5代码； 0。

12、011 通过语法分析获取转换后的当前文件声明的依赖项； 0012 根据所述虚拟文件树， 获取所述依赖项对应的绝对路径， 并将所述依赖项加入所 述依赖队列中； 0013 根据所述依赖项对应的绝对路径， 获取所述依赖项对应的模块标识， 并将所述依 赖项的值替换为所述模块标识； 说明书 1/9 页 4 CN 110825385 A 4 0014 根据预设的与当前文件的文件类型对应的封装模板， 对依赖替换后的当前文件进 行封装， 得到当前文件对应的模块代码； 0015 当依赖队列中的文件均已遍历后， 根据预设的索引化业务包结构， 创建索引表， 并 拼接所述依赖队列中各文件对应的模块代码， 得到业务包；。

13、 0016 根据所述离线包输出路径， 存储所述业务包。 0017 本发明还提出一种计算机可读存储介质， 其上存储有计算机程序， 所述程序被处 理器执行时实现如上所述的步骤。 0018 本发明的有益效果在于： 通过转换用户配置中的路径参数， 方便后续过程进行处 理； 通过合并默认配置和用户配置， 以获得用户期望的最终配置； 通过将满足预设条件的文 件映射到内存中， 避免后续过程对文件系统频繁访问造成效率低下； 通过进行语法转换， 方 便从中提取依赖项； 通过进行依赖分析和依赖替换， 使得后续加载时能够获取模块标识， 以 此找到依赖的模块； 通过进行模块封装， 使得加载器可正常加载； 通过建立索引。

14、化的业务 包， 以实现按需加载； 通过输出资源， 以供加载器使用。 本发明通过抽除现有技术中涉及基 础部分的所有构建逻辑， 使用预先准备好的基础包取代之， 通过整合拆包工具， 不再构建离 线包， 而是一步到位输出业务包， 提高了构建效率； 通过抽除无用的缓存设计， 进一步提高 了构建效率， 从而可满足大量离线包快速构建的业务场景。 附图说明 0019 图1为本发明的一种React Native离线包的构建方法的流程图； 0020 图2为本发明实施例一的方法流程图； 0021 图3为本发明实施例一的索引化业务包结构的示意图。 具体实施方式 0022 为详细说明本发明的技术内容、 所实现目的及效果。

15、， 以下结合实施方式并配合附 图详予说明。 0023 本发明最关键的构思在于： 抽除现有技术中涉及基础部分的所有构建逻辑， 不再 构建离线包， 而是一步到位输出业务包。 0024 请参阅图1， 一种React Native离线包的构建方法， 包括： 0025 根据构建命令， 获取配置信息， 并将所述配置信息中的路径值转换为绝对路径， 得 到用户配置； 0026 合并预设的默认配置和所述用户配置， 得到最终配置， 所述最终配置包括项目根 目录路径、 入口文件路径、 离线包输出路径、 文件后缀白名单和搜索路径黑名单； 0027 获取项目根目录下文件路径不在所述搜索路径黑名单中且后缀属于所述文件后 。

16、缀白名单的文件， 并根据所述文件的绝对路径， 在内存中建立虚拟文件树； 0028 将入口文件加入依赖队列， 并依次从所述依赖队列中获取一文件作为当前文件； 0029 将当前文件的代码转换为ES5代码； 0030 通过语法分析获取转换后的当前文件声明的依赖项； 0031 根据所述虚拟文件树， 获取所述依赖项对应的绝对路径， 并将所述依赖项加入所 述依赖队列中； 说明书 2/9 页 5 CN 110825385 A 5 0032 根据所述依赖项对应的绝对路径， 获取所述依赖项对应的模块标识， 并将所述依 赖项的值替换为所述模块标识； 0033 根据预设的与当前文件的文件类型对应的封装模板， 对依赖。

17、替换后的当前文件进 行封装， 得到当前文件对应的模块代码； 0034 当依赖队列中的文件均已遍历后， 根据预设的索引化业务包结构， 创建索引表， 并 拼接所述依赖队列中各文件对应的模块代码， 得到业务包； 0035 根据所述离线包输出路径， 存储所述业务包。 0036 从上述描述可知， 本发明的有益效果在于： 可提高离线包构建效率。 0037 进一步地， 所述根据构建命令， 获取配置信息之后， 进一步包括： 0038 判断所述配置信息中是否包含所有预设的必填配置参数； 0039 若是， 则判定为有效配置； 0040 若否， 则判定为无效配置， 终止构建。 0041 由上述描述可知， 通过进行有。

18、效性校验， 保证后续过程可获取到必填配置参数。 0042 进一步地， 所述将所述配置信息中的路径值转换为绝对路径具体为： 0043 若所述配置信息中的路径值为相对路径， 则根据所述构建命令的执行路径， 将所 述路径值转换为绝对路径。 0044 由上述描述可知， 通过将相对路径转换为绝对路径， 方便后续过程进行处理。 0045 进一步地， 所述将当前文件的代码转换为ES5代码之前， 进一步包括： 0046 判断当前文件是否属于基础包文件； 0047 若是， 则继续执行所述依次从所述依赖队列中获取一文件作为当前文件的步骤； 0048 若否， 则执行所述将当前文件的代码转换为ES5代码的步骤。 00。

19、49 由上述描述可知， 若遍历到的文件属于基础包文件， 则跳过不作处理。 0050 进一步地， 所述根据所述依赖项对应的绝对路径， 获取所述依赖项对应的模块标 识， 并将所述依赖项的值替换为所述模块标识具体为： 0051 根据所述依赖项对应的绝对路径和所述项目根目录路径， 计算相对路径， 作为所 述依赖项对应的模块标识； 0052 将所述依赖项的值替换为所述模块标识。 0053 由上述描述可知， 通过进行依赖替换， 使得后续加载时能够获取模块标识， 以此找 到依赖的模块。 0054 进一步地， 所述最终配置还包括是否开发模式的标志位； 0055 所述根据预设的索引化业务包结构， 创建索引表， 。

20、并拼接所述依赖队列中各文件 对应的模块代码， 得到业务包之前， 进一步包括： 0056 若所述是否开发模式的标志位为否， 则对所述依赖队列中各文件对应的模块代码 进行代码混淆， 输出混淆后的模块代码。 0057 由上述描述可知， 仅在非开发模式下进行混淆处理； 通过进行代码混淆， 减少了包 大小， 且可提高代码安全性。 0058 进一步地， 所述最终配置还包括资源输出路径； 0059 所述根据所述离线包输出路径， 存储所述业务包之后， 进一步包括： 0060 获取所述依赖队列中的资源文件， 并根据所述资源输出路径， 存储所述资源文件， 说明书 3/9 页 6 CN 110825385 A 6 。

21、所述资源文件包括多媒体文件。 0061 由上述描述可知， 通过输出资源， 以供加载器使用。 0062 本发明还提出一种计算机可读存储介质， 其上存储有计算机程序， 所述程序被处 理器执行时实现如上所述的步骤。 0063 实施例一 0064 请参照图2-3， 本发明的实施例一为： 一种React Native离线包的构建方法， 可运 用于应用构建， 本方法主要包括以下9个阶段： 标准化参数、 合并配置、 映射文件系统、 语法 转换、 依赖分析与替换、 模块封装、 代码混淆、 索引化业务包和资源输出。 具体地， 如图2所 示， 包括如下步骤： 0065 S1： 根据用户输入的构建命令， 获取配置信。

22、息， 并将所述配置信息中的路径值转换 为绝对路径， 得到用户配置。 0066 所述配置信息包括项目根目录路径(默认为当前执行路径)、 入口文件路径、 离线 包输出路径、 平台(Android或iOS， 默认Android)、 是否开发模式的标志位(默认true)、 资源 输出路径、 是否拆包的标志位(默认false， 即不拆包， 拆包意味着需要输出基础包和业务 包， 不拆包则只输出业务包， 本实施例以不拆包的业务场景为例进行说明)和配置文件路径 (用户可以通过此项， 覆盖默认配置中的值， 一般不需要配置， 除非有高度自定义化的构建 需求)， 其中， 入口文件路径和离线包输出路径为必填配置参数，。

23、 而其他配置信息若用户未 输入， 则采用默认值。 0067 获取到配置信息后， 对其进行有效性校验， 具体地， 判断是否所有必填配置参数都 已有用户配置了相应的值， 即判断所述配置信息中是否包含入口文件路径和离线包输出路 径， 若所有必填配置参数均已配置， 则为有效配置， 否则为无效配置， 终止构建任务。 0068 有效性校验通过后， 若所述配置信息中的路径值为相对路径， 则根据所述构建命 令的执行路径， 将所述路径值转换为绝对路径。 可使用Node.js官方自带的path库， 结合当 前构建命令执行路径和配置信息中的路径值(可能为相对路径， 也可能是绝对路径)来判 断， 具体地， 根据pat。

24、h库的处理逻辑(即path.resolve方法， 其接受多个参数， 依次表示要进 入的路径， 直到将最后一个参数转化为绝对路径)， 依次传入当前构建命令执行路径和配置 信息中的路径值。 如果配置信息中的路径值是绝对路径， 则直接返回； 如果是相对路径， 则 以当前构建命令执行路径为参照， 将相对路径转为绝对路径。 0069 本步骤通过标准化参数， 对于错误的构建命令输出修改建议， 引导使用者正确使 用工具， 同时处理路径参数， 方便后续过程做处理。 0070 S2： 合并预设的默认配置和所述用户配置， 得到最终配置。 其中， 默认配置包含上 述配置信息中非必填项的默认值和用户无需关心的程序内部。

25、配置， 如混淆配置、 前置模块 ID、 模块ID构建方法、 重定向关键字等等， 包括文件后缀白名单和搜索路径黑名单。 最终配 置是根据优先级合并用户配置和默认配置的结果。 0071 本步骤通过合并配置， 获得用户期望的最终配置。 0072 S3： 根据所述最终配置， 获取项目根目录下满足预设条件的文件， 并将所述文件的 文件信息映射至内存， 并建立虚拟文件树， 所述预设条件包括文件路径不在所述搜索路径 黑名单中且后缀属于所述文件后缀白名单， 所述文件信息包括绝对路径和时间戳。 0073 具体地， 根据所述项目根目录路径确定项目根目录， 递归遍历项目根目录下的所 说明书 4/9 页 7 CN 1。

26、10825385 A 7 有文件和文件夹， 跳过所述搜索路径黑名单中的文件路径， 如果当前遍历的文件的后缀在 所述文件后缀白名单中可匹配得到， 则将当前遍历的文件的绝对路径和时间戳映射到内 存。 遍历完成后， 在内存中根据所获取的绝对路径建立虚拟文件树。 由于在React Native 中 ， 比 如 对 于 I m a g e .j s 文 件的 引 用 ， 会 根 据 平 台 决 定 引 用的 真 实 文 件 名为 Image.android.js或Image.ios.js。 因此， 本实施例构造了一个多级Map的数据结构， 能够 通过Image和当前的平台信息获取对应的文件路径。 007。

27、4 通过上述操作， 可避免后续任务频繁的文件存在性判断拖慢构建进程。 例如， 代码 require( a )代表引用a模块， 而此时a模块对应的文件名可能是a.js、 a.android.js等等， 因此在做依赖分析时， 需要按照优先级判断文件是否存在， 存在则匹配。 如果不做映射处 理， 将会由于频繁地访问文件系统(做存在性判断)导致效率过低。 0075 本步骤通过映射文件系统， 避免后续过程(尤其是依赖分析)对文件系统频繁访问 造成效率低下。 0076 S4： 从依赖队列中获取一文件作为当前文件， 所述依赖队列最开始时只包含入口 文件， 入口文件可根据入口文件路径得到， 后续会陆续将通过对。

28、当前文件分析得到的依赖 项加入至依赖队列。 0077 S5： 判断当前文件是否属于基础包文件或已遍历过的文件， 若是， 则执行步骤S6， 若否， 则执行步骤S7。 0078 S6： 判断依赖队列中的文件是否均已遍历过， 若是， 则执行步骤S11， 若否， 则从依 赖队列中获取下一文件作为当前文件， 即执行步骤S4。 也就是说， 若遍历到的文件为已遍历 过的文件或属于基础包文件， 则跳过不作处理。 0079 S7： 将当前文件的代码转换为ES5代码。 本实施例主要使用Babel库进行转换， 输入 的是当前文件的文件路径， 输出的是符合ES5语法的AST(抽象语法树)。 0080 转换工作按文件类。

29、型分为两个执行分支： 一种是资源文件的转换， 按照React Native加载机制的约定， 资源文件的模块代码采取固定的模板， 在模板中填入资源信息， 由 于资源信息中的httpServerLocation属性需要借助资源的相对路径计算， 因此借助最终配 置中的项目根目录路径与当前资源文件的绝对路径， 计算出相对路径， 进一步得到 httpServerLocation属性的值， 最后通过Babel的AST生成方法将资源模块代码转换成符合 ES5语法的AST； 二是代码文件， 这种情况下我们根据文件路径读取文件内容(即代码)， 然后 使用Babel的转换方法将代码转换为符合ES5语法的AST。 。

30、0081 本步骤通过进行语法转换， 将代码统一为ES5语法并生成AST， 方便从中提取依赖 项。 0082 S8： 通过语法分析获取转换后的当前文件声明的依赖项， 并根据所述虚拟文件树， 获取所述依赖项对应的绝对路径； 即根据虚拟文件树， 在当前文件的同级目录、 上级目录、 上上级目录、 子目录等(根据依赖项的写法判定)查找所述依赖项对应的文件， 并获取所述 文件的绝对路径， 作为所述依赖项的绝对路径。 获取到依赖项的绝对路径后， 将所述依赖项 加入所述依赖队列中。 0083 通过进行依赖分析， 并加入至依赖队列， 可递归处理涉及到的每个文件。 0084 S9： 根据所述依赖项对应的绝对路径，。

31、 获取所述依赖项对应的模块标识， 并将所述 依赖项的值替换为所述模块标识。 说明书 5/9 页 8 CN 110825385 A 8 0085 对于代码文件， 每个文件都是一个模块。 而对于资源文件， React Native规定其文 件命名方式为filenamescale.type， 其中filename表示文件名， scale表示分辨率， type表 示类型， 如a1.5x.jpg， 只要filename和type相同， 即属于同一个模块。 每个模块都有全局 (整个离线包)唯一的模块ID。 因此可以说， 每个代码文件或资源文件都对应离线包中的一 个模块(代码文件是一对一关系， 资源文件可能。

32、是多对一关系)， 模块可以分为代码模块和 资源模块。 0086 例如， 对于当前文件index.js， 我们假设其中有一段代码require( ./app.js )， 其意为引入index.js同级目录下的app.js文件。 在步骤S3中， index.js和app.js将映射到 内存， 它们的绝对路径已经存储在内存中。 0087 此时， 步骤S8-S9所执行的操作为： 0088 1、 根据步骤S7生成的AST， 提取依赖项的值， 即 ./app.js ； 0089 2、 在虚拟文件树中， 查找index.js同级目录下的名为app.js的文件， 获取其绝对 路径； 0090 3、 根据项目根。

33、目录路径和所获取的绝对路径， 计算模块ID； 具体地， 将相对于项目 根目录的文件路径作为模块ID， 即app.js； 0091 4、 使用模块ID替换原依赖项中的值， 即将require( ./app.js )替换为require ( app.js )。 0092 通过进行依赖替换， 可满足加载的需要， 经过依赖替换后的代码在加载时， 能够获 取模块ID， 以此找到依赖的模块。 0093 S10： 根据预设的与当前文件的文件类型对应的封装模板， 对依赖替换后的当前文 件进行封装， 得到当前文件对应的模块代码。 返回执行步骤S6。 0094 步骤S9之后， 会得到经过语法转换和依赖替换的AST。

34、， 那么本步骤中， 就根据模块 类型， 往AST中添加相应的节点， 包裹原来的模块AST(经过语法转换和依赖替换的AST)， 故 谓之 “封装” 。 也就是说， 本步骤的封装操作的对象是经过语法转换和依赖替换的AST。 0095 进一步地， 模块分为代码模块和资源模块， 而代码模块还可以细分为script模块、 module模块以及json模块。 其中module模块和资源模块采用同一模板， script模块采用 script模板， json模块采用json模板。 本实施例中， 不管是使用哪种模板， 封装操作均是基 于Babel库。 0096 例如， module模块和资源模块的模板如下： 0。

35、097 _d(function(global,_$_REQUIRE,_$_IMPORT_ALL,_$_IMPORT_DEFAULT, module,exports,_dependencyMap) 0098 .模块代码 0099 ,模块ID,null,模块ID)。 0100 本步骤即进行模块封装， 是为了满足和加载器的约定， 不封装将无法正常加载。 0101 S11： 根据是否开发模式的标志位， 判断是否需要进行代码混淆， 若是， 则执行步骤 S12， 若否， 则输出未混淆的模块代码， 然后执行步骤S13。 具体地， 若是否开发模式的标志位 为否， 则需要进行代码混淆， 若是否开发模式的标志位为。

36、是， 则无需进行代码混淆， 即仅在 非开发模式下做混淆处理。 本实施例中， 可通过uglify-es库实现代码混淆。 0102 S12： 对所述依赖队列中各文件对应的模块代码进行代码混淆， 输出混淆后的模块 说明书 6/9 页 9 CN 110825385 A 9 代码。 通过进行代码混淆， 减少了包大小， 且可提高代码安全性。 0103 S13： 根据预设的索引化业务包结构， 创建索引表， 并拼接所述依赖队列中各文件 对应的模块代码， 得到索引化的业务包， 即包含一个模块索引表的业务包， 类似于有目录的 字典。 其中， 所述索引化业务包结构可如图3所示。 0104 S14： 将所述业务包存储。

37、至所述离线包输出路径， 进一步地， 获取所述依赖队列中 的资源文件， 并将资源文件存储至所述资源输出路径， 所述资源文件包括多媒体文件等。 通 过输出资源， 以供加载器使用。 0105 由于离线包的基础部分在每个构建任务中都是固定不变的， 因此本实施例抽除了 现有技术中涉及基础部分的所有构建逻辑， 使用预先准备好的基础包取代之， 提高了构建 效率； 由于构建输出的离线包文件较大， 频繁的读写操作甚至语法分析都极其耗时， 因此本 实施例整合了拆包工具， 不再构建离线包， 而是一步到位输出业务包， 进一步提高了构建效 率； 另外， React Native CLI工具中的缓存设计并不适用于Jenk。

38、ins的分布式构建模式， 代 码改动、 文件路径变更或缓存超期都将导致缓存不可用， 而每次构建时都去对比每个代码 文件的缓存并生成新缓存文件就显得徒劳且低效， 因此本实施例亦抽除了这部分无用的缓 存设计， 从而进一步提高了构建效率。 0106 实施例二 0107 本实施例是实施例一的一具体应用场景。 0108 1、 在React Native工程目录下执行构建命令easy-bundler bundle-project- root/project-entry-file index.js-output main.bundle-assets-output assets， 其功能为指定/project。

39、为工程目录(即项目根目录)， 以/project/index.js文件为入口文 件， 构建输出离线包文件存放于/project/main.bundle， 图片文件存放在/project/assets 目录中； 0109 2、 构建工具验证必选参数均已配置， 转换相对路径为绝对路径， 即将index.js转 化为/project/index.js， 将main.bundle转化为/project/main.bundle， 将assets转化为/ project/assets； 0110 3、 合并用户配置和默认配置， 其中用户配置优先级高于默认配置； 0111 4、 遍历/project目录下j。

40、s/jpg/png等格式的文件， 映射至内存， 遍历结果为/ project/index.js、 /project/app.js； 0112 5、 获取入口文件/project/index.js， 将/project/index.js的代码转换为ES5代 码； 0113 6、 分析/project/index.js转换后的代码， 提取到依赖项./app.js， 计算出依赖项 对应的实际文件路径(/project/app.js)和模块ID(app.js)， 用模块ID替换依赖项的值， 即 用app.js替换./app.js。 0114 7、 采用js类型的封装模版对替换后的代码进行封装； 011。

41、5 8、 获取上述获取到的依赖项./app.js， 由于其实际文件为/project/app.js， 因此 将/project/app.js的代码转换为ES5代码； 0116 9、 分析/project/app.js转换后的代码， 提取到依赖项babel/runtime/helpers/ interopRequireDefault、 react-native， 计算出依赖项对应的实际文件路径(/project/ node_modules/babel/runtime/helpers/interopRequireDefault、 /project/node_ 说明书 7/9 页 10 CN 110。

42、825385 A 10 modules/react-native/Libraries/react-native/react-native-implementation.js)和 模块ID(node_modules/babel/runtime/helpers/interopRequireDefault.js、 node_ modules/react-native/Libraries/react-native/react-native-implementation.js)， 用模块ID替换依赖项的值； 0117 10、 采用js类型的封装模版对替换后的代码进行封装； 0118 11、 获取上述获取。

43、到的依赖项babel/runtime/helpers/interopRequireDefault 和react-native， 由于interopRequireDefault.js和react-native-implementation.js均 属于基础包文件， 因此均不作处理； 0119 12、 根据最终配置， 判断是否进行混淆处理， 本场景中不进行混淆处理； 0120 13、 根据索引化业务包结构， 创建索引表并拼接index.js及app.js封装后的代码； 0121 14、 将上一步的产出写入业务包， 并存储于/project/main.bundle； 由于本场景中 不存在与离线包相关。

44、的资源文件， 因此无需处理资源文件的存放。 0122 实施例三 0123 本实施例是对应上述实施例的一种计算机可读存储介质， 其上存储有计算机程 序， 所述程序被处理器执行时实现以下步骤： 0124 根据构建命令， 获取配置信息， 并将所述配置信息中的路径值转换为绝对路径， 得 到用户配置； 0125 合并预设的默认配置和所述用户配置， 得到最终配置， 所述最终配置包括项目根 目录路径、 入口文件路径、 离线包输出路径、 文件后缀白名单和搜索路径黑名单； 0126 获取项目根目录下文件路径不在所述搜索路径黑名单中且后缀属于所述文件后 缀白名单的文件， 并根据所述文件的绝对路径， 在内存中建立虚。

45、拟文件树； 0127 将入口文件加入依赖队列， 并依次从所述依赖队列中获取一文件作为当前文件； 0128 将当前文件的代码转换为ES5代码； 0129 通过语法分析获取转换后的当前文件声明的依赖项； 0130 根据所述虚拟文件树， 获取所述依赖项对应的绝对路径， 并将所述依赖项加入所 述依赖队列中； 0131 根据所述依赖项对应的绝对路径， 获取所述依赖项对应的模块标识， 并将所述依 赖项的值替换为所述模块标识； 0132 根据预设的与当前文件的文件类型对应的封装模板， 对依赖替换后的当前文件进 行封装， 得到当前文件对应的模块代码； 0133 当依赖队列中的文件均已遍历后， 根据预设的索引化。

46、业务包结构， 创建索引表， 并 拼接所述依赖队列中各文件对应的模块代码， 得到业务包； 0134 根据所述离线包输出路径， 存储所述业务包。 0135 进一步地， 所述根据构建命令， 获取配置信息之后， 进一步包括： 0136 判断所述配置信息中是否包含所有预设的必填配置参数； 0137 若是， 则判定为有效配置； 0138 若否， 则判定为无效配置， 终止构建。 0139 进一步地， 所述将所述配置信息中的路径值转换为绝对路径具体为： 0140 若所述配置信息中的路径值为相对路径， 则根据所述构建命令的执行路径， 将所 说明书 8/9 页 11 CN 110825385 A 11 述路径值转。

47、换为绝对路径。 0141 进一步地， 所述将当前文件的代码转换为ES5代码之前， 进一步包括： 0142 判断当前文件是否属于基础包文件； 0143 若是， 则继续执行所述依次从所述依赖队列中获取一文件作为当前文件的步骤； 0144 若否， 则执行所述将当前文件的代码转换为ES5代码的步骤。 0145 进一步地， 所述根据所述依赖项对应的绝对路径， 获取所述依赖项对应的模块标 识， 并将所述依赖项的值替换为所述模块标识具体为： 0146 根据所述依赖项对应的绝对路径和所述项目根目录路径， 计算相对路径， 作为所 述依赖项对应的模块标识； 0147 将所述依赖项的值替换为所述模块标识。 0148。

48、 进一步地， 所述最终配置还包括是否开发模式的标志位； 0149 所述根据预设的索引化业务包结构， 创建索引表， 并拼接所述依赖队列中各文件 对应的模块代码， 得到业务包之前， 进一步包括： 0150 若所述是否开发模式的标志位为否， 则对所述依赖队列中各文件对应的模块代码 进行代码混淆， 输出混淆后的模块代码。 0151 进一步地， 所述最终配置还包括资源输出路径； 0152 所述根据所述离线包输出路径， 存储所述业务包之后， 进一步包括： 0153 获取所述依赖队列中的资源文件， 并根据所述资源输出路径， 存储所述资源文件， 所述资源文件包括多媒体文件。 0154 综上所述， 本发明提供的。

49、一种React Native离线包的构建方法及存储介质， 通过 转换用户配置中的路径参数， 方便后续过程进行处理； 通过合并默认配置和用户配置， 以获 得用户期望的最终配置； 通过将满足预设条件的文件映射到内存中， 避免后续过程对文件 系统频繁访问造成效率低下； 通过进行语法转换， 方便从中提取依赖项； 通过进行依赖分析 和依赖替换， 使得后续加载时能够获取模块标识， 以此找到依赖的模块； 通过进行模块封 装， 使得加载器可正常加载； 通过建立索引化的业务包， 以实现按需加载； 通过输出资源， 以 供加载器使用。 本发明通过抽除现有技术中涉及基础部分的所有构建逻辑， 使用预先准备 好的基础包取。

50、代之， 通过整合拆包工具， 不再构建离线包， 而是一步到位输出业务包， 提高 了构建效率； 通过抽除无用的缓存设计， 进一步提高了构建效率， 从而可满足大量离线包快 速构建的业务场景。 0155 以上所述仅为本发明的实施例， 并非因此限制本发明的专利范围， 凡是利用本发 明说明书及附图内容所作的等同变换， 或直接或间接运用在相关的技术领域， 均同理包括 在本发明的专利保护范围内。 说明书 9/9 页 12 CN 110825385 A 12 图1 说明书附图 1/3 页 13 CN 110825385 A 13 图2 说明书附图 2/3 页 14 CN 110825385 A 14 图3 说明。