de Yazan Aabed

Vedeți cât de ușor puteți face upgrade la Webpack

Am scris acest articol pentru a povesti aventura care mi s-a întâmplat la actualizarea unui proiect AngularJS de la Grunt la Webpack.

0*H9 QqXnBR8Rr6MhF
Fotografie de Tyler Franta pe Unsplash

Poți să mă urmărești mai departe stare de nervozitate sau verificați ultimele mele articole despre site-ul meu yaabed.com. De asemenea, am publicația mea la blog mediu.yaabed.com.

Principala problemă care exista a fost de aproximativ 500 de articole aruncate pe obiectul ferestrei. Acest lucru vă permite să le accesați în orice loc aveți nevoie. De asemenea, face din fereastră instrumentul de navigare pentru module și componente. Proiectul devine mai cuplat și nu știi cine le folosește.

Fișierele sunt structurate folosind arhitectura modulului, dar fără a utiliza angular.module. Fișierele sunt împărțite în folder după nume, cum ar fi HomePage. Dosarul HomePage conține controlerul, stilul și vizualizarea acestuia.

Primul lucru care mi-a venit în minte a fost refactorizarea întregii aplicații pentru a utiliza webpack, module, babel și es6. După cercetare, este posibil să faceți acest lucru fără nici o refactorizare a bazei de cod. Dar, există multe probleme de rezolvat înainte de a începe să adaug webpack la proiect.

Probleme de luat în considerare înainte de a începe să lucreze

  • Cum să rezolvați problema obiectului ferestrei, deoarece webpack arată fișierele ca un arbore de fișiere care vorbesc între ele.
  • Cum să faceți mai puține modificări proiectului fără a fuziona probleme.
  • Cum să împărțiți între dezvoltare și producție pentru webpack.
  • Cum se elimină dependențele bower, deoarece webpack rezolvă în principal modulele de la npm.
  • Modul în care actualizările la Webpack rezolvă dimensiunea mare a fișierelor JavaScript.
Vedeti cat de usor puteti face upgrade la Webpack
https://www.pexels.com/photo/technology-computer-desktop-source-code-113850/

Începeți să împărțiți lucrurile în pași

Actualizați versiunea nodului de la 0.10 la cea mai recentă versiune disponibilă

Înainte de a începe să trec la utilizarea webpack, trebuia să actualizez versiunea de nod cu care funcționează webpack v3. Dar, Grunt folosește lucruri învechite – așa că atunci când am actualizat versiunea Node, nimic nu a funcționat! Așa că am început să remediez erorile pe rând pentru a mă asigura că este posibilă actualizarea.

În primul rând, o eroare acumulată pe vechi grunt-sass & node-sass. Nu mai este acceptat pentru această versiune de nod. Pentru a remedia acest lucru, am făcut upgrade grunt-sass de la „0.18.1” la „2.0.0”, apoi actualizat node-sass să fie „4.7.2”.

În al doilea rând, încercarea de a actualiza grunt de la „0.4.5” la „1.0.0” nu a funcționat, deoarece pluginurile grunt au nevoie de grunt@0.4.5 ca dependență de la egal la egal. Așa că am rămas cu versiunea 0.4.5.

Remedierea erorilor afișate pe serverul nodului expres

A trebuit să remediez erorile cu serverul Node expres, deoarece constructorul bodyParser este învechit și trebuie schimbat. M-am schimbat din

Vedeti cat de usor puteti face upgrade la Webpack

la

1611482532 785 Vedeti cat de usor puteti face upgrade la Webpack

Eliminați lucrurile învechite

  • Atribut de depanare din grunt-express deoarece este depreciată pe noua versiune a inspectorului nodului.
  • Eliminați sarcina de instalare a bower din proiect.

Începeți să adăugați webpack

Am adăugat webpack la proiect folosind npm install webpack--save-dev. Apoi am adăugat fișierul `webpack.config.json`.

Când am început acest pas, am rămas blocat deoarece structura proiectului nu are punct de intrare. Întregul proiect depinde de o singură sursă care este fereastra. Webpack are nevoie de un punct de intrare pentru a începe și de un punct de ieșire pentru a se termina.

Pentru a rezolva acest lucru, am creat un punct de intrare. Am setat toate fișierele necesare pe el și l-am numit cu același nume în configurația GruntJS pentru a-l concatena așa cum a făcut vechea versiune Build. Dar acest lucru avea să dureze mult, deoarece aproximativ 550 de articole au fost incluse în index.html.

Pentru a rezolva această problemă, am folosit un RegExp /”(.*?)"/ig și a înlocuit valorile cu require(src)pentru a obține sursele din atributul src și a-l converti în require(src). L-am lipit la entry.js pe aceeași ordine cu vechiul index.html.

După aceasta, rezultatul a fost un fișier JS semnificativ care conține toate scripturile. Dar nimic nu a funcționat! După investigarea a ceea ce se întâmpla, se părea că webpack funcționează în mod implicit ca module. Dacă există exporturi sau export implicit în același fișier, nimic nu va fi exportat în exterior, chiar dacă îl includeți folosind require js.

Înainte de a căuta o modalitate de a rezolva acest lucru, încep să adaug module.exports la toate fișierele care trebuie exportate – înainte să înțeleg clar cum funcționează webpack! După două zile de lucru, am constatat că există ceva numit încărcătoare care rezolvă problema.

Adăugând acest lucru la webpack.config.js, toate fișierele erau acum disponibile ca vechi comportament!

1611482532 945 Vedeti cat de usor puteti face upgrade la Webpack

Și acum totul funcționa.

Urmatorul pas

După ce am făcut proiectul să funcționeze cu Grunt, trebuia să mă asigur că ambele webpack și Grunt au lucrat împreună. Așa că am făcut teste pentru a mă asigura că nu pierd nimic.

Pentru ca acest lucru să se întâmple, creez un fișier nou numit inject-HTML.files.json. Acest fișier conține toate fișierele sursă de utilizat usemenPrepare pe Grunt și webpack pentru a crea intrările ca elemente multiple ca tablouri preluate din fișierele inject-HTML JSON.

1611482532 826 Vedeti cat de usor puteti face upgrade la Webpack
Îmi place această imagine, scriu cod și beau niște cafea 🙂 https://www.pexels.com/photo/high-angle-view-of-coffee-cup-on-table-317385/

Actualizați vechiul fișier de configurare Grunt

1611482533 662 Vedeti cat de usor puteti face upgrade la Webpack

Adăugați fișiere la concat

1611482533 892 Vedeti cat de usor puteti face upgrade la Webpack

Verificați dacă Webpack se construiește, apoi eliminați JS din configurații

1611482534 55 Vedeti cat de usor puteti face upgrade la Webpack

Adăugați un nou script npm

1611482534 44 Vedeti cat de usor puteti face upgrade la Webpack

Fișier Webpack.config.js

1611482535 368 Vedeti cat de usor puteti face upgrade la Webpack

Fișierul Webpack.prod.js

1611482536 299 Vedeti cat de usor puteti face upgrade la Webpack

Motivații

Mentenabilitate și calitate a codului

  • Rezolvați problema creării fișierelor, deoarece proiectul crește rapid.
  • Rezolvați problema că există prea multe lucruri atașate ferestrei fără motiv.
  • Faceți baza de cod mai ușor de înțeles.

Eficiența dezvoltării

  • Bower este acum depreciat.
  • Nu se pot folosi lucruri pe pachetele npm, deoarece procesul de compilare nu oferă acest lucru.

Performanţă

  • Dimensiunile fișierelor sunt din ce în ce mai mari în fiecare zi, deci trebuie să introduceți o soluție pentru a împărți codul.
  • A putea împărți fișierele și amâna încărcarea până când este necesar salvează transferul și analiza inutile.

Împărțirea codului

  • După utilizare, împărțirea codului webpack va fi mai ușor de utilizat.
  • Împărțiți noile caracteristici în module.

În cele din urmă, utilizarea pachetelor npm este un schimbător de jocuri. Scopul a fost de a facilita baza de cod pentru alți dezvoltatori. De asemenea, am dovedit că este posibil să vă actualizați sistemul cu înțelepciune chiar dacă baza de cod este teribilă.

Rescrierea întregii aplicații este un dezastru, deoarece potențial pierzi ani de muncă grea. În schimb, încercați să vă faceți baza de coduri mai lizibilă, mai ușor de întreținut și mai modulară. Când vechiul cod necesită refactorizare, îl puteți face pas cu pas.

Nu vă blocați cu vechea bază de cod și spuneți că nu puteți face nimic pentru asta. Încercați să faceți modificări de unul singur – trăiți cu lucruri noi, noi actualizări și noi tehnologii care vă vor face fericiți.

Este prima dată când scriu pentru oameni! Dacă ți-a plăcut acest articol, te rog să îl împărtășești cu alte persoane din jurul tău.

Scriu la blog.yaabed.com. Dacă v-a plăcut acest articol, vă rugăm să vă asigurați că îl împărtășiți cu alte persoane. Și nu uitați să apăsați butonul de urmărire și pentru mai multe articole de acest gen urmărește-mă pe twitter.

1611482536 713 Vedeti cat de usor puteti face upgrade la Webpack

buna numele meu este Yazan Aabed. A crescut în Palestina. Specializarea mea a fost în informatică. Sunt un inginer frontend și un iubitor de JavaScript ?? ‍ ?. Lucrând în principal cu cadre Frontend precum (AngularJs, ReactJS). Poți să-mi spui #Geek?. De asemenea, îmi place să împărtășesc cunoștințele mele cu alte persoane și să învăț de la ele ???. Mă puteți găsi pe GitHub, Medium, Twitter.

academie de învățare webpack
webpack learning academy există pentru a oferi un conținut curat, de înaltă calitate, dedicat open source-ului webpack …webpack.academyDe la Grunt și Bower la Webpack, Babel și Yarn – Migrarea unui vechi sistem de construcție front-end
Sistemul de construcție pe care l-am moștenit pentru portalul de date al Consorțiului internațional pentru genomul cancerului a fost destul de modern …medium.comCum să comutați incremental la webpack
Aceasta este a doua dintr-o serie din două părți despre de ce și cum am trecut sistemul nostru de grupare JavaScript dintr-un sistem ad hoc …medium.comDe ce am trecut la webpack
Aceasta este prima dintr-o serie din două părți despre de ce și cum am trecut sistemul nostru de grupare JavaScript dintr-un sistem ad hoc …medium.comPrimii pași de la Grunt la Webpack
Noțiuni introductive despre Webpack după utilizarea Gruntadvancedweb.huThe Journey to Webpack – Server Density Blog
De Kerry Gallagher, de la Server Density. Publicat pe 6 ianuarie 2016. În ultimii ani am construit …blog.serverdensity.com

[discussion] Cum am mers de la Grunt la Gulp la Webpack? din javascript