Una introducció a Parcel.js, el Paquet d’aplicacions web sense configuració

Aquest post és la vostra presentació a Parcel.js, l’autoproclamada "empaquetador d’aplicacions web ràpid i ràpid de configuració." Aquí teniu tot el que heu de saber per començar-hi:


Molts desenvolupadors de gamma front s’han frustrat amb algunes de les complexitats que comporta la creació d’aplicacions web avui dia. És una pràctica pràctic estàndard incloure algun tipus d’eina de creació o agrupament en un flux de treball front-end, per la qual cosa molts desenvolupadors han estudiat utilitzar una eina front-end com webpack.

Webpack és el grup més popular i el segueix en els talons de Requ.js, Rollup i solucions similars. Però la corba d’aprenentatge d’una eina com el webpack és forta. Com començar amb webpack no és fàcil per les seves configuracions complexes. Com a resultat, en els darrers anys ha aparegut una altra solució. Aquesta eina no és necessàriament un front-runner, sinó una alternativa més fàcil de digerir en el paisatge del paquet del mòdul front-end. Presentació de Parcel.js.

Introducció a Parcel.js

Parcel.js (parceljs.org) és exactament el que volen molts que desenvolupen els desenvolupadors intermedis: un agrupador simple i de baixa configuració amb el qual podeu posar-vos en funcionament i executar-lo ràpidament.

Espero que aquest tutorial Parcel proporcionarà una introducció fàcil de seguir a aquesta eina. Abordaré els conceptes bàsics i, a continuació, us mostraré com utilitzar Parcel per agrupar una senzilla aplicació web que inclogui Babel i Sass.

�� Taula de contingut:

  1. Per què utilitzar un paquet d’aplicacions web? #
  2. Instal·lació de Parcel.js #
  3. Creació d’un punt d’entrada de fitxer #
  4. La dist / carpeta #
  5. Utilitzant Parcel.js amb Babel #
  6. Utilitzant Parcel.js amb Sass #
  7. Agrupa diversos scripts amb el paquet #
  8. Divisió de codi amb Parcel.js #
  9. La producció es construeix amb Parcel.js #
  10. Té algun inconvenient per utilitzar Parcel? #

Lloc web de Parcel.js

Per què fer servir un paquet d’aplicacions web?

No dedicaré massa temps a discutir els motius per utilitzar un paquetador d’aplicacions com Parcel.js, perquè aquest tema abans s’ha tractat anteriorment. Però aquí hi ha un resum bàsic dels avantatges de fer servir aquesta eina:

  • La vostra aplicació tindrà menys peticions HTTP a causa de la combinació de guions o fulls d’estils
  • Es poden carregar scripts i fulls d’estil sota demanda, millorant encara més el rendiment
  • Els scripts i els fulls d’estils es poden combinar automàticament per lliurar menys quilobytes a l’usuari
  • Els treballs d’agrupament i minificació es fan automàticament per l’eina, minimitzant el treball manual
  • Els fitxers de desenvolupament s’organitzen de forma modular, fent que el vostre codi sigui molt més fàcil de mantenir i depurar

Com veieu, els avantatges són molts i es relacionen principalment amb el rendiment i el manteniment de projectes. De fet, hi ha moltes raons per utilitzar un agrupador, si això és que encara no heu considerat.

Amb tot això, comencem els conceptes bàsics per començar a funcionar amb Parcel.js. Lentament passaré les funcions d’aquest tutorial fent servir exemples senzills que podreu seguir fàcilment.

Instal·lació de Parcel.js

Podeu instal·lar Parcel.js al vostre terminal mitjançant Fil o npm. Per a aquest tutorial, utilitzaré npm. Aquí teniu l’ordre d’instal·lar-lo de manera global perquè pugueu utilitzar-lo en qualsevol projecte:

npm instal·lar paquet-agrupador -g

