popup-cli

popup-cli

Command line tool for popup development.

介绍

popup-cli 是快闪店开发过程中使用的 cli，旨在减少开发人员的操作成本。

现有功能：

• 自动化组件创建
• 便捷的前端工程产物推送后端工程

安装

$ npm install @byted-vangogh/popup-cli

$ npx popup-cli -h
Usage: popup-cli <command> [options]

Options:
  -V, --version  output the version number
  -h, --help     output usage information

Commands:
  add|a          add a new component
  ls|l           list all components types
  push|p [type]  push vangogh-irises compile files to vangogh-arles dist webroot

组件创建步骤

路径：vangogh-irises/src/components/

以组件名"VanDemo"为例

  /**
   * @path: categorys.js
   * @description: 添加组件 icon 及 control 说明
   * van-demo: 组件名的中划线命名
   * title: 左侧 control bar 的文案说明
   * icon: 添加组件弹窗的 icon，生成的 class 为 bui-icon-${icon}，可使用 bui 通用图标(#bui)，也可自定义
   * iconText: 添加组件弹窗 icon 下方文案
   * desc: 左侧 control bar 下方的文案说明
   */ 
  {
    'van-demo': {
      title: '示例组件',
      icon: 'demo',
      iconText: '示例',
      desc: '示例组件说明'
    }
  }

  /**
   * @path: components.js
   * @description: 指定组件一个还是多个
   * van-demo: 组件名的中划线命名
   * true: 组件只有一个时
   * style[]: 组件有多个时
   */ 
  {
    'van-demo': true,
    'van-demo': ['style1', 'style2']
  }

  /**
   * @path: components.json
   * @description: 组件打包的入口文件
   */ 
  {
    'VanDemo': './van-demo/index.js'
  }

路径：vangogh-irises/src/utils/

  /**
   * @path: bui-icons.js
   * @description: 自定义 icon
   * key 值需跟 categorys.js 中的 icon 相同, value 为 svg 的字符串
   */ 
  {
    'demo': 'svg long string'
  }

使用

创建组件

1. popop-cli 中处理的组件 json 数据为

{
	"name": "VanTune",
	"count": 10,
	"mtype": 23,
	"categorys": {
		"title": "示例组件",
		"icon": "demo",
		"iconText": "示例",
    "desc": "示例组件说明"
	},
	"iconStr": "这是 svg icon string"
}

1. 为了减少不要的 json 文件存放，现在使用命令行界面的方式获取用户输入的组件信息。
2. npx popup-cli add|a
3. 命令行界面需要输入组件的信息，目的是根据输入的内容生成上述 json。如下图

重要

1. 组件命名必须是首字母大写的驼峰！
2. 在生成 json 字符串后，有一步确认，如果发现不是预期的 json 内容，需要输入 n，或者 enter 终止继续操作

前端工程产物推送后端工程

$ npx popup-cli push|p [folderName] 

说明

1. folderName 为要复制的文件夹名，目前有 components、pages、static
2. 没有指定 folerName 时，会默认复制上述三个文件夹
3. 支持指定 folderName 首字母，如 npx popup-cli p c 等同于 npx popup-cli p components

参考文档

• bui 通用图标
• commander.js
• Inquirer.js