Uvod u Parcel.js, paket ne-konfiguriranja web aplikacija

Uvod u Parcel.js, paket ne-konfiguriranja web aplikacija

Uvod u Parcel.js, paket ne-konfiguriranja web aplikacija
СОДЕРЖАНИЕ
02 июня 2020

Ovaj je post vaš uvod u Parcel.js, samoproglašeni "blista brz, nulta konfiguracija paketa web aplikacija." Evo svega što trebate znati da biste započeli s time:


Mnogi razvojni programeri danas su frustrirani zbog nekih složenosti danas povezanih sa izradom web aplikacija. Prilično je uobičajena praksa da u napredni radni tijek uključe nekakav alat za sastavljanje ili spajanje, tako da su mnogi programeri pokušali koristiti prednji alat poput webpacka.

Webpack je najpopularniji paket i slijedi ga za petama Require.js, Rollup i sličnih rješenja. Ali krivulja učenja za alat poput webpacka je strma. Početak rada s webpackom nije jednostavan zbog složenih konfiguracija. Kao rezultat toga, posljednjih godina pojavilo se još jedno rješenje. Ovaj alat nije nužno prednji pokretač, već je lakše probavljiva alternativa na pejzažu paketa modula. Predstavljamo Parcel.js.

Uvod u Parcel.js

Parcel.js (parceljs.org) upravo je ono što mnogi početnici za razvojne programe žele: Jednostavan paket s niskom konfiguracijom s kojim se brzo možete nadograditi i pokrenuti.

Nadam se da će ovaj udžbenik za paket pružiti lako uvođenje u ovaj alat. Pojasnit ću osnove, a zatim ću vam pokazati kako pomoću Parcel za spajanje jednostavne web aplikacije koja uključuje Babel i Sass.

�� Sadržaj:

  1. Zašto koristiti dobavljač web aplikacija? #
  2. Instaliranje Parcel.js #
  3. Stvaranje ulazne točke datoteke #
  4. Dist / mapa #
  5. Korištenje Parcel.js s Babel #
  6. Upotreba Parcel.js sa Sass #
  7. Pakiranje više skripti s # parcelom
  8. Dijeljenje koda s Parcel.js #
  9. Proizvodnja se razvija pomoću Parcel.js #
  10. Bilo koji nedostatak korištenja paketa? #

Web mjesto Parcel.js

Zašto koristiti dobavljač web aplikacija?

Neću trošiti previše vremena na razgovore o upotrebi paketa aplikacija poput Parcel.js, jer je ta tema sigurno već bila pokrivena. No, evo osnovnog iskorištavanja prednosti korištenja takvog alata:

  • Vaša će aplikacija imati manji broj HTTP zahtjeva zbog kombiniranja skripti ili tablica stilova
  • Skripte i tablice stilova mogu se učitati na zahtjev i dodatno poboljšavaju performanse
  • Skripte i tablice stilova mogu se automatski umanjiti kako bi korisniku isporučili manje kilobajta
  • Povezuje i minimizira rad s alatom automatski, minimizirajući ručni rad
  • Razvojne datoteke organizirane su modularno, čineći vaš kôd mnogo lakšim za održavanje i uklanjanje pogrešaka

Kao što vidite, prednosti su mnogobrojne, a najviše se odnose na izvedbu i održavanje projekata. Svakako postoji puno razloga za korištenje paketa ako ovo još niste uzeli u obzir.

S tim izlaskom, započnimo s osnovama ustajanja i rada s Parcel.js. Polako ću pregledavati značajke u ovom vodiču pomoću nekih jednostavnih primjera koje ćete lako moći slijediti.

Instaliranje Parcel.js

Parcel.js možete instalirati na terminal pomoću pređe ili npm. Za ovaj ću vodič koristiti npm. Evo naredbe za globalnu instalaciju, kako biste je mogli koristiti u bilo kojem projektu:

npm instalirati paket-paket -g

Zastava -g ga instalira globalno. Ako ga želite instalirati samo za jedan projekt i dodati ga u devDependence vašeg projekta u package.json, istu naredbu možete pokrenuti unutar korijenske mape projekta koristeći –save-dev zastavu umjesto -g:

npm instalirajte paket-paket –save-dev

