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

vue,cli · 浏览次数 : 0

小编点评

```js const axios = require('axios'); const ora = require('ora'); const inquirer = require('inquirer'); 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; }; const fetchTemplateTags = await getTemplateTags(template); const tags = fetchTemplateTags.map((item) => item.name); console.log(tags); const { version } = await inquirer.prompt({ name: 'version', type: 'list', message: 'Please select the version number', choices: tags, }); console.log(version); ```

正文

开篇

在上一篇文章中,给 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 拉取版本号的功能,下一篇文章再来实现拉取模板的功能。

与『手撕Vue-CLI』拉取版本号相似的内容:

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

开篇 在上一篇文章中,给 nue-cli 添加了与用户终端交互的功能,这一次来实现一个拉取版本号的功能。 这个功能的背景是,有时候我们在使用脚手架的时候,不同版本的脚手架可能会有不同的功能,所以用户有可能会根据自己的需求选择不同的版本,所以这里将会实现一个根据用户选择的版本号,拉取对应的版本号的模板

『手撕Vue-CLI』函数柯里化优化代码

开篇 在上一篇文章中,给 nue-cli 添加了拉取版本号的功能,这一次来优化一下代码,使用函数柯里化的方式来优化代码。 实现 函数柯里化 函数柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。 在进行改写之前,首先给大家简单介绍一下函数柯里化,写一个简单的例子来演示一下。

『手撕Vue-CLI』拉取模板名称

前言 好,经过上篇文章的介绍,已经可以有处理不同指令的能力了,接下来我们就来处理 vue create 指令,这个指令的本质就是从网络上下载提前准备好的模板,然后再自动安装模板中相关依赖。 所以实现 create 指令分为两步: 下载指定模板 安装模板中的依赖 先来看看官方的吧,我在终端中已经输入了

『手撕Vue-CLI』添加终端用户交互

前言 经过上一篇文章的梳理,实现了可以从 GitHub 上拉取模板项目名称,已经可以得知可使用的模板有哪些了,那么我觉得是不是要进行选择呢?所以这一篇文章就来实现终端用户交互,让用户可以自己选择想要使用的模板。 实现 在 NodeJS 当中,已经有人为我们封装好了一个库,叫做 inquirer,可以

『手撕Vue-CLI』完善提示信息

前言 经过『手撕Vue-CLI』自动安装依赖,已经实现了自动安装依赖的功能。 然而,虽然项目已复制并安装依赖,但其提示信息并不够友好,于是我试着去运行了一下vue create,发现其提示信息是这样的: 于是我决定完善提示信息,也借此机会完善一下项目的代码,变量命名等。 完善提示信息 完善变量命名

『手撕Vue-CLI』自动安装依赖

开篇 经过『手撕Vue-CLI』拷贝模板,实现了自动下载并复制指定模板到目标目录。然而,虽然项目已复制,但其依赖并未自动安装,可能需要用户手动操作,这并不够智能。 正如前文所述,我们已经了解了业务需求和背景。那么,接下来我们将直接深入探讨核心实现细节。 自动安装依赖 在前文中,我们已经将模板文件复制

『手撕Vue-CLI』拷贝模板

开篇 经过上篇文章的介绍,实现了可以根据用户选择的模板名称加上对应的版本号,可以下载对应的模板,并且将下载之后的文件存放在用户目录下的 .nue-template文件夹中。 接下来这篇文章主要实现内容是将下载的模板文件拷贝到当前所执行命令的目录下。 拷贝模板 例如我现在在终端当中输入 nue-cli

『手撕Vue-CLI』下载指定模板

开篇 经上篇文章的介绍,实现了获取下载目录地址,接下来实现下载指定模板的功能。 背景 通过很多章节过后,已经可以拿到模板名称,模板版本号,下载目录地址,这些信息都是为了下载指定模板做准备的。 实现 如何从 GitHub 下载模板 可以借助 download-git-repo 这个库来下载 GitHu

『手撕Vue-CLI』获取下载目录

开篇 在上一篇文章中,简单的对 Nue-CLI 的代码通过函数柯里化优化了一下,这一次来实现一个获取下载目录的功能。 背景 在 Nue-CLI 中,我现在实现的是 create 指令,这个指令本质就是首先拿到模板名称和版本号之后,然后去进行下载对应的模板,关于下载那么肯定要面临的问题就是如何下载?下

『手撕Vue-CLI』处理不同指令

前言 在上一篇『手撕Vue-CLI』添加自定义指令中,已经实现了自定义指令的添加,但是指令还是比较简单的,只是简单的打印一句话,那么在实际运用场景中,可能会有更多的需求,比如可能需要在指令中传递参数,或者需要在指令中进行一些复杂的操作,那么这个时候我们就需要对指令进行处理了。 创建指令处理文件 在上