『手撕Vue-CLI』複製模板

BNTang發表於2024-06-05

開篇

經過上篇文章的介紹,實現了可以根據使用者選擇的模板名稱加上對應的版本號,可以下載對應的模板,並且將下載之後的檔案存放在使用者目錄下的 .nue-template資料夾中。

接下來這篇文章主要實現內容是將下載的模板檔案複製到當前所執行命令的目錄下。

複製模板

例如我現在在終端當中輸入 nue-cli create neo 命令,如下圖:

從圖中可以看到除了指令部分之外的內容就是所在的目錄檔案地址,我要操作的就是將之前下載的模板檔案內容複製到這個目錄下,即可。

如何複製?

獲取到當前所在的目錄地址,這個可以透過 Node 中的 path 模組進行實現,使用 path 模組中的 resolve 方法,將當前所在的目錄地址獲取到。

所以話不多說,先匯入 path 模組:

const path = require('path');

匯入之後先透過 path.resolve() 方法獲取到當前所在的目錄地址,列印在控制檯看一下是否正確:

console.log(path.resolve());

為了我方便測試我將之前所編寫的程式碼都先註釋掉了:

然後執行 nue-cli create neo 命令,看一下控制檯輸出的內容:

從圖中可以看到輸出的內容就是當前所在的目錄地址,這個是正確的。

當前所執行的命令目錄位置拿到了,接下來就可以拿著這個路徑加上輸入指令的專案名稱,拼接成一個新的路徑,這個路徑就是最終要複製的目錄地址,程式碼如下先拼接列印給大家看看:

console.log(path.resolve(projectName));

測試方式與之前一樣,我將之前的程式碼註釋掉,然後執行 nue-cli create neo 命令,看一下控制檯輸出的內容:

從圖中可以看到輸出的內容就是當前所在的目錄地址加上輸入的專案名稱,這個是正確的。

地址完成了,標題所存在的問題還是沒有得到解決,那就是如何複製檔案到這個目錄下。

ncp

這裡我要給大家在介紹一個庫,這個庫是 ncp,這個庫是一個用於複製檔案的庫,使用這個庫可以很方便的將檔案複製到指定的目錄下。

npm 地址:ncp

好,話不多說,要想使用這個庫,首先要安裝這個庫:

npm install ncp

安裝完成之後,匯入這個庫:

const ncp = require('ncp');

匯入之後發現 ncp 這個庫的函式返回的不是一個 Promise 物件:

所以需要手動將這個函式封裝成一個 Promise 物件,後續我就可以用 Promise 的方式來呼叫這個函式,重新改寫匯入這個庫的程式碼:

let ncp = require('ncp');
ncp = promisify(ncp);

接下來就是將使用者目錄中的模板複製到執行指令路徑中即可,程式碼如下:

const destPath = 'C:\\Users\\BNTang\\.nue-template\\vue-simple-template';
await waitLoading('copying template...', ncp)(destPath, path.resolve(projectName));

測試一下,我也是將之前的程式碼註釋掉,目標地址我寫死了,執行 nue-cli create neo 命令,看看複製的效果:

從圖中可以看到控制檯輸出的內容就是複製成功了,模板已經複製到了當前所在的目錄下。

很不錯也很順利,記住我的測試過程,因為我在前面的章節測試中,我下載好了模板所以我就將上面的程式碼註釋掉了,如果你們看到我文章進行編寫與實現的時候,沒有進行下載得要將上面的程式碼取消註釋,下載模板,然後再進行複製。

後面複製的目標地址我會改寫,慢慢來,好了,這篇文章就到這裡,下一篇文章再繼續。

相關文章