몇 킬로바이트의 JavaScript로 콘솔 스타일 지정

王林
풀어 주다: 2024-07-18 18:34:31
원래의
780명이 탐색했습니다.

Console Styling in JavaScript with a few kilobytes

저는 당신에 대해 모르지만 JavaScript 프로젝트에 콘솔 로그를 유지하는 것을 좋아합니다. 그리고 모든 터미널이 이모티콘을 지원하는 것은 아니므로 콘솔 출력을 색칠하는 것보다 더 좋은 방법이 있을까요?

원하는 각 콘솔 스타일에 대한 ANSI 이스케이프 코드를 검색하여 해결할 수 있습니다. 아니면 W3Docs와 같은 페이지에서 그 중 일부를 외울 수도 있습니다. 하지만 저는 로그를 보기 좋게 만드는 것을 좋아합니다. 저는 확실히 많은 것을 외울 수 있는 사람은 아니며 어디서나

작동하는 한 가지 방법을 사용하는 것을 좋아합니다.

저는 보통 JS에 컬러 로그만 사용하므로 말 그대로 모든 곳에서 작동하는 것이 필요하지 않습니다. 하지만 최소한 JavaScript가 포함된 모든 곳에서 작동하는 것입니다.

그래서 저는 필요할 수 있는 모든 ANSI 이스케이프 코드를 함수 형식으로 포함하는 스크립트를 직접 작성하기로 결정했습니다. 그러나 나는 모든 프로젝트에서 동일한 스크립트를 계속해서 복사하는 것이 성가신 일이라는 것을 깨달았습니다. 그래서 npm i 및 init 외에 npm 명령을 사용한 적이 없는 사람으로서 저는 더 자세히 알아보고 프로젝트에 설치할 수 있는(또는 NodeJS가 아닌 프로젝트의 경우 GitHub 저장소를 복제할 수 있는) 비공개 NPM 패키지를 만들기로 결정했습니다.
패키지를 설치할 때마다 NPM 인증을 다루고 싶지 않아서 그냥 공개로 했습니다.

오늘 우리가 여기에 있는 이유는 javascript-console-styling은 이 프로세스를 쉽게 하기 위해 제가 만든 패키지입니다.

실제로 저와 비슷한 패키지가 이전에 만들어진 적이 있습니다(만들고 나서야 깨달은 사실입니다). 하지만 저는 저 자신이나 저와 같은 누구에게나 제 솔루션이 여전히 더 낫다는 것을 깨달았습니다.

  • npm에 따르면 내 패키지는 14KB의 공간만 차지했습니다. 다른 유사한 패키지는 같은 양(500KB 이상)을 최대 50배 차지했습니다. 둘 다 메가바이트 미만이더라도 모든 파일을 쉽게 관리할 수 있으므로 더 작은 패키지를 사용하는 것이 더 좋습니다(또는 원할 경우 쉽게 포크하고 수정할 수도 있음)

  • 내 패키지는 함수이기 때문에 다양한 스타일과 장식을 중첩할 수 있습니다... 그리고 다른 스타일의 하위 문자열을 포함하는 전체 스타일 문자열이 있는 경우에도 하위 문자열을 연결할 수 있습니다(내부 하위 문자열 포함). 상위 문자열은 각 스타일 지정 기능이 수행하는 재설정으로 인해 이후에 모든 스타일 적용을 중지합니다.

  • 내 패키지에는 사용자가 터미널에서 출력을 확인할 수 있도록 가능한 모든 색상 및 장식 조합을 보여주는 쉬운 테스트 도구가 있습니다. (테스트 기능은 기본 패키지에는 포함되어 있지 않지만 NPM 페이지 및 NPM 페이지에서 사용할 수 있습니다. GitHub)

그래서 전반적으로 저는 제가 만든 코드를 사용하는 것을 선호합니다. 하지만 공개 패키지를 소유하는 것의 한 부분은 사람들이 그것이 어떻게 도움이 될 수 있는지 확인하여 필요한 경우 스스로 선택할 수 있도록 하는 것입니다.

이것이 제가 만드는 마지막 NPM 패키지가 될 것이라고는 생각하지 않지만 전체 NPM에 대해 동기를 부여할 수 있는 좋은 방법이었습니다!

패키지 꼭 확인하시고 즐거운 해킹되세요!

위 내용은 몇 킬로바이트의 JavaScript로 콘솔 스타일 지정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