Git Product home page Git Product logo

alita's Introduction

Alita

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

npm Version npm Downloads npm License

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

借助Alita引擎,可以实现用React Native进行多终端业务开发,除了官方支持的Android、iOS外,还可以额外支持微信小程序和Web(可以通过react-native-web进行转换)。同时也支持把现有React Native项目低成本转换成微信小程序代码,大大降低了多终端业务的开发成本。

React Native 微信小程序

Install

通过npm安装即可

npm install -g @areslabs/alita

-g有权限问题,需要sudo

Getting Started

我们在examples目录提供了丰富的样例代码,包括HelloWorld(Expo命令创建的HelloWorldExpo, 和react-native命令创建的HelloWorldRN), Todo, ReactRepos。 强烈建议你clone出一份,然后使用Alita转化,你可以在这些样例代码上尝试任何你想要的功能。

当然你也可以建立自己的RN应用:

    react-native init myproject

注意 应用的路由需要使用@areslabs/router组件

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

  1. 调用alita命令将其转化为微信小程序应用

    alita -i myproject -o myprojectwp
    
  2. 这样,你在myprojectwp目录就得到了一份小程序源代码。 进入myprojectwp 目录, 安装相关依赖

    cd myprojectwp
    npm install
    
  3. 微信开发者工具上运行myprojectwp代码。参考微信小程序文档,导入myprojectwp 目录, 运行。

    Alita生成的小程序使用了小程序的npm功能, 所以需要在微信开发者工具下构建npm, 工具 --> 构建npm。如下图

    buildnpm

    (如果开发者工具报: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的方式需要参考

另外, React Native命令默认会创建最新的版本,而目前最新的 0.45 及以上版本需要下载 boost 等几个第三方库编译。这些库在国内即便翻墙也很难下载成功,导致很多人无法运行iOS项目!!!中文网在论坛中提供了这些库的国内下载链接

命令行参数

alita命令有以下参数:

  1. -v 打印alita 版本
  2. -i React Native 源代码目录
  3. -o 转化生成的小程序源代码目录
  4. --config 指定配置文件

Examples

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

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

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

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

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

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

要求与限制

主要有3个方面的要求和限制

  1. 转化之后的小程序,必须符合小程序的规范, 比如最终压缩的代码小于4m,分包8m, 路由深度不大于5层等。

  2. Alita本身的一些限制 详见要求与限制静态限制

  3. 如果使用了第三方React Native组件,需要使用自定义组件库扩展 方式进行扩展

配置文件

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

详细介绍

eslint检查

虽然Alita支持了大部分的React语法,但是还是有一些情况Alita无法处理,比如原生RN动画库。另外Alita在转化代码的过程中,使用了一些保留字。我们希望这些来自Alita的限制可以近早的被发现,所以我们提供了一个eslint plugin。通过配置此plugin,可以让你在使用Alita转化代码之前,对你的代码进行静态的检查。

详细介绍

已有RN项目转化

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

详细介绍

开发交流

QQ群 微信公众号

License

MIT License

Copyright (c) ARES Labs

alita's People

Contributors

jameshen17 avatar ykforerlang avatar yvettelau avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.