CN110825385B - React Native离线包的构建方法及存储介质 - Google Patents

Abstract

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

Description

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

技术领域

本发明涉及计算机技术领域，尤其涉及一种React Native离线包的构建方法及存储介质。

背景技术

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

一个应用可能存在多个不同的离线包，在应用构建时将会多次调用离线包构建命令和拆包命令。现有技术在该应用场景下表现不甚理想，降低了应用整体的构建效率。因此，如何快速构建大量离线包成为有待解决的问题。

发明内容

本发明所要解决的技术问题是：提供一种React Native离线包的构建方法及存储介质，可提高离线包构建效率。

为了解决上述技术问题，本发明采用的技术方案为：一种React Native离线包的构建方法，包括：

根据构建命令，获取配置信息，并将所述配置信息中的路径值转换为绝对路径，得到用户配置；

合并预设的默认配置和所述用户配置，得到最终配置，所述最终配置包括项目根目录路径、入口文件路径、离线包输出路径、文件后缀白名单和搜索路径黑名单；

获取项目根目录下文件路径不在所述文件路径黑名单中且后缀属于所述文件后缀集的文件，并根据所述文件的绝对路径，在内存中建立虚拟文件树；

将入口文件加入依赖队列，并依次从所述依赖队列中获取一文件作为当前文件；

将当前文件的代码转换为ES5代码；

通过语法分析获取转换后的当前文件声明的依赖项；

根据所述虚拟文件树，获取所述依赖项对应的绝对路径，并将所述依赖项加入所述依赖队列中；

根据所述依赖项对应的绝对路径，获取所述依赖项对应的模块标识，并将所述依赖项的值替换为所述模块标识；

根据预设的与当前文件的文件类型对应的封装模板，对依赖替换后的当前文件进行封装，得到当前文件对应的模块代码；

当依赖队列中的文件均已遍历后，根据预设的索引化业务包结构，创建索引表，并拼接所述依赖队列中各文件对应的模块代码，得到业务包；

根据所述离线包输出路径，存储所述业务包。

本发明还提出一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现如上所述的步骤。

本发明的有益效果在于：通过转换用户配置中的路径参数，方便后续过程进行处理；通过合并默认配置和用户配置，以获得用户期望的最终配置；通过将满足预设条件的文件映射到内存中，避免后续过程对文件系统频繁访问造成效率低下；通过进行语法转换，方便从中提取依赖项；通过进行依赖分析和依赖替换，使得后续加载时能够获取模块标识，以此找到依赖的模块；通过进行模块封装，使得加载器可正常加载；通过建立索引化的业务包，以实现按需加载；通过输出资源，以供加载器使用。本发明通过抽除现有技术中涉及基础部分的所有构建逻辑，使用预先准备好的基础包取代之，通过整合拆包工具，不再构建离线包，而是一步到位输出业务包，提高了构建效率；通过抽除无用的缓存设计，进一步提高了构建效率，从而可满足大量离线包快速构建的业务场景。

附图说明

图1为本发明的一种React Native离线包的构建方法的流程图；

图2为本发明实施例一的方法流程图；

图3为本发明实施例一的索引化业务包结构的示意图。

具体实施方式

为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图详予说明。

本发明最关键的构思在于：抽除现有技术中涉及基础部分的所有构建逻辑，不再构建离线包，而是一步到位输出业务包。

请参阅图1，一种React Native离线包的构建方法，包括：

根据构建命令，获取配置信息，并将所述配置信息中的路径值转换为绝对路径，得到用户配置；

合并预设的默认配置和所述用户配置，得到最终配置，所述最终配置包括项目根目录路径、入口文件路径、离线包输出路径、文件后缀白名单和搜索路径黑名单；

获取项目根目录下文件路径不在所述搜索路径黑名单中且后缀属于所述文件后缀白名单的文件，并根据所述文件的绝对路径，在内存中建立虚拟文件树；

将入口文件加入依赖队列，并依次从所述依赖队列中获取一文件作为当前文件；

将当前文件的代码转换为ES5代码；

通过语法分析获取转换后的当前文件声明的依赖项；

