JavaScript 中的控制台样式只有几千字节
发布于2024-08-01
浏览：833
我不知道你，但我喜欢让我的 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]删除
最新教程
更多>
-
如何处理PHP文件系统功能中的UTF-8文件名？在PHP的Filesystem functions中处理UTF-8 FileNames 在使用PHP的MKDIR函数中含有UTF-8字符的文件很多flusf-8字符时，您可能会在Windows Explorer中遇到comploreer grounder grounder grounder gro...编程 发布于2025-03-28 -
如何使用组在MySQL中旋转数据？在关系数据库中使用mySQL组使用mySQL组进行查询结果，在关系数据库中使用MySQL组，转移数据的数据是指重新排列的行和列的重排以增强数据可视化。在这里，我们面对一个共同的挑战：使用组的组将数据从基于行的基于列的转换为基于列。 Let's consider the following ...编程 发布于2025-03-28
-
为什么我的CSS背景图像出现？故障排除：CSS背景图像未出现 ，您的背景图像尽管遵循教程说明，但您的背景图像仍未加载。图像和样式表位于相同的目录中，但背景仍然是空白的白色帆布。而不是不弃用的，您已经使用了CSS样式： bockent {背景：封闭图像文件名：背景图：url（nickcage.jpg）; 如果您的html，css...编程 发布于2025-03-28
-
如何在全高布局中有效地将Flexbox和垂直滚动结合在一起？在全高布局中集成flexbox和垂直滚动Traditional Flexbox Approach (Old Properties)Flexbox layouts using the old syntax (display: box) permit full-height apps with ver...编程 发布于2025-03-28
-
如何使用Python理解有效地创建字典？在python中，词典综合提供了一种生成新词典的简洁方法。尽管它们与列表综合相似，但存在一些显着差异。与问题所暗示的不同，您无法为钥匙创建字典理解。您必须明确指定键和值。 For example:d = {n: n**2 for n in range(5)}This creates a dicti...编程 发布于2025-03-28
-
为什么PYTZ最初显示出意外的时区偏移？与pytz 最初从pytz获得特定的偏移。例如，亚洲/hong_kong最初显示一个七个小时37分钟的偏移： 差异源利用本地化将时区分配给日期，使用了适当的时区名称和偏移量。但是，直接使用DateTime构造器分配时区不允许进行正确的调整。 example pytz.timezone（...编程 发布于2025-03-28
-
如何配置Pytesseract以使用数字输出的单位数字识别？Pytesseract OCR具有单位数字识别和仅数字约束 在pytesseract的上下文中，在配置tesseract以识别单位数字和限制单个数字和限制输出对数字可能会提出质疑。 To address this issue, we delve into the specifics of Te...编程 发布于2025-03-28
-
如何检查对象是否具有Python中的特定属性？方法来确定对象属性存在寻求一种方法来验证对象中特定属性的存在。考虑以下示例，其中尝试访问不确定属性会引起错误： >>> a = someClass（） >>> A.property Trackback（最近的最新电话）： 文件“ ”，第1行， AttributeError: SomeClass...编程 发布于2025-03-28
-
如何在Java中执行命令提示命令，包括目录更改，包括目录更改？在java 通过Java通过Java运行命令命令可能很具有挑战性。尽管您可能会找到打开命令提示符的代码段，但他们通常缺乏更改目录并执行其他命令的能力。 solution：使用Java使用Java，使用processBuilder。这种方法允许您：启动一个过程，然后将其标准错误重定向到其标准输出。...编程 发布于2025-03-28
-
为什么尽管有效代码，为什么在PHP中捕获输入？在php ;?>" method="post">The intention is to capture the input from the text box and display it when the submit button is clicked.但是，输出...编程 发布于2025-03-28
-
如何在Java的全屏独家模式下处理用户输入？Handling User Input in Full Screen Exclusive Mode in JavaIntroductionWhen running a Java application in full screen exclusive mode, the usual event ha...编程 发布于2025-03-28
-
Python读取CSV文件UnicodeDecodeError终极解决方法在试图使用已内置的CSV模块读取Python中时，CSV文件中的Unicode Decode Decode Decode Decode decode Error读取，您可能会遇到错误的错误：无法解码字节 在位置2-3中：截断\ uxxxxxxxx逃脱当CSV文件包含特殊字符或Unicode的路径逃...编程 发布于2025-03-28
-
找到最大计数时，如何解决mySQL中的“组函数\”错误的“无效使用”？如何在mySQL中使用mySql 检索最大计数，您可能会遇到一个问题，您可能会在尝试使用以下命令：理解错误正确找到由名称列分组的值的最大计数，请使用以下修改后的查询： 计数（*）为c 来自EMP1 按名称组 c desc订购 限制1 查询说明 select语句提取名称列和每个名称...编程 发布于2025-03-28
-
为什么使用固定定位时，为什么具有100％网格板柱的网格超越身体？网格超过身体，用100％grid-template-columns 为什么在grid-template-colms中具有100％的显示器，当位置设置为设置的位置时，grid-template-colly修复了？问题： 考虑以下CSS和html： class =“ snippet-code”> g...编程 发布于2025-03-28
-
如何使用Java.net.urlConnection和Multipart/form-data编码使用其他参数上传文件？使用http request 上传文件上传到http server，同时也提交其他参数，java.net.net.urlconnection and Multipart/form-data Encoding是普遍的。 Here's a breakdown of the process:Mu...编程 发布于2025-03-28
学习中文
- 1 走路用中文怎么说？走路中文发音，走路中文学习
- 2 坐飞机用中文怎么说？坐飞机中文发音，坐飞机中文学习
- 3 坐火车用中文怎么说？坐火车中文发音，坐火车中文学习
- 4 坐车用中文怎么说？坐车中文发音，坐车中文学习
- 5 开车用中文怎么说？开车中文发音，开车中文学习
- 6 游泳用中文怎么说？游泳中文发音，游泳中文学习
- 7 骑自行车用中文怎么说？骑自行车中文发音，骑自行车中文学习
- 8 你好用中文怎么说？你好中文发音，你好中文学习
- 9 谢谢用中文怎么说？谢谢中文发音，谢谢中文学习
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
