En introduktion til Parcel.js, No-Config Web Application Bundler

Dette indlæg er din introduktion til Parcel.js, det selvudnævnte "flammende hurtig, nulkonfiguration af webapplikationsbundter." Her er alt hvad du har brug for at vide for at komme i gang med det:


Mange front-end-udviklere er blevet frustrerede over nogle af de kompleksiteter, der er involveret i opbygningen af ​​webapps i dag. Det er temmelig almindelig praksis at inkludere et slags bygge- eller bundteværktøj i en front-end-arbejdsgang, og derfor har mange udviklere undersøgt at bruge et front-end værktøj som webpack.

Webpack er den mest populære bundler, og den fulgte på hæle af Require.js, Rollup og lignende løsninger. Men indlæringskurven for et værktøj som webpack er stejl. Det er ikke let at komme i gang med webpack på grund af dens komplekse konfigurationer. Som et resultat er der i de senere år fremkommet en anden løsning. Dette værktøj er ikke nødvendigvis en frontløber, men et lettere at fordøje alternativ i frontend-modulbundterens landskab. Introduktion af Parcel.js.

Introduktion til Parcel.js

Parcel.js (parceljs.org) er præcis, hvad mange begyndere at mellemudviklere ønsker: En simpel bundkonstruktion med lav konfiguration, som du hurtigt kan komme i gang med.

Jeg håber, at denne pakkevejledning vil give en let at følge introduktion til dette værktøj. Jeg dækker det grundlæggende, og så viser jeg dig, hvordan du bruger Pakke til at samle en simpel webapp, der indeholder Babel og Sass.

�� Indholdsfortegnelse:

  1. Hvorfor bruge en webapp bundler? #
  2. Installation af Parcel.js #
  3. Oprettelse af et filindgangspunkt #
  4. Dist / mappe #
  5. Brug af Parcel.js med Babel #
  6. Brug af Parcel.js med Sass #
  7. Bundling af flere scripts med pakke #
  8. Kodespaltning med Parcel.js #
  9. Produktion bygger med Parcel.js #
  10. Eventuelle ulemper ved brug af pakke? #

Parcel.js websted

Hvorfor bruge en webapp bundler?

Jeg vil ikke bruge for meget tid på at diskutere grundene til at bruge en app bundler som Parcel.js, fordi dette emne bestemt er blevet dækket før. Men her er en grundlæggende gennemgang af fordelene ved at bruge et sådant værktøj:

  • Din app har færre HTTP-anmodninger på grund af at manuskripter eller stilark kombineres
  • Scripts og stilark kan indlæses efter behov, hvilket forbedrer ydeevnen yderligere
  • Scripts og stilark kan automatisk minimeres for at levere færre kilobyte til brugeren
  • Bundling og minifikationsarbejde udføres automatisk af værktøjet, hvilket minimerer manuelt arbejde
  • Udviklingsfiler er organiseret modulært, hvilket gør din kode meget lettere at vedligeholde og fejlsøge

Som du kan se, er fordelene mange og mest relateret til ydeevne og projektvedligeholdelse. Der er bestemt mange grunde til at bruge en bundler, hvis dette er noget, du endnu ikke har overvejet.

Lad os komme i gang med det grundlæggende for at komme i gang med Parcel.js med det ude af vejen. Jeg vil langsomt gennemgå funktionerne i denne tutorial ved hjælp af nogle enkle eksempler, som du let vil være i stand til at følge med.

Installation af Parcel.js

Du kan installere Parcel.js i din terminal ved hjælp af Garn eller npm. Til denne tutorial bruger jeg npm. Her er kommandoen til at installere den globalt, så du kan bruge den til ethvert projekt:

npm installere pakke-bundler -g

Flagget -g installerer det globalt. Hvis du kun ønsker at installere det til et enkelt projekt og føje det til dit projekt’s devDependences i package.json, kan du køre den samme kommando inden i rodmappen til projektet ved hjælp af – gemme-dev-flag i stedet for -g:

npm installere pakkebundtager – Save-Dev

Med den globale installation (som vil være den mest almindelige brugssag), kan du starte et givet projekt ved hjælp af init-kommandoen. Brug terminalen til at navigere til den mappe, du vil bruge som rod til din applikation, og kør:

npm start -y

Flagget -y forhindrer npm i at stille spørgsmål ved at bruge standardindstillingerne til opsætningen. Antages, at mit projekt kaldes pakke-demo, opretter dette en package.json-fil i roden, der ser sådan ud:

{
"navn": "parcel-demo",
"version": "1.0.0",
"beskrivelse": "",
"vigtigste": "index.js",
"scripts": {
"prøve": "ekko \"Fejl: ingen test specificeret \" && frakørsel 1"
},
"søgeord": [],
"forfatter": "",
"licens": "ISC"
}

Hvis du finder noget af ovenstående forvirrende på grund af din manglende kendskab til npm, kan du tjekke min omfattende tutorial om npm. Det er fokuseret på at hjælpe internetudviklere med at forstå værktøjet.

Oprettelse af et filindgangspunkt

Til en grundlæggende projektopsætning skal jeg bruge Parcel.js på en index.html-fil, der peger på en primær JavaScript-fil kaldet index.js (som vist i pakken.json-filen). Denne HTML-fil fungerer som mit pakkeindgangspunkt. Min HTML-fil har et scriptelement, der peger på min JavaScript-fil, så den ser sådan ud:

html>
<html>
<hoved>
<titel>Pakke-demotitle>
hoved>
<legeme>
<script src ="./js/index.js">manuskript>
legeme>
html>

Når jeg har den korrekte HTML-fil og JavaScript-fil på plads, kan jeg starte Parcels indbyggede udviklingsserver ved at køre følgende på min terminal i mit projektmappe:

pakkeindeks.html

Dette starter serveren og fortæller den, hvilken fil der skal bruges som indgangspunkt. Som et resultat får jeg følgende meddelelse i min terminalsession:

Server kører på http: // localhost: 1234
√ Indbygget 887ms.

Jeg kan nu åbne http: // localhost: 1234 / i min browser for at se, hvad jeg har bygget indtil videre. Den levende server bruger live reload og noget kaldet udskiftning af varmt modul. Dette vil automatisk opdatere moduler på en side uden at udføre en fuld sideopdatering. På denne måde kan jeg se udviklingen i min build i hurtigere trin, når jeg arbejder.

Når jeg har Parcel.js, der kører med sin server aktiv, genopbygger alle ændringer, jeg foretager i en fil, automatisk min app, hver gang filen gemmes. For at se dette i aktion vil jeg tilføje en simpel konsolelogelinje i mit script. Dette udløser følgende meddelelse i min terminal:

$ pakkeindeks.html
Server kører på http: // localhost: 1234
√ Indbygget 1.08s.
√ Indbygget 28ms.

Hver “Bygget …” -linie repræsenterer en build, der udløses af en ændring i indhold og gemme.

Hvis jeg vil bruge min egen server snarere end Parcels indbyggede udviklingsserver, kan jeg bruge watch-kommandoen:

pakkeur indeks.html

Jeg får det samme resultat i min terminalsession, hvor Parcel.js bygger min app og derefter venter på ændringer:

$ pakkeurindeks.html
√ Indbygget 855ms.

Dist / mappen

Når jeg først har startet Parcel.js enten i overvågningstilstand eller via den indbyggede server, vil jeg se en mappe og en filstruktur på følgende måde, hvis jeg kigger ind i projektets mappe.

index.html
package.json
js /
└───── index.js
dist /
└───── indeks.html
└───── js.00a46daa.js
└───── js.00a46daa.js.map

Bemærk den dist-mappe, der oprettes automatisk. Det er her mine produktionsfiler er; Jeg rører ikke ved nogen af ​​disse filer. Bemærk, at min Parcel build automatisk har konverteret min index.js-fil til en med en unik cache-venlig version (med en revideret eller “revved” filnavn). Det er også tilføjet en kildekortfil (du kan læse om kildekort i dette indlæg).

Hvis jeg ser på min index.html-fil i mappen dist, ser jeg følgende:

html>
<html>
<hoved>
<titel>Pakke-demotitle>
hoved>
<legeme>

<script src ="/js.00a46daa.js">manuskript>
legeme>
html>

Bemærk, at dist-versionen af ​​min index.html-fil peger korrekt og bekvemt på dist-versionen af ​​min .js-fil.

Hvis min webside indeholder flere filer, der peger på de samme scripts (f.eks. About.html, contact.html osv.), Kan jeg bruge følgende kommando:

pakkeindeks.html about.html contact.html

Dette fortæller Parcel, at jeg vil bruge flere indgangspunkter til at bygge ud fra. Jeg kan også bruge følgende kommando til at bede Parcel.js om at bruge alle mine HTML-filer som indgangspunkter:

pakke * .html

Brug af Parcel.js med Babel

Parcel.js har indbygget support til forskellige kodetransportører, inklusive Babel, det populære værktøj til at konvertere moderne næste generations JavaScript til ækvivalent kode, der kan forstås af alle browsere. Da Babel er indbygget i Parcel.js, behøver du ikke et specielt plug-in for at bruge det, det fungerer bare. Lad os se på et eksempel.

Jeg vil tilføje følgende kode til min index.js-fil:

funktion getInfo (navn, år = 2018, farve = ‘blå’) {
console.log (navn, år, farve);
}

getInfo (‘Chevy’, 1957, ‘Green’);
getInfo (‘Benz’, 1975);
getInfo ( ‘Honda’);

Denne kode bruger en ES6-funktion kaldet standardparametre, som du kan se specifikt i funktionshovedet. Ældre browsere understøtter ikke standardparametre til funktioner. For at sikre, at koden ikke kaster en fejl, har jeg brug for Babel til at transponere koden til ækvivalent kode, der fungerer i alle browsere. Når jeg har gemt min index.js-fil, genopbygger Parcel.js min app og producerer følgende i stedet for den ES6-kode, jeg skrev:

funktion getInfo (navn) {
var år = argumenter. længde > 1 && argumenter [1]! == undefined? argumenter [1]: 2018;
var farve = argumenter. længde > 2 && argumenter [2]! == undefined? argumenter [2]: ‘blå’;
console.log (navn, år, farve);
}

getInfo (‘Chevy’, 1957, ‘Green’);
getInfo (‘Benz’, 1975);
getInfo ( ‘Honda’);

Du kan bruge Babel’s online svar til test dette ud.

Og bemærk den vigtigste faktor her: Jeg gjorde ikke noget for at installere eller konfigurere Babel – det fungerer bare uden for boksen som en del af Parcels standardopsætning! Selvfølgelig vil du måske tilføje nogle konfigurationsindstillinger for at ændre Babel til at gøre, hvad du vil. Hvis det er tilfældet, kan du tilføje en .babelrc-fil i dit projekts rodmappe, med dine konfigurationsindstillinger inkluderet. Du kan læse mere om ved hjælp af en .babelrc-fil på Parcel.js-webstedet.

Brug af Parcel.js med Sass

Ligesom Babel, vil Parcel også som standard automatisk samle mine SCSS (Sass) filer til gyldig CSS. For at demonstrere dette vil jeg tilføje en mappe kaldet “css” til roden til mit eksempelprojekt. I den mappe vil jeg tilføje en style.scss-fil med følgende Sass-kode:

krop {
farve: sort;

.modul {
farve: rød;
}
}

Jeg bruger Sass’s indlejringsfunktion. Jeg tilføjer følgende linje til sektionen af ​​mine HTML-filer:

<link rel ="stilark" href ="./css/style.scss">

Når alle mine filer er gemt, producerer Parcel en ny indbygning i min dist / mappe med en kompileret CSS-fil, der har konverteret min SCSS til følgende:

krop {
farve: sort;
}
krop .modul {
farve: rød;
}

Så længe jeg har Sass installeret på mit system globalt, gør Parcel dette automatisk uden behov for konfiguration. Hvis jeg ikke har en global installation af Sass, er der ikke noget problem. Jeg kan bare skrive min SCSS, derefter starte Parcel og Parcel installerer Sass automatisk som en projektspecifik afhængighed. Meget praktisk! Og igen er dette især nyttigt, fordi det ikke kræver nogen konfiguration.

