패키지를 설치하지 않고 액세스할 수 있습니다.-JS 튜토리얼-php.cn

Access package without Installing it.

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

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

이게 뭔가요?

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

접속 방법

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

어떻게 작동하나요?

npm에 게시: npm 게시를 실행하면 패키지가 npm 공개 레지스트리에 업로드됩니다.
npm에서 CDN 가져오기:
- npm 레지스트리에서 새 버전을 감지합니다.
- 패키지 tarball을 가져와서 추출합니다.
- package.json의 main, unpkg 또는 jsdelivr과 같은 필드를 기반으로 파일을 제공합니다.
사용자 정의 필드: 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