JavaScript 中的控制台样式只有几千字节
发布于2024-08-01
浏览：640
我不知道你，但我喜欢让我的 JavaScript 项目中的控制台日志看起来不错。由于并非所有终端都支持表情符号，除了为控制台输出着色之外，我还有什么更好的方法呢？
嗯，您可以通过谷歌搜索您想要的每种控制台样式的 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]删除
最新教程
更多>
-
`console.log`显示修改后对象值异常的原因foo = [{id：1}，{id：2}，{id：3}，{id：4}，{id：id：5}，]，]; console.log（'foo1'，foo，foo.length）; foo.splice（2，1）; console.log('foo2', foo, foo....编程 发布于2025-07-03 -
同实例无需转储复制MySQL数据库方法在同一实例上复制一个MySQL数据库而无需转储在同一mySQL实例上复制数据库，而无需创建InterMediate sqql script。以下方法为传统的转储和IMPORT过程提供了更简单的替代方法。 直接管道数据 MySQL手动概述了一种允许将mysqldump直接输出到MySQL clie...编程 发布于2025-07-03
-
为什么我在Silverlight Linq查询中获得“无法找到查询模式的实现”错误？查询模式实现缺失：解决“无法找到”错误在Silverlight应用程序中，尝试使用LINQ建立LINQ连接以错误而实现的数据库”，无法找到查询模式的实现。”当省略LINQ名称空间或查询类型缺少IEnumerable 实现时，通常会发生此错误。 解决问题来验证该类型的质量是至关重要的。在此特定实例中...编程 发布于2025-07-03
-
如何从Google API中检索最新的jQuery库？从Google APIS 问题中提供的jQuery URL是版本1.2.6。对于检索最新版本，以前有一种使用特定版本编号的替代方法，它是使用以下语法：获取最新版本：未压缩）While these legacy URLs still remain in use, it is recommended ...编程 发布于2025-07-03
-
如何将MySQL数据库添加到Visual Studio 2012中的数据源对话框中？在Visual Studio 2012 尽管已安装了MySQL Connector v.6.5.4，但无法将MySQL数据库添加到实体框架的“ DataSource对话框”中。为了解决这一问题，至关重要的是要了解MySQL连接器v.6.5.5及以后的6.6.x版本将提供MySQL的官方Visual...编程 发布于2025-07-03
-
我可以将加密从McRypt迁移到OpenSSL，并使用OpenSSL迁移MCRYPT加密数据？将我的加密库从mcrypt升级到openssl 问题：是否可以将我的加密库从McRypt升级到OpenSSL？如果是这样，如何？答案：是的，可以将您的Encryption库从McRypt升级到OpenSSL。可以使用openssl。附加说明： [openssl_decrypt（）函数要求iv参...编程 发布于2025-07-03
-
如何在GO编译器中自定义编译优化？在GO编译器中自定义编译优化 GO中的默认编译过程遵循特定的优化策略。 However, users may need to adjust these optimizations for specific requirements.Optimization Control in Go Compi...编程 发布于2025-07-03
-
如何在Java字符串中有效替换多个子字符串？在java 中有效地替换多个substring，需要在需要替换一个字符串中的多个substring的情况下，很容易求助于重复应用字符串的刺激力量。 However, this can be inefficient for large strings or when working with nu...编程 发布于2025-07-03
-
如何同步迭代并从PHP中的两个等级阵列打印值？同步的迭代和打印值来自相同大小的两个数组使用两个数组相等大小的selectbox时，一个包含country代码的数组，另一个包含乡村代码，另一个包含其相应名称的数组，可能会因不当提供了exply for for for the uncore for the forsion for for ytry...编程 发布于2025-07-03
-
如何在鼠标单击时编程选择DIV中的所有文本？在鼠标上选择div文本单击带有文本内容，用户如何使用单个鼠标单击单击div中的整个文本？这允许用户轻松拖放所选的文本或直接复制它。 在单个鼠标上单击的div元素中选择文本，您可以使用以下Javascript函数： function selecttext（canduterid）{ if（do...编程 发布于2025-07-03
-
PHP与C++函数重载处理的区别作为经验丰富的C开发人员脱离谜题，您可能会遇到功能超载的概念。这个概念虽然在C中普遍，但在PHP中构成了独特的挑战。让我们深入研究PHP功能过载的复杂性，并探索其提供的可能性。在PHP中理解php的方法在PHP中，函数超载的概念（如C等语言）不存在。函数签名仅由其名称定义，而与他们的参数列表无关。...编程 发布于2025-07-03
-
您可以使用CSS在Chrome和Firefox中染色控制台输出吗？在javascript console 中显示颜色是可以使用chrome的控制台显示彩色文本，例如红色的redors，for for for for错误消息？回答是的，可以使用CSS将颜色添加到Chrome和Firefox中的控制台显示的消息（版本31或更高版本）中。要实现这一目标，请使用以下模...编程 发布于2025-07-03
-
Async Void vs. Async Task在ASP.NET中：为什么Async Void方法有时会抛出异常？在ASP.NET async void void async void void void void void void void的设计无需返回asynchroncon而无需返回任务对象。他们在执行过程中增加未偿还操作的计数，并在完成后减少。在某些情况下，这种行为可能是有益的，例如未期望或明确...编程 发布于2025-07-03
-
eval（）vs. ast.literal_eval（）：对于用户输入，哪个Python函数更安全？称量（）和ast.literal_eval（）中的Python Security 在使用用户输入时，必须优先确保安全性。强大的Python功能Eval（）通常是作为潜在解决方案而出现的，但担心其潜在风险。 This article delves into the differences betwee...编程 发布于2025-07-03
-
在程序退出之前，我需要在C ++中明确删除堆的堆分配吗？在C中的显式删除 在C中的动态内存分配时，开发人员通常会想知道是否有必要在heap-procal extrable exit exit上进行手动调用“ delete”操作员，但开发人员通常会想知道是否需要手动调用“ delete”操作员。本文深入研究了这个主题。 在C主函数中，使用了动态分配变量（H...编程 发布于2025-07-03
学习中文
- 1 走路用中文怎么说？走路中文发音，走路中文学习
- 2 坐飞机用中文怎么说？坐飞机中文发音，坐飞机中文学习
- 3 坐火车用中文怎么说？坐火车中文发音，坐火车中文学习
- 4 坐车用中文怎么说？坐车中文发音，坐车中文学习
- 5 开车用中文怎么说？开车中文发音，开车中文学习
- 6 游泳用中文怎么说？游泳中文发音，游泳中文学习
- 7 骑自行车用中文怎么说？骑自行车中文发音，骑自行车中文学习
- 8 你好用中文怎么说？你好中文发音，你好中文学习
- 9 谢谢用中文怎么说？谢谢中文发音，谢谢中文学习
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
