ReactNative - 打离线包 (二) 携程 Moles-Packer 框架命令打包
Moles-Packer 是由携程框架团队研发的，与携程 Moles 框架配套使用的 React Native 打包和拆包工具，同时支持原生的 React Native 项目。
安装
执行命令进行 Moles-Packer 的安装
npm install -g moles-packer
Moles Packer 安装完成后，将创建两个命令：
-
moles-packer
用于项目构建，可编译业务代码并将其打包，也可同时创建公包。 -
moles-packer-common
仅用于创建公包及相应的元数据文件。
可通过命令进行 moles-packer 版本的查询
moles-packer -v
moles-packer-common -v
上述操作步骤如下:
React Native 版本要求
由上可知，Moles-Packer暂时还不支持 React Native 的 0.38.0 以上的版本, 目前 React Native 的最新版本为 0.40.0 。
0.38.0使用moles-packer
因此，构建 React Native 工程需要使用 0.37.0 以下的版本。
Moles-Packer 打包
首先你得有个 React Native 的工程。这里以空工程打包为例:
1.创建适合 Moles-Packer 的 React Native 版本
react-native init ReactNativeV37 --version 0.37.0
2.执行打包命令
moles-packer --entry index.ios.js --platform ios --standalone --output ./ios/build --verbose
3.查看执行完打包命令后的结果
[MOLES_PACKER] -- options parsed --
name value
-------------- ---------------------------------------------------
base "/Users/QCL/ReactNative/ReactNativeV37"
bundle true
commonOutput "BASE/ios/build/moles.common"
dev false
entry "BASE/index.ios.js"
execOnRequired false
input "BASE/"
isCLI true
metaOutput "BASE/ios/build/moles.meta.json"
minify false
output "BASE/ios/build"
platform "ios"
single false
standalone true
verbose true
[MOLES_PACKER] -- Process common bundle --
[COMMON] Create common bundle ( ios )
[2017-1-16 14:25:15] <START> Initializing Packager
[2017-1-16 14:25:15] <START> Building in-memory fs for JavaScript
[2017-1-16 14:25:15] <END> Building in-memory fs for JavaScript (164ms)
[2017-1-16 14:25:15] <START> Building Haste Map
[2017-1-16 14:25:15] <END> Building Haste Map (96ms)
[2017-1-16 14:25:15] <END> Initializing Packager (333ms)
[2017-1-16 14:25:15] <START> Transforming modules
[2017-1-16 14:25:15] <END> Transforming modules (385ms)
bundle: start
bundle: finish
bundle: Writing bundle output to: .moles/common.ios.jsbundle
bundle: Writing sourcemap output to: .moles/common.ios.sourcemap.json
bundle: Done writing bundle output
bundle: Done writing sourcemap output
[COMMON] Re-create common bundle ( ios )
[COMMON] Minify common bundle ( ios )
[COMMON] COMMON BUNDLE: /Users/QCL/ReactNative/ReactNativeV37/ios/build/moles.common/common.ios.jsbundle ( ios )
[COMMON] COMMON META: /Users/QCL/ReactNative/ReactNativeV37/ios/build/moles.common/common.ios.json ( cross )
[MOLES_PACKER] Common modules ready.
[MOLES_PACKER] -- Process business code --
[SOURCE] index.ios.js ( entry )
[BUNDLE] - ( top )
[BUNDLE] index.ios.js ( entry )
[BUNDLE] - ( bottom )
[TARGET] index.ios.jsbundle ( bundle )
[TARGET] moles.meta.json ( meta )
[MOLES_PACKER] -- end --
[MOLES_PACKER] See /Users/QCL/ReactNative/ReactNativeV37/ios/build
目录层级
4.将 index.ios.jsbundle 引入工程
index.ios.jsbundle
5.修改 AppDelegate.m 中的源码
NSURL *jsCodeLocation;
// jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
jsCodeLocation = [NSURL URLWithString:[[NSBundle mainBundle] pathForResource:@"index.ios.jsbundle" ofType:nil]];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"ReactNativeV37"
initialProperties:nil
launchOptions:launchOptions];
6.如果要离线真机测试或打包上传应用, 需要进行如下修改
因为 ReactNative 自带 Chrome 的 Debug 模式, 因此需要修改成 Release ，来关闭掉 Debug 模式
修改Release
7.打包上传或真机调试，与iOS工程无异。
具体步骤如下:
打包过程
打包过程中的问题
问题1: 找不到的 node-haste 模块
[MOLES_PACKER] -- Process common bundle --
module.js:474
throw err;
^
Error: Cannot find module 'node-haste/lib/DependencyGraph/docblock.js'
at Function.Module._resolveFilename (module.js:472:15)
at Function.Module._load (module.js:420:25)
at Module.require (module.js:500:17)
at require (internal/module.js:20:19)
at _create_common (/usr/local/lib/node_modules/moles-packer/lib/packCommon.js:37:17)
at _ME (/usr/local/lib/node_modules/moles-packer/lib/packCommon.js:282:18)
at _ME (/usr/local/lib/node_modules/moles-packer/lib/pack.js:22:22)
at Object. (/usr/local/lib/node_modules/moles-packer/bin/pack.js:4:1)
at Module._compile (module.js:573:32)
at Object.Module._extensions..js (module.js:582:10)
解决方案
npm install -g node-haste
问题2:找不到的 transform-es5-property-mutators 插件
[MOLES_PACKER] Common modules ready.
[MOLES_PACKER] -- Process business code --
[SOURCE] index.ios.js ( entry )
start ... react / es2015 ... /usr/local/lib/node_modules/moles-packer/node_modules/babel-core/lib/transformation/file/options/option-manager.js:176
throw new ReferenceError(messages.get("pluginUnknown", plugin, loc, i, dirname));
^
ReferenceError: Unknown plugin "transform-es5-property-mutators" specified in "base" at 0, attempted to resolve relative to "/Users/QCL/ReactNative/v031"
at /usr/local/lib/node_modules/moles-packer/node_modules/babel-core/lib/transformation/file/options/option-manager.js:176:17
at Array.map (native)
at Function.normalisePlugins (/usr/local/lib/node_modules/moles-packer/node_modules/babel-core/lib/transformation/file/options/option-manager.js:154:20)
at OptionManager.mergeOptions (/usr/local/lib/node_modules/moles-packer/node_modules/babel-core/lib/transformation/file/options/option-manager.js:229:36)
at OptionManager.init (/usr/local/lib/node_modules/moles-packer/node_modules/babel-core/lib/transformation/file/options/option-manager.js:374:12)
at File.initOptions (/usr/local/lib/node_modules/moles-packer/node_modules/babel-core/lib/transformation/file/index.js:216:65)
at new File (/usr/local/lib/node_modules/moles-packer/node_modules/babel-core/lib/transformation/file/index.js:139:24)
at Pipeline.transform (/usr/local/lib/node_modules/moles-packer/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at _transform_react (/usr/local/lib/node_modules/moles-packer/lib/transform.js:137:24)
at _one (/usr/local/lib/node_modules/moles-packer/lib/transform.js:110:9)
解决方案
npm install -g babel-plugin-transform-es5-property-mutators
问题3: 找不到的 es2015 模块
[MOLES_PACKER] -- Process business code --
[SOURCE] index.ios.js ( entry )
start ... react / es2015 ... /usr/local/lib/node_modules/moles-packer/node_modules/babel-core/lib/transformation/file/options/option-manager.js:334
throw e;
^
Error: Couldn't find preset "es2015" relative to directory "/Users/QCL/ReactNative/ReactNativeV37"
at /usr/local/lib/node_modules/moles-packer/node_modules/babel-core/lib/transformation/file/options/option-manager.js:299:19
at Array.map (native)
at OptionManager.resolvePresets (/usr/local/lib/node_modules/moles-packer/node_modules/babel-core/lib/transformation/file/options/option-manager.js:270:20)
at OptionManager.mergePresets (/usr/local/lib/node_modules/moles-packer/node_modules/babel-core/lib/transformation/file/options/option-manager.js:259:10)
at OptionManager.mergeOptions (/usr/local/lib/node_modules/moles-packer/node_modules/babel-core/lib/transformation/file/options/option-manager.js:244:14)
at OptionManager.init (/usr/local/lib/node_modules/moles-packer/node_modules/babel-core/lib/transformation/file/options/option-manager.js:374:12)
at File.initOptions (/usr/local/lib/node_modules/moles-packer/node_modules/babel-core/lib/transformation/file/index.js:216:65)
at new File (/usr/local/lib/node_modules/moles-packer/node_modules/babel-core/lib/transformation/file/index.js:139:24)
at Pipeline.transform (/usr/local/lib/node_modules/moles-packer/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at _transform_react (/usr/local/lib/node_modules/moles-packer/lib/transform.js:137:24)
解决方案:
npm install babel-preset-es2015
问题4: 找不到 stage-0 模块
[MOLES_PACKER] -- Process business code --
[SOURCE] index.ios.js ( entry )
start ... react / es2015 ... /usr/local/lib/node_modules/moles-packer/node_modules/babel-core/lib/transformation/file/options/option-manager.js:334
throw e;
^
Error: Couldn't find preset "stage-0" relative to directory "/Users/QCL/ReactNative/ReactNativeV37"
at /usr/local/lib/node_modules/moles-packer/node_modules/babel-core/lib/transformation/file/options/option-manager.js:299:19
at Array.map (native)
at OptionManager.resolvePresets (/usr/local/lib/node_modules/moles-packer/node_modules/babel-core/lib/transformation/file/options/option-manager.js:270:20)
at OptionManager.mergePresets (/usr/local/lib/node_modules/moles-packer/node_modules/babel-core/lib/transformation/file/options/option-manager.js:259:10)
at OptionManager.mergeOptions (/usr/local/lib/node_modules/moles-packer/node_modules/babel-core/lib/transformation/file/options/option-manager.js:244:14)
at OptionManager.init (/usr/local/lib/node_modules/moles-packer/node_modules/babel-core/lib/transformation/file/options/option-manager.js:374:12)
at File.initOptions (/usr/local/lib/node_modules/moles-packer/node_modules/babel-core/lib/transformation/file/index.js:216:65)
at new File (/usr/local/lib/node_modules/moles-packer/node_modules/babel-core/lib/transformation/file/index.js:139:24)
at Pipeline.transform (/usr/local/lib/node_modules/moles-packer/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at _transform_react (/usr/local/lib/node_modules/moles-packer/lib/transform.js:137:24)
解决方案:
npm install babel-preset-stage-0
问题3和问题4的
解决方案二：
使用 subl 打开 package.json
subl package.json
在 packjson.json 的 devDependencies 中添加如下代码:
"babel-preset-stage-0": "6.16.0",
"babel-preset-es2015": "6.18.0"
添加完成后，如下:
{
"name": "ReactNativeV37",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "15.3.2",
"react-native": "0.37.0"
},
"jest": {
"preset": "jest-react-native"
},
"devDependencies": {
"babel-jest": "18.0.0",
"babel-preset-react-native": "1.9.1",
"jest": "18.1.0",
"jest-react-native": "18.0.0",
"react-test-renderer": "15.3.2",
"babel-preset-stage-0": "6.16.0",
"babel-preset-es2015": "6.18.0"
}
}
最后执行
npm install
参考文章
我在 Github 提的 issues
从零开始，使用 Moles Packer
React Native 版本
CtripMoles 的简书
网友评论
npm ERR! code EPEERINVALID
npm ERR! peerinvalid The package react-native@0.37.0 does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer jest-react-native@18.0.0 wants react-native@>=0.38.0
请问该如何解决呢==