パッケージをインストールせずにアクセスします。-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/パッケージ名

仕組みは?

npm に公開します: npm public を実行すると、パッケージが npm public レジストリにアップロードされます。
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.世界中に迅速に配送

ユースケース: パッケージが世界中に迅速かつ確実に提供されるようにします。
例:
- ライブラリを使用する Web サイトは、遅延を削減する 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 install コマンドを気にすることなく、ライブラリの特定のバージョンをロードできるようにします。

例:

ユーザーはバージョン 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