Un’introduzione a Parcel.js, il bundler dell’applicazione Web No-Config

Un’introduzione a Parcel.js, il bundler dell’applicazione Web No-Config

Un’introduzione a Parcel.js, il bundler dell’applicazione Web No-Config
СОДЕРЖАНИЕ
02 июня 2020

Questo post è la tua introduzione a Parcel.js, l’autoproclamato "bundler veloce, bundler di applicazioni web a configurazione zero." Ecco tutto ciò che devi sapere per iniziare:


Molti sviluppatori front-end si sono frustrati per alcune delle complessità legate alla costruzione di app Web oggi. È una pratica piuttosto standard includere una sorta di strumento di compilazione o raggruppamento in un flusso di lavoro front-end, quindi molti sviluppatori hanno esaminato l’utilizzo di uno strumento front-end come il webpack.

Webpack è il bundler più popolare ed è seguito da Require.js, Rollup e soluzioni simili. Ma la curva di apprendimento di uno strumento come il webpack è ripida. Iniziare con il webpack non è facile a causa delle sue complesse configurazioni. Di conseguenza, negli ultimi anni è emersa un’altra soluzione. Questo strumento non è necessariamente un front-runner, ma un’alternativa più facile da digerire nel panorama dei bundler di moduli front-end. Presentazione di Parcel.js.

Introduzione a Parcel.js

Parcel.js (parceljs.org) è esattamente ciò che vogliono molti sviluppatori principianti e di livello intermedio: un bundler semplice e di bassa configurazione con cui è possibile iniziare a utilizzare rapidamente.

Spero che questo tutorial sui pacchi fornisca un’introduzione facile da seguire a questo strumento. Tratterò le basi e poi ti mostrerò come usare Parcel per raggruppare una semplice app Web che incorpora Babel e Sass.

�� Indice:

  1. Perché usare un bundler di app Web? #
  2. Installazione di Parcel.js #
  3. Creazione di un punto di ingresso file #
  4. La dist / cartella #
  5. Utilizzo di Parcel.js con Babel #
  6. Utilizzo di Parcel.js con Sass #
  7. Raggruppamento di più script con il numero pacco
  8. Suddivisione del codice con Parcel.js #
  9. Build di produzione con Parcel.js #
  10. Qualche inconveniente nell’uso di Parcel? #

Sito web Parcel.js

Perché usare un bundler di app Web?

Non passerò troppo tempo a discutere i motivi dell’utilizzo di un bundle di app come Parcel.js, perché quell’argomento è stato sicuramente trattato in precedenza. Ma ecco un riassunto di base dei vantaggi dell’utilizzo di tale strumento:

  • L’app avrà meno richieste HTTP a causa della combinazione di script o fogli di stile
  • Script e fogli di stile possono essere caricati su richiesta, migliorando ulteriormente le prestazioni
  • Script e fogli di stile possono essere minimizzati automaticamente per fornire meno kilobyte all’utente
  • Il lavoro di raggruppamento e minificazione viene eseguito automaticamente dallo strumento, riducendo al minimo il lavoro manuale
  • I file di sviluppo sono organizzati in modo modulare, semplificando la manutenzione e il debug del codice

Come puoi vedere, i vantaggi sono molti e principalmente legati alle prestazioni e alla manutenzione del progetto. Ci sono certamente molte ragioni per usare un bundler, se questo è qualcosa che non hai ancora preso in considerazione.

A parte questo, iniziamo con le basi per iniziare a utilizzare Parcel.js. Esaminerò lentamente le funzionalità di questo tutorial usando alcuni semplici esempi che potrai seguire facilmente.

Installazione di Parcel.js

Puoi installare Parcel.js nel tuo terminale usando Yarn o npm. Per questo tutorial, userò npm. Ecco il comando per installarlo a livello globale in modo da poterlo utilizzare su qualsiasi progetto:

npm install parcel-bundler -g

Il flag -g lo installa a livello globale. Se vuoi installarlo solo per un singolo progetto e aggiungerlo alle devDependencies del tuo progetto in package.json, puoi eseguire lo stesso comando all’interno della cartella principale del progetto usando il flag –save-dev invece di -g:

npm install parcel-bundler –save-dev

Con l’installazione globale (che sarà il caso d’uso più comune), è possibile avviare qualsiasi progetto usando il comando init. Utilizzare il terminale per accedere alla cartella che si desidera utilizzare come root dell’applicazione ed eseguire:

npm init -y

Il flag -y impedisce a npm di porre domande, utilizzando i valori predefiniti per l’installazione. Supponendo che il mio progetto si chiama parcel-demo, questo crea un file package.json alla radice che assomiglia a questo:

{
"nome": "pacchi-demo",
"versione": "1.0.0",
"descrizione": "",
"principale": "index.js",
"script": {
"test": "eco \"Errore: nessun test specificato \" && uscita 1"
},
"parole chiave": [],
"autore": "",
"licenza": "È C"
}

Se ritieni che una delle precedenti sia confusa a causa della tua mancanza di familiarità con npm, puoi dare un’occhiata al mio completo tutorial su npm. Si concentra sull’aiutare gli sviluppatori Web front-end a comprendere lo strumento.

Creazione di un punto di ingresso file

Per una configurazione di base del progetto, userò Parcel.js su un file index.html che punta a un file JavaScript primario chiamato index.js (come mostrato nel file package.json). Questo file HTML servirà come punto di ingresso del mio pacco. Il mio file HTML avrà un elemento di script che punta al mio file JavaScript, quindi sarà simile a questo:

html>
<html>
<testa>
<titolo>Demolito pacchi>
testa>
<corpo>
<script src ="./js/index.js">copione>
corpo>
html>

Una volta che ho installato il file HTML e il file JavaScript corretti, posso avviare il server di sviluppo integrato di Parcel eseguendo quanto segue nel mio terminale all’interno della cartella del mio progetto:

pacco index.html

Ciò avvia il server e indica quale file utilizzare come punto di ingresso. Di conseguenza, ricevo il seguente messaggio nella mia sessione terminale:

Server in esecuzione su http: // localhost: 1234
√ Costruito in 887ms.

Ora posso aprire http: // localhost: 1234 / nel mio browser per visualizzare ciò che ho creato finora. Il server live utilizza la ricarica live e qualcosa chiamato sostituzione del modulo a caldo. Ciò aggiornerà automaticamente i moduli su una pagina senza eseguire un aggiornamento completo della pagina. In questo modo posso vedere l’avanzamento della mia build con incrementi più rapidi, mentre lavoro.

Una volta che Parcel.js è in esecuzione con il suo server attivo, qualsiasi modifica apportata a un file ricostruirà automaticamente la mia app ogni volta che il file viene salvato. Per vederlo in azione, aggiungerò una semplice riga di registro della console nel mio script. Questo attiverà il seguente messaggio nel mio terminale:

$ pacco index.html
Server in esecuzione su http: // localhost: 1234
√ Costruito in 1.08s.
√ Costruito in 28ms.

Ogni riga “Costruito …” rappresenta una build, innescata da una modifica del contenuto e del salvataggio.

Se voglio usare il mio server, piuttosto che il server di sviluppo integrato di Parcel, posso usare il comando watch:

pacco orologio index.html

Ottengo lo stesso risultato nella mia sessione terminale, con Parcel.js che crea la mia app e attende le modifiche:

$ parcel watch index.html
√ Costruito in 855ms.

La cartella dist /

Una volta avviato Parcel.js in modalità orologio o tramite il server integrato, se guardo all’interno della cartella del mio progetto, vedrò una cartella e una struttura di file come la seguente:

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

Notare la cartella dist che viene creata automaticamente. Questo è dove sono i miei file di produzione; Non tocco nessuno di questi file. Si noti che la mia build di Parcel ha automaticamente convertito il mio file index.js in uno con una versione univoca compatibile con la cache (con un nome di file revisionato o “rivisto”). Ha anche aggiunto un file della mappa di origine (puoi leggere le mappe di origine in questo post).

Se guardo il mio file index.html all’interno della cartella dist, vedrò quanto segue:

html>
<html>
<testa>
<titolo>Demolito pacchi>
testa>
<corpo>

<script src ="/js.00a46daa.js">copione>
corpo>
html>

Notare che la versione dist del mio file index.html punta correttamente e comodamente alla versione dist del mio file .js.

Se il mio sito Web include più file che puntano agli stessi script (ad esempio, about.html, contact.html, ecc.), Posso usare il seguente comando:

pacco index.html about.html contact.html

Questo dice a Parcel che voglio usare più punti di accesso per costruire. Posso anche usare il seguente comando per dire a Parcel.js di usare tutti i miei file HTML come punti di ingresso:

pacco * .html

Utilizzo di Parcel.js con Babel

Parcel.js ha il supporto integrato per diversi transpiler di codice, incluso Babele, lo strumento popolare per convertire i moderni JavaScript di prossima generazione in codice equivalente che può essere compreso da tutti i browser. Poiché Babel è integrato in Parcel.js, non è necessario un plug-in speciale per usarlo, funziona e basta. Vediamo un esempio.

Ho intenzione di aggiungere il seguente codice al mio file index.js:

funzione getInfo (nome, anno = 2018, colore = ‘blu’) {
console.log (nome, anno, colore);
}

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

Questo codice utilizza una funzione ES6 chiamata parametri di default, che puoi vedere nello specifico nella testa della funzione. I browser meno recenti non supportano i parametri predefiniti per le funzioni. Per assicurarmi che il codice non generi un errore, ho bisogno che Babel traspili il codice in un codice equivalente che funzioni in tutti i browser. Dopo aver salvato il mio file index.js, Parcel.js ricostruirà la mia app e produrrà quanto segue al posto del codice ES6 che ho scritto:

funzione getInfo (nome) {
var year = argument.length > 1 && argomenti [1]! == undefined? argomenti [1]: 2018;
var color = argument.length > 2 && argomenti [2]! == undefined? argomenti [2]: ‘blu’;
console.log (nome, anno, colore);
}

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

Puoi utilizzare il sostituto online di Babel a prova questo.

E nota il fattore più importante qui: non ho fatto nulla per installare o configurare Babel – funziona appena pronto come parte della configurazione predefinita di Parcel! Naturalmente, potresti voler aggiungere alcune opzioni di configurazione per modificare Babel e fare ciò che desideri. In tal caso, puoi aggiungere un file .babelrc nella cartella principale del progetto, con le preferenze di configurazione incluse. Puoi leggere di più utilizzando un file .babelrc sul sito web Parcel.js.

Utilizzo di Parcel.js con Sass

Analogamente a Babel, Parcel compilerà automaticamente anche i miei file SCSS (Sass) automaticamente in CSS valido. Per dimostrarlo, aggiungerò una cartella chiamata “css” alla radice del mio progetto di esempio. In quella cartella aggiungerò un file style.scss con il seguente codice Sass:

body {
colore nero;

.modulo {
colore rosso;
}
}

Sto usando la funzione di annidamento del selettore di Sass. Aggiungerò la seguente riga alla sezione dei miei file HTML:

<link rel ="foglio di stile" href ="./css/style.scss">

Una volta salvati tutti i miei file, Parcel produrrà una nuova build nella mia cartella dist / con un file CSS compilato che ha convertito il mio SCSS nel seguente:

body {
colore nero;
}
body .module {
colore rosso;
}

Finché ho installato Sass sul mio sistema a livello globale, Parcel lo farà automaticamente, senza necessità di configurazione. Se non ho un’installazione globale di Sass, nessun problema. Posso solo scrivere il mio SCSS, quindi avviare Parcel e Parcel installerà Sass automaticamente come dipendenza specifica del progetto. Molto conveniente! E ancora questo è particolarmente utile perché non richiede alcuna configurazione.

E proprio come con Babele, posso scegliere di scegliere qualsiasi opzione di configurazione predefinita fornita con Sass. Oppure posso creare un file .sassrc nella radice del mio progetto e aggiungere le mie configurazioni.

Raggruppamento di più script con Parcel

Finora, gli esempi che ti ho mostrato sono solo per farti funzionare con Parcel, così puoi avere un’idea di base su come funziona. Come accennato in precedenza, la potenza di qualsiasi bundler è la possibilità di combinare automaticamente più file in un singolo file. Questo aiuta a ridurre le richieste HTTP e a migliorare la velocità del tuo sito Web o della tua app.

Tutto ciò che ho dimostrato finora può essere fatto utilizzando più script inseriti utilizzando la funzione del modulo ES6. Questo mi permette di creare e importare script in modo modulare. Ciò mantiene il mio codice facile da mantenere pur servendo solo un singolo script in bundle in produzione.

Per dimostrarlo, aggiungerò un file separato chiamato module.js che conterrà il seguente JavaScript:

export let color = ‘green’;

funzione export aggiungi (n1, n2) {
ritorna n1 + n2;
}

Questo è solo un codice di base per esportare due oggetti: una variabile e una funzione. Nel mio file index.js ho intenzione di importare queste risorse con il seguente codice:

importare {color, aggiungere} da ‘../js/module.js’;

console.log (colore); // "verde"
console.log (add (20, 40)); // 60

Ancora una volta, questa è solo la sintassi del modulo ES6 di base. Non entrerò nei dettagli su come funziona qui. La parte bella di questo è il fatto che non avevo bisogno di specificare nel mio file HTML che stavo usando un modulo. Normalmente il mio tag script avrà questo aspetto, con l’attributo type impostato su module:

<script src ="./js/index.js" type ="modulo">copione>

Ma questo non è necessario. Parcel riconosce il modulo che viene importato e raggruppa i miei due script in un’unica risorsa adatta alle prestazioni. Questo accade senza alcuna configurazione o plugin speciali. E proprio come negli esempi precedenti, il codice viene traspilato usando Babel in codice equivalente a ES5 che mi darà il maggior supporto per il browser.

Suddivisione del codice con Parcel.js

Un’altra caratteristica di Parcel che funziona senza alcuna configurazione è divisione del codice. In alcuni casi, voglio che tutti i miei moduli vengano caricati su tutte le mie pagine. Ma in altri casi, potrei voler caricare solo determinati moduli su determinate pagine, in determinati contesti. Questo è ciò che mi consente di dividere il codice.

In precedenza ho menzionato che il mio progetto di esempio comprende tre pagine: index.html, about.html e contact.html. Diciamo che voglio eseguire lo stesso bundle JavaScript su tutte e tre le pagine, ma nella pagina about.html ho un pulsante che attiva qualcosa di specifico. Ma voglio solo caricare quel codice quando viene premuto quel pulsante.

Ecco come potrebbe apparire quel codice utilizzando la funzione di suddivisione del codice:

if (document.querySelector (‘. about’)) {
document.querySelector (‘. about’). addEventListener (‘click’, () => {
importazione (‘ ../ js / about.js’). allora (
document.body.innerHTML + = ‘Informazioni sulla pagina aggiornata’;
);
});
}

Si noti che sta incorporando una nuova funzionalità JavaScript, importazioni dinamiche usando la funzione import (). Ciò mi consente di caricare dinamicamente il codice desiderato in un’istanza specifica. In questo caso, lo sto facendo quando viene premuto un pulsante nella pagina delle informazioni. La funzione import () restituisce una promessa, quindi posso fare quello che voglio all’interno della clausola .then (), che si innesca una volta caricato lo script importato. Lo script about.js viene caricato su richiesta e questo codice verrà trasferito da Babel al browser ES5, per garantire che funzioni ovunque. Quando viene creato il mio bundle, la porzione about.js viene inserita nel proprio file all’interno della cartella dist /, per consentire il caricamento di questo file su richiesta.

Come altre funzionalità di cui ho discusso, la funzione import () funziona in Parcel senza alcuna configurazione.

La produzione si sviluppa con Parcel.js

Fino ad ora ho prodotto tutte le mie build di Parcel al volo utilizzando il server integrato fornito con Parcel e che include la ricarica live. Ogni volta che salvo il mio progetto, il mio pacchetto viene creato. Ma il codice è stato sempre raggruppato per lo sviluppo continuo. In questo modo posso visualizzare o ispezionare la fonte in base alle necessità per eseguire il debug.

Una volta che il mio progetto è completo e pronto per essere trasferito su un server live, posso impedire a Parcel di guardare il mio progetto. CTRL-C nel terminale lo fa su molte piattaforme. Quindi eseguirò il comando seguente per dire a Parcel di produrre un’ultima build:

build del pacco index.html about.html contact.html

In questo caso, sto compilando da tutti e tre i miei file di entrata. Fatto ciò, Parcel non è più in attesa di modifiche; il bundle finale è stato creato e basta. Oltre al completamento della build, il mio codice è preparato per la produzione da parte di Parcel. HTML, CSS e JavaScript sono tutti minimizzati per produrre i file più piccoli possibili per prestazioni ottimizzate.

Eventuali inconvenienti all’utilizzo di Parcel?

Il pacco dovrebbe sicuramente essere la scelta giusta per coloro che hanno poca o nessuna esperienza con gli strumenti di costruzione. Ma nella mia ricerca ho trovato alcune cose che posso menzionare che dovrebbero essere migliorate in futuro.

Prima di tutto, noterai che Parcel posiziona sempre i tuoi script e fogli di stile raggruppati nella stessa directory dei file HTML del punto di ingresso. Questo succede anche se hai i tuoi file CSS e JavaScript in cartelle separate. Dato che si tratta di file di produzione, potrebbe non importare molto. Ma è qualcosa da tenere a mente. La buona notizia è questa sembra essere stato corretto nella prossima versione di Parcel 2 (ancora in Alpha). Quindi dovrebbe esserci un modo per ignorare questo comportamento quando quella versione di Parcel è stabile (l’attuale versione stabile è 1.12.4).

Un altro svantaggio è che ho trovato che la documentazione di Parcel è piuttosto minima quando si tratta di informazioni sulla personalizzazione delle opzioni di configurazione per le diverse funzionalità. È vero che uno degli enormi vantaggi di Parcel è la sua efficacia. Ma penso che sarebbe utile una documentazione più ampia sulla personalizzazione. Ad esempio, come posso disabilitare la minificazione HTML sui miei build, mantenendo la minificazione CSS e JavaScript? Non vedo una descrizione di questo nei documenti. Quando ho esaminato i problemi chiusi su GitHub, c’è una soluzione alternativa (pensato che non sia molto conveniente).

Conclusione

Un’ultima cosa che menzionerò è uno strumento chiamato Crea app, che puoi usare per produrre automaticamente file di configurazione per Parcel. Ti permette di selezionare la tua libreria JavaScript, transpiler, linter e così via, e questi saranno tutti aggiunti al tuo file package.json, pronti per essere inizializzati.

Crea un'app in Parcel.js

Questo è tutto per questo tutorial sui pacchi per principianti. Spero che tu sia in grado di utilizzare queste informazioni per metterti in funzione rapidamente con Parcel e utilizzarlo per progetti futuri. E se sei nuovo nel raggruppamento di app o non l’hai mai provato su nessun progetto, forse questa introduzione ti ispirerà a provare Parcel.

Non dimenticare di partecipare al nostro corso intensivo per accelerare il tuo sito WordPress. Con alcune semplici correzioni, puoi ridurre i tempi di caricamento anche del 50-80%:

Layout e presentazione di Karol K.

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