Directory-Scaffold全局命令交互输入拉取远程仓库代码优化总结1.脚手架今天工地上的砖有点热。以后搬砖方便，先搭个脚手架吧：不好意思，我看错了，是这个：相信很多朋友都用过vue-cli、create-react-app或angular-cli等脚手架，一个命令行就可以快速搭建项目框架，告别刀耕火种的复制粘贴，分分钟解放生产力。作为一个有抱负的剪花男孩，这种捕鱼神器必须马上安排。好了，那么问题来了：什么是脚手架？从表达方式来看，脚手架主要有以下几个特点：一个可以全局执行的命令；可实现交互式输入，如输入项目名称、选择配置项等；可以自动拉取github或者gitlab远程仓库的代码。当然，高级脚手架的功能肯定不止这些，但还是先从最简单的实现说起吧。2.全局命令2.1基本原理首先解压观察vue-cli这样的全局命令是如何实现的。首先找到vue-cli的安装路径。全局安装可以通过npmconfiggetprefix找到路径。比如我的windows系统是C:\Users\用户名\AppData\Roaming\npm:可以看到这个目录下有很多全局安装。命令一个同名文件和一个node_modules文件夹。我们全局安装的依赖包在node_modules中。找到@vue\cli，这是vue-cli的源码包。vue-cli源码包中的package.json有这样一个关键配置："bin":{"vue":"bin/vue.js"}，这个bin/vue.js脚本必须以#!/usr/开头bin/env节点，全局安装npm时，会根据这个配置生成对应的同名可执行文件。而当我们运行vue时，系统会把vue.js作为一个node程序来运行。官方npm文档中提供了npmlink命令，以允许用户从自定义脚手架生成全局命令。npmlink主要做了两步：一是在npm全局安装路径下的node_modules文件夹下生成一个链接文件，这个链接文件指向执行命令的文件夹，也就是我们的脚手架源码文件夹；npm全局安装路径下会生成一个与配置bin中同名的可执行文件。所以，通过npmlink，我们可以生成一个node全局命令。npm链接官方文档：https://docs.npmjs.com/cli/v6...。2.2全局命令的实现话不多说，先从一个全局命令说起。1）执行npminit初始化一个package.json：2）在package.json中添加bin配置："bin":{"test-cli":"./test.js"},3）添加对应的执行脚本文件测试.js：#！/usr/bin/envnodeconsole.log("你好！我的CLI！");4）在package.json同级目录下执行npmlink5）在控制台运行我们定义的全局命令test-cli，看到输出：complete！3.交互式输入通过以上操作，用户已经可以通过全局命令执行我们的test.js文件，我们可以自由发挥js中的其余功能。Node社区拥有大量的第三方模块，我们可以借助这些模块快速开发并实现想要的功能。询问者就是其中之一。目前github上有14.5k星。它的目标是“致力于成为一个易于嵌入且美观的命令行工具”。顾名思义，通过查询模块，我们可以在命令行上与用户输入进行交互。我们需要知道用户要创建的项目名称，以及用户要下载哪个远程仓库的代码：constinquirer=require("inquirer");inquirer.prompt([{type:"input",name:"project",message:"项目名称",},{type:"list",name:"tpl",message:"请选择模板",choices:["vue","react"],}]).then((res)=>{console.log(res);const{project,tpl}=res;//project是用户输入的项目名//tpl是用户选择的模板});这段代码提供了一个input输入选项用于输入项目名称，一个list列表选项用于选择要下载的模板（我们接下来会根据模板名称从对应的仓库地址下载）。Inquirer有更多的选项和功能。感兴趣的小伙伴可以去官方文档自由探索：https://github.com/SBoudrias/...。4、拉取远程仓库代码现在我们知道了用户要下载哪个模板代码，也知道了这些模板代码对应的下载地址：conststores=[{name:"vue",url:"https://github.com/vuejs/vue.git"},{name:"react",url:"https://github.com/facebook/react.git"}]还有几个拉取github或者gitlab的第三方模块远程仓库代码首先，我选择了nodegit。这个项目目前在github上有4.9kstars，使用起来也很简单：constGit=require("nodegit");/**克隆远程仓库代码*///url:源代码仓库地址；path：下载的目标路径；cb:下载结束后的回调函数constgitClone=(url,path,cb)=>{console.log("正在下载远程仓库代码...")console.log(url)Git.Clone(url,path).then(function(res){console.log("下载完成")cb(true)}).catch(function(err){console.log("下载失败"+err);cb(false)});}nodegit官网地址：https://github.com/nodegit/no...至此三个基本功能已经实现！5.我精通优化。想了想，我觉得我可以更进一步。比如下载源码后，会自动帮我安装依赖包：constprocess=require('child_process');/**安装依赖包*/constinstall=(path)=>{//路径为源码模板中package.json所在路径console.log("Installingdependencypackage...")constcmd='cd'+path+'&&yarn';process.exec(cmd,function(error,stdout,stderr){console.log(error);console.log(stdout);console.log(stderr);console.log("安装完成")});}之前看到很多脚手架都出来了炫酷的艺术字。作为一个被追的cutfigure，这个必须要安排！这也使用了第三方模块figlet(https://github.com/patorjk/fi...):constfiglet=require('figlet');figlet('我的CLI!',{horizo??ntalLayout:"full"},function(err,data){if(err){console.log('出错了...');console.dir(err);返回;}console.log(data)//做点什么..});很多脚手架还提供了参数配置、帮助信息等功能，大多是通过commander模块实现的（https://github.com/tj/command...，20.7kstars），这里不做详细展开，我也在demo工程中简单实现了一下，确实很强大，也很好用Demo已经开源：https://github.com/youzouzou/...。本demo简单的实现了脚手架的基本功能，探索了几个node模块的使用方法，还有很多需要优化的地方。进一步学习最好的方法就是看看那些成熟的脚手架源码，然后模仿实践，再结合实际情况找出最适合自己团队的方案。6.总结工欲善其事，必先利其器。其实，脚手架并不局限于以上几种实现形式。任何可以提高效率的工具，某种意义上都可以称为脚手架。模仿只是最初级的阶段，创新才是真正的开始。