Pomoću globalne instalacije (koja će biti najčešća upotreba), možete pokrenuti bilo koji projekt pomoću naredbe init. Pomoću terminala idite do mape koju želite koristiti kao korijen vaše aplikacije i pokrenite:

npm init -y

Oznaka -y sprječava npm da postavlja bilo kakva pitanja, koristeći zadane postavke za postavljanje. Pod pretpostavkom da se moj projekt naziva parcel-demo, to stvara root.json datoteku u korijenu koja izgleda ovako:

{
"Ime": "parcela-Demo",
"verzija": "1.0.0",
"opis": "",
"glavni": "index.js",
"skripta": {
"test": "jeka \"Pogreška: nije naveden test \" && izlaz 1"
},
"ključne riječi": [],
"Autor": "",
"licenca": "ISC"
}

Ako vam bilo što od navedenog bude zbunjujuće zbog vašeg nedovoljnog poznavanja npm-a, možete provjeriti moju opširnost udžbenik na npm. Usredotočeno je na pomaganje naprednim web programerima da razumiju alat.

Stvaranje točke unosa u datoteku

Za osnovno postavljanje projekta koristit ću Parcel.js u datoteci index.html koja upućuje na primarnu JavaScript datoteku zvanu index.js (kao što je prikazano u datoteci package.json). Ova HTML datoteka poslužit će kao moja ulazna točka za paket. Moja HTML datoteka sadrži element skripte koji upućuje na moju JavaScript datoteku, tako da će izgledati ovako:

hTML>
<hTML>
<glava>
<titula>Demo paket>
glava>
<tijelo>
<skripta src ="./js/index.js">skripta>
tijelo>
hTML>

Nakon što postavim ispravnu HTML datoteku i JavaScript datoteku, mogu pokrenuti Parcelin ugrađeni razvojni poslužitelj pokretanjem sljedećeg u svom terminalu unutar mape projekta:

parcel index.html

Ovo pokreće poslužitelj i govori mu koju datoteku treba koristiti kao ulaznu točku. Kao rezultat, u svojoj sesiji terminala dobivam sljedeću poruku:

Poslužitelj na http: // localhost: 1234
Izgrađeno u 887ms.

Sada mogu otvoriti http: // localhost: 1234 / u svom pregledniku da vidim što sam do sada napravio. Poslužitelj uživo koristi ponovno punjenje uživo i nešto što se naziva zamjena vrućeg modula. To će automatski ažurirati module na stranici bez ponovnog osvježavanja stranice. Na ovaj način, kako vidim, napredujem svoju izgradnju u bržim koracima, dok radim.

Kad se Parcel.js pokrene s poslužiteljem, sve promjene koje napravim u datoteci automatski će obnoviti moju aplikaciju svaki put kad je datoteka spremi. Da biste to vidjeli na djelu, u svoj ću scenarij dodati jednostavnu liniju dnevnika konzole. To će pokrenuti sljedeću poruku na mom terminalu:

$ parcel index.html
Poslužitelj na http: // localhost: 1234
Izgrađeno za 1,08s.
Izgrađeno za 28ms.

Svaki redak “Izgrađeno …” predstavlja jednu sastavinu, koju pokreće promjena sadržaja i spremi.

Ako želim koristiti svoj vlastiti poslužitelj, a ne ugrađeni razvojni poslužitelj Parcel, mogu se upotrijebiti naredbu watch:

parcel watch index.html

Dobivam isti rezultat u svojoj terminalnoj sesiji, pri čemu Parcel.js gradi moju aplikaciju, a zatim čeka promjene:

$ parcel watch index.html
Izgrađeno za 855ms.

Dist / mapa

Jednom kada pokrenem Parcel.js ili u načinu gledanja ili preko ugrađenog poslužitelja, ako pogledam u mapu mog projekta, vidjet ću strukturu mape i datoteke kao što je slijedeće:

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

Uočite mapu dist koja se automatski stvara. Ovdje su moje produkcijske datoteke; Ne diram nijednu ovu datoteku. Primijetite da je moja parcela sklop automatski pretvorio datoteku index.js u datoteku s jedinstvenom verzijom prilagođenom predmemorijom (s revidiranim ili “revved” imenom datoteke). Također je dodana datoteka s izvornom mapom (možete čitati o izvornim kartama u ovom postu).

