Alita

English

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

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

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

ReactRepos展示：

React Native
小程序(by Alita)
Web(by react-native-web)

Alita 原理相关

1. 
   

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

   
   


2. 
   

   更进一步的Alita对JSX的处理可以抽象为对对声明式语法的处理，所以Flutter理论上也是可以处理的，详见flutter_mp

   
   


3. 
   

   关于React和小程序的数据交互方式，请看：React与小程序的数据交换

   
   

Features

• 完备的React语法支持。runtime阶段处理JSX语法，对JSX支持更加完善，可以在组件内任何地方出现JSX片段，包括属性传递JSX片段，render方法之外的JSX片段等等，


• 基于webpack打包构建，完善小程序npm能力，支持对小程序包体积分析，一键自动小程序分包等


• React生命周期，React Native组件/API


• 支持小程序内置组件/自定义组件直接使用


• 动画


• 支持Redux，支持Mobx


• 支持typescript


• 不符合Alita语法限制的第三方库，需要手动扩展，扩展方式请查看

注意事项

由于不同平台的根本行差异，Alita对React Native应用有一些基本要求和限制。 除此以外，微信小程序本身就存在一些限制，比如包大小等。对这些限制，希望你有一个足够的了解。这样在使用Alita的过程中就不会出现莫名其妙的错误。

• 详细的说明了Alita转化的限制以及这些限制产生的原因限制&限制说明


• 一些尚未实现的组件，主要是平台相关组件，详见， 最终我们会提供alita-ui3端UI库，来补充这方面的不足。


• 当你的应用使用了第三方组件 且 此组件Alita不能直接转化，那么需要手动处理

Install

通过npm安装即可

npm install -g @areslabs/alita

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

Getting Started

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

当然你也可以使用如下的方式建立新的RN应用：
react-native init [项目名] && alita init [项目名]

alita init命令 会对rn项目做一些调整，并且安装alita转化所必须的库。

如果需要初始化typescript项目，请添加--typescript参数
react-native init [项目名] && alita init [项目名] --typescript

注意： RN 0.60 以后的项目，IOS需要依赖CocoaPods，导致初始化项目极其缓慢，可以使用其他版本的RN
react-native init [项目名] --version 0.59.9 && alita init [项目名]

项目初始化之后，小程序运行需要：

1. 
   

   cd [项目名]

   
   


2. 
   

   执行alita转化命令
   alita
   如果你需要边开发边看小程序效果可以添加--dev 参数，打开开发者模式：
   alita --dev

   
   


3. 
   

   这样，你在RN目录的wx-dist目录下就得到了一份小程序源代码

   
   


4. 
   

   微信开发者工具从wx-dist目录导入项目

   
   

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

命令行参数

alita命令有以下参数：

1. -v alita 版本


2. --dev 开发者模式，将监听RN源码修改，生成的文件较大，生产版本请禁用此参数


3. --config 指定配置文件


4. --analyzer 输出小程序js大小分布 （以后将会添加完整小程序代码分布）

Examples

下面是官方提供的RN项目案例，查看小程序效果，请进入相应目录执行alita --dev

HelloWorldRN, react-native 命令创建的项目，集成了alita所有特性，包括对小程序组件的直接使用。

ReactRepos，集成react-native-web，支持RN， 小程序，H5

Todo(redux实现)，Rudex Todo 项目

RoomMobx(mobx实现) Mobx项目案例

HelloWorldExpo, Expo命令创建的项目

配置文件

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

Copyright (c) ARES Labs