Johdanto Parcel.js-sovellukseen, No-Config-verkkosovelluspakettiin

Johdanto Parcel.js-sovellukseen, No-Config-verkkosovelluspakettiin

Johdanto Parcel.js-sovellukseen, No-Config-verkkosovelluspakettiin
СОДЕРЖАНИЕ
02 июня 2020

Tämä viesti on johdanto itse julistamalle Parcel.js: lle "salamannopea, nollakonfiguraatiosovelluspaketti." Tässä on kaikki mitä sinun tarvitsee tietää aloittamiseksi:


Monet käyttöliittymäkehittäjät ovat turhautuneet joihinkin monimutkaisuuksiin, jotka liittyvät nykyään verkkosovellusten rakentamiseen. On melko tavanomaista sisällyttää jonkinlainen rakennus- tai niputustyökalu käyttöliittymän työnkulkuun, joten monet kehittäjät ovat tutkineet käyttöliittymätyökalun, kuten webpackin, käyttöä..

webpack on suosituin niputuspaketti, ja sitä seurasi Require.js, Rollup ja vastaavat ratkaisut. Mutta verkkopaketin kaltaisen työkalun oppimiskäyrä on jyrkkä. Webpackin aloittaminen ei ole helppoa monimutkaisten kokoonpanojensa takia. Seurauksena on viime vuosina syntynyt toinen ratkaisu. Tämä työkalu ei ole välttämättä eturintamassa, mutta helpommin sulatettava vaihtoehto käyttöliittymämoduulin niputusmaastossa. Esittelyssä Parcel.js.

Johdanto Parcel.js-sivustoon

Parcel.js (parceljs.org) on tarkalleen mitä monet aloittelevat keskitason kehittäjät haluavat: Yksinkertainen, matalan kokoonpanon paketti, jonka avulla pystyt nopeasti toimimaan.

Toivon, että tämä Parcel-opetusohjelma tarjoaa helpon seurannan johdannosta tähän työkaluun. Esitän perusteet ja sitten näytän sinulle kuinka käyttää pakettia pakettina yksinkertainen web-sovellus, joka sisältää Babelin ja Sassin.

Of Sisällysluettelo:

  1. Miksi käyttää verkkosovellusten pakettia? #
  2. Parcel.js #: n asentaminen
  3. Tiedoston sisääntulopisteen luominen #
  4. Dist / kansio #
  5. Parcel.js: n käyttäminen Babel #: n kanssa
  6. Parcel.js: n käyttö Sass #: n kanssa
  7. Useiden komentosarjojen niputtaminen paketin numeroon
  8. Koodin jako Parcel.js: llä #
  9. Tuotanto rakentuu Parcel.js: n kanssa #
  10. Onko mitään haittoja Parcelin käytössä? #

Parcel.js-verkkosivusto

Miksi käyttää verkkosovellusten pakettia??

En viettää liikaa aikaa keskustelemalla syistä, joiden vuoksi käytetään sovelluspakettia, kuten Parcel.js, koska aihe on varmasti käsitelty aiemmin. Mutta tässä on sellainen perushyökkäys, joka liittyy tällaisen työkalun käyttöön:

  • Sovelluksessasi on vähemmän HTTP-pyyntöjä, koska skriptejä tai tyylitaulukoita yhdistetään
  • Skriptit ja tyylitaulukot voidaan ladata pyynnöstä, mikä parantaa suorituskykyä entisestään
  • Skriptit ja tyylitaulukot voidaan pienentää automaattisesti tuottamaan vähemmän kilotavua käyttäjälle
  • Niputtaminen ja pienentäminen tehdään työkalulla automaattisesti, minimoimalla käsityöt
  • Kehitystiedostot on järjestetty modulaarisesti, joten koodisi on paljon helpompi ylläpitää ja virheenkorjata

Kuten huomaat, hyödyt ovat monia, ja ne liittyvät enimmäkseen suorituskykyyn ja projektin ylläpitoon. Nipun käyttämiseen on varmasti monia syitä, jos tätä ei ole vielä harkittu.

Aloittaessamme Parcel.js-ohjelmiston käytön perusteet aloittaessamme tämän tieltä. Menen hitaasti läpi tämän opetusohjelman ominaisuuksia käyttämällä joitain yksinkertaisia ​​esimerkkejä, joita voit helposti seurata.

Parcel.js: n asentaminen

Voit asentaa Parcel.js -päätteeseesi langan tai npm: n avulla. Käytän tässä opetusohjelmassa npm. Tässä on komento asentaa se globaalisti, jotta voit käyttää sitä missä tahansa projektissa:

npm asenna paketti-niputin -g

-G-lippu asentaa sen globaalisti. Jos haluat asentaa sen vain yhteen projektiin ja lisätä sen projektisi devDependencies-pakettiin.json, voit suorittaa saman komennon projektin juurikansiossa käyttämällä –save-dev -lippua -g: n sijaan:

npm asenna paketti-niputusohjelma – säästää-dev

Globaalin asennuksen (joka on yleisin käyttötapa) avulla voit käynnistää minkä tahansa projektin käyttämällä init-komentoa. Navigoi päätteen avulla kansioon, jota haluat käyttää sovelluksen juurina, ja suorita:

npm init -y

-Y-lippu estää npm: tä esittämästä kysymyksiä käyttämällä oletusasetuksia asennuksessa. Olettaen, että projektini on nimeltään parcel-demo, tämä luo juuri. pakettiin paketin.json-tiedoston, joka näyttää seuraavalta:

{
"nimi": "paketti-demo",
"versio": "1.0.0",
"kuvaus": "",
"tärkein": "index.js",
"skriptejä": {
"testata": "kaiku \"Virhe: ei testiä määritetty \" && poistuminen 1"
},
"avainsanat": [],
"kirjailija": "",
"lisenssi": "ISC"
}

Jos löydät jonkin yllä olevista sekava, koska et tunne perehtyneitä npm, voit tutustua kattava opetusohjelma npm. Se on keskittynyt auttamaan käyttöliittymän web-kehittäjiä ymmärtämään työkalu.

Tiedoston sisääntulopisteen luominen

Projektin perusasetuksia varten aion käyttää Parcel.js-tiedostoa index.html-tiedostossa, joka osoittaa ensisijaisen JavaScript-tiedoston nimeltä index.js (kuten pack.json-tiedostossa näkyy). Tämä HTML-tiedosto toimii paketin sisääntulopisteenä. HTML-tiedostossani on komentosarjaelementti, joka osoittaa JavaScript-tiedostooni, joten se näyttää tältä:

html>
<html>
<pää>
<otsikko>Parcel Demotitle>
pää>
<ruumis>
<skripti src ="./js/index.js">käsikirjoitus>
ruumis>
html>

Kun minulla on oikeat HTML-tiedostot ja JavaScript-tiedostot paikoillaan, voin käynnistää Parcelin sisäänrakennetun kehityspalvelimen suorittamalla seuraavan projektin kansiossa olevassa päätteessä:

pakettihakemisto.html

Tämä käynnistää palvelimen ja kertoo sille, mitä tiedostoa käytetään tulopisteenä. Seurauksena on, että saan seuraavan viestin terminaaliistunnossani:

Palvelin käynnissä osoitteessa http: // localhost: 1234
√ Rakennettu 887 ms.

Voin nyt avata selaimessa http: // localhost: 1234 / nähdäkseni mitä olen tähän mennessä rakentanut. Live-palvelin käyttää live-uudelleenlatausta ja jotain kutsuttua kuuma moduulin vaihto. Tämä päivittää sivun moduulit automaattisesti päivittämättä kokonaista sivua. Näin voin nähdä rakentamiseni etenemisen nopeammin, kun työskentelen.

Kun Parcel.js on käynnissä sen palvelimen ollessa aktiivinen, kaikki tiedostoon tekemäni muutokset palauttavat sovellukseni automaattisesti aina, kun tiedosto tallennetaan. Nähdäksesi tämän käytännössä aion lisätä yksinkertaisen konsolin lokirivin komentosarjaani. Tämä laukaisee seuraavan viestin terminaalissani:

$ pakettihakemisto.html
Palvelin käynnissä osoitteessa http: // localhost: 1234
√ Sisäänrakennettu 1.08s.
√ Sisäänrakennettu 28 ms.

Jokainen ”Rakennettu…” -rivi edustaa yhtä rakennetta, jonka laukaisee sisällönmuutos ja tallennus.

Jos haluan käyttää omaa palvelintani Parcelin sisäänrakennetun kehityspalvelimen sijaan, voin käyttää valvontakomentoa:

pakettivahti index.html

Saan saman tuloksen pääteistunnossani, kun Parcel.js rakentaa sovelluksen ja odottaa muutoksia:

$ pakettivahti index.html
√ Sisäänrakennettu 855 ms.

Dist / kansio

Kun olen käynnistänyt Parcel.js: n joko katselutilassa tai sisäänrakennetun palvelimen kautta, jos katson projektin kansiota, näen seuraavan kansion ja tiedostorakenteen:

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

Huomaa automaattisesti luotava dist-kansio. Tässä ovat tuotantotiedostoni; En koske mitään näistä tiedostoista. Huomaa, että Parcel build -sovellukseni on automaattisesti muuntanut index.js-tiedostoni yksilölliseen välimuistiystävälliseen versioon (versioidulla tai ”revved” -nimellä). Se on myös lisännyt lähdekarttatiedoston (voit lukea lähdekartoista tässä viestissä).

Jos tarkastelen index.html-tiedostoani dist-kansion sisällä, näen seuraavan:

html>
<html>
<pää>
<otsikko>Parcel Demotitle>
pää>
<ruumis>

<skripti src ="/js.00a46daa.js">käsikirjoitus>
ruumis>
html>

Huomaa, että index.html-tiedostoni dist-versio osoittaa oikein ja kätevästi .js-tiedostoni dist-versiolle.

Jos verkkosivustossani on useita tiedostoja, jotka osoittavat samoihin skripteihin (esimerkiksi about.html, contact.html jne.), Voin käyttää seuraavaa komentoa:

pakettihakemisto.html noin.html yhteystiedot.html

Tämä kertoo Parcelille, että haluan käyttää useita tulopaikkoja rakentaakseen. Voin käyttää myös seuraavaa komentoa Parcel.js: n käyttämään kaikkia HTML-tiedostojani tulopisteinä:

paketti * .html

Parcel.js: n käyttö Babelin kanssa

Parcel.js on sisäänrakennettu tuki erilaisille koodinsiirtoille, mukaan lukien Baabel, suosittu työkalu muuntaa uudenaikainen seuraavan sukupolven JavaScripti vastaavaksi koodiksi, joka kaikkien selainten ymmärtää. Koska Babel on rakennettu Parcel.js-sivustoon, sinun ei tarvitse erityistä laajennusta sen käyttämiseen, se vain toimii. Katsotaanpa esimerkkiä.

Aion lisätä seuraavan koodin index.js-tiedostooni:

funktio getInfo (nimi, vuosi = 2018, väri = ‘sininen’) {
konsoli.logi (nimi, vuosi, väri);
}

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

Tämä koodi käyttää ES6-ominaisuutta nimeltään oletusparametrit, jonka voit nähdä erityisesti toimintopäässä. Vanhemmat selaimet eivät tue toimintojen oletusparametreja. Jotta koodi ei johda virheeseen, tarvitsen Babelin kääntämään koodin vastaavaksi koodiksi, joka toimii kaikissa selaimissa. Kun olen tallentanut index.js-tiedostoni, Parcel.js rakentaa sovellukseni uudelleen ja tuottaa seuraavat tiedot kirjoittamasi ES6-koodin sijasta:

funktio getInfo (nimi) {
var vuosi = argumentit.pituus > 1 && argumentit [1]! == määrittelemätön? väitteet [1]: 2018;
var väri = argumentit.pituus > 2 && argumentit [2]! == määrittelemätön? argumentit [2]: ‘sininen’;
konsoli.logi (nimi, vuosi, väri);
}

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

Voit käyttää Babelin online-repl: tä testata tämä.

Ja huomaa tärkein tekijä täällä: En tehnyt mitään asentamaan tai määrittämään Babelia – se toimii vain valmiina osana Parcelin oletusasetuksia! Voit tietenkin lisätä joitain asetusvaihtoehtoja muuttaaksesi Babelia tekemään haluamasi. Jos näin on, voit lisätä .babelrc-tiedoston projektisi juurikansioon, mukaan lukien määritysasetukset. Voit lukea lisää aiheesta käyttämällä .babelrc-tiedostoa Parcel.js-verkkosivustolla.

Parcel.js: n käyttö Sassin kanssa

Samoin kuin Babel, myös Parcel kääntää oletuksena automaattisesti SCSS (Sass) -tiedostoni kelvolliseen CSS: ään. Tämän osoittamiseksi aion lisätä kansion nimeltä “css” esimerkkiprojektini juuriin. Lisään siihen kansioon style.scss-tiedoston, jolla on seuraava Sass-koodi:

vartalo {
väri musta;

.moduuli {
väri punainen;
}
}

Käytän Sassin valitsinpesätoimintoa. Lisään seuraavan rivin HTML-tiedostojen osaan:

<linkki rel ="tyylisivu" href ="./css/style.scss">

Kun kaikki tiedostot on tallennettu, Parcel tuottaa tuoreen rakenteen dist / kansiooni koostetulla CSS-tiedostolla, joka on muuntanut SCSS: iin seuraavan:

vartalo {
väri musta;
}
runko .moduuli {
väri punainen;
}

Niin kauan kuin Sass on asennettuna järjestelmääni maailmanlaajuisesti, Parcel tekee tämän automaattisesti, ilman määrityksiä. Jos minulla ei ole maailmanlaajuista Sass-asennusta, ei hätää. Voin vain kirjoittaa SCSS-tiedostoni, sitten käynnistää Parcel ja Parcel asentaa Sassin automaattisesti projektikohtaisena riippuvuutena. Erittäin kätevä! Tämä on jälleen erityisen hyödyllistä, koska se ei vaadi mitään määrityksiä.

Ja aivan kuten Babelin kanssa, voin valita minkä tahansa Sassin mukana tulevien oletusasetuksien kanssa. Tai voin luoda .sassrc-tiedoston projektin juuriin ja lisätä omat kokoonpanoni.

Useiden komentosarjojen niputtaminen paketin kanssa

Toistaiseksi näyttämäni esimerkit ovat vain saadaksesi sinut ajan tasalle Parcel-palvelun kanssa, jotta saat perusidean sen toiminnasta. Kuten aikaisemmin mainittiin, minkä tahansa niputtajan voima on kyky yhdistää useita tiedostoja automaattisesti yhdeksi tiedostoksi. Tämä auttaa vähentämään HTTP-pyyntöjä ja parantamaan verkkosivustosi tai sovelluksesi nopeutta.

Kaikki mitä olen tähän mennessä osoittanut, voidaan tehdä käyttämällä useita skriptejä, jotka on vedetty ES6: n moduulitoiminnolla. Tämän avulla voin luoda ja tuoda skriptejä modulaarisesti. Tämä pitää koodini helposti ylläpidettävänä ja palvelee tuotannossa vain yhtä paketoitua skriptiä.

Tämän osoittamiseksi aion lisätä erillisen tiedoston nimeltä module.js, joka sisältää seuraavan JavaScriptin:

viedä väri = ‘vihreä’;

