Descărcați cu ușurință biblioteci JavaScript de la npm și GitHub

Cel mai potrivit mod pentru începători de a adăuga o bibliotecă la un proiect este:

  1. Căutați biblioteca
  2. Căutați fișierul sursă
  3. Copiați fișierul sursă
  4. Inserați ceea ce ați copiat în proiect.

Acest lucru funcționează, dar este un proces dureros. Este mai ușor dacă utilizați CDN-uri precum JSDelivr.

Ce este un CDN?

CDN înseamnă rețea de livrare de conținut. Scopul său principal este de a permite utilizatorilor să descarce fișiere mai rapid. Citit Acest articol de Fastly dacă vă întrebați dacă ar trebui să utilizați un CDN.

CDNS le permite utilizatorilor să descarce fișiere mai rapid, plasând centre de date în întreaga lume. Când browserul vede un link CDN, acesta va difuza biblioteca din centrul de date cel mai apropiat de utilizator. Acesta este modul în care funcționează CDN-urile.

Ce este JSDelivr?

JSDelivr este un tip special de CDN. Este conceput pentru a permite utilizatorilor să descarce biblioteci JavaScript găzduite pe npm și Github. (Puteți încărca și pluginuri Wordpress dacă sunt găzduite pe Wordpress.org).

Dacă utilizați JSDelivr (sau orice alt CDN care servește biblioteci JavaScript), nu este nevoie să copiați-lipiți fișierele sursă în proiect. Puteți utiliza un link ca acesta:

<script src="https://cdn.jsdelivr.net/npm/package-name"><;/script>

JSDelivr vă permite să specificați versiunea unei biblioteci pe care doriți să o descărcați. Dacă doriți să specificați o versiune, adăugați numărul versiunii după un @, asa:

<script src="https://cdn.jsdelivr.net/npm/[email protected]"><;/script>

Cum folosesc JSDelivr

Folosesc JSDelivr mai mult ca un manager de pachete deoarece JSDelivr vă permite să specificați versiunea unei biblioteci. Pot actualiza sau retrograda biblioteca schimbând un număr. Nu este nevoie să copiați-lipiți sursa originală în proiectul meu.

In orice caz, Rar folosesc JSDelivr în zilele noastre pentru că am deja un proces de construcție care folosește Webpack. Webpack vă permite require biblioteci în frontend JavaScript. Vă permite să utilizați npm ca manager de pachete.

Folosesc JSDelivr numai pentru proiecte care:

  1. Solicitați o bibliotecă
  2. Biblioteca există pe JSDelivr (sau pe alte CDN-uri)
  3. Proiectul nu are Webpack (sau instrumente similare instalate)

Un exemplu de astfel de proiect îl reprezintă cele 20 de componente din Aflați JavaScript.

Iata de ce.

Studenții care sunt înscriși în Învățați JavaScript încearcă să învețe JavaScript. Nu vreau să-i distrag atenția făcându-i să învețe Webpack.

În schimb, vreau să-i ajut să se concentreze asupra a ceea ce sunt aici – învățarea JavaScript. Fac asta eliminând complexitatea din proiectele pe care le construim împreună. Îndepărtez totul până la HTML, CSS și JavaScript vechi.

Am vorbit despre ce este JSDelivr, de ce să-l folosiți și când să-l utilizați. Să ne aruncăm în detaliile despre utilizarea acestuia acum.

Pentru restul articolului, vom folosi o bibliotecă numită zl-fetch ca exemplu.

Instalarea unei biblioteci

Pentru a instala o bibliotecă, trebuie să adăugați un fișier <script> tag care indică biblioteca de pe JSDelivr. Puteți încărca biblioteca de la npm sau Github, în ​​funcție de preferințe.

Tind să încarc biblioteci de la npm.

<script src="https://cdn.jsdelivr.net/npm/package-name"><;/script>

Trebuie să te schimbi package-name la numele bibliotecii pe care o instalați. În acest caz, este zl-fetch.

<script src="https://cdn.jsdelivr.net/npm/zl-fetch"><;/script>

Dacă nu sunteți sigur de numele bibliotecii, puteți căuta pe npm, sau direct pe JSDelivr.

Cum se utilizeaza JSDelivr

Specificarea unei versiuni

În mod implicit, JSDelivr descarcă cea mai recentă versiune a unei biblioteci.

Nu vă recomand să utilizați cea mai recentă versiune, deoarece autorii își pot actualiza biblioteca. Dacă își actualizează biblioteca, codul dvs. se poate rupe.

Întotdeauna doriți să specificați un număr de versiune. Puteți adăuga un număr de versiune adăugând @, urmat de numărul versiunii după numele pachetului, astfel:

<script src="https://cdn.jsdelivr.net/npm/[email protected]"><;/script>

Numerele de versiune urmează a Semver format. Puteți afla ce versiuni sunt disponibile verificând etichetele disponibile pe Github.

1611309905 580 Cum se utilizeaza JSDelivr

În cazul nostru, versiunea actuală a zl-fetch este 2.1.9:

<script src="https://cdn.jsdelivr.net/npm/[email protected]"><;/script>

Se încarcă un anumit fișier

JSDelivr se bazează pe autori pentru a specifica un fișier implicit pentru ca formatul de mai sus să funcționeze. Dacă fișierul implicit nu este specificat, trebuie să indicați fișierul corect.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/path-to-file"><;/script>

Există două moduri de a ști ce fișiere sunt disponibile.

Mai întâi, puteți căuta pachetul pe JSDelivr. Veți vedea o listă de fișiere și foldere către care puteți indica:

1611309905 940 Cum se utilizeaza JSDelivr

În al doilea rând, dacă știți despre npm, puteți utiliza npm pentru a instala pachetul undeva pe computer. Apoi utilizați Finder (sau Explorer) pentru a naviga prin fișiere.

În acest caz, să presupunem că fișierul implicit nu este specificat și vrem dist/index.js fişier. Iată ce veți scrie:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js"><;/script>

Se încarcă o versiune minimizată

Fișierele reduse sunt de obicei mai mici. Utilizatorii vor putea descărca fișierele minimizate mai repede decât un fișier neminificat.

JSDelivr minimizează automat fișierele dacă utilizați fișierul .min.js extensie.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"><;/script>

Înfășurându-se

Sper că acest articol vă oferă o imagine de ansamblu bună a ceea ce poate face JSDelivr.

Mulțumesc pentru lectură. Te-a ajutat acest articol? Dacă s-a întâmplat, sper să luați în considerare împărtășindu-l. S-ar putea să ajuți pe altcineva. Multumesc mult!

Acest articol a fost inițial postat la blogul meu.
Înscrieți-vă pentru buletin informativ dacă doriți mai multe articole care să vă ajute să deveniți un dezvoltator frontend mai bun.