> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 모듈 관리를 위한 JSR 탐색

JavaScript 모듈 관리를 위한 JSR 탐색

WBOY
풀어 주다: 2024-07-26 13:08:23
원래의
686명이 탐색했습니다.

글: Oyinkansola Awosan✏️

JavaScript는 세계에서 가장 널리 사용되는 프로그래밍 언어가 되었습니다. 프로그래밍하고 싶다고 상상하는 것이 무엇이든 일반적으로 JavaScript가 가장 적합한 언어입니다. 서버, 모바일 장치, 로봇, 브라우저 등에서 실행되는 능력에 따라 평판이 달라지는 모든 프로그래밍에 기능적입니다.

재포지션된 JavaScript 패키지를 관리하는 데 사용되는 npm 패키지 레지스트리를 언급하지 않고는 JavaScript의 성공적인 기록을 논할 수 없습니다. 약 250만 개의 패키지와 수십억 건의 다운로드를 보유한 npm은 대부분의 지표에서 가장 성공적인 소프트웨어 레지스트리입니다.

물론 이것이 npm이 10여년 전 생성된 이후 유일한 기능 레지스트리였다는 의미는 아닙니다. 기능보다 가치 제안이 다른 제품보다 돋보였습니다.

그러나 npm은 "후계자"가 되기까지 오랜 시간이 걸렸습니다. JavaScript 커뮤니티는 현재의 프로그래밍 요구 사항에 더 잘 맞게 설계된 새 레지스트리를 사용할 수 있습니다. 이 글에서는 Deno의 최신 JavaScript 및 TypeScript용 오픈 소스 패키지 레지스트리인 JavaScript Registry(JSR)를 소개합니다.

소프트웨어 레지스트리 시스템에 대한 간략한 검토

먼저 JSR 검토에 대한 맥락을 제공하기 위해 레지스트리 개념에 대한 높은 수준의 개요를 살펴보겠습니다.

레지스트리는 타사 패키지에 대한 은행으로 제공되는 공간입니다. 현재 npm은 대부분의 JavaScript 및 TypeScript 패키지에 대한 기본 레지스트리입니다. 수백만 개의 개인 및 공용 패키지가 있는 곳입니다. 레지스트리의 기본 아이디어는 개발자에게 간단한 프로그래밍 문제를 해결하기 위한 자료와 패키지를 게시하기 위한 라이브러리를 제공하는 것입니다.

레지스트리 시스템은 일반적으로 높은 품질로 인해 많은 기여자의 혜택을 받는 오픈 소스 라이브러리로 운영됩니다. npm 레지스트리 외에도 JavaScript 에코시스템에는 새로운 TypeScript 및 JavaScript 레지스트리인 JSR이 있습니다.

JSR(자바스크립트 레지스트리) 소개

npm과 마찬가지로 JSR은 JavaScript 및 TypeScript 패키지 모두에 대한 레지스트리 역할을 하도록 설계되었습니다. JSR은 npm에서 제공하는 기능에 대한 업그레이드로도 설계되었습니다. 레지스트리는 누구에게나 공개되어 있으며 공개 베타 플랫폼을 통해 액세스할 수 있습니다.

JSR은 패키지를 저장하며 대부분 JavaScript 모듈의 레지스트리입니다. 현재 프로그래밍 요구 사항을 수용하기 위해 ES 모듈 표준 및 기타 최신 JavaScript 혁신을 채택했습니다.

코딩 경험에 대한 이번 업그레이드는 JSR이 기본 TypeScript 지원을 통해 JavaScript를 게시할 수 있다는 것을 의미합니다. 패키지를 레지스트리로 전달하기 전에 트랜스컴파일 없이 코드를 작성할 수 있으므로 재사용 가능한 JavaScript 코드로 프로그래밍할 수 있습니다.

또한 JSR은 기존 패키지 관리자의 단점과 비효율성을 해결하기 위해 보다 현대적인 지침과 접근 방식을 사용합니다. JSR은 모듈 관리 절차를 더 빠르고 안전하게 만들고 최신 JavaScript 기술에 맞춰 조정하려고 합니다.

