chouung commented 3 months ago

Deno의 아이디어는 좋긴 합니다만... Node에서 Deno로 옮겨가는 것은 누구에게도 쉽지 않습니다. JSR도 좋은 것 같긴 합니다만... npm에서 옮겨가기는 쉽지 않겠습니다... JSR.. 한번.. 알아보실래요...? (Deno의 공룡은 참 귀엽습니다.)

Introducing JSR - the JavaScript Registry

원문 : Introducing JSR - the JavaScript Registry

Getting-start

JSR - 자바스크립트 레지스트리가공개 베타 버전으로 출시되었습니다.
JSR은 TypeScript에 최적화되어 있으며 ES 모듈만 지원합니다.
Deno 및 npm 기반 프로젝트(Node, Bun, Cloudflare Workers 등)에서 작동하며무료 오픈 소스입니다.

Install

# deno
deno add @luca/flag

# npm (and npm-like systems)
npx jsr add @luca/flag

Import

import { printProgress } from "@luca/flag";

printProgress();

publish

# with deno installed (https://docs.deno.com/runtime/manual)
deno publish

# with npm-like systems
npx jsr publish

모듈은 JSR에 TypeScript 소스 코드로 게시됩니다.
API 문서 생성, 노드와 유사한 환경을 위한 유형 선언 및 번역은 모두 JSR에서 처리합니다.

그래서 JSR이 뭔가요 ?

자바스립트는 거의 모든 곳에서 실행되고 있습니다. 15년 사이에 Node가 이렇게 되기까지엔 npm의 성공을 같이 언급하지 않을 수 업습니다. npm이 처음 출시된 이후 자바스크립트 생태계에는 많은 변화가 있었습니다. 웹 표준이 CommonJS에서 ECMAScript module로 대체되기도 했습니다.

JSR이 왜 나오게 되었나요 ?

npm은 오늘날에도 웹 개발의 기본 구성 요소로 남아 있지만, 이러한 새로운 현실을 염두에 두고 설계된 것은 아닙니다. 이제 2024년에는 패키지 레지스트리의 작동 방식을 다시 생각해봐야 할 때라고 생각합니다.

JSR의 설계 목표

자바스크립트 모듈을 위한 웹 표준으로 ESM을 수용해야 합니다.
첫 번째 원칙부터 Typescript용으로 설계되어야 합니다.
간단하고 빠르며 뛰어난 개발자 경험을 제공해야 합니다.
무료 오픈 소스여야 하며, 자바스크립트가 작동하는 모든 곳에서 작동해야 합니다.

JSR 사용하기

JSR 홈페이지에서 모듈을 검색하거나 패키지 설명에 따라 검색할 수 있습니다.
각 패키지에는 관련된 품질 점수가있습니다. 이 점수는 문서의 완성도, 빠른 유형 검사를 위한 최적의 유형 선언, 여러 런타임과의 호환성 등 다양한 요소에 의해 결정됩니다.
npm처럼 기본적인 사용법에 대한 문서가 있습니다. 아래는 간단한 사용법입니다.

// install
npm init --yes
npx jsr i @oak/oak

// import
import { Application, Router } from "@oak/oak";

const router = new Router();
...

JSR에 게시하기

TypeScript로 패키지를 작성하고 빌드 단계 없이 TypeScript 소스를 JSR에 바로 게시할 수 있습니다.
Deno는 기본적으로 TypeScript를 지원하므로 Deno를 사용하여 이 모듈을 빌드하는 것이 가장 빠르지만, 선 호호는런임타을사용사하여 TypeScript를 작성할 수 있습니다.

예시로 yassify라는 TypeScript 모듈을 만들어 게시해 보겠습니다.

yassify라는 폴더를 만들고 그 안에 파일 3개를 만듭니다.

// yassify/jsr.json - 패키지의 메타데이터 파일

{
  "name": "@kwhinnery/yassify", // 패키지의 범위 + 이름을 결합하는 속성
  "version": "1.0.0", // 시맨틱 버전 관리
  "exports": "./mod.ts" // 어떤 모듈을 내보낼지 지정
}

// yassify/mod.ts - 모듈의 구현 코드 ( 이름은 중요하지 않습니다 )

/**
 * Yassify a string of text by appending emoji
 *
 * @param str The string of text to yassify.
 * @returns a string of text with emoji appended
 */
export function yassify(str: string): string {
  return `${str} 💅✨👑`;
}

// README.md - jsr.io에서 모듈의 개요로 사용되는 마크다운 파일

# yassify

Use `yassify` to apply advanced beauty filters to any string of text.

## License

MIT

세 개의 파일이 생성되면 다음 명령어를 사용하여 명령줄에서 모듈을 게시할 수 있습니다.
```
deno publish
혹은
npx jsr pubhs 
```
모듈을 처음 게시하는 경우 해당 모듈의 범위와 패키지 이름을 만들라는 메시지가 표시될 수 있습니다. 작성하고 만들면 됩니다 !

잠시 후 게시 완료 !

kevin@kevin-deno yassify % deno publish
Check file:///Users/kevin/dev/kwhinnery/yassify/mod.ts
Checking for slow types in the public API...
Check file:///Users/kevin/dev/kwhinnery/yassify/mod.ts
'@kwhinnery/yassify' doesn't exist yet. Visit xxx to create the package
Waiting...
Package @kwhinnery/yassify created
Visit https://jsr.io/auth?code=x to authorize publishing of @kwhinnery/yassify
Waiting...
Authorization successful. Authenticated as Kevin Whinnery
Publishing @kwhinnery/yassify@1.0.0 ...
Successfully published @kwhinnery/yassify@1.0.0
Visit https://jsr.io/@kwhinnery/yassify@1.0.0 for details

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-03-09_%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB_1 14 46

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-03-09_%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB_1 15 00

CLI 출력의 마지막 줄인 패키지 페이지를 방문하면 생성한 README 파일이 패키지의 홈 페이지 역할을 하고 있는 것을 확인할 수 있습니다.
또한 패키지에 대한 TypeScript API 문서가 자동으로 생성된 것을 확인할 수 있습니다.
패키지에서 내보낸 함수 및 Symbol의 경우 소스 코드와 주석에서 문서가 생성됩니다.

GitHub에서 게시하기

CI에서 패키지를 게시하고 싶을 수도 있습니다. JSR에서 GitHub 리포지토리를 연동할 수 있습니다.

JSR 패키지 setting UI에서 패키지 소스 코드가 저장되는 리포지토리 이름과 GitHub 사용자 이름을 구성합니다.

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-03-09_%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB_1 16 32

레포지토리를 연결한 후.github/workflows/publish.yml 아래에 있는 파일에 다음 구성을 추가합니다

name: Publish

on:
  push:
    branches:
      - main

jobs:
  publish:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      id-token: write # The OIDC ID token is used for authentication with JSR.
    steps:
      - uses: actions/checkout@v4
      - run: npx jsr publish