crn-cli

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          显示版本

安装及使用

安装

$ npm install -g crn-cli

创建工程

$ crn-cli init CRNDemo

CRNDemo工程结构说明：

├── 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配置文件

运行工程

进入目录运行项目

$ 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