根据所述虚拟文件树，获取所述依赖项对应的绝对路径，并将所述依赖项加入所述依赖队列中；

根据所述依赖项对应的绝对路径，获取所述依赖项对应的模块标识，并将所述依赖项的值替换为所述模块标识；

根据预设的与当前文件的文件类型对应的封装模板，对依赖替换后的当前文件进行封装，得到当前文件对应的模块代码；

当依赖队列中的文件均已遍历后，根据预设的索引化业务包结构，创建索引表，并拼接所述依赖队列中各文件对应的模块代码，得到业务包；

根据所述离线包输出路径，存储所述业务包。

从上述描述可知，本发明的有益效果在于：可提高离线包构建效率。

进一步地，所述根据构建命令，获取配置信息之后，进一步包括：

判断所述配置信息中是否包含所有预设的必填配置参数；

若是，则判定为有效配置；

若否，则判定为无效配置，终止构建。

由上述描述可知，通过进行有效性校验，保证后续过程可获取到必填配置参数。

进一步地，所述将所述配置信息中的路径值转换为绝对路径具体为：

若所述配置信息中的路径值为相对路径，则根据所述构建命令的执行路径，将所述路径值转换为绝对路径。

由上述描述可知，通过将相对路径转换为绝对路径，方便后续过程进行处理。

进一步地，所述将当前文件的代码转换为ES5代码之前，进一步包括：

判断当前文件是否属于基础包文件；

若是，则继续执行所述依次从所述依赖队列中获取一文件作为当前文件的步骤；

若否，则执行所述将当前文件的代码转换为ES5代码的步骤。

由上述描述可知，若遍历到的文件属于基础包文件，则跳过不作处理。

进一步地，所述根据所述依赖项对应的绝对路径，获取所述依赖项对应的模块标识，并将所述依赖项的值替换为所述模块标识具体为：

根据所述依赖项对应的绝对路径和所述项目根目录路径，计算相对路径，作为所述依赖项对应的模块标识；

将所述依赖项的值替换为所述模块标识。

由上述描述可知，通过进行依赖替换，使得后续加载时能够获取模块标识，以此找到依赖的模块。

进一步地，所述最终配置还包括是否开发模式的标志位；

所述根据预设的索引化业务包结构，创建索引表，并拼接所述依赖队列中各文件对应的模块代码，得到业务包之前，进一步包括：

若所述是否开发模式的标志位为否，则对所述依赖队列中各文件对应的模块代码进行代码混淆，输出混淆后的模块代码。

由上述描述可知，仅在非开发模式下进行混淆处理；通过进行代码混淆，减少了包大小，且可提高代码安全性。

进一步地，所述最终配置还包括资源输出路径；

所述根据所述离线包输出路径，存储所述业务包之后，进一步包括：

获取所述依赖队列中的资源文件，并根据所述资源输出路径，存储所述资源文件，所述资源文件包括多媒体文件。

由上述描述可知，通过输出资源，以供加载器使用。

本发明还提出一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现如上所述的步骤。

实施例一

请参照图2-3，本发明的实施例一为：一种React Native离线包的构建方法，可运用于应用构建，本方法主要包括以下9个阶段：标准化参数、合并配置、映射文件系统、语法转换、依赖分析与替换、模块封装、代码混淆、索引化业务包和资源输出。具体地，如图2所示，包括如下步骤：

S1：根据用户输入的构建命令，获取配置信息，并将所述配置信息中的路径值转换为绝对路径，得到用户配置。

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

获取到配置信息后，对其进行有效性校验，具体地，判断是否所有必填配置参数都已有用户配置了相应的值，即判断所述配置信息中是否包含入口文件路径和离线包输出路径，若所有必填配置参数均已配置，则为有效配置，否则为无效配置，终止构建任务。

有效性校验通过后，若所述配置信息中的路径值为相对路径，则根据所述构建命令的执行路径，将所述路径值转换为绝对路径。可使用Node.js官方自带的path库，结合当前构建命令执行路径和配置信息中的路径值(可能为相对路径，也可能是绝对路径)来判断，具体地，根据path库的处理逻辑(即path.resolve方法，其接受多个参数，依次表示要进入的路径，直到将最后一个参数转化为绝对路径)，依次传入当前构建命令执行路径和配置信息中的路径值。如果配置信息中的路径值是绝对路径，则直接返回；如果是相对路径，则以当前构建命令执行路径为参照，将相对路径转为绝对路径。

