CodeLove 論壇 - 免費自學作業包＆新手友善討論區，幫你轉職工程師！

👉 讀技術文章 👉 上自學課程 👉 討論區交流

🔍 搜尋結果：HTML'

在 JavaScript 中建立 CLI 工具的指南

歡迎來到使用 JavaScript 的命令列介面 (CLI) 工具世界的令人興奮的旅程。在本指南中，我將引導您建立 CLI 工具，該工具設定基本的專案結構，解釋每個步驟和程式碼片段，以確保您可以遵循。設定您的開發環境 -------- 在我們深入 CLI 工具的世界之前，讓我們先設定我們的環境： 1. **安裝 Node.js 和 npm：**前往[Node.js 的官方網站](https://nodejs.org/en/)並下載建議的版本。安裝 Node.js 也會安裝 npm，這是您將用來處理 JavaScript 套件的套件管理器。 2. **驗證您的安裝：**開啟終端機並執行以下命令，確保所有內容均已正確安裝： ``` node --version npm --version ``` 查看版本號碼即可確認您已全部設定完畢！建立您的 CLI 工具：專案設定自動化 ------------------- 我們的目標是建立一個能夠自動產生基本專案結構的 CLI 工具，從而省去您每次啟動新專案時手動建立資料夾和檔案的麻煩。 ### 第 1 步：啟動您的專案 1. **建立專案目錄：**這是 CLI 工具程式碼所在的位置。 ``` mkdir my-project-setup cd my-project-setup ``` 2. **初始化您的 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. ``` 3. **實作邏輯：**下面的程式碼建立一個包含目錄和檔案的預定義專案結構： ``` 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.mkdirSync`和`fs.writeFileSync` ，腳本根據定義的結建置立每個目錄和檔案。 **4. 讓您的腳本可執行：**修改`package.json`以包含`"bin"`部分。這告訴 npm 哪個指令應該執行你的腳本： ``` `"bin": { ``` ``` "setup-project": "./index.js" ``` ``` }` ``` ### 第 3 步：在本地測試和連結您的工具在分享您的工具之前，請先對其進行測試： 1. **連結您的工具：**在專案目錄中執行`npm link` 。此命令建立一個符號連結，允許您從終端中的任何位置執行 CLI 工具。 2. **執行您的工具：**只需在終端機的專案目錄中輸入`setup-project`即可。如果一切設定正確，您將看到“專案結構已成功建立！”訊息，以及提到的專案結構。 > 是的，就這樣！ ### 第 4 步：增強功能您的工具現在可以自動執行專案設置，但仍有改進的空間。考慮新增更多功能或處理使用者輸入來自訂專案結構。探索像`yargs`這樣的套件來解析命令列參數。您可以透過[此處的官方文件了解有關 yargs 的更多資訊。](https://yargs.js.org/) ### 第 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 套件](https://www.npmjs.com/package/naturalshell)，[在此處查看 github 儲存庫](https://github.com/shreshthgoyal/naturalshell)。 > 請打 ⭐，並隨時加入新功能並與我一起在 naturalshell 上建置！ > 該工具利用人工智慧來解析自然語言，並根據使用者的需求向使用者提供 shell 命令。除了提供命令之外，它還提供簡潔的解釋，確保使用者不僅知道要做什麼，而且了解其工作原理。憑藉直接在工具內編輯命令的便利性以及立即執行命令的能力，NaturalShell 提供了用戶友好、直觀的體驗包起來 --- 您已經向使用 JavaScript 進行 CLI 工具開發的領域邁出了重要的第一步。透過建立一個簡單但實用的工具，您已經了解了建立、測試和發布 CLI 應用程式的基本知識。不斷嘗試、學習和建構。命令列是一個強大的盟友，現在，由您來指揮。快樂編碼！ > 如果您發現本指南很有幫助並建立了您自己的出色 CLI 工具，我很樂意看到它！請在下面的評論部分分享您的 GitHub 儲存庫。讓我們一起建造吧！ --- 原文出處：https://dev.to/shreshthgoyal/a-guide-to-building-cli-tools-in-javascript-28nn

0個讚 0留言 24瀏覽

小編精選 - 技術文章翻譯 · 02月21日

70 個 JavaScript 面試問題

0個讚 0留言 107瀏覽

小編精選 - 技術文章翻譯 · 11月15日

🚀使用 NextJS、Trigger.dev 和 GPT4 做一個履歷表產生器🔥✨

0個讚 0留言 176瀏覽

小編精選 - 技術文章翻譯 · 10月24日

8款新潮好用的 React 套件分享

0個讚 0留言 271瀏覽

我愛JS · 04月20日

# JS油猴系列-遮蔽廣告(D卡未登入)腳本、自定義新增名單

## 前情提要逛論壇或網站常常有惱人的蓋板廣告，要馬就是要你登入、註冊，要馬就是搞一堆課程的販售廣告，對重視使用者體驗的人來說，真的是一場噩夢！為了解決這個問題，我模擬了AdBlock的其中一個功能，刪除頁面上的元素！乾乾淨淨才是王道阿。 ## 效果按下ctrl+Q啟動刪除元素模式： ![](https://i.imgur.com/411nh3Q.png) 被選取的會加上邊框色彩，讓人確認是否要刪除： ![](https://i.imgur.com/zPEKMhC.png) 點選確認後： ![](https://i.imgur.com/nnOY4Ji.png) 煩人的元素就此消失在這個永恆的宇宙裡。 ## 觀念筆記 ### 套件一：toastr ```javascript= //toast.js cdn匯入 const toastJS = ` <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>` $('body').append(toastJS); ``` ![](https://i.imgur.com/lNDch3V.png) [測試效果反應網站](https://codeseven.github.io/toastr/demo.html) ![](https://i.imgur.com/v95GUfO.png) [[十分鐘學習] toastr - 簡易提示訊息](https://ithelp.ithome.com.tw/articles/10197861) ### 套件二：SweetAlert2 ```javascript= //設定cdn使用Sweetalert套件 let Sweetalert2=`<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>` $('html').append(Sweetalert2) ``` ![](https://i.imgur.com/qUeTUlj.png) ![](https://i.imgur.com/FJH8EMX.png) 有提供很多API範例，還可以自己定義可愛的小動物XD [官方網站](https://sweetalert2.github.io/) ### 監聽鍵盤組合鍵 ``` document.addEventListener('keydown', function(e){ if(e.which==81 && e.ctrlKey==true){ //..... } ``` ### Object.assign 動態修改樣式 ![](https://i.imgur.com/AzZMRCc.png) [用JS動態修改CSS的三種寫法，花式JS玩弄樣式，嚇死你的同事！](https://codelove.tw/@JsLover0018/post/Ja64Kx) ## 油猴程式碼 ```javascript= // ==UserScript== // @name 刪除廣告元素 // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match *://*/* // @require https://code.jquery.com/jquery-3.6.3.min.js // @icon https://www.hexschool.com/ // @grant none // ==/UserScript== (function() { //--------------------------------------- // 宣告變數 let set let Check = true; let List=[] //設定選取的border色彩效果 let styleNeon = `@keyframes neon-color { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }` $('style:last').append(styleNeon) //設定cdn使用Sweetalert套件 let Sweetalert2=`<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>` $('html').append(Sweetalert2) //使用者點選某個元素執行刪除元素function function SetDeleteEl(e){ e.preventDefault(); set=e.target.class console.log(set) const border={ border:"4px dotted red" } const Neon={ animation: "neon-color 2.5s linear infinite" } const NoBorder={ border:"none" } const StopNeon={ animation: "" } Object.assign(e.target.style,border) Object.assign(e.target.style,Neon) //e.target.remove() if (Check==true){ Swal.fire({ title: '確定要刪除這個元素?', showDenyButton: true, showCancelButton: false, confirmButtonText: '確認', denyButtonText: `取消`, }).then((result) => { /* Read more about isConfirmed, isDenied below */ if (result.isConfirmed) { e.target.remove() List.push(e.target.className) localStorage.setItem('List',List); Check=false; Swal.fire('成功刪除此元素!', '', 'success') } else if (result.isDenied) { Check=false; Swal.fire('動作已取消', '', 'info') Object.assign(e.target.style,NoBorder) Object.assign(e.target.style,StopNeon) }; }); } //選取流程結束後解開選取流程的事件綁定 $('body').unbind('click',SetDeleteEl) } //toast.js cdn匯入 const toastJS = ` <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>` $('body').append(toastJS); // 當使用者按下Ctrl+Q 就執行主程序 document.addEventListener('keydown', function(e){ if(e.which==81 && e.ctrlKey==true){ RemoveListItem(); toastr.options = { // 參數設定[註1] "closeButton": false, // 顯示關閉按鈕 "debug": false, // 除錯 "newestOnTop": false, // 最新一筆顯示在最上面 "progressBar": false, // 顯示隱藏時間進度條 "positionClass": "toast-bottom-right", "preventDuplicates": false, // 隱藏重覆訊息 "onclick": null, // 當點選提示訊息時，則執行此函式 "showDuration": "300", // 顯示時間(單位: 毫秒) "hideDuration": "1000", // 隱藏時間(單位: 毫秒) "timeOut": "2000", // 當超過此設定時間時，則隱藏提示訊息(單位: 毫秒) "extendedTimeOut": "1000", // 當使用者觸碰到提示訊息時，離開後超過此設定時間則隱藏提示訊息(單位: 毫秒) "showEasing": "swing", // 顯示動畫時間曲線 "hideEasing": "linear", // 隱藏動畫時間曲線 "showMethod": "fadeIn", // 顯示動畫效果 "hideMethod": "fadeOut" // 隱藏動畫效果 } toastr.success( "已開啟刪除元素模式！" ); $('body').on('click',SetDeleteEl) Check=true }}) function RemoveListItem(){ if (localStorage.getItem('List')!=null){ item=localStorage.getItem('List').split(',') for (i=0;i<item.length;i++){ item[i]='.'+item[i] item[i]=item[i].replaceAll(' ','.') try{ document.querySelector(item[i]).remove()} catch{} } // item='.'+item // item=item.replaceAll(' ','.') // document.querySelector(item).remove() } } //-------------------------------------------------------- })(); ``` ## 心得短短150行左右的程式碼，就寫得好辛苦！（汗過去寫過很多次類似的東西，所以基本上沒有卡關的地方，只是設計邏輯、嘗試的過程還是比想像的還要耗精神( ´•̥̥̥ω•̥̥̥ ) 但寫出來比過去快很多，也比過去好看超級多的。給自己一個讚讚！重新把localstorge複習一遍，Object.assign、套件使用等。算是一個確確實實的實力鞏固過程。 ## 延伸未來可以新增控制黑名單元素的UI。可以新增、刪除，看有哪些元素被列入要刪除的黑名單。

3個讚 3留言 2,395瀏覽

站長阿川 · 01月06日

JavaScript 系列二：第1課 ── 認識 DOM 樹、新增元素

## 課程目標認識 DOM 樹基本觀念能夠在 DOM 樹進行「新增」學會基本的除錯技巧 ## 課程內容請打開這個網站，用這個網站來練習＆寫作業： https://jsfiddle.net 在學 JavaScript 的時候，你會聽到很多人在講「DOM 樹」這個名詞什麼是「DOM 樹」？其實只是，你在網頁上看到的東西，瀏覽器會在背後的 JavaScript 環境，維持一個對應的「DOM 樹」比如說，當你寫這樣的 html（這邊先省略內容，只留結構） ``` <html> <head> <script></script> </head> <body> <div> <h1></h1> <p></p> </div> </body> </html ``` 瀏覽器會在背後創造一個這樣的資料結構 ``` document └── html ├── head │ └── script └── body └── div ├── h1 └── p ``` 很像是樹吧？這就是「DOM 樹」記得之前用過的 `document.getElementById` 嗎？這就是 DOM 最上面的 document 物件所謂的「DOM 樹」其實就是一個「巢狀物件」。「巢狀物件」的意思是，物件的屬性，又是另一個物件，然後這物件的屬性，又可以是另一個物件用 JavaScript 來表示的話，類似這樣（只是概念喔，真實的物件不只是這樣，而是有一堆內建函式與屬性可以用） ``` var document = { name: 'document', children: [ { name: 'html', children: [ { name: 'head', children: [ { name: 'script', children: [] } ] }, { name: 'body', children: [ { name: 'div', children: [ { name: 'h1', children: [] }, { name: 'p', children: [] } ] } ] } ] } ] } ``` 在 DOM 中，被包起來的元素，稱為子元素；把別人包起來的元素，稱為父元素。就跟學 html 時的稱呼一樣瀏覽器會確保用戶介面（User Interface，簡稱 UI）上看到的，跟環境中實際運行的 DOM 長得一模一樣也就是說，你修改 UI 的內容，DOM 物件就會自動更新；你用 JavaScript 修改 DOM 物件的內容，UI 就會自動更新 --- 來學學怎麼用 JavaScript 操作 DOM 樹吧！如果原本 html 長這樣 ``` <div id="app"></div> ``` 只要加入這段程式碼 ``` var heading = document.createElement('h1'); heading.textContent = '這是標題'; var para = document.createElement('p'); para.textContent = '這是段落文字'; var app = document.getElementById('app'); app.append(heading); app.append(para); ``` 利用 document 的內建函數 `createElement` 來動態創造新的元素修改元素的屬性 `.textContent` 來設定文字內容接著用 `.append()` 函數來讓元素吃下別的元素，也就是「把另一個元素收為子元素」，就跟收養子女一樣！最後 html 就會變成這樣 ``` <div id="app"> <h1>這是標題</h1> <p>這是段落文字</p> </div> ``` 馬上貼到 jsfiddle 試試看，實驗一下、玩玩看！ --- 在寫 html 的時候，出現巢狀結構是很常見的操作 DOM 時，當然也可以自由創造巢狀結構 ``` var elem1 = document.createElement('div'); elem1.textContent = 'level 1'; var elem2 = document.createElement('div'); elem2.textContent = 'level 2'; var elem3 = document.createElement('div'); elem3.textContent = 'level 3'; var app = document.getElementById('app'); app.append(elem1); elem1.append(elem2); elem2.append(elem3); ``` 到 jsfiddle 試試看，就會清楚實際效果囉！ --- 在開發的過程中，基本上會不斷打錯字、寫錯用法。程式跑不出結果，很正常這種時候，有兩個常用的除錯方法，我們叫「debug 的方法」第一個方法是 `alert`，你就把不確定的內容，給 alert 出來看看就對了，到處寫 alert 看一下變數內容，確定內容跟預期一樣，再接著繼續寫第二個方法是 `console.log()`，把參數傳進去，接著打開瀏覽器的「開發者工具」，就會看到結果，通常會比 alert 內容更詳細、更方便除錯除此之外，JavaScript 相關的各種錯誤訊息，都會在「開發者工具」出現。請去研究你所使用的瀏覽器，如何打開這個工具 ``` var x = 123; var y = 'hello'; var z = document.createElement('div'); console.log(x) console.log(y) console.log(z) ``` 請打開瀏覽器的開發者工具，實際看一下上述範例的結果。 ## 課後作業假設你是一個健忘的人，你決定寫一個「待辦事項管理」應用程式，來幫助自己這一課，先實作「新增事項」的功能 --- 在上面，做一個文字輸入框，旁邊有一個「新增」按鈕在下面，做一個展示待辦事項的清單，請使用這樣的結構，id 跟 css 之類的你可以自由決定 ``` <ul> <li> <span>倒垃圾</span> </li> <li> <span>繳電話費</span> </li> <li> <span>採買本週食材</span> </li> </ul> ``` 點擊「新增」按鈕，會將新事項插入到清單最底部請稍微替這個清單工具加一點 css 屬性，弄得漂亮一點，這樣的工具才讓人想用 --- 除此之外，請練習一下 `console.log` 的用法，不然之後遇到錯誤，幾乎沒辦法除錯請把作業內容中，出現的變數，隨便挑三個，用 `console.log` 印到開發者工具中，然後用瀏覽器看一下內容 --- 做出以上功能，你就完成這次的課程目標了！

2個讚 39留言 2,316瀏覽

歡迎發文

💡 記錄日常工作的實踐、心得

💡 發表對生活和職場的感悟

💡 針對感興趣的事件發表隨筆或者雜談

💡 詳細介紹你掌握的一門語言、一個技術，或者一個興趣

💡 或者，就直接把你的部落格搬到這裡（支援 API 可以撈）