@cloudlu/cli

yl-cli 封装了一些常用代码规范。

• eslint - js 代码规范检测.
• stylelint - scss 代码规范检测
• prettier - 代码格式化
• commitlint - git commit 规范化
• commit changelog - 根据 commit 信息自动生成 changelog 文档
• 提供了 request
• 提供了 config 配置能力
• 命令支持
  • yl-cli component xxx 创建组件
  • yl-cli page xxx 创建 page

此 cli 兼容 Mac Windows 以及 Linux。

Quick Overview

npx @cloudlu/cli create my-app
cd my-app
npm start

也可全局安装使用

npm install @cloudlu/cli -g
yl create my-app
cd my-app
npm start

使用之前，请确保本地已经配置了 tfs ssh key.

生成的项目结构如下： . ├── .husky ├── .vscode #vscode 配置文件，团队内共享 ├── config # umi 配置 ├── scripts # node 脚本 ├── src/ │ ├── components │ ├── config/ #运行时配置 │ │ ├── config.dev.ts │ │ ├── config.prod.ts │ │ ├── config.staging.ts │ │ └── index.ts │ ├── infra/ #存放业务相关通用方法 │ │ └── request.tsx # 请求 │ ├── services #业务请求 │ ├── types 通用的 ts 类型 │ └── utils # 业务无关通用方法 ├── .env ├── Dockerfile ├── README.md ├── tsconfig.json └── typings.d.ts

常用命令

• yl-cli component [component-name] -to [target-dir] 创建组件
• yl-cli page [page-name] -to [target-dir] 创建 page
• yl-cli service [service-name] 创建 service 到 services 文件夹
• yl-cli lint [--force] 生成 lint 相关文件

自定义命令模板

以 yl-cli component 举例，如果项目根目录存在 .template/component 文件夹 则创建组件时会以 .template/component 目录下的文件为模板进行创建。

现有项目模板

模板存放于 tfs 上，当前存在一下三类模板：

| 模板名称 | 对应 umi 模板 | 用户可选择 | | ---------- | -------------- | ---------- | | Simple App | Simple App | 是 | | Pro App | Ant Design Pro | 是 | | H5 App | H5 App | 是 | | 公共模板 | Ant Design Pro | 否 |

用户最终生成的项目规则如下：

• Simple App = TEMPLATE_COMMON + SIMPLE_APP
• Pro App = TEMPLATE_COMMON + PRO_APP
• H5 App = TEMPLATE_COMMON + H5_APP

用户侧最终生成的模板文件为两种模板仓库的叠加，其中 TEMPLATE_COMMON 文件权重要低于与其合并的模板。

模板配置

如果要增加新的模板，请在 src/utils/repo/config.ts 中增加对应的模板配置。

// src/utils/repo/config.ts

export const REPOS_MAP: Record<REPO_KEYS_ENUM, RepoConfig> = {
  [REPO_KEYS_ENUM.SIMPLE_APP]: {
    value: REPO_KEYS_ENUM.SIMPLE_APP,
    name: 'Simple App',
    path: 'ssh://tfs.yicall.com:22/Default/1Call%E6%A0%B8%E5%BF%83%20-%20%E5%9F%BA%E7%A1%80%E7%BB%84%E4%BB%B6/_git/yunlu-frontend-template-simple',
  },
  [REPO_KEYS_ENUM.PRO_APP]: {
    value: REPO_KEYS_ENUM.PRO_APP,
    name: 'Pro App',
    path: 'ssh://tfs.yicall.com:22/Default/1Call%E6%A0%B8%E5%BF%83%20-%20%E5%9F%BA%E7%A1%80%E7%BB%84%E4%BB%B6/_git/yunlu-frontend-template-pro',
  },
  [REPO_KEYS_ENUM.H5_APP]: {
    value: REPO_KEYS_ENUM.H5_APP,
    name: 'H5 App',
    path: 'ssh://tfs.yicall.com:22/Default/1Call%E6%A0%B8%E5%BF%83%20-%20%E5%9F%BA%E7%A1%80%E7%BB%84%E4%BB%B6/_git/yunlu-frontend-template-h5',
  },
  [REPO_KEYS_ENUM.TEMPLATE_COMMON]: {
    value: REPO_KEYS_ENUM.TEMPLATE_COMMON,
    name: '公共模板',
    path: 'ssh://tfs.yicall.com:22/Default/1Call%E6%A0%B8%E5%BF%83%20-%20%E5%9F%BA%E7%A1%80%E7%BB%84%E4%BB%B6/_git/yunlu-frontend-template-common',
  },
};

开发 & 发布

开发

yarn build:watch
yarn link "@cloudlu/cli"

当 NODE_ENV=development，会拉取模板仓库的 develop 分支。 当 NODE_ENV=production，会拉取模板仓库的 master 分支。

Tip: 模板仓库的 master 不要随意 push。

模板仓库更新

在开发阶段，请使用 develop 分支进行开发，当模板测试完毕，合并到 master

cli 发布

yarn build:release
npm publish