JSR의 설계는 중복성 제거, 성능 향상, 보안 강화를 강조하므로 현대 웹 개발자는 JSR을 바람직한 대체물로 생각합니다. 기대치를 초과하고 npm, Yarn 또는 pnpm과 같은 기존 패키지 관리자를 능가하는 종속성 및 JavaScript 모듈을 처리하기 위한 보다 정교한 모듈 관리 도구입니다.

이 상세한 기사에서는 다른 일반적인 패키지 관리자와 비교하여 JSR의 주요 아이디어, 이점 및 고유성을 검토하여 JSR에 대해 더 자세히 설명합니다. 이 가이드에서는 많은 사람들이 JSR을 JavaScript 모듈 관리의 미래로 간주하는 이유를 명확히 설명합니다.

왜 JSR을 사용하는가?

JSR이 개발된 이유와 JSR이 다른 패키지 관리자의 경험을 어떻게 개선하는지에 대해 조금 이야기했습니다. 이제 좀 더 구체적으로 알아보겠습니다.

DX 개선

JSR은 다음과 같은 방식으로 개발자 환경을 개선합니다.

  • 자동 생성 문서 — 패키지를 게시하면 JSR은 JavaScript 문서를 사용하여 계속 자동으로 문서를 생성합니다. 이렇게 하면 패키지를 유지 관리하기 위해 다른 문서 사이트를 실행할 필요가 없습니다
  • 패키지 점수 시스템 — JSR은 사용자에게 각 패키지에 대한 개별 점수를 제공합니다. 다양한 패키지의 점수 비율은 패키지를 게시할 때 모범 사례를 장려하고 사용자에게 탐색하려는 패키지에 대한 정보를 제공합니다
  • 런타임 호환성 레이블 — JSR은 여러 런타임에서 작동하도록 설계되었습니다. npm과의 호환성을 고려하면 JSR은 Node, Bun, Cloudware Workers, Browsers 등과 같은 모든 npm 런타임과 호환됩니다. 그러나 JSR은 Deno를 기본 TypeScript 런타임으로 사용하여 설계되었습니다. 이는 레지스트리를 사용하는 동안 다른 런타임 레이블의 기능을 중지하지 않습니다. 런타임 호환성 레이블을 사용하면 사용자가 패키지가 어떤 런타임에 적합한지 명확하게 알 수 있습니다.
  • 감사 가능성 향상 — JSR의 ES 모듈 전용 설계를 사용하면 트랜스컴파일 및 축소된 파일이 아닌 패키지의 소스 코드에 직접 액세스할 수 있어 감사 가능성이 향상됩니다.
  • 중복성 감소 — JSR의 가장 중요한 구성 요소 중 하나는 중복성을 허용하지 않는 종속성 관리입니다. 패키지 관리자는 일반적으로 동일한 종속성의 여러 복사본이 로드된 대규모 노드 모듈을 생성하므로 중복성은 역사적으로 패키지 관리자에게 어려운 문제였습니다. JSR은 무의미한 중복을 제거하고 훨씬 더 제어하기 쉬운 더 작은 프로젝트 폴더를 생성하는 보다 효율적인 해결 방법을 사용하여 이 문제를 해결합니다.
  • 빠른 설치 — JSR의 향상된 성능으로 패키지 설치 시간이 단축되고 신뢰성 관리가 향상됩니다. 또한 JSR은 중복성을 제거하고 지능적인 방법을 적용하여 개발자가 기능 개발에 집중할 수 있도록 지원하여 신뢰성 문제 해결을 기다리지 않아도 됩니다

보시다시피 중복성 감소, 보안 향상, ES 모듈과 같은 기능을 통해 JSR은 DX를 크게 향상시킬 수 있습니다. 이를 통해 프로젝트의 보안과 성능이 유지되고 문제가 발생할 가능성이 낮아지며 JSR을 사용하여 종속성을 처리하는 데 도움이 됩니다.

기존 패키지 관리자의 단점 관리

npm, Yarn 및 기타 기존 패키지 관리자가 JavaScript 생태계 성장에 큰 도움을 주었지만 다음과 같은 단점도 있습니다.

  • 중복화 및 부풀림 — 많은 경우 이러한 기존 패키지 관리자는 불필요한 종속성이 엄청나게 많은 거대한 노드 모듈을 생성하며 일부는 중복되어 결과적으로 프로젝트 규모가 커집니다
  • 성능 오버헤드 — 대규모 애플리케이션의 경우 종속성 설치 및 해결에 시간이 많이 걸릴 수 있습니다
  • 보안 문제 — 패키지 수가 증가함에 따라 종속성 보안이 큰 어려움이 되었습니다