Og ligesom med Babel, kan jeg vælge at gå med de standardindstillinger, der leveres med Sass. Eller jeg kan oprette en .sassrc-fil i mit projekts rod og tilføje mine egne konfigurationer.

Bundling af flere scripts med pakke

Indtil videre er eksemplerne, jeg har vist, bare for at komme dig i gang med Parcel, så du kan få en grundlæggende idé om, hvordan det fungerer. Som nævnt tidligere er styrken hos enhver bundter muligheden for automatisk at kombinere flere filer i en enkelt fil. Dette hjælper med at reducere HTTP-anmodninger og forbedre hastigheden på dit websted eller din app.

Alt, hvad jeg har demonstreret indtil videre, kan gøres ved hjælp af flere scripts, der trækkes ind ved hjælp af ES6s modulfunktion. Dette giver mig mulighed for at oprette og importere scripts på en modulær måde. Dette holder min kode let at vedligeholde, mens jeg stadig kun serverer et enkelt bundtet script i produktionen.

For at demonstrere dette vil jeg tilføje en separat fil kaldet module.js, der vil indeholde følgende JavaScript:

eksport lad farve = ‘grøn’;

eksportfunktion tilføje (n1, n2) {
retur n1 + n2;
}

Dette er blot nogle grundlæggende kode til eksportering af to objekter: En variabel og en funktion. I min index.js-fil importerer jeg disse ressourcer med følgende kode:

import {farve, tilføj} fra ‘../js/module.js’;

console.log (farve); // "grøn"
console.log (tilføj (20, 40)); // 60

Igen, dette er bare grundlæggende syntaks af ES6-modul. Jeg vil ikke gå nærmere ind på, hvordan dette fungerer her. Den smukke del om dette er det faktum, at jeg ikke havde brug for at specificere i min HTML-fil, at jeg brugte et modul. Normalt vil min script-tag se sådan ud med typen attribut indstillet til modul:

<script src ="./js/index.js" skrive ="modul">manuskript>

Men dette er ikke nødvendigt. Pakke genkender modulet, der importeres og bundter mine to scripts sammen i en enkelt ydelsesvenlig ressource. Dette sker uden nogen særlig konfiguration eller plugins. Og ligesom de tidligere eksempler, transporteres koden ved hjælp af Babel til ES5-ækvivalent kode, der giver mig mest browserstøtte.

Kodespaltning med Parcel.js

Endnu en funktion i Parcel, der fungerer uden konfiguration, er kodespaltning. I nogle tilfælde vil jeg have alle mine moduler indlæst på alle mine sider. Men i andre tilfælde vil jeg måske kun indlæse visse moduler på bestemte sider, i visse sammenhænge. Dette er hvad kodespaltning giver mig mulighed for.

Tidligere nævnte jeg, at mit eksempelprojekt indeholder tre sider: index.html, about.html og contact.html. Lad os sige, at jeg vil køre det samme JavaScript-bundt på alle tre sider, men på om.html-siden har jeg en knap, der udløser noget specifikt. Men jeg vil kun, at den kode skal indlæses, når der trykkes på den knap.

Sådan ser den kode ud ved hjælp af kodefordelingsfunktionen:

if (document.querySelector (‘. om’)) {
document.querySelector (‘. om’). addEventListener (‘klik’, () => {
Import (‘ ../ js / about.js’). derefter (
document.body.innerHTML + = ‘Om side opdateret’;
);
});
}

Bemærk, at dette inkluderer en ny JavaScript-funktion, dynamisk import ved hjælp af import () -funktionen. Dette giver mig mulighed for dynamisk at indlæse den kode, jeg ønsker, i en bestemt instans. I dette tilfælde gør jeg det, når der trykkes på en knap på om-siden. Funktionen import () returnerer et løfte, så jeg kan gøre hvad jeg vil inden for .then () -klausulen, som udløses, når det importerede script er indlæst. Scriptet om.js indlæses efter behov og denne kode transporteres af Babel til cross-browser ES5 for at sikre, at det fungerer overalt. Når mit bundt bliver oprettet, sættes om.js-delen i sin egen fil i dist / mappen, så denne fil kan indlæses efter behov.