本步骤通过标准化参数，对于错误的构建命令输出修改建议，引导使用者正确使用工具，同时处理路径参数，方便后续过程做处理。

S2：合并预设的默认配置和所述用户配置，得到最终配置。其中，默认配置包含上述配置信息中非必填项的默认值和用户无需关心的程序内部配置，如混淆配置、前置模块ID、模块ID构建方法、重定向关键字等等，包括文件后缀白名单和搜索路径黑名单。最终配置是根据优先级合并用户配置和默认配置的结果。

本步骤通过合并配置，获得用户期望的最终配置。

S3：根据所述最终配置，获取项目根目录下满足预设条件的文件，并将所述文件的文件信息映射至内存，并建立虚拟文件树，所述预设条件包括文件路径不在所述搜索路径黑名单中且后缀属于所述文件后缀白名单，所述文件信息包括绝对路径和时间戳。

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

通过上述操作，可避免后续任务频繁的文件存在性判断拖慢构建进程。例如，代码require(‘a’)代表引用a模块，而此时a模块对应的文件名可能是a.js、a.android.js等等，因此在做依赖分析时，需要按照优先级判断文件是否存在，存在则匹配。如果不做映射处理，将会由于频繁地访问文件系统(做存在性判断)导致效率过低。

本步骤通过映射文件系统，避免后续过程(尤其是依赖分析)对文件系统频繁访问造成效率低下。

S4：从依赖队列中获取一文件作为当前文件，所述依赖队列最开始时只包含入口文件，入口文件可根据入口文件路径得到，后续会陆续将通过对当前文件分析得到的依赖项加入至依赖队列。

S5：判断当前文件是否属于基础包文件或已遍历过的文件，若是，则执行步骤S6，若否，则执行步骤S7。

S6：判断依赖队列中的文件是否均已遍历过，若是，则执行步骤S11，若否，则从依赖队列中获取下一文件作为当前文件，即执行步骤S4。也就是说，若遍历到的文件为已遍历过的文件或属于基础包文件，则跳过不作处理。

S7：将当前文件的代码转换为ES5代码。本实施例主要使用Babel库进行转换，输入的是当前文件的文件路径，输出的是符合ES5语法的AST(抽象语法树)。

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

本步骤通过进行语法转换，将代码统一为ES5语法并生成AST，方便从中提取依赖项。

S8：通过语法分析获取转换后的当前文件声明的依赖项，并根据所述虚拟文件树，获取所述依赖项对应的绝对路径；即根据虚拟文件树，在当前文件的同级目录、上级目录、上上级目录、子目录等(根据依赖项的写法判定)查找所述依赖项对应的文件，并获取所述文件的绝对路径，作为所述依赖项的绝对路径。获取到依赖项的绝对路径后，将所述依赖项加入所述依赖队列中。

通过进行依赖分析，并加入至依赖队列，可递归处理涉及到的每个文件。

S9：根据所述依赖项对应的绝对路径，获取所述依赖项对应的模块标识，并将所述依赖项的值替换为所述模块标识。

对于代码文件，每个文件都是一个模块。而对于资源文件，React Native规定其文件命名方式为filename@scale.type，其中filename表示文件名，scale表示分辨率，type表示类型，如a@1.5x.jpg，只要filename和type相同，即属于同一个模块。每个模块都有全局(整个离线包)唯一的模块ID。因此可以说，每个代码文件或资源文件都对应离线包中的一个模块(代码文件是一对一关系，资源文件可能是多对一关系)，模块可以分为代码模块和资源模块。

例如，对于当前文件index.js，我们假设其中有一段代码require(‘./app.js’)，其意为引入index.js同级目录下的app.js文件。在步骤S3中，index.js和app.js将映射到内存，它们的绝对路径已经存储在内存中。

此时，步骤S8-S9所执行的操作为：

