Vaadake, kui hõlpsalt saate Webpackile üle minna

Olen selle artikli kirjutanud, et jutustada seiklusest, mis juhtus minuga AngularJS-i projekti Gruntist Webpackisse üleviimisel.

Foto Tyler Franta saidil Unsplash

Võite mind jälgida twitteris või vaadata mu viimaseid artikleid minu saidil yaabed.com. Samuti on mul minu väljaanne keskmises ajaveebis.yaabed.com.

Põhiline probleem, mis eksisteeris, oli umbes 500 aknaobjektile visatud eset. See võimaldab teil pääseda neile juurde kuhu iganes te vajate. See muudab akna moodulite ja komponentide navigeerimise tööriistaks. Projekt on rohkem seotud ja te ei tea, kes neid kasutab.

Failide struktureerimiseks kasutatakse mooduli arhitektuuri, kuid ilma angular.module kasutamata. Failid jagunevad nime järgi kaustadesse, nagu näiteks HomePage. HomePage kaust sisaldab selle kontrollerit, stiili ja vaadet.

Esimene asi, mis meelde tuli, oli kogu rakenduse ümberreageerimine veebipaketi, moodulite, babeli ja es6 kasutamiseks. Pärast uurimist on seda võimalik teha ilma koodbaasi uuesti reageerimata. Kuid enne Webpacki projekti lisamist on palju lahendatavaid probleeme.

Probleemid, mida enne tööle asumist kaaluda

  • Kuidas lahendada aknaobjekti probleemi, sest veebipakk näitab faile üksteisega rääkivate failide puuna.
  • Kuidas teha projektis vähem muudatusi ilma teemasid ühendamata.
  • Kuidas jagada veebipaketi väljatöötamise ja tootmise vahel?
  • Kuidas eemaldada võimendussõltuvusi, kuna veebipakett lahendab mooduleid peamiselt npm-st alates.
  • Kuidas lahendada veebipaketi versiooniuuendused JavaScripti failide suurt mahtu.
https://www.pexels.com/photo/technology-computer-desktop-source-code-113850/

Alustage asjade jagamist sammudeks

Uuendage sõlme versioon alates 0.10 uusimale saadaolevale versioonile

Enne kui hakkasin kasutama veebipaketti, pidin uuendama Node versiooni, millega veebipack v3 töötab. Kuid Grunt kasutab aegunud asju - nii et kui Node versiooni värskendasin, ei töötanud midagi! Nii et hakkasin vead ükshaaval parandama, et olla kindel, et versiooniuuendus on võimalik.

Esiteks kogunes viga vanadele käepidemetele ja sõlmedele. Seda sõlme versiooni ei toetata enam. Selle parandamiseks täiustasin grunt-sass väärtust '0.18.1' väärtuseks '2.0.0', seejärel täiendasin sõlme sass 'sassi' '4.7.2'.

Teiseks ei õnnestunud gruntimist versioonilt 0.4.5 versioonile 1.0.0 üle viia, sest gruntpistikprogrammid vajavad vastussõltuvusena grunt@0.4.5. Nii et jäin kinni 0.4.5 versioonist.

Kiirussõlmeserveris kuvatavate vigade parandamine

Pidin parandama ekspress-sõlmeserveri vead, kuna bodyParseri konstruktor on aegunud ja seda tuleb muuta. Muutsin alates

kuni

Eemaldage aegunud asjad

  • Siluge atribuuti grunt-express alt, kuna see on sõlmeinspektori uues versioonis aegunud.
  • Eemaldage projektist bower-installülesanne.

Alustage veebipaketi lisamist

Lisasin projektile veebipaketi, kasutades npm install webpack - save-dev. Seejärel lisasin faili `webpack.config.json`.

Selle sammu alustades takerdusin, kuna projekti struktuuril puudub sisenemispunkt. Kogu projekt sõltub ühest allikast, milleks on aken. Webpack vajab alustamiseks sisenemispunkti ja lõpuks väljundpunkti.

Selle lahendamiseks lõin sisenemispunkti. Seadsin sellele kõik vajalikud failid ja panin GruntJS-i seadistusele sama nime, et siduda see nagu vana Build. Kuid see võttis kaua aega, sest index.html sisaldas umbes 550 eset.

Selle probleemi lahendamiseks kasutasin RegExp /dage(.*?)"/ig ja asendasin väärtused nõudega (src), et saada atribuudilt src allikad ja teisendada see nõudmiseks (src) .Kleepisin selle entry.js samas järjekorras nagu vana index.html.

Pärast seda oli tulemuseks oluline JS-fail, mis sisaldas kõiki skripte. Kuid miski ei töötanud! Pärast toimuva uurimist tundus, et veebipakk töötab vaikimisi moodulitena. Kui sama faili puhul on olemas eksport või vaikimisi eksport, ei ekspordita midagi väljastpoolt, isegi kui lisate selle nõude js abil.

Enne selle lahenduse leidmist otsin lisamise moodulit.export kõikidele eksportimist vajavatele failidele - enne kui saan selgelt aru, kuidas webpack töötab! Pärast kahepäevast töötamist avastasin, et probleemi lahendab midagi, mida nimetatakse laaduriteks.

Selle lisamisega saidile webpack.config.js olid kõik failid vana käitumisena saadaval!

Ja kõik töötas nüüd.

Järgmine samm

Pärast seda, kui ma tegin projekti töö Gruntiga, pidin kontrollima, et nii veebipakett kui ka Grunt töötaksid koos. Nii et tegin teste, veendumaks, et mul pole midagi vajaka jäänud.

Selle tegemiseks loon uue faili nimega inject-HTML.files.json. See fail sisaldab kõiki lähtefaile, mida saab kasutada koos Grunti ja veebipaketi usemenPrepare abil, et luua kirjed mitme üksusena massiividena, mis on võetud HTML-i sisestamise failidest JSON.

Ma armastan seda pilti, kirjutage koodi ja jooge kohvi :) https://www.pexels.com/photo/high-angle-view-of-coffee-cup-on-table-317385/

Uuendage vana Grunt'i konfiguratsioonifaili

Lisage faile concat

Kontrollige, kas Webpack töötab, seejärel eemaldage JS konfiguratsioonidest

Lisage uus skript npm

Webpack.config.js fail

Webpack.prod.js fail

Motivatsioonid

Hooldatavus ja koodikvaliteet

  • Lahendage failide loomise probleem, kuna projekt kasvab kiiresti.
  • Lahendage probleem, et aknale on põhjuseta lisatud liiga palju asju.
  • Muutke koodipõhi hõlpsamini mõistetavaks.

Arengu efektiivsus

  • Bower on nüüd vananenud.
  • Npm-i pakettide puhul ei saa ühtegi asja kasutada, kuna ehitamisprotsess seda ei paku.

Etendus

  • Failide maht kasvab iga päevaga, seega tuleb koodi jagamiseks kasutusele võtta lahendus.
  • Failide osadeks jagamise ja laadimise edasilükkamise vajaduse korral saab asjatut ülekandmist ja parsimist salvestada.

Koodide poolitamine

  • Pärast kasutamist on veebipaketi koodi jagamine hõlpsam kasutada.
  • Jagage uued funktsioonid moodulipõhisteks.

Lõpuks on npm-pakettide kasutamine mängude vahetaja. Eesmärk oli muuta koodidebaas teistele arendajatele hõlpsaks. Samuti tõestasime, et teie süsteemi on võimalik targalt täiendada, isegi kui teie koodialus on kohutav.

Kogu rakenduse ümberkirjutamine on katastroof, kuna raiskate potentsiaalselt aastaid rasket tööd. Selle asemel proovige muuta oma koodbaas loetavamaks, hooldatavamaks ja modulaarsemaks. Kui vana kood vajab ümberkorraldusi, saate seda teha samm-sammult.

Ärge takerduge oma vanasse koodibaasi ja öelge, et te ei saa sellega midagi teha. Proovige ise muudatusi teha - elage koos uute asjade, uute värskenduste ja uute tehnoloogiatega, mis muudavad teid õnnelikuks.

See on minu esimene kord inimestele kirjutada! Kui teile see artikkel meeldis, siis palun jagage seda teiste ümbritsevate inimestega.

Kirjutan blogis.yaabed.com. Kui teile see artikkel meeldis, siis jagage seda kindlasti ka teistega. Ja ärge unustage, et vajutate järgmiste artiklite jaoks nuppu Jälgi, jälgige mind ka twitteris.

Tere, minu nimi on Yazan Aabed. Kasvas üles Palestiinas. Minu peamine oli informaatika alal. Olen Frontend Engineer ja JavaScripti väljavalitu . Enamasti töötatakse Frontendi raamistikega nagu (AngularJs, ReactJS). Võite helistada mulle #Geek . Samuti meeldib mulle jagada oma teadmisi teiste inimestega ja neilt õppida 🌪. Leiate mind GitHubis, keskkonnas, Twitteris.