패키지를 설치하지 않고 액세스할 수 있습니다.

패키지를 설치하지 않고도 패키지에 액세스할 수 있다는 것을 알고 계셨나요?

예, unpkg 및 jsDelivr과 같은 인기 있는 CDN의 도움으로 가능합니다!

이게 뭔가요?

Unpkg 및 jsDelivr은 공개 npm 패키지를 호스팅하는 CDN입니다. 이를 통해 브라우저 기반 앱은 패키지 관리자나 번들러 없이도 전 세계적으로 패키지에 빠르게 액세스할 수 있습니다.

접속 방법

• Unpkg: https://unpkg.com/package-name
• jsDelivr: https://cdn.jsdelivr.net/npm/package-name

어떻게 작동하나요?

1. npm에 게시: npm 게시를 실행하면 패키지가 npm 공개 레지스트리에 업로드됩니다.
2. npm에서 CDN 가져오기:
   • npm 레지스트리에서 새 버전을 감지합니다.
   • 패키지 tarball을 가져와서 추출합니다.
   • package.json의 main, unpkg 또는 jsdelivr과 같은 필드를 기반으로 파일을 제공합니다.
3. 사용자 정의 필드: package.json의 unpkg 및 jsdelivr과 같은 필드는 CDN이 제공해야 하는 파일을 지정합니다. 이 필드는 명시적으로 지원되지 않는 한 다른 도구에서 무시됩니다.

예: @monaco-editor/react

{
  "name": "@monaco-editor/react",
  "version": "4.4.6",
  "main": "lib/cjs/index.js",
  "unpkg": "lib/umd/monaco-react.min.js",
  "jsdelivr": "lib/umd/monaco-react.min.js"
}

unpkg 및 jsdelivr은 표준 필드가 아닌 사용자 정의 필드이며 명시적으로 인식하지 않는 한 다른 도구에서 무시할 수 있습니다. CDN unpkg / jsdelivr을 통해 패키지를 요청할 때 제공할 파일을 결정하는 데 사용됩니다.

사용 사례

1. 브라우저 기반 애플리케이션

• 사용 사례: 개발자는 패키지 관리자나 번들러를 사용하지 않고 HTML 파일에 직접 라이브러리를 포함하기를 원합니다.

• 예:

  • 프런트 엔드 개발자는 npm, Webpack 또는 기타 빌드 도구를 설정하지 않고 @monaco-editor/react를 프로젝트에 포함시키고 싶어합니다.
  • 다음을 직접 사용할 수 있습니다.

     <script src="https://unpkg.com/@monaco-editor/react@latest/dist/monaco-react.min.js"></script>
  

• 관련성:

  • 이는 최신 JavaScript 워크플로를 사용하지 않는 개발자의 채택을 단순화합니다.
  • 데모 앱, 프로토타입 또는 소규모 프로젝트에 일반적입니다.

---

2. 빠른 글로벌 배송

• 사용 사례: 패키지가 전 세계적으로 빠르고 안정적으로 제공되는지 확인하세요.
• 예:
  • 라이브러리를 사용하는 웹사이트는 jsDelivr 또는 Unpkg의 전 세계적으로 분산된 에지 서버를 활용하여 대기 시간을 줄여줍니다.
• 관련성:
  • 트래픽이 많은 애플리케이션이나 성능이 중요한 경우에 이상적입니다.

---

3. 빌드 단계 방지

• 사용 사례: 변환이나 번들링을 원하지 않는 사용자를 위해 즉시 사용 가능한 버전의 라이브러리를 제공하세요.

• 예:

  • 귀하의 패키지는 사전 번들로 제공되는 UMD 또는 IIFE 빌드를 제공합니다. 개발자는 설정 없이 직접 포함할 수 있습니다.

  {
    "name": "@monaco-editor/react",
    "version": "4.4.6",
    "main": "lib/cjs/index.js",
    "unpkg": "lib/umd/monaco-react.min.js",
    "jsdelivr": "lib/umd/monaco-react.min.js"
  }
  

• 관련성:

  • 빠른 개발 환경이나 Node.js가 아닌 생태계에 적합합니다.

---

4. 정적 사이트에 라이브러리 삽입

• 사용 사례: 복잡한 설정 없이 정적 사이트에 라이브러리를 간편하게 포함할 수 있습니다.