1、根据步骤S7生成的AST，提取依赖项的值，即‘./app.js’；

2、在虚拟文件树中，查找index.js同级目录下的名为app.js的文件，获取其绝对路径；

3、根据项目根目录路径和所获取的绝对路径，计算模块ID；具体地，将相对于项目根目录的文件路径作为模块ID，即app.js；

4、使用模块ID替换原依赖项中的值，即将require(‘./app.js’)替换为require(‘app.js’)。

通过进行依赖替换，可满足加载的需要，经过依赖替换后的代码在加载时，能够获取模块ID，以此找到依赖的模块。

S10：根据预设的与当前文件的文件类型对应的封装模板，对依赖替换后的当前文件进行封装，得到当前文件对应的模块代码。返回执行步骤S6。

步骤S9之后，会得到经过语法转换和依赖替换的AST，那么本步骤中，就根据模块类型，往AST中添加相应的节点，包裹原来的模块AST(经过语法转换和依赖替换的AST)，故谓之“封装”。也就是说，本步骤的封装操作的对象是经过语法转换和依赖替换的AST。

进一步地，模块分为代码模块和资源模块，而代码模块还可以细分为script模块、module模块以及json模块。其中module模块和资源模块采用同一模板，script模块采用script模板，json模块采用json模板。本实施例中，不管是使用哪种模板，封装操作均是基于Babel库。

例如，module模块和资源模块的模板如下：

__d(function(global,_$$_REQUIRE,_$$_IMPORT_ALL,_$$_IMPORT_DEFAULT,module,exports,_dependencyMap){

...模块代码

},模块ID,null,模块ID)。

本步骤即进行模块封装，是为了满足和加载器的约定，不封装将无法正常加载。

S11：根据是否开发模式的标志位，判断是否需要进行代码混淆，若是，则执行步骤S12，若否，则输出未混淆的模块代码，然后执行步骤S13。具体地，若是否开发模式的标志位为否，则需要进行代码混淆，若是否开发模式的标志位为是，则无需进行代码混淆，即仅在非开发模式下做混淆处理。本实施例中，可通过uglify-es库实现代码混淆。

S12：对所述依赖队列中各文件对应的模块代码进行代码混淆，输出混淆后的模块代码。通过进行代码混淆，减少了包大小，且可提高代码安全性。

S13：根据预设的索引化业务包结构，创建索引表，并拼接所述依赖队列中各文件对应的模块代码，得到索引化的业务包，即包含一个模块索引表的业务包，类似于有目录的字典。其中，所述索引化业务包结构可如图3所示。

S14：将所述业务包存储至所述离线包输出路径，进一步地，获取所述依赖队列中的资源文件，并将资源文件存储至所述资源输出路径，所述资源文件包括多媒体文件等。通过输出资源，以供加载器使用。

由于离线包的基础部分在每个构建任务中都是固定不变的，因此本实施例抽除了现有技术中涉及基础部分的所有构建逻辑，使用预先准备好的基础包取代之，提高了构建效率；由于构建输出的离线包文件较大，频繁的读写操作甚至语法分析都极其耗时，因此本实施例整合了拆包工具，不再构建离线包，而是一步到位输出业务包，进一步提高了构建效率；另外，React Native CLI工具中的缓存设计并不适用于Jenkins的分布式构建模式，代码改动、文件路径变更或缓存超期都将导致缓存不可用，而每次构建时都去对比每个代码文件的缓存并生成新缓存文件就显得徒劳且低效，因此本实施例亦抽除了这部分无用的缓存设计，从而进一步提高了构建效率。

实施例二

本实施例是实施例一的一具体应用场景。

1、在React Native工程目录下执行构建命令easy-bundler bundle--project-root/project--entry-file index.js--output main.bundle--assets-output assets，其功能为指定/project为工程目录(即项目根目录)，以/project/index.js文件为入口文件，构建输出离线包文件存放于/project/main.bundle，图片文件存放在/project/assets目录中；

2、构建工具验证必选参数均已配置，转换相对路径为绝对路径，即将index.js转化为/project/index.js，将main.bundle转化为/project/main.bundle，将assets转化为/project/assets；

