JavaScript 中的控制台樣式只有幾千位元組
發佈於2024-08-01
瀏覽：566
我不知道你，但我喜歡讓我的 JavaScript 專案中的控制台日誌看起來不錯。由於並非所有終端都支援表情符號，除了為控制台輸出著色之外，我還有什麼更好的方法呢？
嗯，您可以透過Google搜尋您想要的每種控制台樣式的 ANSI 轉義程式碼來實現這一點。或者可以從 W3Docs 等頁面記住其中的一些內容。但我喜歡讓我的日誌看起來不錯，我絕對不是一個可以記住很多東西的人，我喜歡有一種方法在任何地方都有效。
嗯，我通常只在 JS 中使用彩色日誌，所以不需要任何地方都能工作的東西。但至少在涉及 JavaScript 的地方都可以運作。
因此，我決定編寫自己的腳本，以函數的形式包含我可能需要的所有可能的 ANSI 轉義碼。但後來我意識到在我的所有專案中一遍又一遍地複製相同的腳本會很煩人。因此，作為一個除了npm i 和init 之外從未使用過npm 命令的人，我決定了解更多信息並創建一個私有NPM 包，我可以將其安裝在我的專案中（或者克隆其GitHub 存儲庫以用於非NodeJS 專案）。
我不想每次安裝軟體包時都處理 NPM 身份驗證，所以我只是將其公開。
這就是我們今天的目的：javascript-console-styling 是我為了簡化這個過程而製作的一個套件。
確實，以前已經製作過與我類似的包（這是我製作後才意識到的事實）。但我注意到我自己的解決方案對我或像我這樣的人來說仍然更好：
根據 npm 的說法，我的包包只佔用了 14KB 的空間。而其他類似的軟體包則佔用相同數量的50倍
（超過500 KB）。儘管它們都在兆位元組以下，但最好使用較小的包，因為您可以輕鬆管理其所有文件（或者如果您願意，甚至可以輕鬆分叉並修改它）- 我的包可以嵌套不同的樣式和裝飾，因為它們是函數...即使您有一個完整的樣式字串，其中包含具有不同樣式的子字串，那麼您也可以連接子字串（包括內部的子字串）由於每個樣式函數所做的重置，父字串將阻止在其之後應用任何樣式）
- 我的包有簡單的測試工具，可以顯示所有可能的顏色和裝飾組合，以便用戶可以在終端中驗證其輸出（測試功能不包含在預設包中，但可以在NPM 頁面和GitHub）
所以總的來說，我更喜歡使用我自己的程式碼。但擁有公共套餐的一部分是確保人們知道它可以如何幫助他們，以便他們可以在需要時自行選擇。
我不認為這會是我創建的最後一個 NPM 包，但這是一個讓我對整個 NPM 事情充滿動力的好方法！
請務必檢查包裝，祝您駭客愉快！
版本聲明
本文轉載於：https://dev.to/proman4713/console-styling-in-javascript-with-a-few-kilobytes-2gjn?1如有侵犯，請聯絡[email protected]刪除
最新教學
更多>
-
為什麼我的 React Native Android 建置在升級到版本 0.71.0-rc.0 後失敗？由於React Native 版本0.71.0-rc.0，React Native Android 建置失敗問題：最近，儘管沒有進行任何程式碼更改，但用戶在建立React Native Android 應用程式時遇到了各種錯誤。這些錯誤的表現可能有所不同，但它們通常涉及安裝失敗或未解決的依賴關係問題...程式設計 發佈於2024-12-26 -
預載如何顯著減少 Web 渲染中的字體載入延遲？有效緩解網頁渲染中的字體載入延遲透過@font-face嵌入自訂字體是網頁設計中的常見做法，但它可能會引入閃爍效果，其中文字最初以預設系統字體呈現，然後在完成後切換到自訂字體。這種不希望的延遲是由字體檔案的非同步載入引起的。 透過「Preload」搶佔字型載入為了最大限度地減少這種延遲，業界標準解決...程式設計 發佈於2024-12-26
-
插入資料時如何修復「常規錯誤：2006 MySQL 伺服器已消失」？插入記錄時如何解決「一般錯誤：2006 MySQL 伺服器已消失」介紹：將資料插入MySQL 資料庫有時會導致錯誤「一般錯誤：2006 MySQL 伺服器已消失」。當與伺服器的連線遺失時會出現此錯誤，通常是由於 MySQL 配置中的兩個變數之一所致。 解決方案：解決此錯誤的關鍵是調整wait_tim...程式設計 發佈於2024-12-26
-
在 Go 中使用 WebSocket 進行即時通信构建需要实时更新的应用程序（例如聊天应用程序、实时通知或协作工具）需要比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方！今天，我们将探讨如何在 Go 中使用 WebSocket，以便您可以向应用程序添加实时功能。 在这篇文章中，我们将介绍： WebSocke...程式設計 發佈於2024-12-26
-
如何在單一頁面上使用多個 jQuery 版本而不發生衝突？單頁上的多個jQuery 版本將依賴jQuery 的小部件整合到客戶的網頁中時，如果它們是已經使用過時的jQuery 版本。確保相容性，同時避免干擾現有程式碼變得至關重要。 幸運的是，jQuery 透過其 noConflict 模式提供了解決方案。這允許您載入多個版本的庫而不會發生衝突。 程式碼實作...程式設計 發佈於2024-12-26
-
Pandas 中的 For 迴圈總是低效嗎？ 什麼時候應該優先考慮迭代而不是向量化？pandas 中的 for 迴圈真的很糟糕嗎？我什麼時候該關心？ 簡介雖然 pandas 以其可加速計算的向量化運算而聞名，但許多程式碼範例仍包含循環。雖然文件建議避免對資料進行迭代，但本文探討了 for 迴圈比向量化方法提供更好效能的場景。 小數據上的迭代與向量化For對於小數據，for 循環的性...程式設計 發佈於2024-12-26
-
如何在 PHP 中組合兩個關聯數組，同時保留唯一 ID 並處理重複名稱？在 PHP 中組合關聯數組在 PHP 中，將兩個關聯數組組合成一個數組是常見任務。考慮以下請求：問題描述：提供的代碼定義了兩個關聯數組，$array1和$array2。目標是建立一個新陣列 $array3，它合併兩個陣列中的所有鍵值對。 此外，提供的陣列具有唯一的 ID，而名稱可能重疊。要求是建構一...程式設計 發佈於2024-12-26
-
CSS 中的偶數與奇數列表項樣式：`li:odd`/`:even` 或 `:nth-child()`？偶數與奇數列表元素的樣式：偽類與第n 個子元素當嘗試使用CSS 偽類實現列表項的交替顏色時，您可以遇到問題。雖然為此目的使用 li:odd 和 li:even 似乎合乎邏輯，但其行為可能是不可預測的。 要有效地設定列表項目的偶數和奇數實例的樣式，請考慮使用以下方法： 而不是：li { color: ...程式設計 發佈於2024-12-26
-
儘管程式碼有效，為什麼 POST 請求無法擷取 PHP 中的輸入？解決PHP 中的POST 請求故障在提供的程式碼片段中：action=''而非：action="<?php echo $_SERVER['PHP_SELF'];?>";?>"檢查$_POST陣列：表單提交後使用 var_dump 檢查 $_POST 陣列的內...程式設計 發佈於2024-12-26
-
Bootstrap 4 Beta 中的列偏移發生了什麼事？Bootstrap 4 Beta：列偏移的刪除和恢復Bootstrap 4 在其Beta 1 版本中引入了重大更改柱子偏移了。然而，隨著 Beta 2 的後續發布，這些變化已經逆轉。 從 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中， offset-md-*...程式設計 發佈於2024-12-26
-
如何在 HTML 表格中有效地使用 Calc() 和基於百分比的欄位？在表格中使用Calc()：克服百分比困境創建具有固定寬度列和可變寬度列的表格可能具有挑戰性，尤其是在嘗試在其中使用calc() 函數。 在 HTML 中，使用 px 或 em 設定固定列寬非常簡單。但是，對於可變寬度列，通常使用百分比 (%) 單位。然而，當在表中使用 calc() 時，百分比似乎無...程式設計 發佈於2024-12-26
-
如何在PHP中透過POST提交和處理多維數組？在PHP 中透過POST 提交多維數組當使用具有可變長度的多列和行的PHP 表單時，有必要進行轉換輸入到多維數組中。這是解決這項挑戰的方法。 首先，為每列分配唯一的名稱，例如：<input name="topdiameter[' current ']" type="...程式設計 發佈於2024-12-26
-
for(;;) 迴圈到底是什麼、它是如何運作的？揭秘神秘的for(;;) 循環在古老的程式碼庫深處，你偶然發現了一個令人困惑的奇特for 循環你的理解。其顯示如下：for (;;) { //Some stuff }您深入研究線上資源，但發現自己陷入沉默。讓我們來剖析這個神秘的構造。 for 迴圈的結構Java 中的for 迴圈遵循特定的語...程式設計 發佈於2024-12-25
學習中文
- 1 走路用中文怎麼說？ 走路中文發音，走路中文學習
- 2 坐飛機用中文怎麼說？ 坐飞机中文發音，坐飞机中文學習
- 3 坐火車用中文怎麼說？ 坐火车中文發音，坐火车中文學習
- 4 坐車用中文怎麼說？ 坐车中文發音，坐车中文學習
- 5 開車用中文怎麼說？ 开车中文發音，开车中文學習
- 6 游泳用中文怎麼說？ 游泳中文發音，游泳中文學習
- 7 騎自行車用中文怎麼說？ 骑自行车中文發音，骑自行车中文學習
- 8 你好用中文怎麼說？ 你好中文發音，你好中文學習
- 9 謝謝用中文怎麼說？ 谢谢中文發音，谢谢中文學習
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
