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

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

bin 目录初始化

当前,bin 目录下就只有一个文件,就是入口文件 xr。所以现在我们先来编写这个文件,由于内容较少,我们直接看代码:


#!/usr/bin/env node
const program = require('commander')

// 定义当前版本
// 定义使用方法
// 定义四个指令
program
.version(require('../package').version)
.usage('<command> [options]')
.command('add', 'add a new template')
.command('delete', 'delete a template')
.command('list', 'list all the templates')
.command('init', 'generate a new project from a template')

// 解析命令行参数
program.parse(process.argv)

这个文件的主要作用就是定义指令,现在我们用

node ./bin/xr
运行一下,就能看到如下结果:

当然,你可能会觉得每次输入

node ./bin/xr

这个命令有点麻烦,没关系,我们可以在 package.json 里面写入已下内容:


// bin 用来指定每个命令所对应的可执行文件的位置
"bin": {
"xr": "bin/xr"
}

然后在根目录下执行

npm link
(就是把命令挂载到全局的意思),这样我们每次只要输入 xr,就可以直接运行了,so cool,就像下面这样:

是不是好像有点样子了呢:grin::grin::grin:,那就让我们继续完善下 bin 目录吧!ok,让我们在 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