feat(alita): 添加init命令

alita 添加init命令，可以方便的初始化alita项目

README.md

@@ -4,7 +4,7 @@
 > Alita，战斗天使阿丽塔，原型是《铳梦》中一位不断战斗和自我超越的生化改造少女。
 
 [![npm Version](https://img.shields.io/npm/v/@areslabs/alita.svg)](https://www.npmjs.com/package/@areslabs/alita)
-[![npm Downloads](https://img.shields.io/npm/dt/@areslabs/wx-react.svg)](https://www.npmjs.com/package/@areslabs/alita)
+[![npm Downloads](https://img.shields.io/npm/dt/@areslabs/alita.svg)](https://www.npmjs.com/package/@areslabs/alita)
 [![npm License](https://img.shields.io/npm/l/@areslabs/alita.svg)](https://www.npmjs.com/package/@areslabs/alita)
 
 
@@ -45,17 +45,22 @@ Alita不是新的框架，也没有提出新的语法规则，她只做一件事
 若`-g`有权限问题，需要`sudo`
 
 ## Getting Started
-我们在[examples](https://github.com/areslabs/alita/tree/master/examples)目录提供了丰富的样例代码，包括HelloWorld（Expo命令创建的HelloWorldExpo， 和react-native命令创建的HelloWorldRN）， Todo， ReactRepos。 强烈建议你clone出一份，然后使用Alita转化，你可以在这些样例代码上尝试任何你想要的功能。 
+我们在[examples](https://github.com/areslabs/alita/tree/master/examples)目录提供了丰富的样例代码， 强烈建议你clone出一份，然后使用Alita转化，你可以在这些样例代码上尝试任何你想要的功能。 
 
 
-当然你也可以建立自己的RN应用：
+当然你也可以使用如下的方式建立新的RN应用：
 ```
-    react-native init myproject
+    react-native init myproject && alita init myproject
 ``` 
 
-**注意** 应用的路由需要使用[@areslabs/router](https://areslabs.github.io/alita/%E8%B7%AF%E7%94%B1.html)组件
+`alita init`命令 会对rn项目做一些调整。 
 
-下面以`myproject`项目说明Alita的使用，由于Alita在转化的时候，依赖[@areslabs/router](https://areslabs.github.io/alita/%E8%B7%AF%E7%94%B1.html)，所以请先参考Example目录下项目，做些许修改，然后在使用alita转化
+**注意：** RN 0.60 以后的项目，IOS需要依赖`CocoaPods`，导致初始化项目极其缓慢，可以使用其他版本的RN
+```
+    react-native init myproject --version 0.59.9 && alita init myproject
+``` 
+
+下面以`myproject`项目说明Alita的使用。
 
 1. 调用alita命令将其转化为微信小程序应用
     ```
@@ -68,21 +73,16 @@ Alita不是新的框架，也没有提出新的语法规则，她只做一件事
     npm install
     ```
 
-3. 在[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html)上运行`myprojectwp`代码。参考[微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/)，导入`myprojectwp `目录， 运行。
+3. [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html)从`myprojectwp`目录导入项目
 
-   **Alita生成的小程序使用了小程序的npm功能， 所以需要在微信开发者工具下构建npm， 工具 --> 构建npm。如下图**
+4. 在微信开发者工具下构建npm， 工具 --> 构建npm。如下图
    
    ![buildnpm](./static/buildnpm.jpg)
    
-   (**如果开发者工具报：`module "xxx" is not defined"`，说明npm模块没有构建好，需要点击上图构建。**) 
 
-这样React Native应用就运行在了微信小程序
-
-**注意**一般我们有两种方式创建React Native应用，一种是使用react-native命令， 另一种是使用expo。 这两种方式Alita都可以转化，但是不管是哪一种方式
-创建的项目，都会在项目根目录创建App.js， App.json文件。但是这两个文件在微信小程序平台有特别的意义，所以必须对这两个文件**重新命名**。 
-react-native 命令创建的项目只需要把App.js 重命名比如RNApp.js即可， 而expo的方式需要[参考](https://docs.expo.io/versions/latest/sdk/register-root-component/#what-if-i-want-to-name-my)
+5. 概率性的，由于构建npm发生在导入项目之后，可能会出现找不到包的错误，出现控制台错误，此时需要重启开发者工具，或者重新导入项目，[详见](https://github.com/areslabs/alita/issues/23)。
 
-另外， React Native命令默认会创建最新的版本，而目前最新的 0.45 及以上版本需要下载 boost 等几个第三方库编译。这些库在国内即便翻墙也很难下载成功，导致很多人无法运行iOS项目！！！中文网在论坛中提供了这些库的[国内下载链接](http://bbs.reactnative.cn/topic/4301/ios-rn-0-45%E4%BB%A5%E4%B8%8A%E7%89%88%E6%9C%AC%E6%89%80%E9%9C%80%E7%9A%84%E7%AC%AC%E4%B8%89%E6%96%B9%E7%BC%96%E8%AF%91%E5%BA%93-boost%E7%AD%89)
+这样React Native应用就运行在了微信小程序
 
 ## 命令行参数
 alita命令有以下参数：

rn-template/index.js

@@ -0,0 +1,5 @@
+import {AppRegistry} from 'react-native';
+import App from './src/index';
+import {name as appName} from './app.json';
+
+AppRegistry.registerComponent(appName, () => App);

rn-template/src/HelloWorld.js

@@ -0,0 +1,64 @@
+import React, { Component } from "react";
+import { StyleSheet, Text, View, Platform } from "react-native"
+
+/**
+ * @areslabs/wx-animated 是参考小程序API实现的一套可以运行在React Native，小程序上的动画
+ * 详情参考：https://areslabs.github.io/alita/%E5%8A%A8%E7%94%BB.html
+ */
+import {AnimatedImage, createAnimation} from '@areslabs/wx-animated'
+
+import rnLogoPng from './rn_logo.png'
+
+export default class HelloWorld extends Component {
+
+    state = {
+        logoAni: null,
+    }
+
+    componentDidMount() {
+        this.logoAni()
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+
+                <AnimatedImage
+                    animation={this.state.logoAni}
+                    source={rnLogoPng}
+                    style={styles.logo}
+                />
+
+                <Text>
+                    Hello {Platform.OS}!
+                </Text>
+            </View>
+
+        );
+    }
+
+    logoAni(num = 1) {
+        const ani = createAnimation({
+            duration: 5000,
+        })
+        ani.rotateZ(360 * num)
+        ani.step()
+        this.setState({
+            logoAni: ani.export(() => {
+                this.logoAni(num + 1)
+            })
+        })
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center"
+    },
+    logo: {
+        width: 100,
+        height: 100
+    }
+})

rn-template/src/index.js

@@ -0,0 +1,42 @@
+/**
+ * 定义Router的文件，被称为入口文件，由于小程序的页面必须预先定义在 app.json 文件，json文件是静态的，所以入口文件的处理发生在编译阶段
+ * 这就要求入口文件需要足够的静态可分析。
+ *
+ * 具体对入口文件的限制，请参考：https://areslabs.github.io/alita/%E5%85%A5%E5%8F%A3%E6%96%87%E4%BB%B6.html
+ */
+
+import React, {PureComponent} from 'react'
+
+/**
+ * alita转化的项目必须使用：@areslabs/router 路由，详细文档：https://areslabs.github.io/alita/%E8%B7%AF%E7%94%B1.html
+ */
+import {Router, Route, TabRouter} from '@areslabs/router'
+
+import HelloWorld from './HelloWorld'
+
+export default class App extends PureComponent {
+
+    render() {
+
+        return (
+            <Router
+                wxNavigationOptions={{
+                    // 小程序导航条配置
+                    navigationBarTitleText: "HelloWorld",
+                    navigationBarBackgroundColor: "#ffffff",
+                    navigationBarTextStyle: "black",
+                }}
+
+                navigationOptions={{
+                    // rn 导航条配置
+                    title: 'HelloWorld'
+                }}
+            >
+                {/*
+                  * 页面一定要在Router里面明确定义，即使应用只有一个页面
+                  */}
+                <Route key={"A"} component={HelloWorld}/>
+            </Router>
+        )
+    }
+}

src/index.js

@@ -16,6 +16,7 @@ import filewatch from './filewatch/index'
 import geneWXFileStruc from './util/geneWXFileStruc'
 import getExtCompPathMaps from './util/getExtCompPathMaps'
 import geneWXPackageJSON from './util/geneWXPackageJSON'
+import initProject from './util/initProject'
 import program from 'commander'
 
 colors.setTheme({
@@ -91,6 +92,10 @@ const options = getopts(process.argv, {
     },
 })
 
+if (options._.includes('init')) {
+    initProject(options._)
+    process.exit()
+}
 
 const DEFAULTCONFIG = {
     name: '需要一个名字！',
@@ -190,7 +195,9 @@ function main() {
         watchMode: !!options.watch,
         tranComp: !!options.component,
         configObj,
-        beta: options.beta
+        beta: options.beta,
+
+        outdir: options.outdir
     }
 
     global.execArgs = {

src/util/initProject.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Areslabs.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import path from 'path'
+import fse from 'fs-extra'
+import {successInfo} from './util'
+
+export default function initProject(operands) {
+    const initIndex = operands.indexOf('init')
+    const projectName = operands[initIndex + 1]
+
+    if (!projectName) {
+        console.log('alita初始化 请指定项目名！'.error)
+        return
+    }
+
+    const targetpath = path.resolve(projectName)
+
+    const tempDir = path.resolve(__dirname, '..', '..', 'rn-template')
+    fse.copySync(tempDir, targetpath)
+
+    const appJSPath = path.resolve(targetpath, 'App.js')
+    if (fse.existsSync(appJSPath)) {
+        fse.unlinkSync(appJSPath)
+    }
+
+    const pjsonPath = path.resolve(targetpath, 'package.json')
+    const packageObj = fse.readJsonSync(pjsonPath)
+    packageObj.dependencies = {
+        "@areslabs/router": "^1.0.0",
+        "@areslabs/wx-animated": "^1.0.0",
+        ...packageObj.dependencies,
+    }
+    fse.outputJsonSync(pjsonPath, packageObj, {spaces: '  '})
+    console.log('  Run instructions for 小程序:'.blue)
+    console.log(`    • alita -i ${projectName} -o [目标小程序目录]   （若需要监听文件修改添加参数：--watch）`.black)
+}