Som andre funktioner, jeg har diskuteret, fungerer import () -funktionen i pakke uden nogen konfiguration.

Produktion bygger med Parcel.js

Indtil nu har jeg produceret alle mine Parcel builds på farten ved hjælp af den indbyggede server, der leveres med Parcel, og som inkluderer live reload. Hver gang jeg gemmer mit projekt, er mit bundt bygget. Men koden blev altid samlet til løbende udvikling. På denne måde kan jeg se eller inspicere kilden efter behov for at udføre fejlsøgning.

Når mit projekt er afsluttet og klar til at blive skubbet til en live server, kan jeg forhindre Parcel i at se mit projekt. CTRL-C i terminalen gør dette på mange platforme. Så kører jeg følgende kommando for at bede Parcel om at fremstille en sidste build:

pakke build index.html about.html contact.html

I dette tilfælde bygger jeg ud fra alle tre af mine indgangsfiler. Når dette er gjort, venter Parcel ikke længere på ændringer; det sidste bundt er bygget, og det er det. Ud over at bygningen afsluttes, er min kode forberedt til produktion af Parcel. HTML, CSS og JavaScript er alle minimeret til at producere de mindste mulige filer til optimeret ydelse.

Eventuelle ulemper ved brug af pakke?

Pakke bør bestemt være et valg til dem, der har ringe eller ingen erfaring med at bygge værktøjer. Men i min egen forskning har jeg fundet et par ting, jeg kan nævne, og som skulle forbedres i fremtiden.

Først og fremmest vil du bemærke, at Pakke altid placerer dine bundne scripts og stilark i det samme bibliotek som indgangspunktet HTML-filer. Dette sker, selvom du har dine CSS- og JavaScript-filer i separate mapper. Da dette er produktionsfiler, betyder det muligvis ikke meget. Men det er noget at huske på. Den gode nyhed er dette ser ud til at være korrigeret i den kommende pakkeversion 2 (stadig i Alpha). Så der skal være en måde at tilsidesætte denne opførsel, når den version af Parcel er stabil (den nuværende stabile version er 1.12.4).

En anden ulempe er, at jeg fandt, at Pakkedokumentationen er temmelig minimal, når det kommer til oplysninger om tilpasning af konfigurationsindstillingerne for de forskellige funktioner. Det er sandt, at en af ​​Parcels enorme fordele er, hvor godt det fungerer uden for kassen. Men jeg tror, ​​at en mere omfattende dokumentation om tilpasning af den ville være nyttig. Hvordan deaktiverer jeg for eksempel HTML-minifikation på mine builds, mens jeg opretholder minifikation af CSS og JavaScript? Jeg kan ikke se en beskrivelse af det i dokumenterne. Da jeg kiggede gennem de lukkede problemer på GitHub, er der en løsning (troede, det ikke er meget praktisk).

Konklusion

En sidste ting, jeg vil nævne, er et værktøj, der hedder Opret app, som du kan bruge til automatisk at fremstille konfigurationsfiler til pakke. Det giver dig mulighed for at vælge dit JavaScript-bibliotek, transpiler, linter osv., Og disse tilføjes alle til din package.json-fil, klar til at blive initialiseret.

Opret app i Parcel.js

Det er det for denne pakkevejledning til begyndere. Jeg håber, at du vil være i stand til at bruge disse oplysninger til at komme hurtigt i gang med Parcel og bruge dem til fremtidige projekter. Og hvis du er ny med app bundling, eller aldrig har prøvet det på noget projekt, måske denne introduktion inspirerer dig til at give Parcel en chance.

Glem ikke at deltage i vores nedbrudskursus om at fremskynde dit WordPress-sted. Med nogle enkle rettelser kan du reducere din indlæsningstid med endda 50-80%:

Layout og præsentation af Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map