• 예:

  • 한 블로거가 블로그에서 Markdown 렌더러를 사용하려고 합니다.

     <script src="https://unpkg.com/@monaco-editor/react@latest/dist/monaco-react.min.js"></script>
  

• 관련성:

  • 종속성을 설치하고 관리하는 것이 과도한 소규모 사용에 적합합니다.

---

5. 레거시 환경

• 사용 사례: 사용자가 최신 빌드 도구나 Node.js가 없는 환경에서 작업할 수 있습니다.
• 예:
  • 레거시 애플리케이션을 유지 관리하는 개발자는 오래된 설정을 수정하는 대신 CDN 링크를 통해 라이브러리를 사용할 수 있습니다.
• 관련성:
  • 레거시 앱이나 최신이 아닌 JavaScript 환경을 지원합니다.

---

6. 데모 및 샌드박스

• 사용 사례: 온라인 데모, 샌드박스 또는 테스트 플랫폼을 위한 라이브러리에 대한 빠른 액세스를 제공합니다.

• 예:

  • CodePen 또는 JSFiddle과 같은 플랫폼에서는 라이브러리를 직접 로드할 수 있습니다.

     <script src="https://cdn.jsdelivr.net/npm/my-library"></script>
  

• 관련성:

  • 라이브러리 전시 및 실험을 단순화합니다.

---

7. 버전별 로딩

• 사용 사례: 사용자가 npm 설치 명령에 대해 걱정하지 않고 특정 버전의 라이브러리를 로드할 수 있도록 허용합니다.

• 예:

  • 사용자가 버전 2.3.0을 원합니다:

  {
    "name": "@monaco-editor/react",
    "version": "4.4.6",
    "main": "lib/cjs/index.js",
    "unpkg": "lib/umd/monaco-react.min.js",
    "jsdelivr": "lib/umd/monaco-react.min.js"
  }
  

• 관련성:

  • 개발자가 도구를 번들로 묶지 않고도 프로젝트를 특정 버전으로 테스트하거나 잠그는 데 도움이 됩니다.

---

8. 다중 프레임워크 프로젝트에서 패키지 공유

• 사용 사례: 서로 다른 생태계(React, Angular, Vue 등)를 사용하는 프로젝트 간에 패키지가 공유되며, CDN 호스팅은 번들링 충돌을 방지합니다.

• 예:

  • 디자인 시스템 라이브러리(my-ui-library)는 CDN에서 호스팅되며 팀은 이를 여러 프로젝트에 직접 포함할 수 있습니다.

     <script src="https://unpkg.com/@monaco-editor/react@latest/dist/monaco-react.min.js"></script>
  

• 관련성:

  • 종속성 관리 오버헤드 없이 재사용을 촉진합니다.

---

9. npm의 백업 또는 대안

• 사용 사례: npm 레지스트리 문제가 발생할 경우 패키지에 액세스할 수 있는 대체 방법을 제공합니다.
• 예:
  • jsDelivr은 npm이 일시적으로 다운된 경우에도 패키지를 제공할 수 있습니다.
• 관련성:
  • 중복성과 안정성을 추가합니다.

---

CDN 호스팅을 피해야 하는 경우

• 최신 애플리케이션:
  • 대부분의 사용자가 Node.js 또는 최신 번들러(Webpack, Rollup 등)를 사용하는 경우 CDN이 필요하지 않을 가능성이 높습니다.
• 패키지 크기:
  • CDN을 통해 제공되는 대규모 라이브러리는 브라우저 로드 시간을 증가시킬 수 있습니다.
• 버전 충돌:
  • 여러 버전의 라이브러리가 동시에 로드될 경우 예상치 못한 동작이 발생할 수 있습니다.

---

사용 사례 요약

Use Case	Ideal For	Example Usage
Browser Inclusion	Simplicity
Fast Delivery	High-traffic apps	Use of jsDelivr or Unpkg for caching
Avoiding Build Steps	Prototypes or small projects	UMD or IIFE pre-bundled files
Embedding in Static Sites	Blogs, lightweight sites	Markdown renderer, chart libraries
Demos and Sandboxes	Quick testing	Platforms like CodePen or JSFiddle
Sharing Across Frameworks	Multi-framework apps	Shared libraries or design systems

CDN 호스팅은 특히 웹 중심 라이브러리의 경우 npm 배포를 훌륭하게 보완합니다. 구체적인 요구사항이 있으면 언제든지 문의하세요!

위 내용은 패키지를 설치하지 않고 액세스할 수 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!