Accédez au package sans l'installer.

Saviez-vous que vous pouvez accéder à votre package sans l'installer ?

Oui, vous pouvez, avec l'aide de CDN populaires comme unpkg et jsDelivr !

Qu'est-ce que c'est?

Unpkg et jsDelivr sont des CDN qui hébergent des packages npm publics. Ils permettent aux applications basées sur un navigateur d'accéder rapidement aux packages dans le monde entier sans avoir besoin d'un gestionnaire de packages ou d'un bundler.

Comment y accéder ?

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

Comment ça marche ?

1. Vous publiez sur npm : Votre package est téléchargé dans le registre public npm lorsque vous exécutez npm submit.
2. Récupération des CDN depuis npm :
   • Ils détectent les nouvelles versions dans le registre npm.
   • Récupérez l'archive tar du package et extrayez-la.
   • Servez des fichiers basés sur des champs tels que main, unpkg ou jsdelivr dans package.json.
3. Champs personnalisés : Des champs comme unpkg et jsdelivr dans package.json spécifient quel fichier le CDN doit servir. Ces champs sont ignorés par d'autres outils à moins qu'ils ne soient explicitement pris en charge.

Exemple : @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 et jsdelivr sont des champs personnalisés et non des champs standard et ceux-ci peuvent être ignorés par d'autres outils à moins qu'ils ne les reconnaissent explicitement. Il est utilisé pour déterminer quel fichier servir lorsque le package est demandé via le CDN unpkg/jsdelivr.

Cas d'utilisation

1. Applications basées sur un navigateur

• Cas d'utilisation : les développeurs souhaitent inclure votre bibliothèque directement dans des fichiers HTML sans utiliser de gestionnaire de packages ou de bundler.

• Exemple :

  • Un développeur front-end souhaite inclure @monaco-editor/react dans son projet sans configurer npm, Webpack ou d'autres outils de build.
  • Ils peuvent utiliser directement :

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

  Copier après la connexion

  Copier après la connexion

  Copier après la connexion

• Pertinence :

  • Cela simplifie l'adoption pour les développeurs qui n'utilisent pas de flux de travail JavaScript modernes.
  • Commun pour les applications de démonstration, les prototypes ou les petits projets.

2. Livraison rapide et mondiale

• Cas d'utilisation : Assurez-vous que votre colis est servi rapidement et de manière fiable dans le monde entier.
• Exemple :
  • Un site Web utilisant votre bibliothèque bénéficie des serveurs Edge distribués à l'échelle mondiale de jsDelivr ou d'Unpkg, qui réduisent la latence.
• Pertinence :
  • Idéal pour les applications à fort trafic ou lorsque les performances sont critiques.

3. Éviter les étapes de construction

• Cas d'utilisation : fournissez une version prête à l'emploi de votre bibliothèque pour les utilisateurs qui ne souhaitent pas s'occuper de la transpilation ou du regroupement.

• Exemple :

  • Votre package fournit une version UMD ou IIFE pré-groupée. Les développeurs peuvent l'inclure directement sans configuration :

  {
    "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"
  }
  

  Copier après la connexion

  Copier après la connexion

  Copier après la connexion

• Pertinence :

  • Idéal pour les environnements de développement rapide ou les écosystèmes non-Node.js.

4. Intégration de bibliothèques dans des sites statiques

• Cas d'utilisation : Simplifiez l'inclusion de bibliothèques dans des sites statiques sans configurations complexes.

• Exemple :

  • Un blogueur souhaite utiliser un moteur de rendu Markdown dans son blog :

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

  Copier après la connexion

  Copier après la connexion

  Copier après la connexion

• Pertinence :

  • Parfait pour une utilisation à petite échelle où l'installation et la gestion des dépendances sont excessives.

5. Environnements hérités

• Cas d'utilisation : permettre aux utilisateurs de travailler dans des environnements sans outils de build modernes ni Node.js.
• Exemple :
  • Un développeur gérant une application héritée peut utiliser votre bibliothèque via des liens CDN plutôt que de modifier sa configuration obsolète.
• Pertinence :
  • Prend en charge les applications existantes ou les environnements JavaScript non modernes.

6. Démos et bacs à sable

• Cas d'utilisation : fournissez un accès rapide à votre bibliothèque pour des démos en ligne, des bacs à sable ou des plateformes de test.

• Exemple :

  • Sur des plateformes comme CodePen ou JSFiddle, vous pouvez directement charger votre bibliothèque :

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

  Copier après la connexion

• Pertinence :

  • Simplifie la présentation et l'expérimentation de votre bibliothèque.

7. Chargement spécifique à la version

• Cas d'utilisation : autorisez les utilisateurs à charger des versions spécifiques de votre bibliothèque sans vous soucier des commandes d'installation npm.

• Exemple :

  • Un utilisateur souhaite la version 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"
  }
  

  Copier après la connexion

  Copier après la connexion

  Copier après la connexion

• Pertinence :

  • Aide les développeurs à tester ou à verrouiller leurs projets sur une version spécifique sans regrouper les outils.

8. Partage de packages dans des projets multi-framework

• Cas d'utilisation : Un package est partagé entre des projets utilisant différents écosystèmes (React, Angular, Vue, etc.), et l'hébergement CDN évite les conflits de regroupement.

• Exemple :

  • Une bibliothèque de système de conception (my-ui-library) est hébergée sur un CDN, et les équipes peuvent l'inclure directement dans plusieurs projets :

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

  Copier après la connexion

  Copier après la connexion

  Copier après la connexion

• Pertinence :

  • Favorise la réutilisation sans surcharge de gestion des dépendances.

9. Sauvegarde ou Alternative à npm

• Cas d'utilisation : fournissez un autre moyen d'accéder à votre package si des problèmes de registre npm surviennent.
• Exemple :
  • jsDelivr peut servir des packages même si npm est temporairement indisponible.
• Pertinence :
  • Ajoute de la redondance et de la fiabilité.

Quand éviter l'hébergement CDN

• Applications modernes :
  • Si la plupart de vos utilisateurs utilisent Node.js ou des bundles modernes (Webpack, Rollup, etc.), ils n'ont probablement pas besoin d'un CDN.
• Taille du paquet :
  • Les grandes bibliothèques servies via CDN peuvent augmenter les temps de chargement du navigateur.
• Conflits de versions :
  • Si plusieurs versions de votre bibliothèque peuvent se charger simultanément, cela pourrait entraîner un comportement inattendu.

Résumé des cas d'utilisation

L'hébergement CDN est un excellent complément à la distribution npm, en particulier pour les bibliothèques axées sur le Web. Si vous avez des exigences particulières, n'hésitez pas à demander !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!