注：本篇跟Moles Packer提供的文檔地址內(nèi)容類似妆兑，僅是加入了自己在操作過程中出現(xiàn)的問題

遺留問題

Module AppRegistry is not a registered callable module

自己打包生成的common.ios.jsbundle背蟆，運行就會出現(xiàn)此問題豌研，但是把官方demo的common.ios.jsbundle copy到自己的項目中，就不會出現(xiàn)這種問題贬丛，不知道各位大神有沒有出現(xiàn)撩银，歡迎討論

Moles Packer

• github地址
• 中文文檔

安裝

版本要求 moles_packer >= 0.1.9

# 全局安裝
npm install -g moles-packer

# 全局安裝完成后，將在系統(tǒng)中創(chuàng)建兩個命令
moles-pack -v
moles-pack-common -v

創(chuàng)建應(yīng)用

創(chuàng)建

# 創(chuàng)建一個工作區(qū)并切換到該目錄豺憔，后續(xù)的創(chuàng)建和構(gòu)建操作都將在此目錄中完成额获。
mkdir workspace
cd workspace

# 創(chuàng)建一個名為 v037 的應(yīng)用。
# 命令執(zhí)行完成名恭应，將在工作區(qū)創(chuàng)建一個應(yīng)用同名目錄抄邀，存放與應(yīng)用有關(guān)的一切。
react-native init v037 --version 0.37.0

# 切換到應(yīng)用目錄昼榛，并檢查其版本撤摸。
cd v037
react-native --version
# 本機運行結(jié)果
# react-native-cli: 2.0.1
# react-native: 0.37.0

運行

通過打開Xcode運行或react-native run-ios

使用Moles Packer進行構(gòu)建

# 切換到應(yīng)用目錄。
cd v037

# 構(gòu)建一個適用于 iOS 平臺的可獨立運行的版本褒纲。
# 打開 --verbose 開關(guān)可獲取更多構(gòu)建細節(jié)。
moles-packer --entry index.ios.js --platform ios --standalone --output ./build --verbose

構(gòu)建完成钥飞，在./build目錄下生成以下目錄

.
├── index.ios.jsbundle
├── moles.common
│   ├── common.ios.jsbundle
│   └── common.ios.json
└── moles.meta.json

在模擬器中運行構(gòu)建結(jié)果

• 用構(gòu)建結(jié)果取代應(yīng)用源代碼

• 需啟動一個本地HTTP服務(wù)莺掠，并且通過該服務(wù)訪問index.ios.jsbundle文件

  • 本機使用XAMPP，window電腦可使用WAMP（親測读宙，使用node的http-server彻秆，會下載鏈接）
  • http://localhost/index.ios.jsbundle，具體URL根據(jù)個人配置略有不同

  !function(_){_.__DEV__=!1,_.__BUNDLE_START_TIME__=Date.now()}("undefined"!=typeof global?global:"undefined"!=typeof self?self:this);
  

!function(r){"use strict";function t(r,t){r in u||(u[r]={factory:t,hasError:!1,isInitialized:!1,exports:void 0})}function i(r){var t=u[r];
......
```

• 在Xcode中，更改AppDelegate.m文件唇兑，在模擬器中重新啟動應(yīng)用酒朵，此時運行的包就是我們剛剛打好的bundle包

//  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

  jsCodeLocation = [NSURL URLWithString:@"http://localhost/index.ios.jsbundle"];

模仿moles-packer項目過程

按上述步驟生成項目

• 并添加如下三個.ios.js文件

.
├── __tests__
├── android
├── build
├── index.android.js
├── index.ios.js
├── ios
├── node_modules
├── package.json
├── reactcommonbridge1.ios.js
├── reactcommonbridge2.ios.js
└── reactseperatedbridge.ios.js

通過Moles Packer構(gòu)建打包成bundle文件

構(gòu)建命令

moles-packer --entry reactcommonbridge1.ios.js --platform ios --bundle --verbose
moles-packer --entry reactcommonbridge2.ios.js --platform ios --bundle --verbose
moles-packer --entry reactseperatedbridge.ios.js --platform ios --bundle --verbose

構(gòu)建成功后的build目錄，構(gòu)建后均為index.ios.jsbundle扎附，自行更改包名

.
├── moles.common
│   ├── common.ios.jsbundle
│   └── common.ios.json
├── moles.meta.json
├── reactcommonbridge1.ios.jsbundle
├── reactcommonbridge2.ios.jsbundle
└── reactseperatedbridge.ios.jsbundle

模仿moles-packer項目出現(xiàn)的問題

• 出現(xiàn)如下問題蔫耽，在項目環(huán)境中運行npm install moles-packer

start ... react / es2015 ... /Users/liupuyan/.nvm/versions/node/v5.11.0/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/liupuyan/Desktop/workspace/rn37demo"

• 若React Native版本為0.38.0之上，會出現(xiàn)如下問題

[MOLES_PACKER] -- Process common bundle --

    [MOLES_PACKER] react-native v0.38.0 has not been supported yet. We will try to handle it.

• 本機使用0.37.0留夜，出現(xiàn)如下問題

[MOLES_PACKER] -- Process common bundle --
module.js:341
throw err;
^

Error: Cannot find module 'node-haste/lib/DependencyGraph/docblock.js'

解決方案：全局安裝node-haste `npm install -g node-haste`

• 項目中實際模塊名ReactExample匙铡，但是打包后模塊名統(tǒng)一是MOLES，如果更改則出現(xiàn)如下問題

Application ReactExample has not been registered. This is either due to a require() error during initialization or failure to call AppRegistry.registerComponent.

Moles Packer命令詳解

版本要求 moles_packer >= 0.3.0

全局安裝完成后碍粥，將在系統(tǒng)中創(chuàng)建兩個命令

• moles-pack
  • 用于項目構(gòu)建鳖眼，可編譯業(yè)務(wù)代碼并將其打包，也可同時創(chuàng)建公包
• moles-pack-common
  • 僅用于創(chuàng)建公包及相應(yīng)的元數(shù)據(jù)文件

# 打印幫助信息嚼摩。
moles-packer --help

# 顯示版本钦讳。
moles-packer --version

參數(shù)詳解

缺省值是指該選項缺省時，程序默認的選項值
選項缺省值是指該選項存在但未賦值時枕面，程序默認的選項值

--bundle 選項為例：

moles-packer
# 此時愿卒，--bundle 選項值為其“缺省值”。

moles-packer --bundle
# 此時膊畴，--bundle 選項值為其“選項值缺省”值掘猿。

• --bundle [<bundle.js>]
  • 指示將構(gòu)建結(jié)果合并輸出，該文件將被保存在--output指定的目錄中

OUTPUT/index.ios.jsbundle       # 適用于 iOS 平臺的業(yè)務(wù)包或可獨立運行的程序包
OUTPUT/index.android.jsbundle   # 適用于 Android 平臺的業(yè)務(wù)包或或獨立運行的程序包
OUTPUT/index.jsbundle           # 跨平臺的業(yè)務(wù)包

+ Moles Packer 構(gòu)建的可獨立運行的程序包唇跨，必須是平臺相關(guān)的稠通，故其文件名中也包括平臺名稱
+ bundle文件中默認不包含公包模塊，除非使用了`--standalone`選項

• --deve

  • 在開發(fā)模式下構(gòu)建的代碼买猖，在運行時可以輸出更多的調(diào)試信息

• --entry <entry/file/basename>

  • 缺省值 index.js
  • 指定入口文件名稱

• --platform ios | android | cross

  • 缺省值 cross
    指定構(gòu)建輸出結(jié)果適用的操作系統(tǒng)平臺
    如果打包結(jié)果需要跨平臺通用改橘，開發(fā)人員須確保業(yè)務(wù)代碼中沒有引用平臺相關(guān)的模塊，否則請分別執(zhí)行命令玉控，以獲取平臺相關(guān)的業(yè)務(wù)包

• --standalone

  • 是否輸出可獨立運行的bundle文件
  • 該選項應(yīng)與--bundle 和 --platform選項配合使用

• --minify

  • 默認情形下飞主，Moles Packer 將保持輸出代碼的可讀性，不對其進行壓縮和混淆高诺。如需獲得更小尺寸的構(gòu)建結(jié)果碌识，請打開 --minify開關(guān)

• --verbose

  • 打開此開關(guān)可獲取更多構(gòu)建細節(jié)

• --input <path/to/project/dir>\

  • 缺省值 . 當前目錄
  • 指定項目目錄

• --output <path/to/output/dir>

  • 缺省值 ./build 當前目錄的build子目錄
  • 指定輸出目錄（不存在則創(chuàng)建，如果存在虱而，則會覆蓋相關(guān)文件）

• --help

  • 打印幫助信息
  • 出現(xiàn)該參數(shù)筏餐，其他所有參數(shù)將被忽略

• -h

  • 等同于--help