Alita

Alita，战斗天使阿丽塔，原型是《铳梦》中一位不断战斗和自我超越的生化改造少女。

Alita是一套React Native代码转换引擎工具。与现有编译时方案不同，Alita对React语法有全新的处理方式，支持在运行时处理React语法，实现了React Native和微信小程序之间的主要组件对齐，可以用简洁、高效的方式把React Native代码转换成微信小程序代码。

Alita不是新的框架，也没有提出新的语法规则，她只做一件事，就是把你的React Native代码运行在微信小程序端。所以Alita的侵入性很低，选用与否，并不会对你的原有React Native开发方式造成太大影响。

React Native	微信小程序

Features

完备的React语法支持。runtime阶段处理JSX语法，对JSX支持更加完善，可以在组件内任何地方出现JSX片段，包括属性传递JSX片段，render方法之外的JSX片段等等，
React生命周期
React Native组件/API
动画
支持Redux
支持Mobx
支持小程序分包
支持typescript

Alita 使用前须知

主要以下几个方面的要求和限制，在您决定选用Alita作为跨端解决方案时，需要知晓如下的Alita限制。

转化之后的小程序，必须符合小程序的规范，比如最终压缩的代码小于2m，分包8m，路由深度不大于5层等。另外小程序页面需要配置在静态json文件中，限制了alita的路由必须是静态可分析的，所以alita只支持@areslabs/router
Alita相比其他编译时方案，大大解放了React语法的自由，但是出于潜在的性能考虑，Alita选用了微信小程序自定义组件来对齐React组件，这又带来了 Alita语法上的一些限制。

以上2点 Alita在转化的时候会对 代码预检测，对不符合的代码将会给出友好提升。这里可以看到相关要求和限制的具体文档要求与限制文档。

此外，RN开发者请注意：微信小程序npm包和RN的npm使用方式不同详见，所以对于第三方npm包，可能需要手动去处理（好消息：我们正在尝试引入webpack来处理这个问题），参考npm包处理说明。暂时只有RN官方组件可以直接使用，如需要使用其他三方组件或者自己的组件库请参考第三方组件库扩展

Alita 原理相关

Alita使用运行时React语法处理方案，区别现有社区使用的编译时方案，对React语法的支持更加完备，具体请看：一种让小程序支持JSX语法的新思路
关于React和小程序的数据交互方式，请看：React与小程序的数据交换

Install

通过npm安装即可

npm install -g @areslabs/alita

若-g有权限问题，需要sudo

Getting Started

我们在examples目录提供了丰富的样例代码，强烈建议你clone出一份，然后使用Alita转化，你可以在这些样例代码上尝试任何你想要的功能。

当然你也可以使用如下的方式建立新的RN应用：

    react-native init myproject && alita init myproject

alita init命令会对rn项目做一些调整。

如果需要初始化typescript项目，请添加--typescript参数

    react-native init myproject && alita init myproject --typescript

注意： RN 0.60 以后的项目，IOS需要依赖CocoaPods，导致初始化项目极其缓慢，可以使用其他版本的RN

    react-native init myproject --version 0.59.9 && alita init myproject

下面以myproject项目说明Alita的使用。

调用alita命令将其转化为微信小程序应用
```
alita -i myproject -o myprojectwp
```
如果你需要边开发边看小程序效果可以添加--watch 参数，watch模式会监听文件修改：
```
alita -i myproject -o myprojectwp --watch
```
这样，你在myprojectwp目录就得到了一份小程序源代码。进入myprojectwp 目录，安装相关依赖
```
cd myprojectwp
npm install
```
微信开发者工具从myprojectwp目录导入项目
在微信开发者工具下构建npm，工具 --> 构建npm。如下图
概率性的，由于构建npm发生在导入项目之后，可能会出现找不到包的错误，出现控制台错误，此时需要重启开发者工具，或者重新导入项目，详见。

这样React Native应用就运行在了微信小程序

命令行参数

alita命令有以下参数：

-v 打印alita 版本
-i React Native 源代码目录
-o 转化生成的小程序源代码目录
--config 指定配置文件
--watch 监听模式
--comp 转化RN组件，而不是整个项目，配合 --comp，一般有 --wxName 指定小程序报名，详情

Examples

以下提供了一些样例代码以及他们转化出来的小程序代码。当然你完全可以选择其他小程序源码输出目录，自行转化。

运行转化生成的微信小程序：

安装微信开发者工具
进入生成的小程序目录：npm install
用开发者工具打开生成的小程序目录（老版本的开发者工具，在目录上新建小程序即可，新版本的开发者工具，需要导入项目）
在开发者工具上点击：工具 --> 构建npm。

HelloWorldExpo, Expo命令创建的项目，转化出来的小程序在HelloWorldWP。

HelloWorldRN, react-native 命令创建的项目。代码逻辑同HelloWorldExpo

Todo(redux实现)，react-native 命令创建的项目，转化出来的小程序在TodoWP

ReactRepos，react-native 命令创建的项目，转化出来的小程序在ReactReposWP

RoomMobx Mobx项目，转化出来的小程序在RoomMobxWP

SubpackagesDemo，通过小程序分包集成的方式，集成的小程序包

配置文件

Alita可以通过参数--config指定一个配置文件。当你的项目只使用了React Native官方组件和API的时候，这个配置文件是可以忽略的，使用系统默认配置就可以，但是当你的React Native应用足够复杂的，就需要使用配置文件了。

详细介绍

已有RN项目转化

Alita的设计目标是要尽可能无损的转换RN应用，即使是已经存在的RN应用。但是不可避免的，已有项目会更多的触及到Alita的限制，包括路由组件，动画组件。当你需要转化已有RN项目时，我们梳理了需要注意和必要的修改点

详细介绍

Alita组件库

在项目开发中，仅仅使用 RN 基本组件和 API，是很难满足需要的。我们在内部使用 Alita 的过程中，积累了很多常用的三端组件，包括ScrollTabView，ViewPager，SegmentedControl等等，我们正在剥离和梳理这些组件，很快会发布兼容三端的 Alita 组件库。此组件库也是我们日后的工作重点之一，我们将会不断优化和扩展新组件。

更新日志

本项目遵从 Angular Style Commit Message Conventions，更新日志由 conventional-changelog 自动生成。完整日志请点击 CHANGELOG.md。

alitajs

社区另有一个alitajs/alita，那是一个专注业务的Web全流程方案。我们重名了，带来的困扰很抱歉:sweat_smile::sweat_smile::sweat_smile: 。所以如果你需要的是Web全流程方案，请点击

开发交流

QQ群	微信公众号

License

MIT License

lxq2537664558 / alita Goto Github PK

alita's Introduction