El senyalador -g s’instal·la a nivell mundial. Si només voleu instal·lar-lo per a un únic projecte i afegir-lo a les devDependències del vostre projecte a package.json, podeu executar el mateix comandament dins de la carpeta arrel del projecte mitjançant el símbol –save-dev en lloc de -g:

npm instal·lar paquet-agrupador – guardar-dev

Amb la instal·lació global (que serà el cas d’ús més comú), podeu iniciar qualsevol projecte determinat mitjançant la comanda init. Utilitzeu el terminal per navegar a la carpeta que voleu utilitzar com a arrel de l’aplicació i executar-la:

npm init -y

El senyalador -y impedeix que npm faci preguntes, utilitzant els valors predeterminats per a la configuració. Si el meu projecte es diu parcel-demo, això crea un fitxer package.json a l’arrel que s’assembla així:

{
"nom": "paquet-demostració",
"versió": "1.0.0",
"descripció": "",
"principal": "index.js",
"scripts": {
"prova": "eco \"Error: no s’ha especificat cap prova \" && sortida 1"
},
"paraules clau": [],
"autor": "",
"llicència": "ISC"
}

Si trobeu alguna de les dades anteriors confoses per la seva falta de familiaritat amb el npm, podeu consultar el meu detall complet tutorial a les 22:00. Està centrat en ajudar els desenvolupadors web front-end a comprendre l’eina.

Creació d’un punt d’entrada de fitxer

Per a una configuració bàsica del projecte, faré servir Parcel.js en un fitxer index.html que apunta a un fitxer JavaScript primari anomenat index.js (com es mostra al fitxer package.json). Aquest fitxer HTML servirà com a punt d’entrada de paquets. El meu fitxer HTML tindrà un element de script que apunti al meu fitxer JavaScript, de manera que semblarà així:

html>
<html>
<cap>
<títol>Demotit de paqueteria>
cap>
<cos>
<script src ="./js/index.js">guió>
cos>
html>

Una vegada que tingui el fitxer HTML i el fitxer JavaScript correctes al lloc, puc iniciar el servidor de desenvolupament integrat de Parcel fent servir el següent al meu terminal dins de la carpeta del meu projecte:

paquet index.html

Això inicia el servidor i li indica quin fitxer s’ha d’utilitzar com a punt d’entrada. Com a resultat, obtinc el missatge següent a la sessió del terminal:

Servidor que s’executa a http: // localhost: 1234
√ Construït en 887ms.

Ara puc obrir http: // localhost: 1234 / al meu navegador per veure el que he creat fins ara. El servidor en viu utilitza la recàrrega en directe i alguna cosa anomenada substitució del mòdul en calent. Això actualitzarà automàticament els mòduls d’una pàgina sense fer una actualització de pàgina completa. D’aquesta manera puc veure el progrés de la meva creació en increments més ràpids a mesura que treballo.

Una vegada que Parcel.js funcioni amb el seu servidor actiu, qualsevol canvi que faci en un fitxer es reconstruirà automàticament la meva aplicació cada vegada que es guardi el fitxer. Per veure-ho en acció, afegiré una línia de registre de consola senzilla al meu script. Això activarà el missatge següent al meu terminal:

$ paquet index.html
Servidor que s’executa a http: // localhost: 1234
√ Construït en 1.08s.
√ Construït en 28ms.

Cada línia “construïda …” representa una creació, desencadenada per un canvi de contingut i estalvi.

Si vull utilitzar el meu propi servidor, més que el servidor de desenvolupament integrat de Parcel, puc fer servir la comanda de rellotge:

rellotge de paquets index.html

Obtenc el mateix resultat a la sessió del terminal, amb Parcel.js construint la meva aplicació i, a continuació, espera canvis:

$ paquet rellotge index.html
√ Construït en 855ms.

La dist / carpeta

Una vegada que he iniciat Parcel.js en mode de visualització o a través del servidor integrat, si miro dins de la carpeta del meu projecte, veuré una carpeta i una estructura de fitxers com la següent:

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

Observeu la carpeta dist que es crea automàticament. Aquí és on hi ha els meus fitxers de producció; No toco cap d’aquests fitxers. Tingueu en compte que el meu Paquet build ha convertit automàticament el meu fitxer index.js a un amb una versió exclusiva de caché (amb un nom de fitxer revisat o revocat). També ha afegit un fitxer de mapa font (podeu llegir sobre mapes font en aquesta publicació).

Si busco el meu fitxer index.html dins de la carpeta dist, veuré el següent:

html>
<html>
<cap>
<títol>Demotit de paqueteria>
cap>
<cos>

<script src ="/js.00a46daa.js">guió>
cos>
html>

Tingueu en compte que la versió dist del meu fitxer index.html apunta correctament i convenientment a la versió dist del meu fitxer .js.

Si el meu lloc web inclou diversos fitxers que apunten als mateixos scripts (per exemple, about.html, contact.html, etc.), puc utilitzar la següent comanda:

paquet index.html about.html contact.html

Això indica a Parcel que vull utilitzar diversos punts d’entrada per crear-los. També puc utilitzar la següent comanda per dir a Parcel.js que utilitzi tots els meus fitxers HTML com a punts d’entrada:

paquet * .html

Utilitzant Parcel.js amb Babel

Parcel.js compta amb suport integrat per a diferents transpiladors de codi, inclosos Babel, l’eina popular per convertir el JavaScript modern de nova generació en codi equivalent que tots els navegadors poden comprendre. Com que Babel està integrat a Parcel.js, no necessiteu cap complement especial per utilitzar-lo, només funciona. Vegem un exemple.

Afegiré el codi següent al meu fitxer index.js:

funció getInfo (nom, any = 2018, color = ‘blau’) {
console.log (nom, any, color);
}

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

Aquest codi utilitza una característica anomenada ES6 paràmetres predeterminats, que podeu veure específicament al cap de funció. Els navegadors més antics no admeten paràmetres predeterminats de les funcions. Per assegurar-me que el codi no produeix cap error, necessito que Babel transpileixi el codi en un codi equivalent que funcioni a tots els navegadors. Un cop desat el meu fitxer index.js, Parcel.js reconstruirà la meva aplicació i produirà el següent en lloc del codi ES6 que vaig escriure:

funció getInfo (nom) {
var any = arguments.length > 1 && arguments [1]! == no definit? arguments [1]: 2018;
var color = arguments.length > 2 && arguments [2]! == no definit? arguments [2]: “blau”;
console.log (nom, any, color);
}

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

Podeu utilitzar la resposta en línia de Babel a provar-ho.

Observeu aquí el factor més important: no he fet res per instal·lar ni configurar Babel; només funciona com a part de la configuració predeterminada de Parcel. Per descomptat, potser voldreu afegir algunes opcions de configuració per alterar Babel per fer el que vulgueu. Si és així, podeu afegir un fitxer .babelrc a la carpeta arrel del vostre projecte, amb les vostres preferències de configuració. Podeu llegir més sobre utilitzant un fitxer .babelrc al lloc web Parcel.js.

Utilitzant Parcel.js amb Sass

De forma similar a Babel, Parcel també compilarà automàticament els meus fitxers SCSS (Sass) al CSS vàlid. Per demostrar-ho, afegiré una carpeta anomenada “css” a l’arrel del meu exemple. En aquesta carpeta afegiré un fitxer style.scss amb el codi Sass següent:

cos {
color: negre;

.mòdul {
color: vermell;
}
}

Estic fent servir la funció de nidificació del selector de Sass. Afegiré la línia següent a la secció dels meus fitxers HTML:

<enllaç rel ="full d’estils" href ="./css/style.scss">

Un cop desats tots els meus fitxers, Parcel produirà una nova creació a la meva dist / carpeta amb un fitxer CSS compilat que ha convertit el meu SCSS al següent:

cos {
color: negre;
}
cos .module {
color: vermell;
}

