hui-tools

hui cli

起因

随着hui在海康内部的普及,各部门的视觉和主题是不统一的,以及还有着基于行业的开发组件等需求,需要一套工具来帮助创建部门组件库和主题库,hui-tools的想法便应运而生.tools的各个功能并没有完全确定下来.最基本的便是初始化项目.这篇主要是介绍如何从头开始做一个简单的脚手架.

在实际的开发过程中，从零开始建立项目的结构是一件让人头疼的事情，所以各种各样的脚手架工具应运而生。yoeman，express-generator和vue-cli便是当中之一。它们功能丰富，但最核心的功能都是能够快速搭建一个完整的项目的结构，开发者只需要在生成的项目结构的基础上进行开发即可，非常简单高效。

原理

yoeman搭建项目需要提供yoeman-generator。yoeman-generator本质上就是一个具备完整文件结构的项目样板，用户需要手动地把这些generator下载到本地，然后yoeman就会根据这些generator自动生成各种不同的项目。

vue-cli提供了相当丰富的选项和设定功能，但是其本质也是从远程仓库把不同的模版拉取到本地，而并非是什么“本地生成”的黑科技。

这样看来，思路也就有了——首先建立不同的样板项目，然后脚手架根据用户的指令引用样板项目生成实际项目。样板项目可以内置在脚手架当中，也可以部署在远程仓库。为了更广的适用范围，hui-tools采用的是第二种方式。

选型

node.js：整个脚手架工具的根本组成部分，推荐使用最新的版本。

commander.js：组织和处理命令行的输入。中文介绍地址

Inquirer.js :为NodeJs做一个可嵌入式的美观的命令行界面 中文学习地址

chalk:改变输出文字的颜色

ora:小图标（loading、succeed、warn等）

整体架构

整体架构，看图：

首先明白模版的概念。一个模版就是一个项目的样板，包含项目的完整结构和信息。
模版的信息都存放在一个叫做templates.json的文件当中。
用户可以通过命令行对templates.json进行添加、删除、罗列的操作。
通过选择不同的模版，hui会自动从远程仓库把相应的模板拉取到本地，完成项目的搭建。

最终整个脚手架的文件结构如下：

|__ bin
    |__ hui
  |__ command
    |__ add.js
    |__ delete.js
    |__ init.js
    |__ list.js
  |__ node_modules
  |__ package.json
  |__ templates.json

入口文件

首先建立项目，在package.json里面写入依赖并执行npm install

"dependencies": {
    "chalk": "^1.1.3",
    "commander": "^2.9.0",
    "download-git-repo": "^1.0.0",
    "handlebars": "^4.0.8",
    "inquirer": "^3.0.6",
    "ora": "^1.2.0"
  }

在根目录下建立\bin文件夹，在里面建立一个无后缀名的hui文件。这个bin\hui文件是整个脚手架的入口文件，所以我们首先对它进行编写。

首先是一些初始化的代码：

#!/usr/bin/env node --harmony
'use strict'
 // 定义脚手架的文件路径
process.env.NODE_PATH = __dirname + '/../node_modules/'

const program = require('commander')

 // 定义当前版本
program
    .version(require('../package').version )

// 定义使用方法
program
    .usage('<command>')
前文的架构图中可以知道，脚手架支持用户输入4种不同的命令。现在我们来写处理这4种命令的方法：
    program
    .command('list')
    .description('List all the templates')
    .alias('l')
    .action(() => {
        require('../command/list')()
    })

program
    .command('init')
    .description('Generate a new project')
  .alias('i')
  .action(() => {
    require('../command/init')()
  })

program
    .command('delete')
    .description('Delete a template')
    .alias('d')
    .action(() => {
        require('../command/delete')()
    })

使用node运行这个文件，看到输出如下，证明入口文件已经编写完成了。
Usage: hui

Commands:

    add|a      新增模板
    list|l     展示所有模板
    init|i     初始化模板
    delete|d   删除模板

处理用户输入

在项目根目录下建立\command文件夹，专门用来存放命令处理文件。
在根目录下建立templates.json文件并写入如下内容，用来存放模版信息：

{"tpl":{}}

添加模板

进入\command并新建add.js文件

删除模板

同样的，在\command文件夹下建立delete.js文件

罗列模板

\command文件夹下建立list.js文件

构建项目

现在来到我们最重要的部分——构建项目。同样的，在\command目录下新建一个叫做init.js的文件

全局使用

为了可以全局使用，我们需要在package.json里面设置一下：

"bin": {
    "hui": "bin/hui"
  },

本地调试的时候，在根目录下执行

npm link
即可把hui命令绑定到全局，以后就可以直接以hui作为命令开头而无需敲入长长的node hui之类的命令了。