模仿vue-cli搭建自己的脚手架的方法和步骤

编辑：宝哥软件园来源：互联网时间：2021-08-25

新天龙八部

评分

什么是脚手架

以前一直觉得脚手架是一个很高的东西，好像是有一点点：ox:的人写的，我够不着。其实我们放弃并不是因为困难，而是因为很难放弃(这是一句很好的话和句子：see _ no _ evil:)。只要你愿意花半天时间：fist:你就可以自己写脚手架。

脚手架这个词早在vue-cli中就有了。在通过npm install -g vue-cli命令全局安装支架之后，我们可以通过执行vue init webpack project-name来初始化我们自己的项目。这真的是尼玛：的魔力。但是你有没有想过为什么我们可以通过执行命令vue init来拥有自己的项目？今天，让我们揭开庐山的真面目。

等等，hand:说了一大堆，你还没说什么脚手架？呃.它是一个工具，方便我们建设新项目。有了这个项目，我们可以直接开发。实际上，我们可以使用git clone url来创建(复制)一个新项目。稍微多措一点的方法是复制粘贴整个文件夹，这样也可以达到初始化的目的。脚手架的本质是从远程位置下载一个模板来执行一个新项目。呃。所以。有什么区别？它很高，令人痛苦。当然，还有更多。脚手架是克隆的高级版本。它主要提供交互命令，这样我们就可以动态地更改模板，然后我们就可以一劳永逸地使用一个命令(当然，我们仍然需要维护它)。这应该是主要区别。不管怎样，现在我想是的。

好了，这一章的目的是带领大家编写一个简单版本的scaffold xr-cli(取任意喜欢的名字)，目标是实现一个类似XR init template-name project-name的命令。废话少说，言归正传.火箭33603360火箭3360火箭：火箭：

源代码地址：https://github.com/lgq627628/xr-cli

先验知识

实际上，xr-cli的简单版本没有太多代码，所以让我们首先介绍依赖于它的包。如果您使用过这些工具，可以跳过它们。如果你没有用过，请看一眼。

指挥官

这用于编写指令和处理命令行。具体用法如下：

const program=require(' commander ')；//定义指令程序. version ('0.0.1 ')。命令(“init”，“从模板生成新项目”)。action(()={//回调函数})//解析命令行参数program . parse(process . argv)；回想一下，我们使用的vue init命令曾经这样说过。

调查者

这是一个功能强大的交互式命令行工具，具体用法如下：

