wego-cli v2.0.3

wego-cli

支持 64 位 linux、windows、darwin 操作系统

wego-cli 是什么

wego-cli 是一个前端模板脚手架，能够支持你快速出创建、组织自己或团队的前端模板仓库，包括组件模板、页面模板和工程模板，提高日常开发效率；不局限于 web 端，安卓、IOS、pc、h5、小程序等多端组件、页面、工程模板都可以使用 wego-cli 组织、维护；wego-cli 本身不提供任何模板。

为什么要有 wego-cli

wego-cli 和 create-react-app、VUE cli 等脚手架不同，要解决的问题完全不一样，react、VUE 等前端框架脚手架面向的是全球用户，旨在快速构建出框架相关的 app 工程，脚手架非常复杂、精细; 而 wego-cli 要解决的是在企业内部开发中，如何更好的组织、维护企业内部相关技术栈的组件、页面、工程模板，并且能够快速将模板使用到日常开发中；企业内部开发通常是统一的技术栈和开发规范，在开发过程中使用统一规范的模板，能够有效降低维护成本，提高开发效率。

如何使用

第一步

在 Github 上创建一个模板仓库，公共的或私有的都可以(如果是私有仓库，需要在本地 wego.yaml 中配置 github_api_token，读权限)，模板仓库的目录遵循下面规范(目前不支持自定义模板文件夹名称)：

  templates
    components
    pages
    projects
  wego.yaml

模板仓库本身也可以是一个前端工程，只要仓库根目录下有上述文件、文件夹。

templates(文件夹路径可以自定义): 存放组件、页面、工程模板的文件夹

-- components: 存放组件级模板

-- pages: 存放页面级模板

-- projects: 存放前端项目工程模板

wego.yaml: 声明模板仓库详细信息和组件依赖关系

一个 wego.yaml 模板信息声明依照下面规范:

components:
  - name: ProductCategorySelector
    description: 商品分类选择器组件
    dependencies: []
  - name: ShipmentSettingModal
    description: 发货物流弹框组件
    dependencies: []
  - name: ProductBaseInfoForm
    description: 创建商品基本信息表单组件
    dependencies: [ProductCategorySelector]
  - name: MultiLevelComponents
    description: 多级依赖关系组件
    dependencies: [ProductBaseInfoForm]
pages:
  - name: product-list
    description: 商品列表页面
    dependencies: [ShipmentSettingModal]
  - name: create-product
    description: 创建商品表单页面
    dependencies: [ProductBaseInfoForm]
  - name: multi-level-dependencies-page
    description: 多级依赖关系页面
    dependencies: [MultiLevelComponents]
projects:
  - name: react-central-web-app
    description: react 管理端前端工程模板
  - name: next-h5-app
    description: next SSR h5前端工程模板
  - name: vue-app
    description: vue h5前端工程模板

模板文件夹下面的模板名称必须和 wego.yaml 中声明的信息一一对应，并且大小写敏感，每一个模板都是单独的文件夹，不要保存成单独的文件。

components、pages、projects 分别对应组件、页面、工程模板文件夹，不支持自定义文件夹名称。

以上是使用 wego-cli 的前置条件，必须有个模板仓库，查看 示例模板仓库

第二步

下载 wego-cli

  npm install wego-cli [-g]

  yarn add wego-cli [global]

下载完成后，执行 wego -V-h，如果出现以下结果证明安装成功

如果将 wego-cli 安装在本地 npm 依赖中，请执行:

npx wego -h[-V]

如果将 wego-cli 安装在全局 npm 依赖中，请执行:

wego -h[-V]

第三步

使用 wego init -y命令创建本地 wego.yaml 配置文件，用于声明模板仓库信息，本地 wego.yaml 需要至少填写前两条数据:

github_name: LYfirstday
repo_name: wego-cli-templates-example
# The github api token
# github_api_token:

# You can customize the templates dir path
# templates_source: test-source

# You can customize the repo target branch name(default: main)
# target_branch: target-branch

在 wego.yaml 文件路径下打开 shell，执行 wego-cli 命令，wego-cli 命令一览表：

options 支持三种，对应模板仓库中的 components、pages、projects

例子:

1. 列出所有页面模板

wego -p [--pages]

2. 列出所有组件模板

wego -c [--components]

3. 列出前端工程模板

wego -j [--projects]

执行命令后，使用箭头按键选择需要下载的模板，所有模板下载到本地的文件目录都是以当前执行 shell 命令的目录路径为基准，components 中的模板会下载到: {{ cmdPath }}/src/components/ 目录下；pages 中的模板会下载到: {{ cmdPath }}/src/pages/ 目录下；projects 中的模板会下载到: {{ cmdPath }}/ 目录下；目前不支持自定义下载至目标文件路径；如果组件、页面模板文件夹在本地已存在则会略过(不覆盖原文件夹文件)。

Q & A

1. 什么样的组件模板适合用 wego-cli 组织、维护？

解决公司某个业务下某一类问题的组件(原则上所有模板组件都可以放这里)；

一般维护在 wego 中的组件，通常和公司业务场景有轻微耦合，这种组件解决公司特定业务下某个场景的需求，这种组件一般没有第三方可用的组件，都是自己或团队进行开发、实现，经过线上验证，后期优化，功能稳定后提炼、封装成组件，供其他团队或其他项目在相似的业务场景下使用。

2. 为什么不直接封装成组件库，发布到(私有)npm 上维护？

一开始我也是这么做的，将业务组件发布到私有仓库，但是随着需求变更、UI 更改，最初发布上去的业务组件已经没法支持新业务，而且每次变更都要经历：修改 -> 测试 -> 发布 -> 升级组件版本的过程，效率极低而且麻烦；经常会出现，开发出组件 A，但是某个场景下只用到组件 A 70%的功能(核心功能不变)，如果为了这个场景专门修改组件 A，支持新的场景，改的次数多了组件 A 就没法维护了，充满大量冗余的判断代码；不如把组件 A 稳定版源码下载下来做减法，直接修改组件源码、样式，达到快速支持业务场景的目的；你可能又要问为什么不用高阶组件将组件 A 包裹起来，高阶组件支持新场景，底层还是使用组件 A，简单的组件可以这样做，但是对于稍微复杂点的业务组件，使用高阶组件到后面还是会面临难以维护的问题，冗余代码太多，尤其牵扯到组件样式定制、修改。

企业内部 npm 仓库适合发布比较通用的、底层的组件和工具类包，除非公司有专门团队维护 npm 组件包。

3. Error: API rate limit exceeded for xxxxx (But here's the good news: Authenticated requests get a higher rate limit. Check out the documentation for more details.)

这是因为 github 对没有 token 验证的 ip 地址每小时有请求数量限制，详情请查看 解决方案：yaml 文件中添加 github_api_token，无论你的模板仓库是共有或私有的都最好添加上有读权限的 api token

License

MIT