JSR: 새로운 Javascript 패키지 레지스트리
최근에 JSR이라는 용어가 화제가 되고 있습니다.
JSR은 JavaScript Registry의 약자로, 다음 세대 JavaScript/TypeScript 패키지 레지스트리를 의미합니다.
이 글은 JSR에 대한 작성자의 단편적인 정보를 모아 작성한 것입니다. 오류가 포함되어 있을 수 있습니다. 그럴 경우 지적해 주시면 감사하겠습니다.
npm과 어떤 점이 다를까요?
npm은 Node Package Manager의 약자로, 이름 그대로 Node.js용으로 개발된 패키지 매니저 및 해당 패키지 매니저가 사용하는 레지스트리입니다.
그 편리함 때문에 Node.js 이외의 브라우저나 다른 런타임에서도 사용됩니다.
예를 들어 Svelte는 브라우저용 패키지이지만, Node.js의 패키지 매니저인 npm 레지스트리에 등록되어 있습니다.
Node.js를 위해 만들어진 만큼 다음과 같은 단점이 있습니다.
- TypeScript 미지원
- TypeScript 파일을 그대로 게시하거나 빌드하여 게시할 수 있지만, 스마트하지 않습니다.
- ESM에 미달하는 경우가 있음
- CJS 패키지가 많이 있습니다.
반면, JSR은 다음과 같은 특징을 가지고 있습니다.
- 순수 TypeScript 지원
- TypeScript를 그대로 게시할 수 있는 것 같습니다.
- Node.js 등을 위해 .d.ts 파일도 자동으로 생성해 줍니다.
- ESM
- ESM 패키지만 게시할 수 있어 현대적입니다.
또한 결정적인 차이로 역할의 차이가 있습니다.
npm은 패키지 매니저/레지스트리입니다.
반면 JSR은 레지스트리입니다. 패키지 매니저의 역할을 하지 않습니다.
예를 들어, Node.js에서 @std/assert 패키지를 설치하려면 다음과 같은 명령을 사용합니다.
npx jsr add @std/assert
"뭐야, 패키지 매니저잖아"라고 생각했을 수도 있습니다.
그러나 이 명령은 패키지 매니저가 아닙니다.
이해를 돕기 위해 단계를 살펴보겠습니다.
먼저, 이 명령을 실행하면 package.json이 다음과 같이 업데이트됩니다.
"dependencies": {
"@std/assert": "npm:@jsr/std__assert"
}
그런 다음 npm의 경우 .npmrc, Bun의 경우 bunfig.toml 등에 @jsr:을 https://npm.jsr.io로 해결하는 코드를 추가합니다.
마지막으로 npm i로 종속성을 설치하면 완료됩니다.
jsr 명령은 npm을 사용할 때 jsr을 편리하게 사용할 수 있도록 도와주는 래퍼입니다.
패키지 매니저가 아닙니다.
참고로, https://npm.jsr.io는 JSR 패키지를 npm용으로 변환하여 배포하는 서버인 것 같습니다.
Deno를 위해 만들어진
JSR은 Deno를 위해 만들어진 것으로 알려져 있습니다.
다음 세대¹의 위치를 차지하고 있죠.
그래서 Deno에는 JSR을 위한 다양한 기능이 탑재되어 있습니다.
- jsr: import
import * as package from 'jsr:@xxx/xxx@version'
와 같이 JSR 패키지를 다운로드하여 사용할 수 있습니다.
- deno add *
위의 방법은 deno.land/x와 같이 버전 관리가 어려운 경우입니다.
// deno.json
{
"imports": {
"@std/assert": "jsr:@std/assert@^0.218.2"
}
}
이렇게 importMap을 사용하여 deno.land/x와 유사한 방식으로 설정할 수 있습니다.
이를 더 간단하게 만드는 것이 deno add입니다.
deno add @std/assert
를 실행하면 됩니다.
- deno publish
deno.json에
{
"name": "@scope/package",
"version": "1.0.0",
"exports": "./mod.ts"
}
를 추가하면 deno publish로 간단하게 공개할 수 있습니다.
JSR을 공개할 수 있는겁니다.
기타 기능
- JSDOC에서 자동으로 문서 생성
- 패키지 스코어링
- GitHub Actions를 통한 간결한 자동 publish
마지막으로
JSR, 정말 멋져보이는데요.
분산형이 아니라는 점이 조금 아쉽긴 하네요.
그럼.
'Javascript' 카테고리의 다른 글
Hono 웹 프레임워크 소개 (3) | 2024.03.06 |
---|---|
2024 React 리액트 치트 시트 (0) | 2024.03.04 |
저렴하고 확장 가능한 서버리스 백엔드 플랫폼: Koyeb과 Neon 소개 (0) | 2024.02.27 |
Binary Large Object - Blob이란? (1) | 2024.02.27 |
미래의 React는 아마도 SvelteJS처럼 컴파일될겁니다 (1) | 2024.02.24 |