从零搭建脚手架详细记录(一)|从零搭建脚手架详细记录(一) - 下载模板文件从零搭建脚手架详细记录(一

Kapture 2018-05-15 at 18.15.13.gif 参考

如何实现一个简单的Node.js脚手架
如何实现一个脚手架进阶版（Vue-cli v2.9学习篇）

我们无论是使用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 中添加：

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)

【从零搭建脚手架详细记录(一)|从零搭建脚手架详细记录(一) - 下载模板文件】现在就可以通过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 } = answersconsole.log(projectName)console.log(type) })

answers 就是用户输入的内容对象。至此，我们拿到了用户的输入，可进行下一步操作。
根据用户输入下载对应的模板模板的准备就不再赘述，本文只说到下载模板文件，不涉及修改。模板文件可以用download-git-repo下载，并且支持 GitHub、gitlab、bitbucket，详见其文档。本文将模板文件放在了 github。

.action(() => {inquirer.prompt(questions).then(answers => {const { projectName, type } = answersdownload(`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 } = answersspinner.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()}})}); })

到这里，就完成了所有的功能。
后续内容：