Sempre que tinc Sass instal·lat al meu sistema a nivell mundial, Parcel ho farà automàticament, sense necessitat de configuració. Si no tinc una instal·lació global de Sass, cap problema. Només puc escriure el meu SCSS, i començar Parcel i Parcel instal·larà Sass automàticament com una dependència específica del projecte. Molt convenient! I, de nou, és especialment útil perquè no requereix cap configuració.

I de la mateixa manera que amb Babel, puc triar anar amb les opcions de configuració predeterminades que vinguin amb Sass. O puc crear un fitxer .sassrc a l’arrel del projecte i afegir-lo les meves pròpies configuracions.

Agrupa diversos scripts amb Parcel

Fins ara, els exemples que us he mostrat són només per obtenir el millor funcionament amb Parcel, de manera que podeu tenir una idea bàsica del seu funcionament. Com s’ha esmentat anteriorment, el poder de qualsevol agrupador és la possibilitat de combinar diversos fitxers en un sol fitxer. Això ajuda a reduir les sol·licituds HTTP i a millorar la velocitat del vostre lloc web o aplicació.

Tot el que he demostrat fins ara es pot fer amb diversos scripts que s’utilitzen mitjançant la funció del mòdul ES6. Això em permet crear i importar scripts de forma modular. Això fa que el meu codi sigui fàcil de mantenir, mantenint un únic script empaquetat en producció.

Per demostrar-ho, afegiré un fitxer separat anomenat module.js que contindrà el següent JavaScript:

exportació let color = ‘verd’;

add add function (n1, n2) {
retornar n1 + n2;
}

Es tracta només d’un codi bàsic per exportar dos objectes: una variable i una funció. Al meu fitxer index.js, vaig a importar aquests recursos amb el codi següent:

importa {color, add} de “../js/module.js”;

console.log (color); // "verd"
console.log (afegir (20, 40)); // 60

Un cop més, aquesta és només la sintaxi bàsica del mòdul ES6. No entraré en els detalls de com funciona aquí. La bella part d’això és que no necessitava especificar al meu fitxer HTML que feia servir un mòdul. Normalment, la meva etiqueta de script serà així, amb l’atribut type establert al mòdul:

<script src ="./js/index.js" tipus ="mòdul">guió>

Però això no és necessari. Parcel reconeix que el mòdul s’està important i agrupa els meus dos scripts en un recurs únic de rendiment. Això succeeix sense cap configuració ni cap complement especial. De la mateixa manera que els exemples anteriors, el codi es transpila fent servir Babel a un codi equivalent a ES5, que proporcionarà el màxim suport del navegador..

Divisió de codi amb Parcel.js

Una altra característica de Parcel que funciona sense cap configuració és divisió de codi. En alguns casos, vull carregar tots els meus mòduls a totes les meves pàgines. Però en altres casos, només vull carregar determinats mòduls en determinades pàgines, en determinats contextos. Això és el que em permet fer la divisió de codi.

Anteriorment, vaig esmentar que el meu exemple de projecte inclou tres pàgines: index.html, about.html i contact.html. Diguem que vull executar el mateix paquet JavaScript a les tres pàgines, però a la pàgina about.html tinc un botó que desencadena alguna cosa concreta. Però només vull que es carregui aquest codi quan es prem aquest botó.

A continuació, es mostra com pot semblar aquest codi mitjançant la característica de divisió de codis:

if (document.querySelector (‘. sobre’)) {
document.querySelector (“. sobre”). addEventListener (“feu clic”, () => {
importar (“../ js / about.js”).
document.body.innerHTML + = “Sobre la pàgina actualitzada”;
);
});
}

Observeu que incorpora una nova funció JavaScript, importacions dinàmiques mitjançant la funció import (). Això em permet carregar dinàmicament el codi que vull en una instància específica. En aquest cas, ho faig quan es prem un botó a la pàgina aproximada. La funció import () retorna una promesa, de manera que puc fer tot el que vulgui dins de la clàusula .then (), que es desencadena un cop es carrega el script importat. L’script about.js es carrega a demanda i Babel transmetrà aquest codi a un navegador ES5, per assegurar-lo que funcioni a tot arreu. Quan es crea el meu paquet, la porció about.js es posa al seu propi fitxer dins de la carpeta dist / per permetre que aquest fitxer es pugui carregar sota demanda.

Com altres funcions que he discutit, la funció d’importació () funciona a Parcel sense cap configuració.

La producció es construeix amb Parcel.js

Fins ara, he estat produint totes les meves compilacions parcel·les sobre la marxa mitjançant el servidor integrat que inclou Parcel i que inclou recàrrega en directe. Cada cop que deso el meu projecte, es crea el meu paquet. Però el codi sempre es va agrupar per al desenvolupament continu. D’aquesta manera puc veure o inspeccionar la font segons calgui per fer alguna depuració.

Un cop el meu projecte estigui completat i preparat per ser enviat a un servidor en viu, puc deixar que Parcel vegi el meu projecte. CTRL-C al terminal ho fa a moltes plataformes. A continuació, executaré la següent comanda per indicar a Parcel que produeixi una versió final:

parcel build index.html about.html contact.html

En aquest cas, vaig a crear els tres fitxers d’entrada. Un cop fet això, Parcel ja no espera canvis; es crea el paquet final i és així. A més de finalitzar la construcció, el meu codi està preparat per a la producció de Parcel. Es combinen HTML, CSS i JavaScript per produir els fitxers més petits possibles per obtenir un rendiment optimitzat.

Qualsevol inconvenient d’utilitzar Parcel?

El paquet hauria de ser definitivament l’opció ideal per a aquells que tenen poca o cap experiència amb les eines de construcció. Però a la meva pròpia investigació he trobat algunes coses que puc esmentar que haurien de millorar en el futur.

En primer lloc, haureu de notar que Parcel sempre col·loca els vostres scripts i fulls d’estils agrupats al mateix directori que els fitxers HTML del punt d’entrada. Això succeeix fins i tot si teniu els fitxers CSS i JavaScript a carpetes independents. Com que es tracta de fitxers de producció, potser no importa gaire. Però és una cosa que cal tenir en compte. La bona notícia és aquesta sembla haver estat corregida a la propera versió Parcel 2 (encara en Alpha). Per tant, hi hauria d’haver una manera de substituir aquest comportament quan la versió de Parcel sigui estable (la versió estable actual és 1.12.4).

Un altre inconvenient és que he trobat que la documentació del paquet és força mínima quan es tracta d’informació sobre com personalitzar les opcions de configuració de les diferents funcions. És cert que un dels grans avantatges de Parcel és el seu funcionament perfecte. Però crec que seria útil una documentació més àmplia sobre personalitzar-la. Per exemple, com puc desactivar la minificació HTML en les meves versions, mantenint la minificació CSS ​​i JavaScript? No hi veig una descripció d’això als documents. Quan he examinat els problemes tancats de GitHub, hi ha una solució (creieu que no és gaire convenient).

Conclusió

L’última cosa que esmentaré és una eina anomenada Crea una aplicació, que podeu utilitzar per produir automàticament fitxers de configuració de Parcel. Us permet seleccionar la vostra biblioteca JavaScript, el transpiler, la línia i altres, i se’ls afegirà al fitxer package.json, a punt per ser inicialitzat..

Crea una aplicació a Parcel.js

Això és per a aquest tutorial de Parcel per a principiants. Espero que pugueu utilitzar aquesta informació per posar-vos en funcionament ràpidament amb Parcel i utilitzar-la en futurs projectes. I si sou nous a l’agrupació d’aplicacions o no ho heu provat mai en cap projecte, potser aquesta introducció us inspirarà a provar Parcel.

No oblideu unir-se al nostre curs d’accidents per agilitzar el vostre lloc de WordPress. Amb algunes solucions senzilles, podeu reduir fins i tot un 50-80% del temps de càrrega:

Maquetació i presentació de 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