JavaScript 中的控制台样式只有几千字节
发布于2024-08-01
浏览：182
我不知道你，但我喜欢让我的 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]删除
最新教程
更多>
-
插入数据时如何修复“常规错误：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
-
除了“if”语句之外：还有什么地方可以在不进行强制转换的情况下使用具有显式“bool”转换的类型？无需强制转换即可上下文转换为 bool您的类定义了对 bool 的显式转换，使您能够在条件语句中直接使用其实例“t”。然而，这种显式转换提出了一个问题：“t”在哪里可以在不进行强制转换的情况下用作 bool？上下文转换场景C 标准指定了四种值可以根据上下文转换为的主要场景bool:语句：if、whi...编程 发布于2024-12-26
-
尽管代码有效，为什么 POST 请求无法捕获 PHP 中的输入？解决 PHP 中的 POST 请求故障在提供的代码片段中：action=''而不是：action="<?php echo $_SERVER['PHP_SELF'];?>";?>"检查 $_POST数组：表单提交后使用 var_dump 检查 $_POST 数...编程 发布于2024-12-26
-
如何使用 MySQL 查找今天生日的用户？如何使用 MySQL 识别今天生日的用户使用 MySQL 确定今天是否是用户的生日涉及查找生日匹配的所有行今天的日期。这可以通过一个简单的 MySQL 查询来实现，该查询将存储为 UNIX 时间戳的生日与今天的日期进行比较。以下 SQL 查询将获取今天有生日的所有用户： FROM USERS ...编程 发布于2024-12-26
-
如何修复 macOS 上 Django 中的“配置不正确：加载 MySQLdb 模块时出错”？MySQL配置不正确：相对路径的问题在Django中运行python manage.py runserver时，可能会遇到以下错误：ImproperlyConfigured: Error loading MySQLdb module: dlopen(/Library/Python/2.7/site-...编程 发布于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=&qu...编程 发布于2024-12-26
学习中文
- 1 走路用中文怎么说？走路中文发音，走路中文学习
- 2 坐飞机用中文怎么说？坐飞机中文发音，坐飞机中文学习
- 3 坐火车用中文怎么说？坐火车中文发音，坐火车中文学习
- 4 坐车用中文怎么说？坐车中文发音，坐车中文学习
- 5 开车用中文怎么说？开车中文发音，开车中文学习
- 6 游泳用中文怎么说？游泳中文发音，游泳中文学习
- 7 骑自行车用中文怎么说？骑自行车中文发音，骑自行车中文学习
- 8 你好用中文怎么说？你好中文发音，你好中文学习
- 9 谢谢用中文怎么说？谢谢中文发音，谢谢中文学习
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
