ReactNative - 打離線包 (二) 攜程 Moles-Packer 框架命令打包
Moles-Packer 是由攜程框架團(tuán)隊(duì)研發(fā)的酪穿，與攜程 Moles 框架配套使用的 React Native 打包和拆包工具吉嚣，同時(shí)支持原生的 React Native 項(xiàng)目管跺。
安裝
執(zhí)行命令進(jìn)行 Moles-Packer 的安裝
npm install -g moles-packer
Moles Packer 安裝完成后飞蹂，將創(chuàng)建兩個(gè)命令：
moles-packer
用于項(xiàng)目構(gòu)建系奉，可編譯業(yè)務(wù)代碼并將其打包，也可同時(shí)創(chuàng)建公包。moles-packer-common
僅用于創(chuàng)建公包及相應(yīng)的元數(shù)據(jù)文件炼杖。
可通過命令進(jìn)行 moles-packer 版本的查詢
moles-packer -v
moles-packer-common -v
上述操作步驟如下:
具體操作步驟如下
Moles-Packer 參數(shù)詳解
Options
--bundle [<bundle.js>] 指示將構(gòu)建結(jié)果合并輸出，該文件將被保存在 --output 指定的目錄中, 默認(rèn)情況下 bundle 中不包含公包模塊盗迟，除非使用 --standalone 選項(xiàng)坤邪。
--common-input 指定公包目錄，并在構(gòu)建過程中使用該目錄中的預(yù)制公包及其元數(shù)據(jù)文件罚缕。
--common-modules 指定公包中所包含的模塊艇纺，多個(gè)模塊之間使用逗號(hào)分隔。
--common-output 指定公包輸出目錄怕磨。當(dāng)選項(xiàng)值是相對(duì)路徑時(shí)喂饥，如果以 . 或 .. 起始，則相對(duì)于當(dāng)前工作目錄肠鲫；否則認(rèn)為相對(duì)于 --output 選項(xiàng)所指定的輸出目錄员帮。
--dev 開發(fā)模式下構(gòu)建的代碼，在運(yùn)行時(shí)可以輸出更多的調(diào)試信息导饲。
--entry 指定入口文件名稱讹语。 默認(rèn)為 index.js
--exec-on-required 當(dāng)且僅當(dāng)模塊首次被實(shí)際使用時(shí)鹅搪，執(zhí)行其相應(yīng)的定義程序。
--input 指定項(xiàng)目目錄。默認(rèn)為當(dāng)前目錄
--minify 默認(rèn)情形下抡草，Moles Packer 將保持輸出代碼的可讀性句占，不對(duì)其進(jìn)行壓縮和混淆千扔。
--output 指定輸出目錄砸烦。默認(rèn)為./build，如果該目錄不存在听盖，Moles Packer 會(huì)自動(dòng)創(chuàng)建胀溺。 如果該目錄已經(jīng)存在裂七，其中的文件有可能被覆蓋。
--platform 指定構(gòu)建輸出結(jié)果適用的操作系統(tǒng)平臺(tái)仓坞。如: ios
--standalone 是否輸出可獨(dú)立運(yùn)行的 bundle 文件背零。該選項(xiàng)應(yīng)與 --bundle 和 --platform 選項(xiàng)配合使用。
Moles-Packer 打包準(zhǔn)備
Moles-Packer 對(duì) React Native 版本有要求
React Native 版本要求
由上可知无埃，Moles-Packer暫時(shí)還不支持 React Native 的 0.38.0 以上的版本, 目前 React Native 的最新版本為 0.40.0 徙瓶。
0.38.0使用moles-packer
因此，構(gòu)建 React Native 工程需要使用 0.37.0 以下的版本嫉称。
Moles-Packer 打包
首先你得有個(gè) React Native 的工程侦镇。這里以空工程打包為例:
1.創(chuàng)建適合 Moles-Packer 的 React Native 版本
react-native init ReactNativeV37 --version 0.37.0
2.執(zhí)行打包命令
moles-packer --entry index.ios.js --platform ios --standalone --output ./ios/build --verbose
3.查看執(zhí)行完打包命令后的結(jié)果
[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
目錄層級(jí)
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.如果要離線真機(jī)測(cè)試或打包上傳應(yīng)用, 需要進(jìn)行如下修改
因?yàn)?ReactNative 自帶 Chrome 的 Debug 模式, 因此需要修改成 Release ，來關(guān)閉掉 Debug 模式
修改Release
7.打包上傳或真機(jī)調(diào)試澎埠，與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"
}
}
最后執(zhí)行
npm install
參考文章
我在 Github 提的 issues
從零開始蒲稳，使用 Moles Packer
React Native 版本
CtripMoles 的簡(jiǎn)書
