『手撕Vue-CLI』拉取版本号

开篇

在上一篇文章中，给 nue-cli 添加了与用户终端交互的功能，这一次来实现一个拉取版本号的功能。

这个功能的背景是，有时候我们在使用脚手架的时候，不同版本的脚手架可能会有不同的功能，所以用户有可能会根据自己的需求选择不同的版本，所以这里将会实现一个根据用户选择的版本号，拉取对应的版本号的模板。

实现

说到这个拉取版本号的功能，其实就是一个简单的功能，最核心的就是如何获取到 GitHub 上的版本号。

获取 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 主要作用就是列出指定存储库的标签。

简单解释一下这个请求地址：

• owner：仓库所属的用户或组织
• repo：仓库名称

{} 是占位符，需要替换成具体的值，例如我要获取 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 方法传递的是一个对象之前是直接传递的数组，这里传递的是一个对象，这两种方式在功能上是等价的，都可以实现相同的效果, 区别在于语法和风格：

1. 数组形式：当你使用数组时，可以更清晰地表示每个提示是一个独立的实体。这种方式在有多个提示或者每个提示需要更复杂的配置时特别有用。
2. 对象形式：当你只需要一个简单的提示时，使用对象形式可以使代码更简洁。它减少了一些冗余的括号，使得代码看起来更紧凑。

好了别的内容就不多说了，这里就是手撕 Vue-CLI 拉取版本号的功能，下一篇文章再来实现拉取模板的功能。