阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈

歡迎來到使用 JavaScript 的命令列介面 (CLI) 工具世界的令人興奮的旅程。

在本指南中,我將引導您建立 CLI 工具,該工具設定基本的專案結構,解釋每個步驟和程式碼片段,以確保您可以遵循。

設定您的開發環境

在我們深入 CLI 工具的世界之前,讓我們先設定我們的環境:

  1. 安裝 Node.js 和 npm:前往Node.js 的官方網站並下載建議的版本。安裝 Node.js 也會安裝 npm,這是您將用來處理 JavaScript 套件的套件管理器。

  2. 驗證您的安裝:開啟終端機並執行以下命令,確保所有內容均已正確安裝:

   node --version
   npm --version

查看版本號碼即可確認您已全部設定完畢!

建立您的 CLI 工具:專案設定自動化

我們的目標是建立一個能夠自動產生基本專案結構的 CLI 工具,從而省去您每次啟動新專案時手動建立資料夾和檔案的麻煩。

第 1 步:啟動您的專案

  1. 建立專案目錄:這是 CLI 工具程式碼所在的位置。
    mkdir my-project-setup
    cd my-project-setup
  1. 初始化您的 npm 套件:此步驟產生package.json文件,這對於管理專案的依賴項和配置至關重要。
    npm init -y

第 2 步:建立 CLI 應用程式

  1. 建立主檔案:將此檔案命名為index.js 。它將包含 CLI 工具的邏輯。

  2. 合併 Shebang 行:index.js的開頭新增:

    #!/usr/bin/env node
This line tells your system to use Node.js to execute this script.
  1. 實作邏輯:下面的程式碼建立一個包含目錄和檔案的預定義專案結構:
    const fs = require('fs'); // File System module to handle file operations

    // Define the project structure: directories and their respective files

    const projectStructure = {
      'src': ['index.js'],
      'public': ['index.html', 'styles.css'],
    };

    // Iterate over the structure, creating directories and files

    Object.entries(projectStructure).forEach(([dir, files]) => {
      fs.mkdirSync(dir, { recursive: true }); // Create directories
      files.forEach(file => fs.writeFileSync(`${dir}/${file}`, '')); // Create files
    });

    console.log("Project structure created successfully!");
Here's what each part of the code does:
  • 需要 fs 模組:這是 Node.js 的檔案系統模組,您將使用它來建立目錄和檔案。

  • 定義專案結構:我們指定要建立哪些目錄以及它們應包含哪些檔案。

  • 建立目錄和檔案:使用fs.mkdirSyncfs.writeFileSync ,腳本根據定義的結建置立每個目錄和檔案。

4. 讓您的腳本可執行:修改package.json以包含"bin"部分。這告訴 npm 哪個指令應該執行你的腳本:

`"bin": {
  "setup-project": "./index.js"
}`

第 3 步:在本地測試和連結您的工具

在分享您的工具之前,請先對其進行測試:

  1. 連結您的工具:在專案目錄中執行npm link 。此命令建立一個符號連結,允許您從終端中的任何位置執行 CLI 工具。

  2. 執行您的工具:只需在終端機的專案目錄中輸入setup-project即可。如果一切設定正確,您將看到“專案結構已成功建立!”訊息,以及提到的專案結構。

是的,就這樣!

第 4 步:增強功能

您的工具現在可以自動執行專案設置,但仍有改進的空間。考慮新增更多功能或處理使用者輸入來自訂專案結構。探索像yargs這樣的套件來解析命令列參數。您可以透過此處的官方文件了解有關 yargs 的更多資訊。

第 5 步:在 npm 上分享您的工具

準備好與世界分享您的 CLI 工具了嗎?就是這樣:

  1. 在 npm 上註冊:如果您沒有帳戶,請在https://www.npmjs.com/signup建立帳戶。

  2. 透過終端登入:執行npm login並輸入您的 npm 憑證。

  3. 發佈您的套件:在您的專案目錄中,執行npm publish

恭喜!您的 CLI 工具現已在 npm 上提供,供所有人使用。

如果您已經關注我到這裡,請查看我用 Javascript 製作並發佈在 npm 上的第一個 CLI 工具:Naturalshell。 Naturalshell在您的終端中提供AI,現在無需記住shell命令!

您可以在此處查看 npm 套件在此處查看 github 儲存庫

請打 ⭐,並隨時加入新功能並與我一起在 naturalshell 上建置!

該工具利用人工智慧來解析自然語言,並根據使用者的需求向使用者提供 shell 命令。除了提供命令之外,它還提供簡潔的解釋,確保使用者不僅知道要做什麼,而且了解其工作原理。憑藉直接在工具內編輯命令的便利性以及立即執行命令的能力,NaturalShell 提供了用戶友好、直觀的體驗

包起來

您已經向使用 JavaScript 進行 CLI 工具開發的領域邁出了重要的第一步。透過建立一個簡單但實用的工具,您已經了解了建立、測試和發布 CLI 應用程式的基本知識。不斷嘗試、學習和建構。命令列是一個強大的盟友,現在,由您來指揮。快樂編碼!

如果您發現本指南很有幫助並建立了您自己的出色 CLI 工具,我很樂意看到它!請在下面的評論部分分享您的 GitHub 儲存庫。讓我們一起建造吧!


原文出處:https://dev.to/shreshthgoyal/a-guide-to-building-cli-tools-in-javascript-28nn


共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。

阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