写在前面
到这里，相信小伙伴们已经对cli搭建要使用的工具有了一定了解。如果对相应的工具比较陌生，可以移步本专栏 的前几篇内容。里面有相应介绍。
从这篇开始，我们将一步步得实现cli中的一些功能。
构建命令
在varlet-cli中，我们使用gen作为我们的构建命令，先介绍一下什么是gen。
gen为generate的简写，用法与我们熟知的vuecli的create类似，用来创建一个组件库项目。
当然，小伙伴们也可以使用各种自己喜欢的命令名~本篇我们依旧以gen作为我们的构建命令。
前期准备
我们先将项目的目录结构调整一下。
-
generators:用于存放gen命令构建出项目的模板文件 -
site:用于存放文档站点 -
src:不用多说，cli的核心部分都在这里了
因为本文以
cli的搭建为主，generators和site部分的代码我们不做过多笔墨，有兴趣的小伙伴们可以前往我们的 代码仓库查看
老朋友commander
在之前的《进阶篇：好用的工具(上)》中我们已经对commander的基本使用做了介绍，接下来就是让它发挥实力的时候了。
Step1.引用
import { Command } from "commander"
const program = new Command()
program.version(require('../package.json').version, '-v, --version')
program.parse()
创建gen命令
我们在src/commands/gen中暴露一个gen方法用来处理gen命令
export function gen(name:string){
// some code do gen action
}
然后我们在入口文件中使用这个gen方法。
import { gen } from './commands/gen'
program.command('gen <name>').description('Generate cli application').action(gen)
gen要做啥
既然命令已经有了，我们要先明确gen要做的事情：
- 接收用户输入的项目名称
- 检测当前目录中是否已经存在同名目录，有则提示，无则继续流程
- 提示用户选择模板
- 将用户选择的模板拷贝到目的目录
- 提示用户创建完成
接下来我们将按上面的步骤逐步实现gen
同名检测
我们接受用户输入的name，并拼接最终路径，通过fs-extra的pathExistsSync方法判读该路径是否存在。
如果存在则提示并终止程序。
const dest = resolve(process.cwd(), name)
if(pathExistsSync(dest)){
logger.warning(`${name} already exists and cannot be recreated...`)
return
}
我们在
write-cli项目的同级目录试一下gen
选择模板
我们使用inquirer来编辑交互
const ret = await inquirer.prompt([
{
name: 'Please select your component library programming style',
type: 'list',
choices: ['sfc', 'tsx'],
},
])
const choice = ret['Please select your component library programming style']
这里的choice就是用户选择的模板类似
拷贝模板
我们先定义模板所在目录，然后拿到项目的基本文件目录以及模板目录，然后将其拷贝到定义项目的目录中。
export const GENERATORS_DIR = resolve(__dirname, '../../generators')
const generator = resolve(GENERATORS_DIR, choice)
const base = resolve(GENERATORS_DIR, 'base')
await copy(base, dest)
await copy(generator, dest)
这样我们就完成了项目的创建。
提示完成
但是这样突然就完成了是不是有些不太友好呢，接下来我们来加入提示。
logger.success('Application generated successfully!')
logger.info(`\
cd ${name}
yarn
yarn dev`)
logger.success(`\
=======================
Good luck have fun
=======================\
`)
最后
以上就是gen命令的相关内容了，跟varlet-cli的gen相比删减了一些不影响正常创建的内容。
