在上一篇文章中,给 nue-cli 添加了与用户终端交互的功能,这一次来实现一个拉取版本号的功能。
这个功能的背景是,有时候我们在使用脚手架的时候,不同版本的脚手架可能会有不同的功能,所以用户有可能会根据自己的需求选择不同的版本,所以这里将会实现一个根据用户选择的版本号,拉取对应的版本号的模板。
说到这个拉取版本号的功能,其实就是一个简单的功能,最核心的就是如何获取到 GitHub 上的版本号。
继续回到上次 GitHub Api 文档中,找一下与仓库相关获取仓库版本号的接口。
回到 https://docs.github.com/en/rest?apiVersion=2022-11-28 ,在左侧导航栏中找到 Repositories
,然后点击 Repositories
,找到 List repository tags
:
点击 List repository tags
,找到 GET /repos/{owner}/{repo}/tags
这个 Api,这个 Api 主要作用就是列出指定存储库的标签。
简单解释一下这个请求地址:
{}
是占位符,需要替换成具体的值,例如我要获取 vue-simple-template
这个仓库的版本号,请求地址就是:https://api.github.com/repos/neo-it6666/vue-simple-template/tags
。
在浏览器中输入这个地址,看看返回的数据:
发现返回的数据是一个数组,但是是一个空数组,这是因为我这个仓库还没有发布版本号,所以这里就是一个空数组。
在 GitHub 上发布版本号,其实就是在仓库中发布一个 Release,这个 Release 就是一个版本号。
首先进入到仓库中,然后点击 Releases
:
然后点击 Create a new release
进入到发布版本号的页面:
首先 Create new tag
,然后填写版本号,这里我填写的是 v1.0.0
:
然后填写一下 Write
,然后点击 Publish release
,这样就发布了一个版本号,然后再次请求 https://api.github.com/repos/neo-it6666/vue-simple-template/tags
:
这回就返回了一个数组,数组中就是发布的版本号。
接下来就是在代码中获取这个版本号了,一样的利用之前安装好的 axios,进行请求,先上代码:
const getTemplateTags = async (currentTemplateName) => {
const {data} = await axios.get(`https://api.github.com/repos/neo-it6666/${currentTemplateName}/tags`)
return data;
}
首先我单独编写了一个方法 getTemplateTags
,这个方法接收一个参数 currentTemplateName
,这个参数就是当前用户选择的模板名称,然后通过 axios 请求 GitHub Api,获取到对应仓库的版本号。
代码比较简单,不多讲,接下来就是使用这个方法,获取到版本号,先上代码:
const fetchTemplateTags = await getTemplateTags(template);
const tags = fetchTemplateTags.map((item) => item.name);
console.log(tags);
这里我调用了 getTemplateTags
方法,传入了用户选择的模板名称,然后获取到版本号,然后通过 map
方法取出版本号,最后打印到终端中。
这样就获取到了 GitHub 上的版本号,最后在添加上用户与终端交互的功能,就可以实现一个拉取版本号的功能了,在此之前我发现我下拉的版本号时控制台没有加载效果利用 ora 添加一下,改造 getTemplateTags 方法:
const getTemplateTags = async (currentTemplateName) => {
const spinner = ora('Loading tags...').start();
const {data} = await axios.get(`https://api.github.com/repos/neo-it6666/${currentTemplateName}/tags`)
spinner.succeed('Tags loaded successfully');
return data;
}
这样效果就更好了,然后再添加一个与用户交互让用户选择版本号,一样的玩法利用 inquirer 添加一个选择版本号的功能:
const { version } = await inquirer.prompt({
name: 'version',
type: 'list',
message: 'Please select the version number',
choices: tags
})
console.log(version);
这里要说下,这里的 inquirer.prompt 方法传递的是一个对象之前是直接传递的数组,这里传递的是一个对象,这两种方式在功能上是等价的,都可以实现相同的效果, 区别在于语法和风格:
好了别的内容就不多说了,这里就是手撕 Vue-CLI 拉取版本号的功能,下一篇文章再来实现拉取模板的功能。