JSR은 최신 JavaScript 표준 및 사례를 활용하는 보다 효과적인 모듈 관리 기술을 적용하여 이러한 문제를 해결합니다.

ES 모듈 채택

ES 모듈을 채택하면 JSR이 흥미로워집니다. ES 모듈은 Node.js의 기본값인 CommonJS에 비해 다양한 이점을 제공하기 때문입니다. ES 모듈 채택이 JSR 및 JavaScript 개발자 커뮤니티에 큰 도움이 되는 몇 가지 예를 살펴보겠습니다.

  • 브라우저와 최신 JavaScript 엔진은 ES 모듈을 자연스럽게 지원하므로 번들러나 트랜스파일러에 대한 요구 사항이 무시됩니다.
  • ES 모듈은 가져오기 및 내보내기의 정적 분석을 허용하여 향상된 도구 및 최적화를 지원합니다
  • ES 모듈의 고정 구조는 나무를 보다 효율적으로 흔들 수 있도록 도와주며, 불필요한 코드를 생략하여 번들 크기를 줄입니다

JSR과 ES 모듈의 긴밀한 통합을 통해 개발자는 이러한 장점을 쉽게 활용하여 보다 관리하기 쉽고 효율적인 코드베이스를 생성할 수 있습니다.

모듈 관리에 대한 JSR의 접근 방식

JSR의 모듈 관리 스타일은 다음 기본 아이디어에 중점을 둡니다.

  • 신속한 종속성 해결 — JSR 종속성 해결 기술은 종속성을 가장 효과적으로 해결하고 중복성을 낮추기 때문에 다른 기술보다 더 창의적입니다. 따라서 더 작은 node_modules 디렉토리와 더 빠른 설치 시간을 생성합니다
  • 향상된 보안 조치 — 최신 소프트웨어 개발은 ​​보안에 결정적으로 의존합니다. JSR의 보안 기능 중에는 설치된 패키지가 변경되지 않았는지 확인하는 패키지 무결성 확인, 알려진 취약점에 대한 종속성을 자주 자동 검색하고 실행 가능한 알림 생성 등이 포함됩니다.
  • 원활한 ES 모듈 통합 — JSR에는 ES 모듈 지원이 처음부터 포함되었습니다. 즉, 추가 설정 없이 표준화된 ES 모듈 구문을 사용하여 지정된 모듈을 사용할 수 있으며, 이는 개발 프로세스를 짜증나게 하고 속도를 늦출 수 있습니다. 또한 이는 브라우저, Node.js, 기타 JavaScript 런타임 및 기타 환경에 대한 호환성을 보장합니다
  • 훨씬 향상된 성능 — JSR의 핵심 초점은 성능입니다. 중복을 줄이고 종속성 해결을 위한 효율적인 알고리즘을 사용하여 종속성을 설치하고 제어하는 ​​데 필요한 시간을 크게 줄입니다

JSR의 성장과 성숙도 탐색

JSR은 독창적인 접근 방식과 명확한 장점으로 처음 개발자의 관심을 끌었던 이후 계속해서 변화해 왔습니다. 얼리 어답터들은 향상된 보안 조치, 더 빠른 설치 시간, 노드 모듈 디렉터리의 중복성 감소를 중요하게 여겼습니다. 보안과 효율성이 중요한 대규모 프로젝트에 참여하는 사람들은 이러한 이점을 특히 높이 평가했습니다.

게다가 Node.js 시스템과 브라우저에 ES 모듈을 포함시키면서 JSR의 확장이 가속화되었습니다. 더 많은 프로젝트가 ES 모듈로 전환됨에 따라 이 모듈 시스템에 대한 기본 지원은 JSR 패키지 관리자의 핵심 구성 요소가 되었으며, 추가 도구 및 설정을 구성할 필요 없이 모듈 관리 작업을 단순화했습니다.

JSR은 개발 중인 패키지 관리자에서 몇 년 후 신뢰할 수 있는 관리자로 발전했습니다. 팀은 보다 정교한 사용 사례를 수용하기 위해 디자인을 변경하고 피드백과 실용적인 사례에 맞춰 기능을 수정했습니다.

