{"id":4814,"url":"https://github.com/areslabs/alita","last_synced_at":"2025-04-08T09:06:42.587Z","repository":{"id":53180312,"uuid":"186744765","full_name":"areslabs/alita","owner":"areslabs","description":"一套把React Native代码转换成微信小程序代码的转换引擎工具。我们不造轮子，不发明新框架，只是提供工具把RN扩展到微信小程序端。","archived":false,"fork":false,"pushed_at":"2020-08-14T15:26:29.000Z","size":12511,"stargazers_count":1992,"open_issues_count":21,"forks_count":133,"subscribers_count":43,"default_branch":"master","last_synced_at":"2025-04-01T07:46:02.098Z","etag":null,"topics":["alita","mini-program","react","react-native","redux","wechat","wechat-mini-program","wexin"],"latest_commit_sha":null,"homepage":"https://areslabs.github.io/alita","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/areslabs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-15T03:47:21.000Z","updated_at":"2025-03-30T05:40:21.000Z","dependencies_parsed_at":"2022-08-13T02:20:40.656Z","dependency_job_id":null,"html_url":"https://github.com/areslabs/alita","commit_stats":null,"previous_names":[],"tags_count":52,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/areslabs%2Falita","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/areslabs%2Falita/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/areslabs%2Falita/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/areslabs%2Falita/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/areslabs","download_url":"https://codeload.github.com/areslabs/alita/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247809964,"owners_count":20999816,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alita","mini-program","react","react-native","redux","wechat","wechat-mini-program","wexin"],"created_at":"2024-01-05T20:17:25.007Z","updated_at":"2025-04-08T09:06:42.541Z","avatar_url":"https://github.com/areslabs.png","language":"JavaScript","funding_links":[],"categories":["Components","JavaScript","Projects List"],"sub_categories":["Other Platforms"],"readme":"# Alita\n[English](./README_en.md)\n\n\u003e Alita，战斗天使阿丽塔，原型是《铳梦》中一位不断战斗和自我超越的生化改造少女。\n\n[![npm Version](https://img.shields.io/npm/v/@areslabs/alita-core.svg)](https://www.npmjs.com/package/@areslabs/alita)\n[![npm Downloads](https://img.shields.io/npm/dt/@areslabs/alita.svg)](https://www.npmjs.com/package/@areslabs/alita)\n[![npm License](https://img.shields.io/npm/l/@areslabs/alita-core.svg)](https://www.npmjs.com/package/@areslabs/alita)\n[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)\n\n\nAlita是一款把React Native运行在小程序平台的工具引擎。与现有编译时方案不同，Alita对React语法有全新的处理方式，支持在运行时处理React语法，实现了React Native和微信小程序之间的主要组件对齐，可以用简洁、高效的方式把React Native代码转换成微信小程序代码。  \n\nAlita不是新的框架，也没有提出新的语法规则，她只做一件事，就是把你的React Native代码运行在微信小程序端。所以Alita的侵入性很低，选用与否，并不会对你的原有React Native开发方式造成太大影响。 \n\n[ReactRepos](https://github.com/areslabs/alita/tree/master/examples/ReactRepos)展示：\n\u003ctable\u003e\n   \u003ctr\u003e\n   \t    \u003ctd\u003eReact Native\u003c/td\u003e\n   \t    \u003ctd\u003e小程序(by Alita)\u003c/td\u003e\n   \t    \u003ctd\u003eWeb(by react-native-web)\u003c/td\u003e\n   \u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003e\u003cimg src=\"./docs/static/rnalita.gif\"/\u003e\u003c/td\u003e\n\t\t\u003ctd\u003e\u003cimg src=\"./docs/static/wxalita.gif\"/\u003e\u003c/td\u003e\n\t\t\u003ctd\u003e\u003cimg src=\"./docs/static/webalita.jpg\"/\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n\u003c/table\u003e\n\n## Alita 原理相关\n1. Alita使用运行时React语法处理方案，区别现有社区使用的编译时方案，对React语法的支持更加完备，具体请看：[一种让小程序支持JSX语法的新思路](https://areslabs.github.io/alita/%E4%B8%80%E7%A7%8D%E8%AE%A9%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%94%AF%E6%8C%81JSX%E8%AF%AD%E6%B3%95%E7%9A%84%E6%96%B0%E6%80%9D%E8%B7%AF.html)\n\n2. 更进一步的Alita对JSX的处理可以抽象为对`对声明式语法的处理`，所以Flutter理论上也是可以处理的，详见[flutter_mp](https://github.com/areslabs/flutter_mp)\n\n3. 关于React和小程序的数据交互方式，请看：[React与小程序的数据交换](https://areslabs.github.io/alita/mini-react%E4%B8%8E%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9A%84%E6%95%B0%E6%8D%AE%E4%BA%A4%E6%8D%A2%E6%96%B9%E5%BC%8F.html)\n\n\n## Features\n* 完备的React语法支持。runtime阶段处理JSX语法，对JSX支持更加完善，可以在组件内任何地方出现JSX片段，包括属性传递JSX片段，render方法之外的JSX片段等等， \n* [基于webpack打包构建](https://areslabs.github.io/alita/基于webpack构建.html)，完善小程序npm能力，支持对小程序包体积分析，[一键自动小程序分包](https://areslabs.github.io/alita/一键自动小程序分包.html)等\n* `React`生命周期，`React Native`组件/API \n* 支持[小程序内置组件/自定义组件直接使用](https://areslabs.github.io/alita/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%86%85%E7%BD%AE%E7%BB%84%E4%BB%B6\u0026%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8.html)\n* [动画](https://areslabs.github.io/alita/%E5%8A%A8%E7%94%BB.html)\n* [支持Redux](https://areslabs.github.io/alita/%E6%94%AF%E6%8C%81Redux.html)，[支持Mobx](https://areslabs.github.io/alita/%E6%94%AF%E6%8C%81mobx.html)\n* 支持`typescript`\n* 不符合Alita语法限制的第三方库，需要手动扩展，扩展方式请[查看](https://areslabs.github.io/alita/%E7%AC%AC%E4%B8%89%E6%96%B9%E7%BB%84%E4%BB%B6%E5%BA%93%E6%89%A9%E5%B1%95.html)\n\n## 注意事项\n由于不同平台的根本行差异，Alita对React Native应用有一些基本要求和限制。 除此以外，微信小程序本身就存在一些限制，比如包大小等。对这些限制，希望你有一个足够的了解。这样在使用Alita的过程中就不会出现莫名其妙的错误。\n\n* 详细的说明了Alita转化的限制以及这些限制产生的原因[限制\u0026限制说明](https://areslabs.github.io/alita/%E9%99%90%E5%88%B6\u0026%E9%99%90%E5%88%B6%E8%AF%B4%E6%98%8E.html)\n* 一些尚未实现的组件，主要是平台相关组件，[详见](https://areslabs.github.io/alita/%E6%9C%AA%E5%AE%9E%E7%8E%B0%E7%BB%84%E4%BB%B6%E5%92%8CAPI.html)， 最终我们会提供`alita-ui`3端UI库，来补充这方面的不足。\n* 当你的应用使用了第三方组件 且 此组件Alita不能直接转化，那么需要[手动处理](https://areslabs.github.io/alita/%E7%AC%AC%E4%B8%89%E6%96%B9%E7%BB%84%E4%BB%B6%E5%BA%93%E6%89%A9%E5%B1%95.html)\n  \n\n## Install\n通过npm安装即可\n\n`npm install -g @areslabs/alita`\n\n若`-g`有权限问题，需要`sudo`\n\n## Getting Started\n我们在[examples](https://github.com/areslabs/alita/tree/master/examples)目录提供了丰富的样例代码， 强烈建议你clone出一份，然后使用Alita转化，你可以在这些样例代码上尝试任何你想要的功能。 \n\n\n当然你也可以使用如下的方式建立新的RN应用：\n```\n    react-native init [项目名] \u0026\u0026 alita init [项目名]\n``` \n\n`alita init`命令 会对rn项目做一些调整，并且安装alita转化所必须的库。 \n\n如果需要初始化`typescript`项目，请添加`--typescript`参数\n```\n    react-native init [项目名] \u0026\u0026 alita init [项目名] --typescript\n``` \n\n**注意：** RN 0.60 以后的项目，IOS需要依赖`CocoaPods`，导致初始化项目极其缓慢，可以使用其他版本的RN\n```\n    react-native init [项目名] --version 0.59.9 \u0026\u0026 alita init [项目名]\n``` \n\n项目初始化之后，小程序运行需要：\n\n1. `cd [项目名]`\n\n2. 执行alita转化命令\n    ```\n    alita \n    ```\n    如果你需要边开发边看小程序效果可以添加`--dev` 参数，打开开发者模式：\n    ```\n    alita --dev\n    ```\n\n2. 这样，你在RN目录的`wx-dist`目录下就得到了一份小程序源代码\n\n3. [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html)从`wx-dist`目录导入项目\n\n这样React Native应用就运行在了微信小程序，**Have fun！！**\n\n## 命令行参数\nalita命令有以下参数：\n\n1. -v  alita 版本\n2. --dev  开发者模式，将监听RN源码修改，生成的文件较大，生产版本请禁用此参数\n3. --config 指定配置文件\n4. --analyzer 输出小程序js大小分布 （以后将会添加完整小程序代码分布）\n \n\n## Examples\n下面是官方提供的RN项目案例，查看小程序效果，请进入相应目录执行` alita --dev ` \n\n[HelloWorldRN](https://github.com/areslabs/alita/tree/master/examples/HelloWorldRN), react-native 命令创建的项目，集成了alita所有特性，包括对小程序组件的直接使用。\n\n[ReactRepos](https://github.com/areslabs/alita/tree/master/examples/ReactRepos)，集成`react-native-web`，支持RN， 小程序，H5\n\n[Todo(redux实现)](https://github.com/areslabs/alita/tree/master/examples/Todo)，Rudex Todo 项目\n\n[RoomMobx(mobx实现)](https://github.com/areslabs/alita/tree/master/examples/RoomMobx) Mobx项目案例\n\n[HelloWorldExpo](https://github.com/areslabs/alita/tree/master/examples/HelloWorldExpo), Expo命令创建的项目\n\n\n## 配置文件\nAlita可以通过参数`--config`指定一个配置文件。当你的项目只使用了React Native官方组件和API的时候，这个配置文件是可以忽略的，使用系统默认配置就可以，但是当你的React Native应用足够复杂的，就需要使用配置文件了。\n\n[详细介绍](https://areslabs.github.io/alita/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6.html)\n\n\n## 已有RN项目集成\nAlita的设计目标是要尽可能无损的转换RN应用，即使是已经存在的RN应用。但是不可避免的，已有项目会更多的触及到Alita的限制，包括路由组件，动画组件。当你需要转化已有RN项目时，我们梳理了需要注意和必要的修改点\n\n[详细介绍](https://areslabs.github.io/alita/已有项目集成.html)\n\n## Alita组件库\n在项目开发中，仅仅使用 RN 基本组件和 API，是很难满足需要的。我们在内部使用 Alita 的过程中，积累了很多常用的三端组件，包括ScrollTabView，ViewPager，SegmentedControl等等，我们正在剥离和梳理这些组件，很快会发布兼容三端的 Alita 组件库。此组件库也是我们日后的工作重点之一，我们将会不断优化和扩展新组件。\n\n## 更新日志\n本项目遵从 [Angular Style Commit Message Conventions](https://gist.github.com/stephenparish/9941e89d80e2bc58a153)，更新日志由 `conventional-changelog` 自动生成。完整日志请点击 [CHANGELOG.md](./CHANGELOG.md)。\n\n## alitajs\n社区另有一个[alitajs/alita](https://github.com/alitajs/alita)，那是一个专注业务的Web全流程方案。我们重名了，带来的困扰很抱歉:sweat_smile::sweat_smile::sweat_smile: 。 所以如果你需要的是Web全流程方案，请[点击](https://github.com/alitajs/alita)\n\n\n## 使用案例\n请在[这里](https://github.com/areslabs/alita/issues/64)查找\n\n## 开发交流\n\n\u003ctable\u003e\n   \u003ctr\u003e\n   \t    \u003ctd\u003eQQ群\u003c/td\u003e\n   \t    \u003ctd\u003e微信公众号\u003c/td\u003e\n   \u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003e\u003cimg src=\"./docs/static/qqgroup.jpg\"/\u003e\u003c/td\u003e\n\t\t\u003ctd\u003e\u003cimg src=\"./docs/static/gzh.jpg\"/\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n\u003c/table\u003e\n\n## License\nMIT License\n\nCopyright (c) ARES Labs\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fareslabs%2Falita","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fareslabs%2Falita","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fareslabs%2Falita/lists"}