Com crear aplicacions modernes amb WEBPACK

Fins on arribem amb la configuració estàndard de Webpack?

El mes passat vaig tenir el privilegi de parlar a GDG Devfest, que es va centrar en l’ús de paquets web a les nostres aplicacions modernes. Podeu consultar les diapositives aquí.

Cada dia treballo com a enginyer i / o consultor en equips ràpids i excel·lents, i el webpack sembla ser el factor recurrent de tots aquests equips (per a la majoria de les nostres aplicacions fem servir ReactJs). Originalment, la meva xerrada havia de centrar-se en l'ús de paquets web amb biblioteques i marcs de frontend com ReactJS, Vue, Angular, etc.

Abans d’enviar la meva proposta, vaig decidir fer una mini-enquesta per veure què pensava la gent sobre el Webpack. Per a la meva sorpresa, molta gent es va referir a la webpack com "només s'utilitza amb frameworks", cosa que estava lluny de la veritat. D’altres encara van dir que la creació d’un paquet web era descoratjador. Això m'ha portat a centrar-me més en l'ús de paquets web amb Vanilla JS i veure fins a quin punt podem arribar amb la configuració per defecte de paquet web.

Però primer:

QUÈ ÉS EL WEBPACK?

Personalment, defineixo Webpack com una eina que pren molts mòduls Javascript i els combina en un mòdul Javascript que es pot enviar al navegador.

Sé que és una simplificació del que fa Webpack, però sembla que la gent ho aconsegueix. Per explicar-ho més, webpack és un paquet que busca mòduls javascript amb dependències (bàsicament fitxers javascript que necessiten codi d’altres fitxers javascript), els comprimeix i crea un fitxer javascript o fitxers que contenen no tenen dependències. D’aquesta manera, es poden enviar fàcilment al navegador.

Història de Webpack

Per entendre els problemes que el webpack intenta resoldre, hem de saber alguna cosa sobre la història del webpack. Per fer breu aquesta secció, acabo d’esbossar dues eines clau i un concepte:

  • Google Web Toolkit: es tracta d’un framework de Google que converteix Java a Javascript (ho sé, oi?). Té una característica que sembla ser la meva característica personal preferida a Webpack, que és "Divisió de codi". (Explicaré el desglossament del codi en un article posterior.)
  • Modules_Webmake: és la biblioteca de la qual prové el webpack. Es tracta essencialment d’una eina que ens permet organitzar els nostres fitxers javascript per al navegador de la mateixa manera que ho vam fer amb NodeJS (fantàstic).
  • IIFE: significa expressió de funció anomenada immediatament. Es tracta bàsicament d’una funció Javascript que s’anomena o s’anomena al mateix temps que es va crear.

Expressió de funció cridada immediatament

Ho he dividit en la seva pròpia secció perquè l'havia d'explicar més. Aquest és un exemple d'un IIFE:

Si poséssim aquesta funció a la nostra etiqueta de script, ho faria immediatament. L'etiqueta de script es carrega des del navegador. Això és el mateix que afegir una funció a window.onload, però té un avantatge addicional.

A causa de la manera com funcionen els tancaments a Javascript, totes les variables que s'han declarat a l'IIFE s'inclouen en aquesta funció. Això vol dir que no tindria cap problema amb els conflictes d'espai de noms a la meva base de codi, però al mateix temps continuaria tenint accés a la funcionalitat que proporciona l'IIFE.

Per què Webpack?

Quins problemes s’enfronta avui al Webpack?

En primer lloc, tenim el problema de les etiquetes de seqüència. He estat treballant en una base de codis on hi ha almenys 30 etiquetes de script a cada pàgina HTML en un ordre molt precís. Sé que alguns podrien dir que no és un problema real, però el navegador ha de fer una sol·licitud per fitxer, cosa que pot afectar el vostre "temps de càrrega". Les etiquetes de script també poden ser difícils de gestionar, i només canviar-ne una podria trencar l'aplicació (això és el que he provat ).

En segon lloc, encara hi ha el problema de l’espai de noms on l’espai de noms global pot quedar desordenat. Sé que som gent molt creativa, sobretot pel que fa a la denominació de variables, però quan formeu un equip més gran hi ha vegades que els noms de variables només xoquen. O fins i tot el vostre futur, podríeu tornar a pensar en el mateix nom (sí, això passa).

Conec algunes organitzacions que fan dels seus desenvolupadors el costum de deixar sempre les seves variables dins de la seva funció, però no sempre podem confiar-hi (ni confiar-hi). Al final, només dificulta la separació de les preocupacions.

En tercer lloc, recordo que el webpack provenia de modules_webmake. Com que podem utilitzar Webpack per organitzar els nostres fitxers de la mateixa manera que ho fem a NodeJS (amb CommonJS), tenim l'avantatge d'escriure un codi modular que s'escala molt bé (només cal que pregunteu a les persones que utilitzen frameworks frontend)

CommonJS

No explicaré massa coses sobre CJS, ja que no és el propòsit de l'article. Tot i això, es pot dir que és un sistema modular JS que s’utilitza a NodeJS.

Amb Webpack podem utilitzar fàcilment aquest mòdul i fins i tot el sistema de mòduls ES "millor" al navegador (Webpack ho gestiona de manera intel·ligent). Això ens ajuda a escriure un codi realment modular i mantenible en què un fitxer JS pugui gestionar una sola funcionalitat (Principi de responsabilitat única).

Mòduls ES (ESM)

Aquest és un altre sistema modular que, si ho creieu o no, ja està implementat pels navegadors actuals. Malauradament hi té els seus límits. També podem utilitzar aquest mòdul amb Webpack sense cap problema (ja que Webpack encara el converteix al final), però vaig trobar que la majoria de les bases de codis en què he treballat són més llegibles amb ESM. M’hauria agradat aprofundir, però aquest no és l’objectiu d’aquest article. Per obtenir una millor explicació, recomanaria aquest increïble article.

Com funciona Webpack?

Sé que vaig dir abans que Webpack era màgic, però vaig mentir. Per fer-ho el més fàcil possible:

  • Webpack agafa un camí d'accés a un únic punt d'entrada que és un fitxer JS i busca instruccions d'importació (pot ser ESM o CJS).
  • A continuació, es busca el fitxer importat i es cerquen instruccions d’importació addicionals. Es crea un diagrama de dependències.

Mireu la imatge per obtenir una millor explicació:

JK

Hi tinc dos fitxers, index.js i helpers.js. Aquests dos fitxers realitzen funcions diferents, però importo i faig servir la funció a helpers.js al meu fitxer index.js. Per defecte, el punt d'entrada de Webpack és ./src/index.js. A partir d’aquí, intenta crear el diagrama de dependències així:

Com començar

Per obtenir una millor comprensió del funcionament dels paquets web, creem una senzilla aplicació TODO. Només té la funcionalitat bàsica d’afegir i suprimir i s’inclou amb la configuració predeterminada de Webpack (és a dir, no té cap fitxer de configuració de Webpack). Així és l’aplicació:

JK

El primer pas és crear un directori de projecte nou i crear dues carpetes, una anomenada dist i una altra anomenada src. Per defecte, el punt d'entrada de Webpack és ./src/index.js i el paquet JS es mostra a ./dist/main.js. És per això que estem creant les dues carpetes.

Podeu crear el fitxer index.html a la carpeta dist. Això no és necessari per al Webpack, ja que el fitxer es pot emmagatzemar a qualsevol lloc del directori del projecte i només podeu fer referència al fitxer main.js. Al final, l'estructura del vostre projecte hauria de ser així:

A la carpeta src creem el fitxer index.html, en el qual comencem a implementar les funcions de la nostra aplicació TO-DO. Primer omplim el fitxer index.html amb dades. Com que la creació d’una aplicació TO-DO no forma part d’aquest tutorial, només mostraré el codi següent:

Aplicació Todo </ title> </ head> <body> <div class = "container"> <p> <label for = "new-task"> afegir element </ label> <input id = "new-task" type = "text"> <button id = "addTask"> Add </ button> </ p> <h3> Todo </ h3> <ul id = "tasks"> </ ul> </ div> <script src = "main.js"> </ script> </ body> </ html></pre><p>Comencem a funcionar ara. Trencarem les dues funcions (afegir i suprimir) als seus propis fitxers i després les importarem a index.js. Crearem dos fitxers a la nostra carpeta src anomenada addTask.js i deleteTask.js. Ara l’estructura del vostre projecte hauria de tenir el següent aspecte:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1569857964226.png" /><p>Ara podem començar a afegir la lògica que necessitem. Per tant, implementem primer el fitxer deleteTask.js perquè no té dependències. Enganxeu-lo al fitxer deleteTask.js:</p><pre>const deleteTask = funció (s) {console.log ("eliminar tasca ...", e); // Elimineu l'element de llista principal de ul var listItem = e.target.parentNode; var ul = listItem.parentNode;</pre><pre>ul.removeChild (listItem); };</pre><pre>exporta per defecte deleteTask;</pre><p>En aquest fitxer només es crea la funció deleteTask i després s’exporta com a exportació estàndard.</p><p>Ara podem implementar la funció addTask. Al fitxer addTask.js, afegiu el codi següent:</p><pre>Importeu deleteTask des de "./deleteTask";</pre><pre>const createNewTaskElement = funció (taskString) {const listItem = document.createElement ("li"); const label = document.createElement ("etiqueta"); const deleteButton = document.createElement ("botó");</pre><pre>deleteButton.innerText = "Suprimeix"; deleteButton.className = "eliminar"; deleteButton.addEventListener ("clic", deleteTask);</pre><pre>label.innerText = stringString;</pre><pre>listItem.appendChild (etiqueta); listItem.appendChild (deleteButton);</pre><pre>return listItem; };</pre><pre>const addTask = funció (s) {const taskList = document.getElementById ("tasques"); const task = document.getElementById ("nova tasca"); if (task.value! == "") {const newTaskItem = createNewTaskElement (task.value); taskList.appendChild (newTaskItem); task.value = ""; }};</pre><pre>exporta addTask per defecte;</pre><p>En aquest primer importem el fitxer deleteTask.js. Si no s'especifica cap extensió durant la importació, el Webpack assumeix automàticament que es tracta d'un fitxer .js per defecte. Després tenim la funció que crea l'element de llista que conté la tasca que s'ha introduït al formulari. L’únic que cal tenir en compte és que adjuntem la funció d’eliminació al gestor de clics del botó d’eliminació. A continuació, creem la funció addTask real i l'exportem.</p><p>Després hem d'importar la nostra funció addTask a index.js. Enganxeu el codi següent al fitxer index.js:</p><pre>importar addTask des de './addTask';</pre><pre>const addTaskButton = document.getElementById ("addTask"); addTaskButton.addEventListener ("clic", addTask);</pre><p>És bastant senzill: importem la funció addTask i l’afegim al gestor de clics del botó addTask. Si heu seguit els passos anteriors, hauríeu d'estar preparats.</p><p>Per obtenir el nostre fitxer main.js, hem d’executar Webpack des de la nostra base de codis. Per a aquest pas, assegureu-vos que NodeJS estigui instal·lat al vostre sistema. A continuació, instal·lem Webpack i Webpack CLI globalment amb l'ordre següent:</p><pre>npm install -g webpack webpack-cli O sudo npm install -g webpack webpack-cli</pre><p>Un cop finalitzada la instal·lació, executeu l'ordre següent:</p><pre>Webpack</pre><p>Agruparà el nostre fitxer amb èxit, però hauríem de veure un advertiment al terminal com aquest:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1569857965682.png" /><p>El paquet web ens avisa que no hem especificat cap mode. Podríem deixar-lo tal qual i executar el codi, tot hauria de funcionar bé. Si no us agrada l'advertiment, aquí teniu com podeu executar el paquet web:</p><pre>webpack --mode = desenvolupament</pre><p>I estàs bé d’anar-hi</p><h3>Embolicar</h3><p>Si us heu perdut pel camí, sempre podeu fer servir el repositori de GitHub com a referència (però inclou estils CSS).</p><p>Espero que aquest article us hagi pogut mostrar què ofereix Webpack (només els conceptes bàsics, sense cap configuració). Als articles següents, mostraré com configurar diverses configuracions personalitzades per a funcions com l’ús compartit de codis, la càrrega mandrosa i la configuració de Webpack perquè funcioni amb aplicacions de diverses pàgines.</p><p>Perquè aquest article sigui el més senzill possible, he evitat utilitzar un fitxer package.json a l'article. Utilitzar un fitxer package.json i instal·lar Webpack localment és el mètode més escalable per utilitzar Webpack. Vaig a tractar això al meu proper article sobre l'ús de Webpack.</p><p>Per facilitar la navegació en els propers articles, seria molt útil afegir un comentari sobre les explicacions o implementacions de Webpack. </p><p>Vull agrair especialment a Sean T. Larkin, Israel Obiagba i Hassan Sani els seus comentaris per millorar l'article del que estava previst originalment. Vosaltres tots rockeu!</p></div><div class="neighbor-articles"><h4 class="ui header">Vegeu també</h4><a href="/question/how-to-connect-ipad-to-projector-wirelessly/" title="com connectar l'iPad al projector sense fils">com connectar l'iPad al projector sense fils</a><a href="/question/how-to-zoom-in-pycharm/" title="com ampliar pycharm">com ampliar pycharm</a><a href="/question/how-to-address-the-dalai-lama/" title="com abordar el dalai lama">com abordar el dalai lama</a><a href="/question/how-to-get-rid-of-paspalum/" title="com desfer-se de paspalum">com desfer-se de paspalum</a><a href="/question/how-to-cut-steel-rod/" title="com tallar la vareta d’acer">com tallar la vareta d’acer</a><a href="/question/how-to-iron-dry-clean-only-pants/" title="com planxar els pantalons nets en sec">com planxar els pantalons nets en sec</a><a href="/question/how-to-make-fallout-4-harder/" title="com fer més difícil el fallout 4">com fer més difícil el fallout 4</a><a href="/question/how-to-get-full-screen-on-tv-from-laptop-hdmi/" title="com aconseguir pantalla completa a la televisió des del portàtil HDMI">com aconseguir pantalla completa a la televisió des del portàtil HDMI</a></div></div><div class="article-sidebar"><div class="neighbor-articles"><h4 class="ui header">Vegeu també</h4><a href="/article/guest-posting-101-how-to-be-read-by-the-masses-3d19a8/" title="Guest Post 101 - Com ser llegit per la multitud">Guest Post 101 - Com ser llegit per la multitud</a><a href="/article/how-to-write-a-high-quality-novel-in-one-draft-with-no-outline-9cb5cb/" title="Com escriure una novel·la d’alta qualitat en un esborrany sense esbossos">Com escriure una novel·la d’alta qualitat en un esborrany sense esbossos</a><a href="/article/how-to-know-what-to-write-about-including-my-secret-sauce-e6c6cb/" title="Com saber de què escriure (inclosa la meva salsa secreta)">Com saber de què escriure (inclosa la meva salsa secreta)</a><a href="/article/how-to-be-an-ethical-sugar-daddy-0e9910/" title="Com ser un pare de sucre ètic">Com ser un pare de sucre ètic</a><a href="/article/how-to-master-async-await-with-this-real-world-example-9932dc/" title="A continuació s’explica com dominar l’asincronia / espera mitjançant aquest exemple del món real">A continuació s’explica com dominar l’asincronia / espera mitjançant aquest exemple del món real</a><a href="/article/how-to-build-an-absolutely-creative-group-fd71f3/" title="Com crear un grup totalment creatiu">Com crear un grup totalment creatiu</a><a href="/article/navcoin-community-fund-how-to-vote-for-your-favorite-proposals-2c86fe/" title="Fons de la comunitat NavCoin: Com votar per les vostres propostes preferides">Fons de la comunitat NavCoin: Com votar per les vostres propostes preferides</a><a href="/article/the-biggest-career-mistake-you-can-make-and-how-to-avoid-it-a1a828/" title="El major error professional que podeu cometre (i com evitar-ho)">El major error professional que podeu cometre (i com evitar-ho)</a></div></div></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://uz.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="uz flag"></i></a><a href="https://bg.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="bg flag"></i></a><a href="https://et.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ee flag"></i></a><a href="https://lt.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="lt flag"></i></a><a href="https://lv.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="lv flag"></i></a><a href="https://sr.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="rs flag"></i></a><a href="https://sl.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="si flag"></i></a><a href="https://sk.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="sk flag"></i></a><a href="https://uk.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ua flag"></i></a><a href="https://sq.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="al flag"></i></a><a href="https://hy.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="am flag"></i></a><a href="https://is.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="is flag"></i></a><a href="https://az.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="az flag"></i></a><a href="https://kk.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="kz flag"></i></a><a href="https://fa.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ir flag"></i></a><a href="https://tg.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="tj flag"></i></a><a href="https://ga.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ie flag"></i></a><a href="https://be.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="by flag"></i></a><a href="https://ka.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ge flag"></i></a><a href="https://ky.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="kg flag"></i></a><a href="https://lb.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="lu flag"></i></a><a href="https://lo.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="la flag"></i></a><a href="https://ar.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="sa flag"></i></a><a href="https://bn.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="in flag"></i></a><a href="https://zh.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="cn flag"></i></a><a href="https://hr.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="hr flag"></i></a><a href="https://cs.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="cz flag"></i></a><a href="https://da.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="dk flag"></i></a><a href="https://nl.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="nl flag"></i></a><a href="https://tl.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ph flag"></i></a><a href="https://fi.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="fi flag"></i></a><a href="https://fr.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="fr flag"></i></a><a href="https://de.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="de flag"></i></a><a href="https://el.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="gr flag"></i></a><a href="https://iw.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="il flag"></i></a><a href="https://hi.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="in flag"></i></a><a href="https://hu.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="hu flag"></i></a><a href="https://id.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="id flag"></i></a><a href="https://it.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="it flag"></i></a><a href="https://ja.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="jp flag"></i></a><a href="https://ko.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="kr flag"></i></a><a href="https://ms.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="my flag"></i></a><a href="https://mr.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="io flag"></i></a><a href="https://no.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="no flag"></i></a><a href="https://pl.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="pl flag"></i></a><a href="https://pt.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="pt flag"></i></a><a href="https://ro.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ro flag"></i></a><a href="https://ru.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ru flag"></i></a><a href="https://internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="es flag"></i></a><a href="https://sv.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ch flag"></i></a><a href="https://ta.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="sg flag"></i></a><a href="https://te.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="in flag"></i></a><a href="https://th.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="th flag"></i></a><a href="https://tr.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="tr flag"></i></a><a href="https://ur.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="pk flag"></i></a><a href="https://vi.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="vn flag"></i></a></div>internautasporlapaz.org<!-- --> © <!-- -->2021<!-- --> </footer></div></div></div></body></html>