const inquirer=require(' inquirer ')；问询者。提示([ //一些互动问题])。然后(answers={//回调函数，answers是用户输入的，是一个对象})；想象一下，在我们使用vue init webpack项目-name后，是否会出现几个交互问题，询问你文件名、作者、描述、是否要使用eslint等等。

白垩

这用于修改控制台输出内容的样式，例如颜色。具体用法如下：

const粉笔=require('粉笔')；console.log(粉笔. green('成功'))；console.log(粉笔. red(' error '))；奥拉

这是一个好看的加载，也就是你下载的时候会有一个圆圈效果，用法如下：

const ora=require('ora ')让spinner=ora('下载模板.')spinner.start()下载-git-repo

名字显而易见。它用于下载远程模板。支持GitHub、GitLab和Bitbucket。用法如下：

const download=require(' download-git-repo ')下载(存储库、目的地、选项、回调)，其中存储库是远程仓库的地址；Destination是存储下载文件的路径，也可以直接写文件名，默认为当前目录；选项是一些选项，例如，{clone:boolean}表示以http下载或git克隆的形式下载。

目录构建

好了，有了以上的知识储备，我们就正式开始了。

首先，我们需要创建一个文件夹，并将其命名为xr-CLI；

在此目录中执行npm init命令(您应该已经安装了节点：joy:)，并一直按enter键生成一个生成的package.json文件，在package.json中写入以下依赖项并执行npm install安装，如下所示：

依赖项' : { '粉笔' :' 2.4.2 '，'指挥官' :' 2.19.0 '，'下载-git-repo' :' 1.1.0 '，'查询

#!/usr/bin/env node console . log(' hello ')；这个文件是我们整个脚手架的入口文件。我们可以通过用node运行它来在控制台上打印hello。/bin/xr，如下所示：

注意这里的#开头！/usr/bin/env节点

必须添加这个语句，主要是为了让系统看到这条线的时候寻找节点并沿着路径执行，主要是为了兼容Mac并保证其执行。

Bin目录初始化

目前bin目录中只有一个文件，即入口文件xr。所以现在我们先写这个文件，因为内容比较少，我们直接看代码：

#!/usr/bin/env节点const program=require(' commander ')//定义当前版本//定义使用方法//定义四个指令program.version (require('./package ')。版本)。用法('命令[选项])。命令(“添加”、“添加新模板”)。命令(“删除”、“删除模板”)。命令(“列表”，列出所有模板”)。command ('init '，'从模板生成新项目')//Parse命令行参数program.parse(process.argv)这个文件的主要功能是定义指令。现在我们用node运行它。/bin/xr，我们可以看到以下结果：

当然，你可能会觉得每次进入node。/bin/xr。

这个命令有点麻烦，没关系，我们可以把内容写在package.json:

//bin用来指定每个命令对应的可执行文件的位置‘bin’: { ' xr ' : ' bin/xr ' }，然后在根目录下执行npm链接(意思是把命令挂载到全世界)，这样每次输入xr就可以直接运行了，太酷了，就像下面这样：

是不是有点像： grin 33603360 grin 3360 grin 3360 grin 3360 grin 3360，让我们继续完善bin目录！好了，我们在bin目录中创建新的四个文件，分别对应上面的四个指令，然后分别处理这四个指令要做的事情，如下图所示：

同样，我们修改package.json中的bin内容如下：

bin': { 'xr': 'bin/xr '，' xr-add': 'bin/xr-add '，' xr-delete': 'bin/xr-delete '，' xr-list': 'bin/xr-list '，Xr-init': 'bin/xr-init'}然后执行npm unlink解除绑定全局命令，然后执行npm link再次将命令绑定到全局，如下所示

最后，顺便在根目录中创建新的template.json文件，里面的内容是一个{}。

写具体说明

好了，一切都准备好了。让我们写下四个具体的说明。

xr-add

这个内容也比较少，直接看代码：

#!/usr/bin/env node//交互式命令行const inquirer=require(' inquirer ')//修改控制台字符串的样式常数粉笔=require('粉笔)//节点内置文件模块const fs=require('fs')//读取根目录下的模板。jsonconst tplObj=require(`$ { _ _ dirname }/./template`)//自定义交互式命令行的问题及简单的校验让问题=[ { name: 'name '，键入： '输入'，消息： '请输入模板名称，验证(val){ 0如果(val==' '){ 0需要返回“名字！”} else if(tplObj[val]){ return ' Template已经存在!'} else { return true } }，{ name: 'url '，type: 'input '，message: '请输入模板地址，验证(val) { if (val==' ')返回"需要url！”返回查询者.提示（问题)。然后（答案={ //答案就是用户输入的内容，是个对象让{名称，url }=答案；//过滤采用双字节对字符进行编码字符tplObj[名称]=URL。替换(/[ u 0000- u 0019]/g ' ')//把模板信息写入template.json文件中fs.writeFile(`${__dirname}/./template . JSON `, JSON . stringify(tplObj)，' utf-8 '，err={ if(err)console。日志(错误)控制台。日志(' n ')控制台。日志(粉笔。绿色('添加成功！n '))控制台。日志（粉笔。灰色('最新的模板列表是： n '))控制台。日志(tplObj)控制台。日志(' n ' })})这个文件主要目的就是添加模板并存储起来，上面的注释应该都写的挺清楚了。我们执行ex rights 无权认购新股添加来看看效果：

这里的模板名称（自己随便取)相当于vue初始化webpack项目-名称当中的工具

；模板地址要注意一下，像下面这样写就可以，这里以开源代码库为例：

xr-删除

如果你理解了上面的那个步骤，这步对你来说应该也是洒洒水啦！上代码：

