npm 패키지 게시

[hyunbinseo]

안녕하세요, 제작해 주신 SUIT 글꼴 정말 잘 활용하고 있습니다.

지난달 jsDelivr 측 인증서 문제로 CDN 작동이 안 되던 문제가 있었습니다. 이로 인해 웹 폰트 호스팅도 멈췄었는데요,

이러한 문제를 원천봉쇄하고자 SUIT 글꼴을 자사 서버에서 셀프 호스팅하고자 합니다.

글꼴이 npm 패키지 형태로 배포되면 셀프 호스팅 및 버전 관리가 매우 용이해지는데,

혹시 직접 게시할 의사나 계획이 있으실지 문의드립니다.

---

예시는 FontSource 제공 Noto Sans KR로, 패키지 설치 후 이렇게만 적어두면 프로젝트에 글꼴이 자동 포함됩니다.

@import '@fontsource-variable/noto-sans-kr';

body {
  font-family: 'Noto Sans KR Variable', sans-serif;
}

[hyunbinseo]

앞선 PR 덕분에 npm 상에서 GitHub 패키지 설치가 가능해졌군요.

• https://github.com/sun-typeface/SUIT/pull/10

pnpm add github:sun-typeface/SUIT -D

# devDependencies:
# + @sun-typeface/SUIT 2.0.3

// package.json
{
  "devDependencies": {
    "@sun-typeface/SUIT": "github:sun-typeface/SUIT"
  }
}

# pnpm-lock.yaml
devDependencies:
  '@sun-typeface/SUIT':
    specifier: github:sun-typeface/SUIT
    version: https://codeload.github.com/sun-typeface/SUIT/tar.gz/40880e31fb8b04e7ffce7b45d342eea9fe435cac

---

패키지 업데이트를 원할 경우 install 명령을 재실행하면 됩니다.

https://github.com/npm/npm/issues/1727#issuecomment-354124625

pnpm i github:sun-typeface/SUIT

---

Vite (SvelteKit) 환경에선 다음과 같이 import 하면 빌드에 포함됩니다.

/* src/app.css */
@import '../node_modules/@sun-typeface/SUIT/fonts/variable/woff2/SUIT-Variable.css';

/* build/client/_app/immutable/assets/_layout.CKCLH3rF.css */
@font-face {
  font-family: SUIT Variable;
  font-weight: 100 900;
  src: url(/_app/immutable/assets/SUIT-Variable.CYARWZDy.woff2) format('woff2-variations');
}

---

특정 SemVer 지정은 npm에서만 지원되는 듯합니다.

버전명 끝에 #v2.0.1 지정 후 pnpm install 명령을 실행할 경우:

{
  "devDependencies": {
    "@sun-typeface/SUIT": "github:sun-typeface/SUIT#v2.0.1" // pnpm 미지원
  }
}

dependencies:
+ @sun-typeface/SUIT <- SUIT#v2.0.1 0.0.0

devDependencies:
- @sun-typeface/SUIT 2.0.3

pnpm 환경에선 최신 버전 설치가 아닐 경우 커밋명을 명시해야 하나 봅니다.

• https://github.com/pnpm/pnpm/issues/20#issuecomment-250974658

[elegantcoder]

@hyunbinseo v2.0.3 과 v2.0.4 에 대해 npm publish 를 진행했습니다.

https://www.npmjs.com/package/@sun-typeface/suit

npm 의 패키지 이름 정책은 대문자를 허용하지 않습니다. 그래서 package.json 의 패키지 이름을 로컬에서 소문자로 변경해 진행했습니다.

즉, Git 리포의 package.json 과 npm publish 된 package.json 의 내용이 서로 다른 상태입니다.

2.0.5 부터는 #15 PR 의 내용을 반영해 npm 리포와 Git 리포 패키지 이름이 통일될 예정입니다. 참고해주세요.

[hyunbinseo]

정말 감사합니다! 고려해 볼 만한 사항을 적어봅니다:

• /sources 디렉터리 제외 : 패키지에선 CSS와 관련된 폰트 파일을 사용하는 분들이 대부분이지 않을까 싶습니다.
• GitHub, npm README 구분 : npm 상에는 jsDelivr 언급이 없어도 될 것 같습니다. (.github/README.md 활용)

[elegantcoder]

두 의견 모두 PR 에 반영하겠습니다. 좋은 의견 주셔서 감사합니다.