简单好用,无脑撸业务。
安装
通过 npm 安装即可
npm install -g alita
通过 yarn 安装即可
yarn global add alita
若有权限问题,需要 sudo
快速开始
新建项目
$ alita g app myApp
启动项目
$ cd myApp
$ yarn (或 npm i)
$ yarn start (或 npm start)
配置文档(9)
umi
alita 基于 umi ,支持 umi 的所有配置项。umi-plugin-react
的配置项在 umi
中配置。
如
export default {
umi: {
dva: {
immer: true,
},
antd: true,
polyfills: ['ie9'],
locale: {},
dynamicImport: {
webpackChunkName: true,
loadingComponent: './components/Loading.js',
},
hd: true
}
};
appType
- 类型:String
定义项目类型 ( 值为 pc 、 h5 、 cordova )
默认:
appType:'pc'
proxy
如果要代理请求到其他服务器,可以这样配:
"proxy": {
"/api": {
"target": "http://jsonplaceholder.typicode.com/",
"changeOrigin": true,
"pathRewrite": { "^/api" : "" }
}
}
然后访问 /api/users
就能访问到 http://jsonplaceholder.typicode.com/users 的数据。
retainLog
默认会在打包 ( build ) 的时候,移除 console.*
,保留 console.error
。
如果你需要在打包之后仍然保留 console
,请配置
retainLog:true
complexRoute
alita 默认只识别 index 文件( pages/*/index )生成路由,如果你需要嵌套路由功能,请配置
complexRoute:true
mainPath
alita 默认把 pages/index/index
文件作为根路由,如果你希望使用其他文件,请配置
mainPath:'/home'
tongjiCode
增加百度统计功能
tongjiCode:'baidu code'
gaCode
增加谷歌统计功能
gaCode:'google code'
keepalive
支持 keep alive 功能,底层实现是 react-router-cache-route ,如果你需要使用,请配置
keepalive:['/list']
keep alive 初始化
由于 umi 还不支持 keep alive ,暂时通过覆盖 umi 库文件的方式实现,所以每次重装模块之后都要先执行初始化
alita keepalive
配置中的页面,会被保持,你可以在不需要的时候手动解除
import { dropByCacheKey } from 'alita';
export default () => {
const clearCache = () => {
dropByCacheKey('/list');
};
return (
<Card>
<Button onClick={clearCache}>clear list page cache</Button>
</Card>
);
};
新建页面
新建空白页面
$ alita g pages home
新建区块页面
增加配置
export default {
appType: 'pc',
block: {
defaultGitUrl: 'https://github.com/ant-design/pro-blocks',
},
};
原生打包
修改配置
export default {
appType: 'cordova',
};
初始化 cordova 项目
$ alita cordova --init
生成 ios 项目
$ alita cordova --ios
生成 android 项目
$ alita cordova --android
注意:安卓开发的时候,启动时需要配置环境变量
"scripts":{
"start":"CORDOVA=android alita dev"
}
其他配套生态
接口翻译
米莱狄(Milady) 通过解析接口文档生成前端代码
后续还会加入接口版本控制等功能
图表封装
rc-charts 一个基于 BizCharts 的图表库
H5通用布局
alita-layout H5 通用布局,直接使用微信小程序的 API 定义,简单易用。
可以算是ant-design-pro-layout的补充项目
VC Code 插件
现在 VS Code 插件Umi Pro也支持alita了。
国际化
和阿里巴巴国际化全流程解决方案 kiwi 结合使用,能实现一键提取中文文案 、一键替换文本、一键翻译、一键导出文本等功能。配合 vscode 插件使用,甚至可以实现可视化操作功能,后续国际化版本甚至可以让客服人员点点鼠标就能高效快速完成。 (还未兼容umi的locale)
页面权限
直接新建 src/Authority.js 文件,然后在配置文件中,写上需要检测权限的页面 url 即可。甚至可以使用正则,通配符的形式进行页面矫权。
京东Alita
五月份的时候京东开源了一套把React Native代码转换成微信小程序代码的转换引擎工具,也叫做Alita。因为这个包发的是@areslabs/alita
,所以并没有注意到包名冲突问题。
通过npm安装, npm install -g @areslabs/alita
。
使用 alita -i myproject -o myprojectwp
将现有的Rn项目转化成小程序项目。
导致同时安装 alita
和 @areslabs/alita
时,会有命令冲突的情况发生。
社区
- 钉钉,请扫描下面的二维码加群
- 微信,扫描二维码添加机器人,回复alita进群
其他业务
其他业务需求都可以通过,插件的形式实现,有需要的项目按需添加,也是只要简单的更改配置文件即可,不需要写多余的代码。
我们将为你提供技术指导与技术支持,使umi更适用于你们内部业务,这一切都是免费的。
请告诉我们你的需求Alita/Issues 、umi/Issues 、 ant-design-pro/Issues