パッケージをインストールせずにアクセスします。

パッケージをインストールしなくてもアクセスできることをご存知ですか?

はい、unpkg や jsDelivr などの一般的な CDN を利用すれば、それが可能です!

これは何ですか？

Unpkg と jsDelivr は、パブリック npm パッケージをホストする CDN です。これにより、ブラウザベースのアプリは、パッケージ マネージャーやバンドラーを必要とせずに、グローバルなパッケージにすばやくアクセスできるようになります。

アクセス方法は？

• Unpkg: https://unpkg.com/package-name
• jsDelivr: https://cdn.jsdelivr.net/npm/パッケージ名

仕組みは?

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

• ユースケース: パッケージが世界中に迅速かつ確実に提供されるようにします。
• 例:
  • ライブラリを使用する 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

CDN ホスティングは、特に Web 中心のライブラリにとって、npm ディストリビューションを強力に補完します。特定の要件がある場合は、お気軽にお問い合わせください。

以上がパッケージをインストールせずにアクセスします。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。