CN112181432A - ReactNative框架中实现bundle的模块化打包处理的系统 - Google Patents
ReactNative框架中实现bundle的模块化打包处理的系统 Download PDFInfo
- Publication number
- CN112181432A CN112181432A CN202011090847.5A CN202011090847A CN112181432A CN 112181432 A CN112181432 A CN 112181432A CN 202011090847 A CN202011090847 A CN 202011090847A CN 112181432 A CN112181432 A CN 112181432A
- Authority
- CN
- China
- Prior art keywords
- module
- file
- bundle
- 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.)
- Granted
Links
- 238000004806 packaging method and process Methods 0.000 title claims abstract description 55
- 238000012545 processing Methods 0.000 title claims abstract description 22
- 230000001360 synchronised effect Effects 0.000 claims abstract description 10
- 238000012858 packaging process Methods 0.000 claims description 6
- 238000012856 packing Methods 0.000 abstract description 9
- 238000000034 method Methods 0.000 description 32
- 238000011161 development Methods 0.000 description 11
- 230000006870 function Effects 0.000 description 7
- 230000004048 modification Effects 0.000 description 6
- 238000012986 modification Methods 0.000 description 6
- 241000408529 Libra Species 0.000 description 4
- 238000010586 diagram Methods 0.000 description 3
- 230000008569 process Effects 0.000 description 3
- 238000004891 communication Methods 0.000 description 2
- 238000009434 installation Methods 0.000 description 2
- 238000009877 rendering Methods 0.000 description 2
- 230000008859 change 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
- 230000002349 favourable effect Effects 0.000 description 1
- 230000009191 jumping Effects 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 230000002194 synthesizing effect Effects 0.000 description 1
Images
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 (9)
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中导航控制器，显示入口页面。
2.根据权利要求1所述的ReactNative框架中实现bundle的模块化打包处理的系统，其特征在于，所述的module定义模块取组件相对于node_modules目录的相对路径，通过修改打包过程中createModuleIdFactory函数替换module标识id。
3.根据权利要求1所述的ReactNative框架中实现bundle的模块化打包处理的系统，其特征在于，所述的主bundle打包文件为编译及打包ReactNative基础组件和入口导航器的文件。
4.根据权利要求1所述的ReactNative框架中实现bundle的模块化打包处理的系统，其特征在于，所述的项目打包文件为对单个文件进行编译并打包的文件。
5.根据权利要求1所述的ReactNative框架中实现bundle的模块化打包处理的系统，其特征在于，所述的主bundle打包文件通过配置的方式设置首页的module标识，并以此动态加载本地文件实现首页的展示。
6.根据权利要求5所述的ReactNative框架中实现bundle的模块化打包处理的系统，其特征在于，所述的配置方式为设置App项目内config.json文件的入口页面module标识字段，入口导航器通过获取该字段，以同步加载方式获取Component实现加载首页。
7.根据权利要求1所述的ReactNative框架中实现bundle的模块化打包处理的系统，其特征在于，所述的项目文件编译模块将文件编译成ReactNative中module定义的格式。
8.根据权利要求1所述的ReactNative框架中实现bundle的模块化打包处理的系统，其特征在于，所述的同步方式加载js模块直接读取本地文件系统中的js文件，并加载到ReactNative的js环境中。
9.根据权利要求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 true CN112181432A (zh) | 2021-01-05 |
| CN112181432B 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) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112988260A (zh) * | 2021-01-25 | 2021-06-18 | 杭州衣科云科技有限公司 | 应用冷启动优化方法、装置、计算机设备及存储介质 |
| CN113392346A (zh) * | 2021-06-16 | 2021-09-14 | 北京豆萌信息技术有限公司 | 资源文件的路径处理方法、装置、电子设备及存储介质 |
| CN114327688A (zh) * | 2022-03-15 | 2022-04-12 | 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 | 江苏艾佳家居用品有限公司 | 一种移动应用组件化实现方法 |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112988260A (zh) * | 2021-01-25 | 2021-06-18 | 杭州衣科云科技有限公司 | 应用冷启动优化方法、装置、计算机设备及存储介质 |
| CN113392346A (zh) * | 2021-06-16 | 2021-09-14 | 北京豆萌信息技术有限公司 | 资源文件的路径处理方法、装置、电子设备及存储介质 |
| CN113392346B (zh) * | 2021-06-16 | 2023-09-12 | 北京豆萌信息技术有限公司 | 资源文件的路径处理方法、装置、电子设备及存储介质 |
| CN114327688A (zh) * | 2022-03-15 | 2022-04-12 | Tcl通讯科技（成都）有限公司 | 基于微前端的数据处理方法、框架、存储介质及终端设备 |
| CN114327688B (zh) * | 2022-03-15 | 2022-07-08 | Tcl通讯科技（成都）有限公司 | 基于微前端的数据处理方法、框架、存储介质及终端设备 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112181432B (zh) | 2024-05-17 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112181432B (zh) | ReactNative框架中实现bundle的模块化打包处理的系统 | |
| CN106775723B (zh) | 基于Android平台的系统固件定制的方法和Android设备 | |
| CN110825362A (zh) | 低代码应用软件开发系统及方法 | |
| CN106569869A (zh) | 插件化打包方法及装置 | |
| CN109542445A (zh) | 一种Android插件化开发的方法和装置 | |
| US20050108690A1 (en) | System and method of generating applications for mobile devices | |
| CN101482817B (zh) | 基于黑盒的大粒度Java构件组装方法 | |
| CN105760168A (zh) | 一种代码文件自动生成方法及系统 | |
| CN112558980A (zh) | 多软件包管理方法及装置 | |
| US20090007081A1 (en) | System and Method of Generating Applications for Mobile Devices | |
| CN109542459A (zh) | 应用程序打包方法及装置、计算机装置及计算机存储介质 | |
| CN113826070A (zh) | 工作流引擎工具 | |
| CN112835975B (zh) | 一种在区块链中部署、更新、调用智能合约的方法 | |
| CN107133055B (zh) | 一种基于ClassLoader实现定制开发的方法 | |
| CN112286504A (zh) | 移动APP中基于ReactNative实现小程序开发并加载的方法 | |
| CN103309806A (zh) | 一种快速开发测试的装置及方法 | |
| CN102799444A (zh) | 跨平台打包程序的方法及装置 | |
| CN107066257A (zh) | 一种由Unity到安卓的封装方法及装置 | |
| CN107463405A (zh) | 一种应用程序的更新方法及装置 | |
| CN103761107A (zh) | 软件包定制的装置及方法 | |
| CN109857432A (zh) | 一种游戏应用的热更新方法和装置 | |
| CN115756451A (zh) | 一种多项目代码文件重用的方法、装置、设备、存储介质 | |
| CN112000334A (zh) | 页面开发方法、装置、服务器及存储介质 | |
| CN105511935A (zh) | 资源索引值的获取方法及装置 | |
| CN104063231A (zh) | 一种基于hit-tena的试验资源快速接入方法 |
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 |