Ako pogledam svoju datoteku index.html unutar dist mape, vidjet ću sljedeće:

hTML>
<hTML>
<glava>
<titula>Demo paket>
glava>
<tijelo>

<skripta src ="/js.00a46daa.js">skripta>
tijelo>
hTML>

Uočite dist verziju moje datoteke index.html ispravno i povoljno na dist verziju moje .js datoteke.

Ako moja web lokacija sadrži više datoteka koje upućuju na iste skripte (na primjer, about.html, contact.html, itd.), Mogu upotrijebiti sljedeću naredbu:

parcel index.html about.html contact.html

Ovo govori Parcelu da od nje želim koristiti više ulaznih točaka. Mogu i upotrijebiti sljedeću naredbu da kažem Parcel.js da koristi sve svoje HTML datoteke kao ulazne točke:

parcela * .html

Korištenje Parcel.js s Babel

Parcel.js ima ugrađenu podršku za razne transpilere koda, uključujući Babel, popularni alat za pretvaranje moderne JavaScript sljedeće generacije u ekvivalentni kôd koji mogu razumjeti svi preglednici. Budući da je Babel ugrađen u Parcel.js, ne treba vam poseban dodatak da biste ga koristili, on jednostavno funkcionira. Pogledajmo primjer.

U svoju ću datoteku index.js dodati sljedeći kôd:

funkcija getInfo (ime, godina = 2018, boja = ‘plava’) {
console.log (ime, godina, boja);
}

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

Ovaj kôd koristi značajku ES6 koja se zove zadani parametri, što posebno možete vidjeti u funkcijskoj glavi. Stariji preglednici ne podržavaju zadane parametre za funkcije. Da bih bio siguran da kôd ne baca pogrešku, treba mi Babel da transpirira kôd u ekvivalentni kôd koji radi u svim preglednicima. Nakon što spremim datoteku index.js, Parcel.js će obnoviti moju aplikaciju i umjesto ES6 koda koji sam napisao stvorit će sljedeće:

funkcija getInfo (ime) {
var godina = argumenti.length > 1 && argumenti [1]! == nedefinirani? argumenti [1]: 2018;
var color = argumenti.length > 2 && argumenti [2]! == nedefinirani? argumenti [2]: ‘plava’;
console.log (ime, godina, boja);
}

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

Možete upotrijebiti Babel-ovo internetsko odbijanje testiraj ovo.

I ovdje primijetite najvažniji faktor: Nisam učinio ništa da bih instalirao ili konfigurirao Babel – on jednostavno djeluje van okvira kao dio zadane postavke Parcela! Naravno, možda biste trebali dodati neke mogućnosti konfiguracije da biste Babel promijenili da radi ono što želite. Ako je to slučaj, možete dodati .babelrc datoteku u korijensku mapu vašeg projekta, sa uključenim postavkama konfiguracije. Više o tome možete pročitati pomoću .babelrc datoteke na web stranici Parcel.js.

Korištenje Parcel.js sa Sass

Slično kao u Babelu, Parcel će također po zadanome automatski sastaviti moje SCSS (Sass) datoteke u valjani CSS. Kako bih to demonstrirao, dodati ću mapu pod nazivom “css” u korijen mog primjera projekta. U tu ću mapu dodati datoteku style.scss sa sljedećim Sass kodom:

tijelo {
Crna boja;

.modul {
boja: crvena;
}
}

Koristim značajku gniježđenja za selektora Sass. Ja ću dodati sljedeći redak u odjeljak mojih HTML datoteka:

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

Nakon što su sve moje datoteke spremljene, Parcel će proizvesti novu verziju u mom dist / folder s sastavljenom CSS datotekom koja je pretvorila moj SCSS u sljedeće:

tijelo {
Crna boja;
}
body .module {
boja: crvena;
}

Sve dok imam globalno instaliran Sass na svom sustavu, Parcel će to raditi automatski, bez potrebne konfiguracije. Ako nemam globalnu instalaciju Sass-a, nema problema. Mogu samo napisati svoj SCSS, a zatim pokrenuti paket i paket će automatski instalirati Sass kao ovisnost o projektu. Vrlo povoljno! I opet, ovo je posebno korisno jer ne zahtijeva nikakvu konfiguraciju.

