『手撕Vue-CLI』獲取下載目錄

BNTang發表於2024-06-01
Vue

開篇

在上一篇文章中，簡單的對 Nue-CLI 的程式碼透過函式柯里化最佳化了一下，這一次來實現一個獲取下載目錄的功能。

背景

在 Nue-CLI 中，我現在實現的是 create 指令，這個指令本質就是首先拿到模板名稱和版本號之後，然後去進行下載對應的模板，關於下載那麼肯定要面臨的問題就是如何下載？下載到什麼地方？

官方的 Vue-CLI 會先將模板下載到 使用者目錄 中，然後再複製到 執行指令的目錄 中。

那麼官方為什麼要先下載到使用者目錄中呢？

因為下載好的模板可能還需要進行一些其它操作，例如：修改檔案內容，刪除檔案等等。

好那麼開始實現獲取下載目錄的功能。

實現

先去當前本機的使用者目錄進行檢視一下，看看是什麼樣子的，先進入到 C 盤，然後找到使用者目錄：

再找到自己的使用者名稱：

在自己的使用者名稱資料夾當中，這個目錄就是所說的使用者目錄，一般新電腦的設定不會開啟顯示隱藏的專案，如何開啟？

點選顯示隱藏的專案，然後就可以看到隱藏的專案了，什麼是隱藏的專案呢？就是以 . 開頭的專案，例如 .vscode，.git 等等。

在裡面就會存在使用 Vue-CLI 所拉取的模板，我這裡因為是新電腦，我點進去會發現沒有存在，但是經過我這些內容的介紹我想告訴大家的是，如何找到自己電腦上的使用者目錄。

好了，接下來就是實現獲取下載目錄的功能了，在 Node.js 中有一個模組叫做 os，這個模組可以獲取到一些系統的資訊，例如：使用者目錄，作業系統等等。

透過 process.env，可以獲取當前電腦的環境變數，先來簡單的列印看一下輸出什麼內容：

console.log(process.env);

透過觀察控制檯的輸出結果發現一個 USERPROFILE 的環境變數，這個環境變數就是使用者目錄，好，接下來就好辦了。

windows 的獲取方式已經得知了，那麼 mac 呢，所以這裡就要區分一下平臺，該如何進行區分呢？

這裡也可以採用 process 模組，透過 process.platform 方法來獲取當前系統的平臺，windows 是 win32，mac 是 darwin，控制檯列印一下看看：

console.log(process.platform);

知道了這些內容就夠編寫程式碼的知識儲備，程式碼如下：

const currentPlatformKey = process.platform === 'win32' ? 'USERPROFILE' : 'HOME';
const downloadDirPath = `${process.env[currentPlatformKey]}\\.nue-template`;
console.log(downloadDirPath);

程式碼很簡單其實就是三行程式碼，首先是根據當前的平臺來獲取對應的環境變數，如果是 windows 那麼就是 USERPROFILE，如果是 mac 那麼就是 HOME，這樣一來就可以得出不同平臺的使用者目錄地址，在從 process.env 中獲取到對應的環境變數，然後拼接上 .nue-template 就是下載目錄的地址了。

最後將這個地址返回出去，這樣就可以在後續的程式碼中使用了。

相關文章