Kapture 2018-05-15 at 18.15.13.gif
参考
我们无论是使用react 还是 vue，都会找到相关的脚手架工具，比如 react 的 create-react-app，vue的 vue-cli。我们可以非常方便的初始化一个项目，不用太去关心什么 webpack 配置啊，babel 配置之类的。今天搭了一个类似 vue-cli 的脚手架，记录一下搭建脚手架的详细过程。
简单来说，就是让用户选择，根据选择的内容从 GitHub 上下载相应的模板。可能后面还要做根据用户填写的内容修改模板，发布到 npm。这篇文章主要详细讲从 GitHub 上下载模板。
新建项目
首先新建一个项目，在新项目中执行npm init，暂时都使用默认配置。到这里会生成一个 package.json 的文件。在里面添加如下内容：
"bin": {
" cli": "./command.js"
},
cli 就是使用脚手架的命令，后面的文件则是要执行的文件。
入口文件 - command.js
在项目创建 command.js 文件 开头必须是 #! /usr/bin/env node，然后添加一条 log
image.png
现在，在终端项目文件夹下执行npm link,即可在该目录下使用cli 命令,你会看到在终端打印了
image.png
命令
我们在终端输入 node -v时会打印出 node 的版本号。这是怎么做到的呢？我们可以 用 commander来实现。首先安装](https://github.com/tj/commander.js)来实现。首先安装) npm install commander。在 command.js 中添加：
<pre style="margin: 8px 0px; background-color: rgb(38, 40, 51); color: rgb(193, 199, 221); font-size: 0.871rem;">const commander = require('commander'); commander.version('1.0.0') commander
.command('init')
.description('init extension project')
.action(() => {
console.log('init a project')
}) commander.parse(process.argv)</pre>
现在就可以通过cli -V查看版本，cli -h查看帮助，cli init执行相应的命令了。
在终端与用户交互，获取输入信息
接下来使用 inquirer 在终端中与用户交互，获取信息。首先，安装 inquirer npm install inquirer。然后在 init 命令 action 中添加：
const questions = [
{
type: 'input',
name: 'projectName',
message: 'Please input your project name',
filter: function(val) {
return val;
}
},
{
type: 'list',
name: 'type',
message: 'What type do you need?',
choices: [ 'frontend', 'backend' ],
filter: function(val) {
return val.toLowerCase();
}
}
]
.action(() => {
inquirer.prompt(questions).then(answers => {
const { projectName, type } = answers
console.log(projectName)
console.log(type)
})
answers 就是用户输入的内容对象。至此，我们拿到了用户的输入，可进行下一步操作。
根据用户输入下载对应的模板
模板的准备就不再赘述，本文只说到下载模板文件，不涉及修改。模板文件可以用download-git-repo下载，并且支持 GitHub、gitlab、bitbucket，详见其文档。本文将模板文件放在了 github。
.action(() => {
inquirer.prompt(questions).then(answers => {
const { projectName, type } = answers
download(`xxx/${type}`, projectName, { clone: true }, function(err) {
if (err) {
console.log('err')
} else {
const startCmd = projectName === 'frontend' ? 'npm start' : 'npm run dev'
conso.log(chalk.white('please run '), chalk.bgBlue(`cd ${projectName} && npm i && ${startCmd}`), chalk.white('to start it'))
}
})
});
})
chalk是一个日志的样式库，可以在终端上面调整日志的样式。这里只是给打印的信息添加一个颜色。
到这里，基本上已经完成主要功能了。
添加一个 loading 效果
接下来，要在clone 代码时展示一个 loading 的动画，提示用户。用到了ora，可以在终端实现Loading的效果。
.action(() => {
inquirer.prompt(questions).then(answers => {
const { projectName, type } = answers
spinner.color = 'green';
spinner.text = 'downloading template……';
spinner.start()
download(`xxx/${type}`, projectName, { clone: true }, function(err) {
if (err) {
spinner.text = `Error: ${err}`;
spinner.fail()
} else {
const startCmd = projectName === 'frontend' ? 'npm start' : 'npm run dev'
spinner.text = 'download success!';
spinner.succeed()
log(chalk.white('please run '), chalk.bgBlue(`cd ${projectName} && npm i && ${startCmd}`), chalk.white('to start it'))
spinner.stop()
}
})
});
})
到这里，就完成了所有的功能。
后续内容：
-
根据用户输入修改模板文件
-
发布到 npm
网友评论