I baš kao i kod Babel, mogu odabrati s bilo kojim zadanim opcijama konfiguracije koje dolaze sa Sassom. Ili mogu stvoriti .sassrc datoteku u korijenu mog projekta i dodati je moje vlastite konfiguracije.

Povezivanje više skripti s paketima

Do sada su primjeri koje sam vam pokazao samo da biste se pripremili i pokrenuli s Parcelom, tako da možete dobiti osnovnu predstavu o tome kako on funkcionira. Kao što smo već spomenuli, moć bilo kojeg paketa je mogućnost da automatski kombinira više datoteka u jednu datoteku. To pomaže u smanjenju HTTP zahtjeva i poboljšanju brzine vaše web stranice ili aplikacije.

Sve što sam do sada pokazao, može se učiniti pomoću više skripti koje se koriste pomoću značajke modula ES6. To mi omogućuje stvaranje i uvoz skripti na modularni način. Zbog toga je moj kôd lako održavati, dok u proizvodnji još uvijek poslužujem samo jednu paketnu skriptu.

Kako bih to demonstrirao, dodat ću zasebnu datoteku zvanu module.js koja će sadržavati sljedeći JavaScript:

export neka boja = ‘zelena’;

funkcija dodavanja izvoza (n1, n2) {
povratak n1 + n2;
}

Ovo je samo neki osnovni kod za izvoz dva objekta: Promjenjiva i funkcija. U datoteci index.js ove resurse uvozim sa sljedećim kodom:

import {color, add} iz ‘../js/module.js’;

console.log (boja); // "zelena"
console.log (dodati (20, 40)); // 60

Opet, to je samo osnovna sintaksa modula ES6. Neću ulaziti u detalje kako ovo ovdje djeluje. Lijep dio toga je činjenica da nisam trebao u svojoj HTML datoteci specificirati da koristim modul. Obično će moja oznaka skripte izgledati ovako, s atributom tipa postavljenim na modul:

<skripta src ="./js/index.js" type ="modul">skripta>

Ali ovo nije potrebno. Parcel prepoznaje da se modul uvozi i povezuje moje dvije skripte u jedan resurs prilagođen performansama. To se događa bez posebne konfiguracije ili dodataka. I baš kao i u ranijim primjerima, kod se Babel-om prevodi u kod ES-ekvivalent koji će mi pružiti najviše podrške u pregledniku.

Dijeljenje koda s Parcel.js

Još jedna značajka u paketu koja djeluje bez ikakve konfiguracije jest dijeljenje koda. U nekim slučajevima želim da se svi moji moduli učitaju na svim mojim stranicama. Ali u drugim slučajevima možda želim samo učitati određene module na određene stranice, u određenim kontekstima. To mi omogućuje dijeljenje koda.

Ranije sam spomenuo da moj primjer projekta uključuje tri stranice: index.html, about.html i contact.html. Recimo da želim pokrenuti isti paket JavaScript na sve tri stranice, ali na stranici about.html imam gumb koji aktivira nešto specifično. Ali želim da se taj kod učita tek kad se pritisne taj gumb.

Evo kako taj kôd može izgledati pomoću značajke dijeljenja koda:

if (document.querySelector (‘. about’)) {
document.querySelector (‘. o’). addEventListener (‘klik’, () => {
uvoza (”../ js / about.js’). Zatim (
document.body.innerHTML + = ‘O ažuriranoj stranici’;
);
});
}

Napominjemo da ovo uključuje novu JavaScript značajku, dinamički uvoz pomoću import () funkcije. To mi omogućuje dinamično učitavanje koda koji želim u određenoj instanci. U ovom slučaju to radim kada se pritisne gumb na stranici otprilike. Značajka import () vraća obećanje, tako da mogu raditi sve što želim unutar klauzule .then (), koja se pokreće nakon učitavanja uvezene skripte. Skripta about.js učitava se na zahtjev i Babel će kopirati ovaj kod u preglednik ES5 kako bi se osiguralo da svugdje radi. Kad se stvori moj paket, dio about.js se stavlja u vlastitu datoteku unutar dist / mape kako bi se omogućila učitavanje ove datoteke na zahtjev.

