CN112181432B - ReactNative框架中实现bundle的模块化打包处理的系统 - Google Patents
ReactNative框架中实现bundle的模块化打包处理的系统 Download PDFInfo
- Publication number
- CN112181432B CN112181432B CN202011090847.5A CN202011090847A CN112181432B CN 112181432 B CN112181432 B CN 112181432B CN 202011090847 A CN202011090847 A CN 202011090847A CN 112181432 B CN112181432 B CN 112181432B
- Authority
- CN
- China
- Prior art keywords
- module
- bundle
- file
- reactnative
- project
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000012856 packing Methods 0.000 title claims abstract description 20
- 238000012545 processing Methods 0.000 title abstract description 13
- 238000004806 packaging method and process Methods 0.000 claims abstract description 35
- 230000001360 synchronised effect Effects 0.000 claims abstract description 16
- 238000012858 packaging process Methods 0.000 claims description 14
- 238000000034 method Methods 0.000 description 28
- 238000011161 development Methods 0.000 description 8
- 230000006870 function Effects 0.000 description 7
- 230000008569 process Effects 0.000 description 5
- 241000408529 Libra Species 0.000 description 4
- 230000008859 change Effects 0.000 description 3
- 238000010586 diagram Methods 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 238000013459 approach Methods 0.000 description 2
- 238000004891 communication Methods 0.000 description 2
- 238000009434 installation Methods 0.000 description 2
- 238000009877 rendering Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000002860 competitive effect Effects 0.000 description 1
- 230000006835 compression Effects 0.000 description 1
- 238000007906 compression Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000009191 jumping Effects 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 230000002194 synthesizing effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/10—File systems; File servers
- G06F16/16—File or folder operations, e.g. details of user interfaces specifically adapted to file systems
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/73—Program documentation
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Library & Information Science (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Databases & Information Systems (AREA)
- Computer Security & Cryptography (AREA)
- Stored Programmes (AREA)
Abstract
本发明涉及一种ReactNative框架中实现bundle的模块化打包处理的系统,包括module定义模块,用于将以数字id来标识module修改为以具有业务含义的字符串来标识;主bundle编译模块,用于将ReactNative基础组件和项目代码打包成bundle文件;项目文件编译模块,用于每个文件生成对应的一个bundle编译产物;同步方式加载js模块,用于实现在js环境直接调用pmRequire来动态加载本地文件系统中的js文件;文件加载模块,用于加载打包生成的主bundle,并根据客户端中的配置下加载编译产物的js文件。采用了本发明的ReactNative框架中实现bundle的模块化打包处理的系统,实现了将ReactNative的bundle拆分成主bundle和项目bundle,还实现了将项目bundle拆分成基于项目目录结构的单页面bundle。
Description
技术领域
本发明涉及移动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修改为以具有业务含义的字符串来标识;
主bundle编译模块,与所述的module定义模块相连接,用于将ReactNative基础组件和项目代码打包成bundle文件,分别为主bundle打包文件和项目打包文件;
项目文件编译模块,与所述的主bundle编译模块相连接,用于在对项目大量文件进行编译时,每个文件生成对应的一个bundle编译产物;
同步方式加载js模块,与所述的项目文件编译模块相连接,用于通过在JSCExecutor.cpp文件中增加pmRequire,实现在js环境直接调用pmRequire来动态加载本地文件系统中的js文件;
文件加载模块,与所述的同步方式加载js模块相连接,用于加载打包生成的主bundle,并根据客户端中的配置下加载编译产物的js文件,加载得到入口页面module,传至主bundle中导航控制器,显示入口页面。
较佳地,所述的module定义模块取组件相对于node_modules目录的相对路径,通过修改打包过程中createModuleIdFactory函数替换module标识id。
较佳地,所述的主bundle打包文件为编译及打包ReactNative基础组件和入口导航器的文件。
较佳地,所述的项目打包文件为对单个文件进行编译并打包的文件。
较佳地,所述的主bundle打包文件通过配置的方式设置首页的module标识,并以此动态加载本地文件实现首页的展示。
较佳地,所述的配置方式为设置App项目内config.json文件的入口页面module标识字段,入口导航器通过获取该字段,以同步加载方式获取Component实现加载首页。
较佳地,所述的项目文件编译模块将文件编译成ReactNative中module定义的格式。
较佳地,所述的同步方式加载js模块直接读取本地文件系统中的js文件,并加载到ReactNative的js环境中。
较佳地,所述的文件加载模块对应多个目录,包括主bundle以及多个页面bundle。
采用了本发明的ReactNative框架中实现bundle的模块化打包处理的系统,实现了将ReactNative的bundle拆分成主bundle和项目bundle,还实现了将项目bundle拆分成基于项目目录结构的单页面bundle。由于bundle的拆分,解决了bundle文件过大的问题,显著提升了应用启动速度。另外,由于项目文件的bundle编译以及编译产物的统一管理,从而实现多团队使用同一套基础主bundle,提高团队开发协作能力。
附图说明
图1为本发明的ReactNative框架中实现bundle的模块化打包处理的系统的结构示意图。
图2为本发明的ReactNative框架中实现bundle的模块化打包处理的系统的同步方式加载js模块实现的示意图。
图3为ReactNative框架中实现bundle的模块化打包处理的系统的文件加载模块实现的示意图。
具体实施方式
为了能够更清楚地描述本发明的技术内容,下面结合具体实施例来进行进一步的描述。
本发明的该ReactNative框架中实现bundle的模块化打包处理的系统,其中包括module定义模块,用于将以数字id来标识module修改为以具有业务含义的字符串来标识;
主bundle编译模块,与所述的module定义模块相连接,用于将ReactNative基础组件和项目代码打包成bundle文件,分别为主bundle打包文件和项目打包文件;
项目文件编译模块,与所述的主bundle编译模块相连接,用于在对项目大量文件进行编译时,每个文件生成对应的一个bundle编译产物;
同步方式加载js模块,与所述的项目文件编译模块相连接,用于通过在JSCExecutor.cpp文件中增加pmRequire,实现在js环境直接调用pmRequire来动态加载本地文件系统中的js文件;
文件加载模块,与所述的同步方式加载js模块相连接,用于加载打包生成的主bundle,并根据客户端中的配置下加载编译产物的js文件,加载得到入口页面module,传至主bundle中导航控制器,显示入口页面。
作为本发明的优选实施方式,所述的module定义模块取组件相对于node_modules目录的相对路径,通过修改打包过程中createModuleIdFactory函数替换module标识id。
作为本发明的优选实施方式,所述的主bundle打包文件为编译及打包ReactNative基础组件和入口导航器的文件。
作为本发明的优选实施方式,所述的项目打包文件为对单个文件进行编译并打包的文件。
作为本发明的优选实施方式,所述的主bundle打包文件通过配置的方式设置首页的module标识,并以此动态加载本地文件实现首页的展示。
作为本发明的优选实施方式,所述的配置方式为设置App项目内config.json文件的入口页面module标识字段,入口导航器通过获取该字段,以同步加载方式获取Component实现加载首页。
作为本发明的优选实施方式,所述的项目文件编译模块将文件编译成ReactNative中module定义的格式。
作为本发明的优选实施方式,所述的同步方式加载js模块直接读取本地文件系统中的js文件,并加载到ReactNative的js环境中。
作为本发明的优选实施方式,所述的文件加载模块对应多个目录,包括主bundle以及多个页面bundle。
本发明的具体实施方式中,提供了一种App中ReactNative中bundle的模块化打包的方法。目前绝大多数使用ReactNative的App采用的是默认的bundle打包方式,该方式将App用到的所有组件、工具、页面全部打包到一个bundle文件中,这样会导致bundle文件过大,从而使应用启动过慢,同时由于bundle的不统一,多团队协作开发也无法进行。
本发明通过拆解bundle文件,实现模块化bundle打包,将bundle文件结构按照项目代码结构展开,项目中的每一个文件都会被打包成一个bundle产物,其中引用的系统及三方组件的模块标识与主bundle一致。极大方便了多团队项目管理、调试、热更新和组件化开发。
本发明通过通过重新定义module标识、解决了不同系统打包生成的bundle文件module标识不同的问题。通过将ReactNative基础组件和App中页面分别独立打包,解决当前基于ReactNative开发的App的bundle过大导致启动速度慢的问题,解决多团队难以协同开发的问题,解决无法差量热更新的问题。
一、本技术方案提供ReactNative中bundle的模块化打包和调试的方法,包括module定义模块,主bundle编译模块,项目文件(子bundle)编译模块,同步方式加载js模块,文件加载模块。
二、module定义模块
2.1、在ReactNative的bundle打包中,会将App用到的所有功能组件分别编译成单独的module,如下所示。
__d(function(global,_require,module,exports,_dependencyMap){
...
},0,[1,2,567,939],"index.js");
其中0、1、2、567、939分别代表了每个module的数字id,ReactNative通过自增数字id的方式定义和引用每个module。这种方法在单一bundle的场景下没有问题,但多bundle时会导致数字id会因为每次的编译而变化。
2.2、本发明将这种以数字id来标识module的方法修改为以具有业务含义的字符串来标识,如下所示。
__d(function(global,_require,module,exports,_dependencyMap){
...
},"react-native-cookies/index.js",["react/index.js","react-native/Libra ries/react-native/react-native-implementation.js","invariant/browser.js"],"node_modules/react-native-cookies/index.js");
其中react-native-cookies/index.js为该module的标识id,通过这种方式,可以做到不同项目打包得出的jsbundle产物中各module的标识相同且唯一。
2.3、本发明通过修改打包过程中createModuleIdFactory方法实现替换module标识id。本发明定义系统module标识的方法为取该组件(或js文件)相对于node_modules目录的相对路径。以下为部分关键代码。
2.4、将module标识由数字改为字符串后,在不同环境下编译bundle或编译单个文件,生成的module标识都一致。这样可以保证不同项目组协同开发时,可以共用一套基础bundle库,同时各自项目的文件module由于标识不同,也不会造成冲突。
三、主bundle编译模块
3.1、ReactNative的编译模式为将ReactNative基础组件和项目代码一起打包成一个bundle文件。本发明将打包分成了主bundle打包和项目打包。
3.2、(3.1)中所述主bundle打包为只编译ReactNative基础组件和入口导航器,将这部分编译成一个bundle文件。
3.3、(3.1)中所述项目打包为单个文件编译,详见模块4
3.2、其中主bundle中不包含具有任何具体业务含义的页面,通过配置的方式设置首页的module标识,并以此动态加载本地文件实现首页的展示。
3.3、(3.1)中所述ReactNative基础组件包括”react-native”和”react”组件。
3.4、(3.1)中所述入口导航器为ReactNative中的Navigator组件,通过设置Component来控制页面展示和页面跳转。
3.5、(3.4)中所述Component通过(5.1)的方法获取。
3.6、(3.2)中所述配置的方式为设置App项目内config.json文件的入口页面module标识字段。入口导航器通过获取该字段,以(5.1)中所述方法获取Component实现加载首页。
3.7、由于module的代码文件都会存在与用户本地目录node_modules下,所以我们将module标识字段的命名方式定为该文件相对于node_modules文件夹的相对路径,例如"react/index.js"。
3.8、主bundle中任意module编译出的module标识字段与(四)中子bundle编译流程中对应module编译出的module标识字段相同。
四、项目文件(子bundle)编译模块
4.1、代码文件以项目的形式存在,并分布在多个文件中。
4.2、传统的ReactNative编译是将所有的项目文件编译出来,并最终合并在一个文件里,形成单个bundle文件。
4.3、单个bundle的局限性有以下三点。
4.3.1、一般来说该文件会比较大(视项目规模而定),App启动时会加载该bundle文件,这是一个耗时的过程,会导致App启动变慢。
4.3.2、App在调试阶段,即时只修改了项目大量文件中的一个,ReactNative依然会重新编译所有的项目文件,同时App也会重新加载新编译出来的jsbundle,调试效率低。
4.3.3、App在更新时,即时只有单个文件的改动,依然需要重新编译整个项目,更新时也必须下载整个项目的编译产物,更新效率低。
4.4、本发明在对项目大量文件进行编译时,生成的产物也是大量单个文件,即项目中每个文件对应一个bundle编译产物,这样在应用启动时不需要加载整个ReactNative部分和项目产物的bundle部分,只需要加载ReactNative模块和项目首页相关的模块。
4.5、在调试和更新时,不需要更新整个bundle,而是只更新项目中修改的文件的编译产物即可。
4.6、在编译时,依然将文件编译成ReactNative中module定义的格式,如下
__d(function(global,_require,module,exports,_dependencyMap){
...
},"react-native-cookies/index.js",["react/index.js","react-native/Libra ries/react-native/react-native-implementation.js","invariant/browser.js"],"node_modules/react-native-cookies/index.js");
4.7、其中module标识的定义与上述module定义模块一致。
4.8、项目文件编译的产物为zip压缩包,其中目录结构与项目目录结构一致,产物内容其中js文件为编译模块产出的文件,其他文件与项目文件相同。
五、同步方式加载js模块
5.1、首先ReactNative未提供js环境中同步加载本地js文件的方法,而且js环境和原生通信是异步的,所以本发明通过在JSCExecutor.cpp文件中增加pmRequire方法,实现js环境直接调用原生c++中的pmRequire来动态加载本地文件系统中的js文件。
5.2、(5.1)中所述方法为通过c++直接读取Android/iOS本地文件系统中的js文件,并加载到ReactNative的js环境中,其中关键代码如下
5.3、(5.2)中所述本地文件系统中的js文件,为项目编译后的产物打包在App的安装包中,Android为apk包,iOS为ipa包。App安装启动后,会将项目编译产物拷贝到手机本地文件系统中,供App读取和加载。
5.4、(5.2)中所述的修改完成后,在Android中重新编译成so文件,产物由原项目引用,在iOS中直接修改该文件,从而实现js环境能够使用该方法。
5.5、本方法在js环境直接调用c++中定义的方法
5.6、加载module前,先判断是否存在,再判断是否已加载到内存中,若都没有,则去读取对应文件加载。
5.7、在(5.6)中module第一次加载成功之后,若有页面引用,则不会再次读取文件系统中的文件,而是从js环境中直接获取该module。
六、文件加载模块
6.1、应用打包时可以将(4.8)中编译产物放入项目assets目录下,应用首次启动时会将该zip文件拷贝到Android系统/data/data/下应用对应的目录。
6.2、应用启动时先去加载(3.2)中打包生成的主bundle,然后根据客户端中的配置去Android文件系统/data/data/目录下加载(4.8)编译产物的js文件。
6.3、加载得到入口页面module后,将其传给主bundle中导航控制器,从而显示入口页面。
本发明以某保险公司App为具体实施例说明本发明在ReactNative跨平台开发中的应用。
一、module定义模块
1.1、我们将这种以数字id来标识module的方法修改为以具有业务含义的字符串来标识,如下所示。
__d(function(global,_require,module,exports,_dependencyMap){
...
},"react-native-cookies/index.js",["react/index.js","react-native/Libra ries/react-native/react-native-implementation.js","invariant/browser.js"],"node_modules/react-native-cookies/index.js");
其中react-native-cookies/index.js为该module的标识id,通过这种方式,可以做到不同项目打包得出的jsbundle产物中各module的标识相同且唯一。
1.2、修改打包过程中createModuleIdFactory方法实现替换module标识id。本发明定义系统module标识的方法为取该组件(或js文件)相对于node_modules目录的相对路径。以下为部分关键代码。
1.3、将module标识由数字改为字符串后,在不同环境下编译bundle或编译单个文件,生成的module标识都一致。这样可以保证不同项目组协同开发时,可以共用一套基础bundle库,同时各自项目的文件module由于标识不同,也不会造成冲突。
二、主bundle编译
2.1、ReactNative的编译模式为将ReactNative基础组件和项目代码一起打包成一个bundle文件。我们将打包分成了主bundle打包和项目打包。
2.2、创建主bundle项目,其中引用”react-native”和”react”组件。
其中主bundle中不包含具有任何具体业务含义的页面,只包含ReactNative基础组件和项目需要使用的三方组件。
2.3、bundle项目中增加navigation导航器相关代码,控制页面加载及页面跳转,主要代码如下:
2.3、其中入口导航器通过获取客户端配置来加载入口页面module文件,并传给导航器,实现客户端首页的加载。
2.4、将主bundle项目通过(1.2)中所述的方法打包成一个主bundle文件,其中module的代码文件都会存在与用户本地目录node_modules下,所以我们将module标识字段的命名方式定为该文件相对于node_modules文件夹的相对路径,例如"react/index.js"。
2.5、主bundle中任意module编译出的module标识字段与(三)中子bundle编译流程中对应module编译出的module标识字段相同。
三、项目文件编译
3.1、代码文件以项目的形式存在,并分布在多个文件中。传统的ReactNative编译是将所有的项目文件编译出来,并最终合并在一个文件里,形成单个bundle文件。
3.2、单个bundle的局限性有以下三点。
3.2.1、一般来说该文件会比较大(视项目规模而定),App启动时会加载该bundle文件,这是一个耗时的过程,会导致App启动变慢。
3.2.2、App在调试阶段,即时只修改了项目大量文件中的一个,ReactNative依然会重新编译所有的项目文件,同时App也会重新加载新编译出来的jsbundle,调试效率低。
3.2.3、App在更新时,即时只有单个文件的改动,依然需要重新编译整个项目,更新时也必须下载整个项目的编译产物,更新效率低。
3.3、使用文件编译脚本编译整个ReactNative项目,将项目中所有的JS文件都编译成对应的单个bundle文件,并按照项目原结构分布。项目中非JS文件将直接拷贝到编译产物中。最终将编译产物zip压缩。
3.4、对项目大量文件进行编译时,生成的产物也是大量单个文件,即项目中每个文件对应一个bundle编译产物,这样在应用启动时不需要加载整个ReactNative部分和项目产物的bundle部分,只需要加载ReactNative模块和项目首页相关的模块。
3.5、项目在调试和更新时,不需要更新整个bundle,而是只更新项目中修改的文件的编译产物即可。
3.6、项目编译时,依然将文件编译成ReactNative中module定义的格式,
其中module标识的定义与上述module定义模块一致。
如下
__d(function(global,_require,module,exports,_dependencyMap){
...
},"react-native-cookies/index.js",["react/index.js","react-native/Libra ries/react-native/react-native-implementation.js","invariant/browser.js"],"node_modules/react-native-cookies/index.js");
四、页面加载
4.1、由于ReactNative未提供js环境中同步加载本地js文件的方法,而且js环境和原生通信是异步的,所以本发明通过在JSCExecutor.cpp文件中增加pmRequire方法,实现js环境直接调用原生c++中的pmRequire来动态加载本地文件系统中的js文件。
4.2、(4.1)中所述方法为通过c++直接读取Android/iOS本地文件系统中的js文件,并加载到ReactNative的js环境中,其中关键代码如下
4.3、(4.2)中所述本地文件系统中的js文件,为项目编译后的产物打包在App的安装包中,Android为apk包,iOS为ipa包。App安装启动后,会将项目编译产物拷贝到手机本地文件系统中,供App读取和加载。
4.4、(4.2)中所述的修改完成后,在Android中重新编译成so文件,产物由原项目引用,在iOS中直接修改该文件,从而实现js环境能够使用该方法。加载module前,先判断是否存在,再判断是否已加载到内存中,若都没有,则去读取对应文件加载。在module第一次加载成功之后,若有页面引用,则不会再次读取文件系统中的文件,而是从js环境中直接获取该module。
五、应用启动
5.1、客户端打包时将编译产物放入项目assets目录下,应用首次启动时会将该zip文件拷贝到Android系统/data/data/下应用对应的目录。
5.2、应用启动时先去加载(二)中打包生成的主bundle,然后根据客户端中的配置去Android文件系统/data/data/目录下使用(三)中所述方法加载编译产物的js文件。加载成功后会得到入口页面module,将其传给主bundle中导航控制器,从而显示入口页面。
采用了本发明的ReactNative框架中实现bundle的模块化打包处理的系统,实现了将ReactNative的bundle拆分成主bundle和项目bundle,还实现了将项目bundle拆分成基于项目目录结构的单页面bundle。由于bundle的拆分,解决了bundle文件过大的问题,显著提升了应用启动速度。另外,由于项目文件的bundle编译以及编译产物的统一管理,从而实现多团队使用同一套基础主bundle,提高团队开发协作能力。
在此说明书中,本发明已参照其特定的实施例作了描述。但是,很显然仍可以作出各种修改和变换而不背离本发明的精神和范围。因此,说明书和附图应被认为是说明性的而非限制性的。
Claims (8)
1.一种ReactNative框架中实现bundle的模块化打包处理的系统,其特征在于,所述的系统包括:
module定义模块,用于将以数字id来标识module修改为以具有业务含义的字符串来标识;
主bundle编译模块,与所述的module定义模块相连接,用于将ReactNative基础组件和项目代码打包成bundle文件,分别为主bundle打包文件和项目打包文件;
项目文件编译模块,与所述的主bundle编译模块相连接,用于在对项目大量文件进行编译时,每个文件生成对应的一个bundle编译产物;
同步方式加载js模块,与所述的项目文件编译模块相连接,用于通过在JSCExecutor.cpp文件中增加pmRequire,实现在js环境直接调用pmRequire来动态加载本地文件系统中的js文件;
文件加载模块,与所述的同步方式加载js模块相连接,用于加载打包生成的主bundle,并根据客户端中的配置下加载编译产物的js文件,加载得到入口页面module,传至主bundle中导航控制器,显示入口页面;
所述的module定义模块取组件相对于node_modules目录的相对路径,通过修改打包过程中createModuleIdFactory函数替换module标识id。
2.根据权利要求1所述的ReactNative框架中实现bundle的模块化打包处理的系统,其特征在于,所述的主bundle打包文件为编译及打包ReactNative基础组件和入口导航器的文件。
3.根据权利要求1所述的ReactNative框架中实现bundle的模块化打包处理的系统,其特征在于,所述的项目打包文件为对单个文件进行编译并打包的文件。
4.根据权利要求1所述的ReactNative框架中实现bundle的模块化打包处理的系统,其特征在于,所述的主bundle打包文件通过配置的方式设置首页的module标识,并以此动态加载本地文件实现首页的展示。
5.根据权利要求4所述的ReactNative框架中实现bundle的模块化打包处理的系统,其特征在于,所述的配置方式为设置App项目内config.json文件的入口页面module标识字段,入口导航器通过获取该字段,以同步加载方式获取Component实现加载首页。
6.根据权利要求1所述的ReactNative框架中实现bundle的模块化打包处理的系统,其特征在于,所述的项目文件编译模块将文件编译成ReactNative中module定义的格式。
7.根据权利要求1所述的ReactNative框架中实现bundle的模块化打包处理的系统,其特征在于,所述的同步方式加载js模块直接读取本地文件系统中的js文件,并加载到ReactNative的js环境中。
8.根据权利要求1所述的ReactNative框架中实现bundle的模块化打包处理的系统,其特征在于,所述的文件加载模块对应多个目录,包括主bundle以及多个页面bundle。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011090847.5A CN112181432B (zh) | 2020-10-13 | 2020-10-13 | ReactNative框架中实现bundle的模块化打包处理的系统 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011090847.5A CN112181432B (zh) | 2020-10-13 | 2020-10-13 | ReactNative框架中实现bundle的模块化打包处理的系统 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN112181432A CN112181432A (zh) | 2021-01-05 |
CN112181432B true CN112181432B (zh) | 2024-05-17 |
Family
ID=73949818
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202011090847.5A Active CN112181432B (zh) | 2020-10-13 | 2020-10-13 | ReactNative框架中实现bundle的模块化打包处理的系统 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN112181432B (zh) |
Families Citing this family (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN112988260B (zh) * | 2021-01-25 | 2023-07-04 | 杭州衣科云科技有限公司 | 应用冷启动优化方法、装置、计算机设备及存储介质 |
CN113392346B (zh) * | 2021-06-16 | 2023-09-12 | 北京豆萌信息技术有限公司 | 资源文件的路径处理方法、装置、电子设备及存储介质 |
CN114327688B (zh) * | 2022-03-15 | 2022-07-08 | Tcl通讯科技(成都)有限公司 | 基于微前端的数据处理方法、框架、存储介质及终端设备 |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2014107808A1 (en) * | 2013-01-11 | 2014-07-17 | La Presse, Ltée | System and method for generating a digital edition |
CN106843869A (zh) * | 2017-01-16 | 2017-06-13 | 百融(北京)金融信息服务股份有限公司 | 一种前端开发工程化系统和方法 |
CN110580183A (zh) * | 2019-09-02 | 2019-12-17 | 江苏艾佳家居用品有限公司 | 一种移动应用组件化实现方法 |
-
2020
- 2020-10-13 CN CN202011090847.5A patent/CN112181432B/zh active Active
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2014107808A1 (en) * | 2013-01-11 | 2014-07-17 | La Presse, Ltée | System and method for generating a digital edition |
CN106843869A (zh) * | 2017-01-16 | 2017-06-13 | 百融(北京)金融信息服务股份有限公司 | 一种前端开发工程化系统和方法 |
CN110580183A (zh) * | 2019-09-02 | 2019-12-17 | 江苏艾佳家居用品有限公司 | 一种移动应用组件化实现方法 |
Also Published As
Publication number | Publication date |
---|---|
CN112181432A (zh) | 2021-01-05 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN112181432B (zh) | ReactNative框架中实现bundle的模块化打包处理的系统 | |
US10795660B1 (en) | Live code updates | |
CN106775723B (zh) | 基于Android平台的系统固件定制的方法和Android设备 | |
US9965259B2 (en) | System for translating diverse programming languages | |
CN112286504B (zh) | 移动APP中基于ReactNative实现小程序开发并加载的方法 | |
CN105426223B (zh) | 应用加载方法和装置 | |
CN113826070A (zh) | 工作流引擎工具 | |
CN111459539B (zh) | 基于镜像分层的持续集成流水线运行方法及装置 | |
CN101040260A (zh) | 平台无关的动态链接 | |
CN102292736A (zh) | 利用合成容器的协作环境项目可扩展性 | |
EP3698241A1 (en) | Using semantic annotations to control compatibility behaviors | |
CN112711403B (zh) | 游戏开发同步的方法、装置、计算机设备和存储介质 | |
CN111857801A (zh) | 一种移动应用的构建方法 | |
CN107066257A (zh) | 一种由Unity到安卓的封装方法及装置 | |
CN102799444A (zh) | 跨平台打包程序的方法及装置 | |
CN114047938B (zh) | 一种构建镜像的方法、装置、设备及可读存储介质 | |
CN109857432A (zh) | 一种游戏应用的热更新方法和装置 | |
CN113656040A (zh) | 程序组件调试更新方法及其相应的装置、设备、介质 | |
CN112835568A (zh) | 一种项目构建方法和装置 | |
CN112328241B (zh) | 一种应用程序开发中创建Android库模块依赖关系的方法及装置 | |
CN115016785B (zh) | 一种用于多环境共用的前端项目打包方法及装置 | |
CN115658140A (zh) | 一种sdk的打包方法、装置、终端以及存储介质 | |
CN103678687A (zh) | 基于配置系统的项目创建方法及装置 | |
CN115576560A (zh) | 一种动态类加载器的热重载方法、装置、设备和介质 | |
CN114201174A (zh) | 混合移动应用的构建方法、装置、电子设备及存储介质 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |