Sissejuhatus No-Config veebirakenduste paketi Parcel.js juurde

Sissejuhatus No-Config veebirakenduste paketi Parcel.js juurde

Sissejuhatus No-Config veebirakenduste paketi Parcel.js juurde
СОДЕРЖАНИЕ
02 июня 2020

See postitus on teie sissejuhatus isehakanud Parcel.js lehele "lõõmav kiire, nullkonfiguratsiooniga veebirakenduste kimp." Selle alustamiseks on vaja kõike, mida peate teadma:


Paljud esiotsa arendajad on pettunud tänapäeval mõne veebirakenduste loomisega seotud keerukuse pärast. Päris tavapärane tava on lisada mingisugune ehituse või komplekteerimise tööriist kasutajaliidese töövoogu, seega on paljud arendajad uurinud kasutajaliidese tööriista nagu veebipakk kasutamist.

Veebipakett on kõige populaarsem komplekteerija ja sellele järgnesid Require.js, Rollup ja sarnaste lahenduste kontsad. Kuid sellise tööriista nagu veebipakk õppimiskõver on järsk. Veebipaketiga alustamine pole selle keerukate konfiguratsioonide tõttu lihtne. Selle tulemusel on viimastel aastatel leitud teine ​​lahendus. See tööriist pole tingimata esireket, vaid hõlpsamini seeditav alternatiiv esikülje mooduli kimbu maastikul. Tutvustame Parcel.js.

Parcel.js tutvustus

Parcel.js (parceljs.org) on täpselt see, mida paljud alustavatele ja keskmistele arendajatele soovivad: lihtne, madala konfiguratsiooniga pakett, mille abil saate kiiresti tööle hakata.

Loodan, et see maatüki õpetus pakub selle tööriista hõlpsasti jälgitavat sissejuhatust. Ma kirjeldan põhitõdesid ja näitan teile, kuidas kasutada Pakki lihtsa veebipõhise rakenduse, mis sisaldab paabeli ja Sassi jaoks, pakkimiseks.

Contents Sisukord:

  1. Miks kasutada veebirakenduste paketti? #
  2. Parcel.js # installimine
  3. Faili sisestuspunkti loomine #
  4. Dist / kaust #
  5. Parcel.js kasutamine koos rakendusega Babel #
  6. Parcel.js kasutamine koos Sassiga #
  7. Mitme skripti komplekteerimine pakiga nr
  8. Koodide jagamine parcel.js-ga #
  9. Tootmine tugineb parcel.js #
  10. Kas puudusi on Paki kasutamisel? #

Parcel.js veebisait

Miks kasutada veebirakenduste paketti??

Ma ei kuluta liiga palju aega selliste rakenduste kimbu nagu Parcel.js kasutamise põhjuste arutamiseks, sest seda teemat on kindlasti varem käsitletud. Kuid siin on sellise tööriista kasutamise eelised peamised.

  • Skriptide või stiililehtede ühendamise tõttu on teie rakendusel vähem HTTP-päringuid
  • Skripte ja stiililehti saab nõudmise korral laadida, parandades veelgi jõudlust
  • Skripte ja stiililehti saab automaatselt minimeerida, et kasutajale vähem kilobaidti pakkuda
  • Kimpude komplekteerimine ja minimeerimine toimub tööriista abil automaatselt, minimeerides käsitsi töö
  • Arendusfailid on korraldatud modulaarselt, mis muudab teie koodi hooldamise ja silumise palju lihtsamaks

Nagu näete, on eeliseid palju ja need on enamasti seotud jõudluse ja projekti hooldamisega. Kimpide kasutamiseks on kindlasti palju põhjuseid, kui te pole seda veel kaalunud.

Kui see pole võimalik, alustame Parcel.js-ga alustamise ja kasutamise põhitõdesid. Lähen aeglaselt selle õpetuse funktsioonide juurde, kasutades mõnda lihtsat näidet, mida saate hõlpsalt jälgida.

Parcel.js installimine

Parcel.js saate oma terminali installida lõnga või npm abil. Selle õpetuse jaoks kasutan npm. Siin on käsk installida see globaalselt, et saaksite seda kasutada mis tahes projektis:

npm installige pakiautomaat -g

Lipp -g installib selle globaalselt. Kui soovite selle installida ainult ühe projekti jaoks ja lisada see projekti devDependencies pakettijs.json, saate sama käsku projekti juurkaustas käivitada, kasutades lipi –save-dev asemel -g:

npm installige pakiautomaat – kokkuhoid-dev

Globaalse installimisega (mis on kõige tavalisem kasutusjuhtum) saate algatada mis tahes antud projekti, kasutades käsku init. Liikuge terminali abil kaustale, mida soovite kasutada rakenduse juurkaustana, ja käivitage:

npm init -y

Lipp -y takistab npm-l mingeid küsimusi esitamast, kasutades vaikimisi seadistusi. Eeldusel, et minu projekti nimetatakse parcel-demo, loob see juurfaili package.json, mis näeb välja järgmine:

{
"nimi": "pakiautomaat",
"versioon": "1.0.0",
"kirjeldus": "",
"peamine": "index.js",
"skriptid": {
"test": "kaja \"Viga: testi pole täpsustatud \" && 1. väljapääs"
},
"märksõnad": [],
"autor": "",
"litsents": "ISC"
}

Kui leiate, et mõni ülalnimetatutest on npm-i tundmatuse tõttu segane, võite tutvuda minu põhjaliku ülevaatega juhendaja npm. See on keskendunud eesliidese veebiarendajate abistamisele tööriista mõistmisel.

Faili sisenemispunkti loomine

Projekti põhiseadistuste jaoks kasutan Parcel.js failis index.html, mis osutab primaarsele JavaScripti failile nimega index.js (nagu on näidatud failis pack.json). Seda HTML-faili saab kasutada minu paki sisenemispunktina. Minu HTML-failil on skriptielement, mis osutab minu JavaScripti failile, nii et see näeb välja umbes selline:

html>
<html>
<pea>
<pealkiri>Paki Demotitle>
pea>
<keha>
<skript src ="./js/index.js">skript>
keha>
html>

Kui mul on õige HTML-fail ja JavaScripti fail olemas, saan Parceli sisseehitatud arendusserveri käivitada, käivitades minu projekti kaustas oma terminalis järgmist:

pakiindeks.html

See käivitab serveri ja ütleb talle, millist faili sisendpunktina kasutada. Selle tulemusel saan oma terminalisessioonil järgmise teate:

Server töötab aadressil http: // localhost: 1234
√ Ehitatud 887ms.

Nüüd saan oma brauseris avada http: // localhost: 1234 /, et vaadata, mida ma seni ehitanud olen. Otseserver kasutab otseülekannet ja nn kuuma mooduli asendamine. See värskendab automaatselt lehe mooduleid, ilma et oleks vaja tervet lehte värskendada. Nii näen töötamise ajal kiiremini oma ehituse edenemist.

Kui mul on Parcel.js käivitatud koos selle serveriga aktiivne, taastavad kõik failis tehtud muudatused automaatselt minu rakenduse iga kord, kui fail salvestatakse. Tegevuse nägemiseks lisan oma skripti lihtsa konsooli logirida. See käivitab minu terminalis järgmise teate:

$ pakiindeks.html
Server töötab aadressil http: // localhost: 1234
√ Ehitatud 1.08s.
√ Sisseehitatud 28ms.

Iga rida “Ehitatud…” tähistab ühte ehitust, mille käivitab sisumuutus ja salvestamine.

Kui soovin kasutada Parceli sisseehitatud arendusserveri asemel omaenda serverit, saan kasutada jälgimiskäsku:

pakiautomaatide register.html

Sama tulemuse saan oma terminalisessiooniga, kui Parcel.js ehitab mu rakenduse ja ootab muudatusi:

$ paki vaatamise register.html
√ Sisseehitatud 855ms.

Dist / kaust

Kui olen Parcel.js käivitanud kas vaatamisrežiimis või sisseehitatud serveri kaudu, näen oma projekti kausta sees nähes järgmist kausta ja failistruktuuri:

register.html
pakett.json
js /
└───── register.js
dist /
└───── register.html
└───── js.00a46daa.js
└───── js.00a46daa.js.map

Pange tähele automaatselt loodud kausta dist. Siin asuvad minu tootmisfailid; Ma ei puuduta ühtegi neist failidest. Pange tähele, et minu Parcel build on automaatselt mu indeks.js faili teisendanud unikaalseks vahemälu sõbralikuks versiooniks (muudetud või taaselustatud failinimega). Sellele on lisatud ka lähtekaardifail (saate lugeda lähtekaartide kohta selles postituses).

Kui ma vaatan oma index.html-faili dist-kausta, näen järgmist:

html>
<html>
<pea>
<pealkiri>Paki Demotitle>
pea>
<keha>

<skript src ="/js.00a46daa.js">skript>
keha>
html>

Pange tähele, et minu index.html faili dist-versioon osutab õigesti ja mugavalt minu .js-faili dist-versioonile.

Kui minu veebisait sisaldab mitut faili, mis osutavad samadele skriptidele (näiteks about.html, contact.html jne), saan kasutada järgmist käsku:

pakiindeks.html umbes.html kontakt.html

See ütleb maatükile, et tahan ehitamiseks kasutada mitut sisenemispunkti. Samuti saan kasutada järgmist käsku, et käskida Parcel.js-l kasutada sisestuspunktidena kõiki minu HTML-faile:

pakk * .html

Parcel.js kasutamine koos Babeliga

Parcel.js on sisseehitatud tugi erinevatele koodisiirdajatele, sealhulgas Paabel, populaarne tööriist moodsa järgmise põlvkonna JavaScripti teisendamiseks samaväärseks koodiks, millest saavad aru kõik brauserid. Kuna Babel on parcel.js sisse ehitatud, ei vaja te selle kasutamiseks spetsiaalset pistikprogrammi, see lihtsalt töötab. Vaatame näidet.

Lisan faili index.js järgmise koodi:

funktsioon getInfo (nimi, aasta = 2018, värv = ‘sinine’) {
console.log (nimi, aasta, värv);
}

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

See kood kasutab ES6 funktsiooni, mida nimetatakse vaikeparameetrid, mida saate konkreetselt funktsiooni peas näha. Vanemad brauserid ei toeta funktsioonide vaikeparameetreid. Veendumaks, et kood ei viita tõrkele, vajan Babelilt koodi ümber ekvivalentseks koodiks, mis töötab kõigis brauserites. Kui ma olen faili index.js salvestanud, ehitab Parcel.js mu rakenduse uuesti üles ja toodab minu kirjutatud ES6 koodi asemel järgmise:

funktsioon getInfo (nimi) {
var aasta = argumendid.pikkus > 1 && argumendid [1]! == määratlemata? argumendid [1]: 2018;
var värv = argumendid.pikkus > 2 && argumendid [2]! == määratlemata? argumendid [2]: ‘sinine’;
console.log (nimi, aasta, värv);
}

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

Saate kasutada Babeli veebireklaame testige seda.

Ja pange tähele siin kõige olulisemat tegurit: ma ei teinud midagi Paabeli installimiseks ega konfigureerimiseks – see töötab lihtsalt paki vaikimisi seadistamise osana! Muidugi võiksite lisada mõned konfiguratsioonivõimalused, et muuta Paabel Pauli tegema seda, mida soovite. Sel juhul saate projekti juurkausta lisada .babelrc-faili koos konfiguratsioonieelistustega. Saate rohkem lugeda kasutades .babelrc-faili veebisaidil Parcel.js.

Parcel.js kasutamine Sassiga

Sarnaselt Babeliga kompileerib Parcel vaikimisi ka minu SCSS (Sass) failid kehtivasse CSS-i. Selle demonstreerimiseks lisan oma näidisprojekti juuri kausta nimega css. Sellesse kausta lisan faili style.scss järgmise Sassi koodiga:

keha {
värv: must;

.moodul {
värv: punane;
}
}

Ma kasutan Sassi valija pesemisfunktsiooni. Lisan oma HTML-failide jaotisse järgmise rea:

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

Kui kõik minu failid on salvestatud, koostab Parcel minu dist / kausta värske kogumi koos kompileeritud CSS-failiga, mis on mu SCSS-i teisendanud järgmisteks:

keha {
värv: must;
}
keha. moodul {
värv: punane;
}

Kuni Sass on mu süsteemi ülemaailmselt installitud, teeb Parcel seda automaatselt, ilma et oleks vaja konfigureerida. Kui mul pole Sassi globaalset installimist, pole probleemi. Saan lihtsalt kirjutada oma SCSS-i, seejärel käivitage Parcel ja Parcel installib Sassi automaatselt projektipõhise sõltuvusena. Väga mugav! Ja see on jällegi eriti kasulik, kuna see ei vaja konfigureerimist.

Ja nagu ka Paabeli puhul, võin ma valida, kas minna Sassiga vaikimisi konfiguratsioonivõimalustele. Või saan luua .sassrc-faili oma projekti juure ja lisada minu enda koosseisud.

Mitme skripti komplekteerimine Pakiga

Siiani on näited, mida ma teile näitasin, just selleks, et teid koos Parceliga kurssi viia, et saaksite põhiteesid selle toimimisest. Nagu varem mainitud, on mis tahes komplekteerija võimuses mitu faili automaatselt üheks failiks ühendada. See aitab vähendada HTTP-taotlusi ja parandada teie veebisaidi või rakenduse kiirust.

Kõike, mida seni demonstreerisin, saab teha mitmete skriptide abil, mis on sisse tõmmatud ES6 mooduli funktsiooni abil. See võimaldab mul skripte luua ja importida modulaarselt. See hoiab mu koodi hõlpsalt hooldatavana, pakkudes samal ajal tootmises ainult ühte komplekteeritud skripti.

Selle demonstreerimiseks lisan eraldi faili nimega module.js, mis sisaldab järgmist JavaScripti:

eksport lase värv = ‘roheline’;

ekspordifunktsiooni lisamine (n1, n2) {
tagasi n1 + n2;
}

See on vaid mõni põhikood kahe objekti eksportimiseks: muutuja ja funktsioon. Failis index.js kavatsen neid ressursse importida järgmise koodiga:

importige {värv, lisage} kataloogist ‘../js/module.js’;

console.log (värv); // "roheline"
console.log (lisage (20, 40)); // 60

Jällegi, see on lihtsalt ES6 mooduli süntaks. Ma ei hakka üksikasjalikumalt uurima, kuidas see siin töötab. Ilus osa selle kohta on see, et ma ei pidanud HTML-failis täpsustama, et kasutasin moodulit. Tavaliselt näeb minu skripti silt välja selline, mooduli tüübi atribuudiga on määratud:

<skript src ="./js/index.js" tüüp ="moodul">skript>

Kuid seda pole vaja. Parcel tunneb imporditava mooduli ära ja koondab minu kaks skripti ühte jõudlussõbralikku ressurssi. See juhtub ilma spetsiaalse konfiguratsiooni või pistikprogrammideta. Ja nagu ka varasemate näidete puhul, on kood ümber Babeli abil ES5-ekvivalentsesse koodi, mis pakub mulle kõige rohkem brauseri tuge.

Koodide tükeldamine Parcel.js-ga

Järjekordne funktsioon Parcel’is, mis töötab ilma igasuguse konfiguratsioonita, on koodide jagamine. Mõnel juhul soovin, et kõik mu moodulid laaditakse kõigile minu lehtedele. Kuid muudel juhtudel võib-olla tahaksin laadida teatud mooduleid ainult teatud lehtedele, teatud kontekstides. Seda lubab mul teha koodide jagamine.

Varem mainisin, et minu näidisprojekt sisaldab kolme lehte: index.html, about.html ja contact.html. Ütleme nii, et tahan käitada sama JavaScripti paketti kõigil kolmel lehel, kuid about.html lehel on mul nupp, mis käivitab midagi konkreetset. Kuid ma tahan, et see kood laadiks ainult siis, kui seda nuppu vajutatakse.

Koodi jagamise funktsiooni abil võib see kood välja näha nii:

if (document.querySelector (‘umbes’)) {
document.querySelector (‘. about’). addEventListener (‘click’, () => {
import (‘../js / about.js’). siis (
document.body.innerHTML + = ‘Teave lehe värskendamise kohta’;
);
});
}

Pange tähele, et see sisaldab uut JavaScripti funktsiooni, dünaamiline import kasutades funktsiooni import (). See võimaldab mul konkreetsel juhul soovitud koodi dünaamiliselt laadida. Sel juhul teen seda siis, kui umbes lehel nuppu vajutatakse. Funktsioon import () tagastab lubaduse, nii et võin teha kõike, mida tahan, klauslis .then (), mis käivitub pärast imporditud skripti laadimist. Skript about.js laaditakse nõudmisel ja Babel tõlgib selle koodi brauseriülese ES5-le, et tagada selle toimimine kõikjal. Kui minu kimp luuakse, pannakse osa about.js oma faili dis / kausta sees, et võimaldada selle faili nõudmisel laadimist.

Nagu muud funktsioonid, mida ma arutasin, töötab funktsioon import () ka Parcel’is ilma konfiguratsioonita.

Tootmine põhineb Parcel.js-l

Siiani olen tootnud kõiki oma pakiandmeid lennult, kasutades sisseehitatud serverit, mis on kaasas Pakiga ja sisaldab reaalajas uuesti laadimist. Iga kord, kui projekti päästan, on minu kimp üles ehitatud. Kuid kood oli alati komplekteeritud pidevaks arendamiseks. Nii saan allikat vastavalt silumisele vaadata või kontrollida.

Kui mu projekt on valmis ja reaalajas serverisse saatmiseks valmis, võin ma takistada Parceli oma projekti vaatamast. Terminali CTRL-C teeb seda paljudel platvormidel. Siis käivitan järgmise käsu, et käsku Parcelil luua viimane ehitamine:

maatükkide indeks.html umbes.html kontakt.html

Sel juhul ehitan kõigist kolmest sisestusfailist. Kui see on tehtud, ei oota Pakk enam muudatusi; lõplik kimp on üles ehitatud ja ongi kõik. Lisaks ehituse valmimisele on minu kood ette valmistatud ka Parceli poolt. HTML, CSS ja JavaScript on kõik minimeeritud, et optimaalse jõudluse tagamiseks toota võimalikult vähe faile.

Paki kasutamise puudused?

Pakk peaks kindlasti olema valik valik neile, kellel on ehitustööriistadega vähe kogemusi või pole neid üldse. Kuid oma uurimistöö käigus leidsin mõned asjad, mida võin mainida ja mida tuleks tulevikus parandada.

Kõigepealt märkate, et Parcel paigutab teie komplekteeritud skriptid ja stiililehed alati samasse kataloogi kui sisenemispunkti HTML-failid. See juhtub ka siis, kui CSS- ja JavaScripti failid asuvad eraldi kaustades. Kuna need on tootmisfailid, ei pruugi sellel olla suurt tähtsust. Kuid see on midagi, mida tuleks meeles pidada. Hea uudis on see tundub olevat parandatud tulevases Paki versioonis 2 (endiselt alfaversioonis). Nii et kui selle Parceli versioon on stabiilne (praegune stabiilne versioon on 1.12.4), tuleks seda käitumist ümber lükata..

Veel üks puudus on see, et ma leidsin, et Paki dokumentatsioon on erinevate funktsioonide konfiguratsioonivõimaluste kohandamise kohta üsna minimaalne. On tõsi, et üks Parcli tohututest eelistest on see, kui hästi see väljastpoolt töötab. Kuid ma arvan, et kasulik oleks mõni ulatuslikum dokument selle kohandamiseks. Näiteks kuidas keelata oma versioonides HTML-i minimeerimine, säilitades samal ajal CSS-i ja JavaScripti minimeerimise? Ma ei näe dokumentides selle kirjeldust. Kui ma vaatasin GitHubi suletud teemasid läbi, siis seal on ümbersõit (arvas, et see pole eriti mugav).

Järeldus

Viimane asi, mida mainin, on tööriist nimega Loo rakendus, mida saate kasutada konfiguratsioonifailide automaatseks tootmiseks Paki jaoks. See võimaldab teil valida oma JavaScripti teegi, siirdaja, liinilahenduse ja nii edasi. Need kõik lisatakse teie vormingusse vormistamiseks faili package.json.

Rakenduse loomine saidil Parcel.js

Just see on see maatüki õpetus algajatele. Loodan, et saate seda teavet kasutada selleks, et Parceliga kiiresti tööle saada ja kasutada seda tulevastes projektides. Ja kui olete alustanud rakenduste komplekteerimisega või pole seda kunagi üheski projektis proovinud, inspireerib see sissejuhatus teid proovima Pakki.

Ärge unustage liituda meie WordPressi saidi kiirendamise kursusega. Mõne lihtsa parandusega saate laadimisaega vähendada isegi 50–80%:

Kujundus ja esitlus Karol K poolt.

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