이러한 변화로 인해 더 많은 사람들이 JSR 개발에 참여하고 다른 커뮤니티에서 모범 사례를 공유하게 되었습니다. 이러한 혁신과 지속적인 개발을 통해 개발자는 JavaScript 생태계의 진화하는 요구 사항을 충족할 수 있습니다.

JSR의 현재와 미래 가능성

JSR은 혁신적인 개발을 위한 최신 모듈 관리의 큰 가능성을 보여줍니다. 이는 다른 레지스트리 시스템에서 흔히 볼 수 있는 문제 없이 종속성을 효과적으로 제어하려는 많은 프로그래머에게 신뢰할 수 있는 리소스가 되었습니다.

현재 JSR 버전은 향상된 보안 조치와 함께 기본 ES 모듈 지원 및 지능형 종속성 해결을 제공합니다. 이러한 기능은 개발자 경험을 향상시키므로 JSR은 최신 JavaScript 프로젝트에 더 좋습니다.

앞으로 JSR은 JavaScript 생태계가 변화함에 따라 확장하고 새로운 문제를 해결할 수 있는 좋은 잠재력을 가지고 있습니다. 생태계를 확장하면 JSR이 더욱 조화롭고 단순화된 개발 경험을 제공할 수 있습니다.

JSR과 다른 도구 또는 플랫폼의 호환성을 개선하는 것은 더 많은 노력이 필요한 영역 중 하나입니다. 여기에는 공통 빌드 시스템, 개발 환경 및 CI/CD 파이프라인과의 추가 병합이 수반됩니다.

확장성과 성능을 향상시키는 것은 향후 개발을 위한 또 다른 중요한 영역입니다. 복잡성과 규모 변화에 따라 JSR 시스템이 어떻게 종속성을 효율적으로 관리할 수 있는지 아는 것이 중요합니다. 중복성을 추가로 제거하고 종속성 해결 기술을 지속적으로 최적화하면 JSR이 대규모 프로젝트에 대한 합리적인 선택으로 유지될 수 있습니다.

앞으로 JSR 팀은 중요한 보안 패치의 자동 업데이트, 실시간 종속성 취약성 모니터링 등 더욱 발전된 보안 옵션을 제공하고자 합니다. 이러한 수정은 개발자가 안전한 코드베이스를 유지하고 가능한 위험을 낮추는 데 도움이 될 것입니다.

이 외에도 JSR 팀은 활기차고 헌신적인 커뮤니티를 만들기 위해 노력하고 있습니다. 커뮤니티에 투자하면 JSR은 전 세계 개발자의 기여를 꾸준히 늘리고, 철저한 문서화 및 고객 지원을 통해 개발 노력을 지원하며, 혁신과 협력을 장려하는 강력한 생태계를 구축할 수 있습니다.

JSR 팀이 플러그인, 확장 프로그램, 기타 커뮤니티 제작물과 같은 프로젝트를 수용하여 역량을 향상하고 지속 가능하게 만드는 것이 중요합니다.

JSR과 다른 패키지 관리자 비교

JSR의 장점을 더 잘 이해하기 위해 npm, Yarn, pnpm 등 잘 알려진 패키지 관리자와 비교해 보겠습니다. 전반적으로 인상적이지만 이러한 기존 패키지 레지스트리에는 더 많은 정보를 바탕으로 결정을 내리기 위해 고려해야 할 다양한 장점과 단점이 있습니다.