vie funktio add (n1, n2) {
paluu n1 + n2;
}

Tämä on vain peruskoodi kahden objektin viemiseen: muuttuja ja funktio. Aion tuoda nämä resurssit index.js-tiedostooni seuraavalla koodilla:

tuo {väri, lisää} tiedostosta ‘../js/module.js’;

console.log (väri); // "vihreä"
konsoli.logi (lisää (20, 40)); // 60

Tämä on jälleen vain perustason ES6-moduulia. En aio mennä yksityiskohtiin siitä, miten tämä toimii täällä. Kaunis kohta tässä on se, että minun ei tarvinnut määrittää HTML-tiedostossani käyttämäni moduulia. Normaalisti komentosarjatunnisteni näyttää tältä, ja moduulille on määritetty type-attribuutti:

<skripti src ="./js/index.js" type ="moduuli">käsikirjoitus>

Mutta sitä ei tarvita. Parcel tunnistaa tuodun moduulin ja niputtaa kaksi skriptiini yhdeksi suorituskykyystävälliseksi resurssiksi. Tämä tapahtuu ilman erityisiä kokoonpanoja tai laajennuksia. Ja aivan kuten aikaisemmissa esimerkeissä, koodi on siirretty Babelilla ES5-vastaavaksi koodiksi, joka antaa minulle eniten selaimen tukea.

Koodin jakaminen Parcel.js: n kanssa

Vielä yksi paketin ominaisuus, joka toimii ilman määrityksiä, on koodin jakaminen. Joissain tapauksissa haluan, että kaikki moduulini ladataan kaikille sivuilleni. Mutta muissa tapauksissa haluaisin ehkä ladata vain tietyt moduulit tietyille sivuille, tietyissä tilanteissa. Tätä koodin jakaminen antaa minulle mahdollisuuden.

Aiemmin mainitsin, että esimerkkiprojektini sisältää kolme sivua: index.html, about.html ja contact.html. Oletetaan, että haluan käyttää samaa JavaScript-kimppua kaikilla kolmella sivulla, mutta about.html-sivulla on painike, joka laukaisee jotain erityistä. Mutta haluan, että koodi ladataan vain, kun painiketta painetaan.

Koodi voi näyttää seuraavalta koodinjako-ominaisuuden avulla:

if (document.querySelector (‘. about’)) {
document.querySelector (‘. about’). addEventListener (‘napsauta’, () => {
tuonti (‘ ../ js / about.js’). Sitten (
document.body.innerHTML + = ‘Tietoja sivusta päivitetty’;
);
});
}

Huomaa, että tämä sisältää uuden JavaScript-ominaisuuden, dynaaminen tuonti käyttämällä import () -toimintoa. Tämän avulla voin ladata dynaamisesti haluamasi koodin tietyssä tapauksessa. Tässä tapauksessa teen sen, kun painiketta painetaan noin-sivulla. Import () -ominaisuus palauttaa lupauksen, joten voin tehdä mitä haluan .then () -lauseessa, joka käynnistyy tuodun komentosarjan lataamisen jälkeen. About.js-skripti ladataan pyydettäessä, ja Babel siirtää tämän koodin selaimen ES5: lle varmistaakseen, että se toimii kaikkialla. Kun paketini luodaan, about.js-osa asetetaan omaan tiedostoon dist / kansio-osaan, jotta tiedosto voidaan ladata pyydettäessä.

Kuten muutkin keskusteluni ominaisuudet, import () -ominaisuus toimii paketissa ilman mitään määrityksiä.

Tuotanto rakentuu Parcel.js: n kanssa

Tähän asti olen tuottanut kaikki paketini rakentaa lennossa sisäänrakennetulla palvelimella, joka tulee paketin mukana ja joka sisältää live-uudelleenlatauksen. Joka kerta kun tallennan projektini, kimppuni on rakennettu. Mutta koodi oli aina mukana nipussa jatkuvaa kehitystä varten. Tällä tavoin voin tarkastella tai tarkistaa lähteen tarvittaessa virheenkorjausta varten.

Kun projektini on valmis ja valmis siirrettäväksi live-palvelimelle, voin estää Parcelia tarkkailemasta projektiani. Terminaalin CTRL-C tekee tämän monilla alustoilla. Suoritan sitten seuraavan komennon, jotta käsken Parcelin tuottaa yhden viimeisen koontin:

pakettirakenne index.html about.html contact.html

Tässä tapauksessa rakennan kaikista kolmesta tiedostoistani. Kun tämä on tehty, Parcel ei enää odota muutoksia; viimeinen paketti on rakennettu ja siinä se on. Viimeistelyn lisäksi rakennukseni valmistaa myös koodini tuotantoon. HTML, CSS ja JavaScript on minimoitu tuottamaan pienimmät mahdolliset tiedostot optimoidun suorituskyvyn saavuttamiseksi.

Mahdolliset haitat Parcelin käyttämisessä?

Paketin tulisi ehdottomasti olla valintavalinta niille, joilla on vähän tai ei ollenkaan kokemusta rakennustyökaluista. Mutta omasta tutkimuksestani olen löytänyt muutamia asioita, jotka voin mainita ja joita olisi parannettava tulevaisuudessa.

Ensinnäkin huomaat, että Parcel sijoittaa aina mukana toimitetut skriptit ja tyylitaulukot samaan hakemistoon kuin tulopiste-HTML-tiedostot. Näin tapahtuu, vaikka CSS- ja JavaScript-tiedostosi olisivat erillisissä kansioissa. Koska nämä ovat tuotantotiedostoja, sillä ei ehkä ole väliä paljon. Mutta se on jotain pidettävä mielessä. Hyvä uutinen on tämä näyttää olevan korjattu tulevassa pakettiversiossa 2 (edelleen alfa). Joten pitäisi olla tapa ohittaa tämä käyttäytyminen, kun paketin versio on vakaa (nykyinen vakaa versio on 1.12.4).

Toinen haittapuoli on, että löysin paketin dokumentoinnin melko vähän, kun kyse on eri ominaisuuksien asetusvaihtoehtojen mukauttamista koskevista tiedoista. On totta, että yksi Parcelin valtavista eduista on se, kuinka hyvin se toimii ilman pakkausta. Mutta mielestäni olisi hyödyllistä laajempaa dokumentointia sen mukauttamiseksi. Esimerkiksi, kuinka voin estää HTML-minimoinnin rakenteissani säilyttäen samalla CSS- ja JavaScript-minimoinnin? En näe kuvausta asiakirjasta. Kun tarkastelin GitHubin suljettuja aiheita, siellä on kiertotapa (ajatteli, että se ei ole kovin kätevää).

johtopäätös

Viimeinen asia, jonka mainitsen, on nimeltään työkalu Luo sovellus, jonka avulla voit tuottaa konfiguraatiotiedostot automaattisesti Parcelille. Sen avulla voit valita JavaScript-kirjastosi, siirtäjäsi, linterisi ja niin edelleen, ja nämä kaikki lisätään paketti.json-tiedostoosi, valmis alustamiseen.

Luo sovellus Parcel.js-sovellukseen

Se on tämä tämän aloittelijoille tarkoitetun Parcel-opetusohjelman kanssa. Toivon, että pystyt käyttämään näitä tietoja nopeaan toimintaan Parcelin kanssa ja käyttämään sitä tulevissa projekteissa. Ja jos olet uusi sovellusten niputtaminen tai et ole koskaan kokeillut sitä missään projektissa, ehkä tämä esittely inspiroi sinua kokeilemaan Parcelia.

Älä unohda liittyä kaatumiskurssillemme WordPress-sivustosi nopeuttamiseksi. Joillakin yksinkertaisilla korjauksilla voit vähentää latausaikaa jopa 50–80%:

Suunnittelu ja esitys Karol K.

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