3、合并用户配置和默认配置，其中用户配置优先级高于默认配置；

4、遍历/project目录下js/jpg/png等格式的文件，映射至内存，遍历结果为/project/index.js、/project/app.js；

5、获取入口文件/project/index.js，将/project/index.js的代码转换为ES5代码；

6、分析/project/index.js转换后的代码，提取到依赖项./app.js，计算出依赖项对应的实际文件路径(/project/app.js)和模块ID(app.js)，用模块ID替换依赖项的值，即用app.js替换./app.js。

7、采用js类型的封装模版对替换后的代码进行封装；

8、获取上述获取到的依赖项./app.js，由于其实际文件为/project/app.js，因此将/project/app.js的代码转换为ES5代码；

9、分析/project/app.js转换后的代码，提取到依赖项@babel/runtime/helpers/interopRequireDefault、react-native，计算出依赖项对应的实际文件路径(/project/node_modules/@babel/runtime/helpers/interopRequireDefault、/project/node_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替换依赖项的值；

10、采用js类型的封装模版对替换后的代码进行封装；

11、获取上述获取到的依赖项@babel/runtime/helpers/interopRequireDefault和react-native，由于interopRequireDefault.js和react-native-implementation.js均属于基础包文件，因此均不作处理；

12、根据最终配置，判断是否进行混淆处理，本场景中不进行混淆处理；

13、根据索引化业务包结构，创建索引表并拼接index.js及app.js封装后的代码；

14、将上一步的产出写入业务包，并存储于/project/main.bundle；由于本场景中不存在与离线包相关的资源文件，因此无需处理资源文件的存放。

实施例三

本实施例是对应上述实施例的一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现以下步骤：

根据构建命令，获取配置信息，并将所述配置信息中的路径值转换为绝对路径，得到用户配置；

合并预设的默认配置和所述用户配置，得到最终配置，所述最终配置包括项目根目录路径、入口文件路径、离线包输出路径、文件后缀白名单和搜索路径黑名单；

获取项目根目录下文件路径不在所述搜索路径黑名单中且后缀属于所述文件后缀白名单的文件，并根据所述文件的绝对路径，在内存中建立虚拟文件树；

将入口文件加入依赖队列，并依次从所述依赖队列中获取一文件作为当前文件；

将当前文件的代码转换为ES5代码；

通过语法分析获取转换后的当前文件声明的依赖项；

根据所述虚拟文件树，获取所述依赖项对应的绝对路径，并将所述依赖项加入所述依赖队列中；

根据所述依赖项对应的绝对路径，获取所述依赖项对应的模块标识，并将所述依赖项的值替换为所述模块标识；

根据预设的与当前文件的文件类型对应的封装模板，对依赖替换后的当前文件进行封装，得到当前文件对应的模块代码；

当依赖队列中的文件均已遍历后，根据预设的索引化业务包结构，创建索引表，并拼接所述依赖队列中各文件对应的模块代码，得到业务包；

根据所述离线包输出路径，存储所述业务包。

进一步地，所述根据构建命令，获取配置信息之后，进一步包括：

判断所述配置信息中是否包含所有预设的必填配置参数；

若是，则判定为有效配置；

若否，则判定为无效配置，终止构建。

进一步地，所述将所述配置信息中的路径值转换为绝对路径具体为：

若所述配置信息中的路径值为相对路径，则根据所述构建命令的执行路径，将所述路径值转换为绝对路径。

进一步地，所述将当前文件的代码转换为ES5代码之前，进一步包括：

判断当前文件是否属于基础包文件；

若是，则继续执行所述依次从所述依赖队列中获取一文件作为当前文件的步骤；

若否，则执行所述将当前文件的代码转换为ES5代码的步骤。

进一步地，所述根据所述依赖项对应的绝对路径，获取所述依赖项对应的模块标识，并将所述依赖项的值替换为所述模块标识具体为：

根据所述依赖项对应的绝对路径和所述项目根目录路径，计算相对路径，作为所述依赖项对应的模块标识；

将所述依赖项的值替换为所述模块标识。

进一步地，所述最终配置还包括是否开发模式的标志位；

所述根据预设的索引化业务包结构，创建索引表，并拼接所述依赖队列中各文件对应的模块代码，得到业务包之前，进一步包括：

若所述是否开发模式的标志位为否，则对所述依赖队列中各文件对应的模块代码进行代码混淆，输出混淆后的模块代码。

进一步地，所述最终配置还包括资源输出路径；

所述根据所述离线包输出路径，存储所述业务包之后，进一步包括：

获取所述依赖队列中的资源文件，并根据所述资源输出路径，存储所述资源文件，所述资源文件包括多媒体文件。

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

以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (8)

1.一种React Native离线包的构建方法，其特征在于，包括：

根据构建命令，获取配置信息，并将所述配置信息中的路径值转换为绝对路径，得到用户配置；

合并预设的默认配置和所述用户配置，得到最终配置，所述最终配置包括项目根目录路径、入口文件路径、离线包输出路径、文件后缀白名单和搜索路径黑名单；

获取项目根目录下文件路径不在所述搜索路径黑名单中且后缀属于所述文件后缀白名单的文件，并根据所述文件的绝对路径，在内存中建立虚拟文件树；

将入口文件加入依赖队列，并依次从所述依赖队列中获取一文件作为当前文件；

将当前文件的代码转换为ES5代码；

通过语法分析获取转换后的当前文件声明的依赖项；

根据所述虚拟文件树，获取所述依赖项对应的绝对路径，并将所述依赖项加入所述依赖队列中；

根据所述依赖项对应的绝对路径，获取所述依赖项对应的模块标识，并将所述依赖项的值替换为所述模块标识；

根据预设的与当前文件的文件类型对应的封装模板，对依赖替换后的当前文件进行封装，得到当前文件对应的模块代码；

当依赖队列中的文件均已遍历后，根据预设的索引化业务包结构，创建索引表，并拼接所述依赖队列中各文件对应的模块代码，得到业务包；

根据所述离线包输出路径，存储所述业务包。

2.根据权利要求1所述的React Native离线包的构建方法，其特征在于，所述根据构建命令，获取配置信息之后，进一步包括：

判断所述配置信息中是否包含所有预设的必填配置参数；

若是，则判定为有效配置；

若否，则判定为无效配置，终止构建。

3.根据权利要求1所述的React Native离线包的构建方法，其特征在于，所述将所述配置信息中的路径值转换为绝对路径具体为：

若所述配置信息中的路径值为相对路径，则根据所述构建命令的执行路径，将所述路径值转换为绝对路径。

4.根据权利要求1所述的React Native离线包的构建方法，其特征在于，所述将当前文件的代码转换为ES5代码之前，进一步包括：

判断当前文件是否属于基础包文件；

若是，则继续执行所述依次从所述依赖队列中获取一文件作为当前文件的步骤；

若否，则执行所述将当前文件的代码转换为ES5代码的步骤。

5.根据权利要求1所述的React Native离线包的构建方法，其特征在于，所述根据所述依赖项对应的绝对路径，获取所述依赖项对应的模块标识，并将所述依赖项的值替换为所述模块标识具体为：

根据所述依赖项对应的绝对路径和所述项目根目录路径，计算相对路径，作为所述依赖项对应的模块标识；

将所述依赖项的值替换为所述模块标识。

6.根据权利要求1所述的React Native离线包的构建方法，其特征在于，所述最终配置还包括是否开发模式的标志位；

所述根据预设的索引化业务包结构，创建索引表，并拼接所述依赖队列中各文件对应的模块代码，得到业务包之前，进一步包括：

若所述是否开发模式的标志位为否，则对所述依赖队列中各文件对应的模块代码进行代码混淆，输出混淆后的模块代码。

7.根据权利要求1所述的React Native离线包的构建方法，其特征在于，所述最终配置还包括资源输出路径；

所述根据所述离线包输出路径，存储所述业务包之后，进一步包括：

获取所述依赖队列中的资源文件，并根据所述资源输出路径，存储所述资源文件，所述资源文件包括多媒体文件。

8.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-7任一项所述的步骤。

Images