『手撕Vue-CLI』自動安裝依賴

BNTang發表於2024-06-15
Vue

開篇

經過『手撕Vue-CLI』複製模板，實現了自動下載並複製指定模板到目標目錄。然而，雖然專案已複製，但其依賴並未自動安裝，可能需要使用者手動操作，這並不夠智慧。

正如前文所述，我們已經瞭解了業務需求和背景。那麼，接下來我們將直接深入探討核心實現細節。

自動安裝依賴

在前文中，我們已經將模板檔案複製到了指定目錄。接下來，我們需要在該目錄下執行 npm install 命令，以自動安裝依賴。

如何安裝依賴？

我們平時咋安裝依賴的？對，就是在專案目錄下執行 npm install 命令。那麼，我們如何在 Node.js 中執行這個命令呢？

在寫這篇文章之前，我在自己實現的過程中，也是遇到了這個問題。我查閱了很多資料，最終找到了一個解決方案，那就是使用 shelljs 庫。

所以先來給大家簡單介紹一下 shelljs。

shelljs

shelljs 是一個 Node.js 模組，它提供了一組簡單的 Unix shell 命令，可以用於執行 shell 指令碼。它是一個輕量級的模組，可以在 Node.js 環境中執行。

shelljs 的主要特點如下：

  • 輕量級：shelljs 是一個輕量級的模組，可以在 Node.js 環境中執行。
  • 簡單易用：shelljs 提供了一組簡單的 Unix shell 命令，可以用於執行 shell 指令碼。
  • 跨平臺：shelljs 可以在 Windows、Linux 和 macOS 等作業系統上執行。
  • 相容性好：shelljs 相容大多數 Unix shell 命令，可以方便地在 Node.js 環境中使用。
  • 開源：shelljs 是一個開源專案，可以在 GitHub 上檢視原始碼。
  • 社群活躍：shelljs 有一個活躍的社群，可以在 GitHub 上提交問題和建議。
  • 文件齊全：shelljs 有詳細的文件，可以幫助開發者快速上手。
  • 安裝方便：shelljs 可以透過 npm 安裝，非常方便。
  • 使用方便：shelljs 提供了一組簡單的 API，可以方便地執行 shell 命令。

就先簡單介紹這麼多，接下來我們來看看如何使用 shelljs。

安裝 shelljs

首先，我們需要安裝 shelljs，可以透過 npm 安裝：

npm install shelljs

安裝完成後，我們就可以在專案中使用 shelljs 了。

使用 shelljs

在專案中使用 shelljs 非常簡單，只需要引入 shelljs 模組，然後呼叫相應的 API 即可。

那麼就來看看如何在我們自己編寫的 nue-cli 專案中如何使用 shelljs 來完成自動安裝依賴的功能。

實現自動安裝依賴

shelljs 安裝好了，現在需要在專案中引入它。在 bin\create.js 檔案中新增如下程式碼：

const shell = require('shelljs');

接下來，需要在 create.js 中新增自動安裝依賴的程式碼，我這裡先一步一步來，我先寫一下實現步驟，定義一個方法的名字為 installDependencies，然後在這個方法中呼叫 shelljs 的 exec 方法，執行 npm install 命令。

const installDependencies = () => {
    shell.exec('npm install');
}

程式碼寫好了，接下來在 create.js 中主流程中呼叫這個方法：

// 執行 npm install
await waitLoading('installing dependencies...', installDependencies)();

程式碼寫到這我發現一個問題，就是 shelljs 的 exec 方法是非同步的，我要改造一下將其改為同步的，用之前的 promisify 方法，單獨轉一下 exec 方法：

const exec = promisify(shell.exec);

還有一個問題就是，我們複製好了模板到當前的目錄，現在是要執行安裝依賴，我們目前所處的位置還不是模板的根目錄，所以我們需要先進入到模板的根目錄，然後再執行 npm install 命令。

所以之前的 installDependencies 方法需要改造一下，加入進入到模板根目錄的邏輯，還需要傳遞一個引數，就是模板的名稱（projectName）：

const installDependencies = async (projectName) => {
    shell.cd(projectName);
    await exec('npm install');
}

經過這一版本的改造，自動安裝依賴功能就實現了，接下來來測試一下。

測試

因經過上篇文章的測試過後，專案已經複製過來了，所以我會將之前的程式碼註釋掉，主流程當中就只會執行 installDependencies 方法。

為了展示執行過程，我準備了一個動圖（gif）作為演示。不過，在錄製過程中出現了一個小錯誤，似乎是因為模板依賴未能成功下載。我會在接下來的時間嘗試更換一個源，並帶領大家一起探索問題解決方案。待到問題解決後，將繼續在下一篇文章中分享。感謝您的閱讀，我們下篇文章再會。

相關文章