npm Yarn pnpm
Description For many years, Node.js used npm as its default package manager. It offers a massive collection of packages, which streamlines looking for outside libraries. Facebook created Yarn, a package manager, to fix some of NPM's problems. It provides faster, safer, and more dependable dependency management. pnpm is another package manager designed for speed and efficiency. It uses an innovative method of handling dependencies, reducing redundancy, and boosting efficacy. It is also similar to npm. Let us quickly take a brief dive into the strengths and drawbacks of pnpm.
Strengths Boasts one of the biggest JavaScript package registries, giving developers many choices. Many users use Node.js as their default package manager, so npm’s popularity is backed by JavaScript community members. Incredibly user-friendly and requires no particular prior knowledge. Its commands are clear-cut, even for a novice wishing to install, update, or manage packages. Thanks to its parallelized dependency resolution, Yarn has come to provide rapid installation time. Deterministic installs — This ensures that the same dependencies are installed even in different contexts, lowering "works on my machine" problems. Yarn adds various security and dependability-boosting elements, such as package integrity verification and offline caching. Great efficiency — Using a content-addressed storage approach helps to reduce repeated copies of dependences through pnpm, hence reducing the size of node module directories. Relatively fast — It is commonly known that pnpm has an efficient dependency resolution system and fast installation times. Deterministic installations — Like Yarn, pnpm guarantees consistent installation of dependencies across many environments.
Drawbacks Duplicate copies of dependencies cause bloat by expanding the size of the node modules directory. Speed — Particularly on big projects, dependability resolution and installation could take some time. Safety — While the security system has advanced, maintaining the integrity of every dependent still presents a great challenge. Although Yarn has numerous functionalities, it might be more difficult to set up and utilise than npm. Redundancy — Yarn can still result in big node module directories even if it eliminates some redundancy issues. Adoption — pnpm is less extensively embraced than npm or Yarn, which can result in less community support even as it is becoming more well-known. Certain tools and libraries may not be compatible with pnpm. Thus, an extra setting is needed.

결론

JSR은 npm이 할 수 없는 방식으로 2024년 프로그래밍 환경에 더 적합하도록 만들어졌습니다. npm을 포크하도록 설계된 것이 아니라 함께 작동하도록 설계되었습니다. 저렴하게 설계된 JSR은 클라우드 서비스에서 작동하며 제작자에 따르면 시간이 지남에 따라 커뮤니티 조정 및 관리를 목표로 합니다.

JSR을 사용하면 JavaScript 모듈 관리가 크게 향상되었습니다. ES 모듈과 같은 최신 표준을 수용하면 JSR이 기존 패키지 관리자의 제한 사항을 해결하는 보다 효율적이고 안전하며 단순화된 종속성 관리 방법이 됩니다.

프로세스를 최대화하려는 경우 JSR을 사용하는 것은 현명한 결정입니다. 지능형 신뢰성 해결, 확장된 보안 기능 및 기타 기능은 DX와 프로젝트 성능을 향상시킵니다.

npm, Yarn 및 pnpm과 같은 기존 패키지 관리자가 개발자 커뮤니티에 많은 도움을 주었지만 JSR의 창의적인 접근 방식과 최신 JavaScript 기술과의 긴밀한 연결은 앞으로 모듈 관리에서 가장 높은 평가를 받습니다.

JSR을 채택하면 개발자는 중복성 감소, 설치 시간 단축, 안전한 개발 환경을 누릴 수 있어 유지 관리 및 확장성이 뛰어난 시스템을 구축할 수 있습니다. 시간이 지남에 따라 JSR은 특히 패키지 설치 및 사용과 관련하여 더 빠르고 안전한 개발을 위한 최선의 선택인 이유를 계속해서 입증할 것입니다.


새로운 기능을 구축하거나 성능을 향상시키기 위해 새로운 JS 라이브러리를 추가하고 있습니까? 만약 그들이 반대로 행동한다면?

프런트엔드가 점점 더 복잡해지고 있다는 것은 의심의 여지가 없습니다. 새로운 JavaScript 라이브러리와 기타 종속성을 앱에 추가하면 사용자가 알 수 없는 문제에 직면하지 않도록 더 많은 가시성을 확보해야 합니다.

LogRocket은 JavaScript 오류가 마치 자신의 브라우저에서 발생한 것처럼 재생하여 버그에 더욱 효과적으로 대응할 수 있게 해주는 프런트엔드 애플리케이션 모니터링 솔루션입니다.

Exploring JSR for JavaScript module management

LogRocket은 프레임워크에 관계없이 모든 앱에서 완벽하게 작동하며 Redux, Vuex 및 @ngrx/store에서 추가 컨텍스트를 기록하는 플러그인이 있습니다. 문제가 발생한 이유를 추측하는 대신 문제가 발생했을 때 애플리케이션의 상태를 집계하고 보고할 수 있습니다. LogRocket은 또한 앱 성능을 모니터링하여 클라이언트 CPU 로드, 클라이언트 메모리 사용량 등과 같은 측정항목을 보고합니다.

자신있게 구축하세요. 무료로 모니터링을 시작해 보세요.

위 내용은 JavaScript 모듈 관리를 위한 JSR 탐색의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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