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 ?
-
Vous publiez sur npm :
Votre package est téléchargé dans le registre public npm lorsque vous exécutez npm submit.
-
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.
-
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
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"
}
-
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
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
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"
}
-
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
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
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 |
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!
Déclaration:Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn