create-alita v3.3.3

Umi 的封装脚手架，但又不仅仅是一个脚手架，还是一种开发提效生态

简单好用，无脑撸业务。

安装

通过 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