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

2020-06-14 06:12:19易采站长站整理

脚手架是啥

从前我总觉得脚手架是个很高大上的东西,好像得牛叉:ox:一点的人才写的出来,可望而不可即。其实并不是因为困难使我们放弃,而是因为放弃才显得困难(这是个好词好句:see_no_evil:)。只要你肯花个一天半天的时间:fist:,也能写出属于你自己的脚手架。

早前脚手架这个词是从 vue-cli 这里认识的,我们通过

npm install -g vue-cli
命令全局安装脚手架后, 再执行
vue init webpack project-name
就能初始化好一个自己的项目,真是尼玛的神奇:hushed:。但你有没有想过为什么我们执行
vue init
这个命令就能有个自己的项目呢。今天,就让我们一起来揭开庐山真面目吧!

等等:hand:,扯了一堆,你好像还没说下啥是脚手架?emmm… 它就是个工具,方便我们新建项目用的,有了这个项目我们就能直接开发了。其实我们本可以用

git clone url
来新建(复制)项目,再 cuo 一点的方法就是复制粘贴整个文件夹,一样也能达到初始化的目的。脚手架的本质也是从远程下载一个模板来进行一个新项目。额。所以。。。有什么不同呢?就高大上啊:anguished:。当然不止于此啦,脚手架可是高级版的克隆,它主要是提供了交互式的命令让我们可以动态的更改模板,然后用一句命令就可以一劳永逸了(当然还是要维护的),这应该是最主要的区别吧,反正现在我是这么想的:cry:。

好了,本章的目的就是带领大家写一个简易版的脚手架 xr-cli(名字爱取啥取啥),目标是实现一个

xr init template-name project-name
这样的命令,废话少说,开始进入正题吧:rocket::rocket::rocket:。

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

前置知识

其实一个简易版的 xr-cli 的代码量并不多,所以这里我们先来小小介绍一下其中要依赖的包,如果你用过这些工具可以跳过,没用过的请务必一定要瞟一眼。

commander

这是用来编写指令和处理命令行的,具体用法如下:


const program = require("commander");
// 定义指令
program
.version('0.0.1')
.command('init', 'Generate a new project from a template')
.action(() => {
// 回调函数
})
// 解析命令行参数
program.parse(process.argv);

回忆一下,我们曾用过的

vue init
的命令就是这样声明的。

inquirer

这是个强大的交互式命令行工具,具体用法如下: