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

BNTang發表於2024-05-30
Vue

開篇

在上一篇文章中，給 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 拉取版本號的功能，下一篇文章再來實現拉取模板的功能。

相關文章