crn-cli
Version:
The Ctrip React Native CLI Tools
107 lines (101 loc) • 4.4 kB
Markdown
## CRN-CLI
crn-cli脚手架对RN原始的CLI进行二次包装，提供从工程创建，服务启动，在已集成框架的App运行RN代码等常用功能，方便开发人员快速上手。
```
Commands:
init 建立并初始化CRN工程，基于React Native 0.59.0,React 16.8.3
start 启动CRN服务,默认端口8081
run-ios 启动IOS模拟器，运行App
run-android 运行Android App
pack 打包，生成common包和biz包
Options:
-h, --help 显示命令帮助
-v, --version 显示版本
```
## 安装及使用
### 安装
```bash
$ npm install -g crn-cli
```
### 创建工程
```bash
$ crn-cli init CRNDemo
```
CRNDemo工程结构说明：
```bash
├── android //android源码工程
├── ios //ios源码工程
├── App.js //JS源码
├── app.json //JS工程名配置文件
├── babel.config.js //babel配置文件
├── icon.png //图片资源
├── index.js //JS入口文件
├── package.json //工程配置文件
├── crn_common_entry.js //common包入口文件
├── rn-cli.config.js //rn cli配置文件
├── metro.config.js //metro配置文件
├── .buckconfig //buck配置文件
├── .flowconfig //flow配置文件
├── .gitattributes //git配置文件
├── .gitignore //git配置文件
├── .watchmanconfig //watchman配置文件
```
### 运行工程
进入目录运行项目
```bash
$ cd CRNDemo
$ crn-cli run-ios #在iOS模拟器上运行Demo
$ crn-cli run-android #在Android真机上运行Demo
```
说明：
1. 本地启动server的模式运行，默认端口8081。
2. iOS开发环境依赖Node、Watchman 和 React Native 命令行工具以及 Xcode。
3. Android开发环境依赖Node、Watchman 和 React Native 命令行工具以及 JDK 和 Android Studio。
4. 首次执行需要build native源码，过程会比较慢。
## 打包
### 配置
在当前工程目录下`package.json`中配置打包参数。
```
"packConfig": {
"entryFile": "index.js", //打包入口文件
"bundleOutput": "publish", //打包产物输出目录
"packageName": "CRNDemo", //包名
"dev": false //打包环境
}
```
### 1.执行打包命令
进入工程目录执行
```
$ crn-cli pack
```
打包完成后会生成`publish`文件夹，目录如下：
```
├── publish
//框架包rn_common目录结构
├── rn_common
├── common_android.js /Android 框架代码,包括RN组件
├── common_ios.js //iOS 框架代码,包括RN组件
├── baseMapping.json //common模块ID映射表
├── pack.config //打包日志文件，记录打包时间，RN版本
//业务包rn_CRNDemo目录结构
├── rn_CRNDemo
├── assets //资源目录,定制过资源打包/加载流程，iOS/Android目录一致
├── js-diff //Android和iOS平台差异代码，Android优先加载该文件夹中的业务代码
├── js-modules //业务js代码目录
├── _crn_config_v2 //配置文件，记录业务代码所在文件夹，默认是js-modules，同时记录业务代码入口模块文件名
├── _crn_unbundle //CRN打包格式标识文件，该文件存在时候，才当做CRN包格式加载
├── buMapping.json //业务模块ID映射表
├── pack.config //打包日志文件，记录打包时间，RN版本
```
rn_common为框架包，可以在后台线程加载，业务包在进入业务的时候才开始加载。
### 2.拷贝打包产物到APP中
拷贝`rn_common`,`rn_CRNDemo`到`./ios/CRNDemo/webapp`，`./android/app/src/main/assets/webapp`目录下。
### 3.运行APP访问页面
#### CLI运行
```
$ crn-cli run-ios --url /rn_CRNDemo/_crn_config?CRNType=1+CRNModuleName=CRNDemo
$ crn-cli run-android --url /rn_CRNDemo/_crn_config?CRNType=1+CRNModuleName=CRNDemo
```
参数说明：`CRNType`,`CRNModuleName`必传
#### IDE运行
`xcode`打开`./ios/CRNDemo.xcodeproj`工程，运行
`Android Studio`导入`./android`工程，Run