携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情
1.前言
脚手架对于前端开发来说应该是很熟悉了，比如vue/cli，react-create-app， ng/cli等，我们只需要根据命令交互来选择我们需要的配置，就能很方便的生成一套标准化的代码。
官方脚手架虽然用着很方便，但是很多时间我们在实际使用过程中仍然需要进一步封装。
比如每次新建项目，我们需要重新引入ui框架，需要重新封装请求方法，需要重新指定样式，需要重新引入资源...。
那有没有什么办法，可以一键自动生成这个东西呢？答案就是脚手架。
2.认识脚手架
使用过脚手架的都知道，我们是通过一个全局命令来执行的，比如vue create projectName。
2.1 vue这个命令是怎么来的呢？
以查一下vue这个命令在哪里。
我们发现，安装的全局命令都在这里。我们再查看一下文件的详细信息，会发现这个命令其实是一个连接，就像桌面的快捷方式，他实际指向的是vue.js文件。
我们再找一个这个vue.js文件，发现这个js文件顶部有一行注释。
#! /usr/bin/env node
这句话的意思就是指定执行环境，执行vue命令就相当于执行node vue.js。
2.2 怎么自己创建一个全局命令？
我们可以仿找这个文件，做一个简易版的脚手架。
先mkdir test-cli创建一个文件，然后cd test-cli进入目录，执行npm init -y初始化一个package.json，并添加配置。
"bin": { "test-cli": "bin/index.js" }
然后在跟目录创建一个bin/index文件,在开头写上#! /usr/bin/env node
我们第一个脚手架就实现好了。
2.3 怎么注册到全局？
有两种方式，第一种是先把脚手架发布到npm
1.使用 npm login 先登陆
2.然后使用npm publish发布版本
3.npm i -g test-cli
注意：（npm源需要切换成官方的，不能使用淘宝源）
这种方式对于开发阶段并不方便，每次修改需要重新发布。
第二种方式是，使用本地连接
执行npm link
注册成功，执行命令。
开发阶段，这种方式比价推荐，不过发布版本的时候，记得先执行npm unlink解除一下连接
3.第一个脚手架
人生第一个脚手架，我们来实现一个下载模板的功能。
这个模板是我封装的一个koa模板，做了路由自动加载，全局异常，参数校验，用户权限，选择数据库等功能的封装。
先介绍一下使用到的几个库。
- 首先是yargs，这个是一个注册命令的工具，使用方式也比较简单，可以参考一下npm 文档
- chalk是一个log输出工具，比如给文字变色等
- inquirer 这个是一个命令行交互工具，单选，多选之类的
- download-git-repo： 这个是克隆远程仓库的一个工具
1.先注册一个命令
require("yargs")
.usage("$0 <cmd> [args]")
.demandCommand(
1,
"A command is required. Pass --help to see all available commands and options."
)
.recommendCommands()
.strict()
.command({
command: "create [name]",
describe: "create [name]",
builder(yargs) {
yargs.positional("name", {
type: "string",
default: "Cambi",
describe: "the name to say create to",
});
},
handler(argv) {
init(argv["name"]);
},
})
.alias("h", "--help")
.alias("-v", "--version")
.help().argv;
其实就是command那一段，其他的都是配置一些提示信息。
2.让用户选择数据库类型
const answer = await inquirer.prompt({
type: "rawlist",
name: "db",
message: "请选择数据库类型",
choices: ["mySql", "mongo"],
});
3.下载对应的代码
使用download-git-repo库的download方法进行下载。
具体代码，大家可以看一下我github上的实现方式，代码比较简单，也比较适合新手。
如果内容对你有用，就帮忙点个赞吧！