Kao i druge značajke o kojima sam razgovarao, značajka import () djeluje u paketu bez ikakve konfiguracije.

Proizvodnja se razvija s Parcel.js

Do sada sam sve svoje pakete sastavljao u pokretu pomoću ugrađenog poslužitelja koji dolazi s Parcelom i koji uključuje ponovno učitavanje uživo. Svaki put kada spremam svoj projekt, moj se paket gradi. Ali kod je uvijek bio u paketu za kontinuirani razvoj. Na taj način mogu pregledati ili pregledati izvor prema potrebi za napraviti ispravljanje pogrešaka.

Jednom kada moj projekt bude gotov i spreman je da budem prebačen na živi poslužitelj, mogu zaustaviti Parcel da gleda moj projekt. CTRL-C u terminalu to radi na mnogim platformama. Tada ću pokrenuti sljedeću naredbu da kažem Parcelu da proizvede jednu konačnu izgradnju:

parcel build index.html about.html contact.html

U ovom slučaju, gradim iz sve tri moje datoteke. Jednom kada to učinite, Parcel više ne čeka promjene; konačni paket je izgrađen i to je to. Uz završetak izrade, moj je kôd za proizvodnju pripremio Parcel. HTML, CSS i JavaScript svi su izradjeni i stvaraju najmanje mogućih datoteka za optimizirane performanse.

Bilo koji nedostatak upotrebe Parcela?

Paket bi definitivno trebao biti najbolji izbor onima koji imaju malo ili nikakvog iskustva s alatima za izradu. Ali u vlastitom sam istraživanju pronašao nekoliko stvari koje mogu spomenuti i koje bi trebalo poboljšati u budućnosti.

Prije svega, primijetit ćete da paket uvijek stavlja vaše povezane skripte i tablice stilova u isti direktorij kao i datoteke HTML-a za ulaznu točku. To se događa čak i ako CSS i JavaScript datoteke imate u zasebnim mapama. Budući da se radi o proizvodnim datotekama, to možda i nije mnogo važno. Ali to je nešto na što morate imati na umu Dobra vijest je ovo čini se da je ispravljen u narednoj verziji paketa 2 (još uvijek u Alfa-u). Dakle, trebao bi postojati način da se nadvlada ovo ponašanje kada je ta inačica paketa stabilna (trenutačna stabilna verzija je 1.12.4).

Drugi je nedostatak to što sam smatrao da je dokumentacija parcele prilično minimalna kada je u pitanju informacija o prilagođavanju opcija konfiguracije za različite značajke. Točno je da je jedna od najvećih prednosti Parcela u tome koliko dobro funkcionira izvan okvira. Ali mislim da bi neka opsežnija dokumentacija o prilagođavanju bila korisna. Na primjer, kako onemogućiti HTML miniranje u mojim verzijama, istovremeno održavajući CSS i JavaScript minifikaciju? Ne vidim to u dokumentima. Kad sam pogledao zatvorene izdanja na GitHubu, postoji zaobilazno rješenje (mislio da nije baš prikladno).

Zaključak

Još jedna stvar koju ću spomenuti je alat nazvan Stvorite aplikaciju, koju možete koristiti za automatsko stvaranje konfiguracijskih datoteka za Parcel. Omogućuje vam odabir JavaScript biblioteke, transpilera, lintera i tako dalje, a svi će oni biti dodani u datoteku package.json, spremni za inicijalizaciju.

Kreirajte aplikaciju u Parcel.js

To je to za ovaj paket udžbenika za početnike. Nadam se da ćete ove informacije moći upotrijebiti za brzo pokretanje i pokretanje paketa te ih koristiti u budućim projektima. A ako ste novi u grupiranju aplikacija ili ga nikad niste isprobali na nekom projektu, možda će vas ovaj uvod potaknuti da pokušate sa Parcelom.

Ne zaboravite se pridružiti našem tečaju o ubrzanju ubrzanja stranice WordPress. Pomoću nekih jednostavnih ispravki možete smanjiti vrijeme učitavanja za čak 50-80%:

Izgled i prezentacija Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector