React Native打包之Moles Packer

2017-01-17  本文已影响139人  IT小妞儿

注:本篇跟Moles Packer提供的文档地址内容类似,仅是加入了自己在操作过程中出现的问题

遗留问题

Module AppRegistry is not a registered callable module

自己打包生成的common.ios.jsbundle,运行就会出现此问题,但是把官方demo的common.ios.jsbundle copy到自己的项目中,就不会出现这种问题,不知道各位大神有没有出现,欢迎讨论

Moles Packer

安装

版本要求 moles_packer >= 0.1.9

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

# 全局安装完成后,将在系统中创建两个命令
moles-pack -v
moles-pack-common -v

创建应用

创建

# 创建一个工作区并切换到该目录,后续的创建和构建操作都将在此目录中完成。
mkdir workspace
cd workspace

# 创建一个名为 v037 的应用。
# 命令执行完成名,将在工作区创建一个应用同名目录,存放与应用有关的一切。
react-native init v037 --version 0.37.0

# 切换到应用目录,并检查其版本。
cd v037
react-native --version
# 本机运行结果
# react-native-cli: 2.0.1
# react-native: 0.37.0

运行

通过打开Xcode运行或react-native run-ios

使用Moles Packer进行构建

# 切换到应用目录。
cd v037

# 构建一个适用于 iOS 平台的可独立运行的版本。
# 打开 --verbose 开关可获取更多构建细节。
moles-packer --entry index.ios.js --platform ios --standalone --output ./build --verbose

构建完成,在./build目录下生成以下目录

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

在模拟器中运行构建结果

!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];
......
```

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

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

模仿moles-packer项目过程

按上述步骤生成项目

.
├── __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构建打包成bundle文件

构建命令

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

构建成功后的build目录,构建后均为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项目出现的问题

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"
[MOLES_PACKER] -- Process common bundle --

    [MOLES_PACKER] react-native v0.38.0 has not been supported yet. We will try to handle it.
[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`
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

全局安装完成后,将在系统中创建两个命令

# 打印帮助信息。
moles-packer --help

# 显示版本。
moles-packer --version

参数详解

缺省值是指该选项缺省时,程序默认的选项值
选项缺省值是指该选项存在但未赋值时,程序默认的选项值

--bundle 选项为例:

moles-packer
# 此时,--bundle 选项值为其“缺省值”。

moles-packer --bundle
# 此时,--bundle 选项值为其“选项值缺省”值。
OUTPUT/index.ios.jsbundle       # 适用于 iOS 平台的业务包或可独立运行的程序包
OUTPUT/index.android.jsbundle   # 适用于 Android 平台的业务包或或独立运行的程序包
OUTPUT/index.jsbundle           # 跨平台的业务包
+ Moles Packer 构建的可独立运行的程序包,必须是平台相关的,故其文件名中也包括平台名称
+ bundle文件中默认不包含公包模块,除非使用了`--standalone`选项
上一篇下一篇

猜你喜欢

热点阅读