#!/usr/bin/env node cost inquirer=require(“inquirer”)const粉笔=require('粉笔)const fs=require(' fs ')const tplObj=require(`$ { _ _ dirname }/./template `)让问题=[ { name: 'name '，message: '请输入要删除的模板名称，验证(val){ 0如果(val==' '){ 0需要返回“名字！”} else if(！tplObj[val]) { return '模板不存在!'} else { return true } } }]inquirer .提示（问题)。然后（答案={ let { name }=答案；删除tplObj[名称] //更新template.json文件fs.writeFile(`${__dirname}/./template . JSON `, JSON . stringify(tplObj)，' utf-8 '，err={ if(err)console。日志(错误)控制台。日志(' n ')控制台。日志(粉笔。绿色('已成功删除！n '))控制台。日志（粉笔。灰色('最新的模板列表是： n '))控制台。日志(tplObj)控制台。日志(' n ' })})应该很好理解，就不过多解释了，我们直接执行ex rights 无权认购新股删除看下效果：

xr-列表

这个更简单了，两行代码搞定：

#!/usr/bin/env node cost tplObj=require(`$ { _ _ dirname }/./template`)console.log(tplObj)是不是简单到爆：boom:我们执行ex rights 无权认购新股列表看看效果：

因为刚才一添加一删除，所以目前没有模板，就输出{}。

xr-初始化

这应该是最主要（但不难)的一步了，毕竟我们写到现在还没有通过命令初始化过一个项目呢：sob:所以这步的重点就是执行下载方法，并传入相应参数，具体看代码：

#!/usr/bin/env nodecost program=require(' commander ')const粉笔=require('粉笔')const ora=require(' ora ')const download=require(' download-git-repo ')const tplObj=require(`$ { _ _ dirname }/./template `)程序。用法(' template-name[project-name]). program . parse(process . argv)//给出提示if (program)。啊。长度1)返回程序。help()//就像vue init webpack项目-name的命令一样，第一个参数是webpack。第二个参数是project-nameletemplate name=program . args[0]让project name=program . args[1]//检查参数if(！tplObj[Template name]){ console . log(粉笔. red('n Template不退出！n '))返回}if(！projectName) { console.log(粉笔. red ' n项目不应为空！ n ')返回} URL=tplobj[模板名] console.log(粉笔. white( n开始生成. n ')//加载图标常量微调器=ora('正在下载.')出现；spinner . start()；//执行下载方法并传入参数download (URL，projectname，err={ if(err){ spinner . fail()；Console.log(粉笔. red(`生成失败。$ { err } `))return }//End loading icon spinner . success()；控制台.日志(粉笔.绿色(n生成已完成！)))console.log (' n入门')console . log(` n CD $ { project name } n `)})好了，我们执行xr init简单测试，记得先执行xr add:

现在我们可以在左侧目录中看到测试项目，如下所示：

此时，一个小脚手架就完成了。玫瑰：玫瑰：3360玫瑰：玫瑰：这里应该有鲜花和掌声：掌声：掌声：掌声：掌声：掌声：掌声：

发布到npm

既然上面的命令都已经成功执行了，那就发布给npm吧(都写好了，不能浪费：grimacing:)。

删除测试文件夹，用于本地测试，用完就丢弃(当然人不能这样)。在根目录下创建一个README.md文件，随便写一些说明，假装认真，新建一个。npmignore文件，并将其写入/node_modules，这意味着在发布时忽略node_modules文件夹。去npm官网注册一个账号(很简单)，同时搜索xr-cli这个名字看看有没有人用。如果是的话，换一个

现在让我们回到项目的根目录，执行npm登录以登录到npm帐户，然后执行npm发布，如下所示：

没错，就像这两个简单的命令一样，我们已经成功的发出来了。真是可喜可贺。 beer : beer : beer : beer :大概过了一分钟左右(反正很快)，我们可以在npm官网搜索xr-cli，可以看到自己的脚手架，哈哈哈哈，贼开心： 133603360 133603360 13: 13:

这里补充一点：根据规范，发布的包只允许在合同发布后24小时内撤销，所以为了不污染npm网站，如果只是测试，我们应该执行npm unpublish - force删除。毕竟我们都是合格的人。

随便展示一下自己的能力

别担心，no_good:还没有结束。头发已经发完了，怎么也得核实一波。嗯，你说的有道理，不能反驳，赶紧查一下！在这里，我们记得用npm unlink解除命令的绑定，否则它们会相互影响。接下来，我们打开终端，输入npm i xr-cli -g全局安装脚手架，然后执行xr。如果出现下图，则表示安装成功。