Share
Este o practică destul de standard în aceste zile când construiți un site web pentru a avea un fel de procedeu de construire pentru a vă ajuta să realizați sarcini de dezvoltare și pentru a pregăti fișierele pentru un mediu live.
Puteți folosi Grunt sau Gulp pentru aceasta, construind un lanț de transformări care vă permit să aruncați codul într-un capăt și să obțineți câteva CSS și JavaScript miniaturi la celălalt.
Aceste instrumente sunt extrem de populare și foarte utile. Există totuși un alt mod de a face lucrurile, și asta înseamnă a utiliza Webpack.
Webpack este ceea ce este cunoscut ca un "pachet de module". Este nevoie de modulele JavaScript, înțelege dependențele lor și apoi le reunește împreună în cel mai eficient mod posibil, scuipând un singur fișier JS la sfârșit. Nimic special, nu? Lucruri precum RequireJS au făcut asta de ani de zile.
Ei bine, iată-i răsuflarea. Cu Webpack, modulele nu se limitează la fișiere JavaScript. Prin utilizarea încărcătorilor, Webpack înțelege că un modul JavaScript poate necesita un fișier CSS și că fișierul CSS poate necesita o imagine. Activele de ieșire vor conține exact ceea ce este necesar cu o intervenție minimă. Să ne pregătim pentru a vedea acest lucru în acțiune.
Ca și în cazul majorității instrumentelor de dezvoltare, veți avea nevoie de Node.js instalat înainte de a putea continua. Presupunând că ați configurat corect acest lucru, tot ce trebuie să faceți pentru a instala Webpack este pur și simplu tastați următoarele în linia de comandă.
npm instalează webpack -g
Acesta va instala Webpack și vă va permite să îl rulați de oriunde din sistem. Apoi, face un nou director și în interiorul crea un fișier HTML de bază, cum ar fi:
Webpack distractiv
Partea importantă aici este referirea la bundle.js, ceea ce va face Webpack pentru noi. De asemenea, notați elementul H2 - o vom folosi mai târziu.
Apoi, creați două fișiere în același director ca fișierul HTML. Denumiți primul main.js, care, după cum vă puteți imagina, este punctul principal de intrare pentru scenariul nostru. Apoi denumiți al doilea spune-hello.js. Acesta va fi un modul simplu care ia numele persoanei și elementul DOM și inserează un mesaj de bun venit în elementul respectiv.
// say-hello.js modul.exports = funcție (nume, element) element.textContent = 'Bună ziua' + nume + '!'; ;
Acum, că avem un modul simplu, putem cere acest lucru și să-l sunăm main.js. Acest lucru este la fel de ușor ca și cum faceți:
Accentsconagua
var sayHello = cer ('./ say-hello'); spune Hello ("Guybrush", document.querySelector ('h2'));Acum, dacă am fi deschis fișierul nostru HTML, atunci acest mesaj nu va fi în mod evident afișat, deoarece nu l-am inclus main.js nici nu a compilat dependențele pentru browser. Ce trebuie să facem este ca Webpack să se uite main.js și să vedem dacă are dependențe. Dacă se întâmplă, ar trebui să le compilați împreună și să creați un fișier bundle.js pe care îl putem folosi în browser.
Întoarceți-vă la terminal pentru a rula Webpack. Pur și simplu tastați:
webpack main.js bundle.js
Primul fișier specificat este fișierul de intrare pe care vrem ca Webpack să înceapă să caute dependențe. Se va rezolva dacă toate fișierele solicitate necesită alte fișiere și vor continua să facă acest lucru până când vor fi elaborate toate dependențele necesare. Odată ce a terminat, acesta trimite conexiunile ca un singur fișier concatenat bundle.js. Dacă apăsați retur, ar trebui să vedeți ceva de genul:
Hash: 3d7d7339a68244b03c68 Versiune: webpack 1.12.12 Timp: 55ms Dimensiune pachet Chunks Nume bundle.js 1.65 kB 0 [emitted] main [0] ./main.js 90 octeți 0 [built] [1] ./say- hello.js 94 bytes 0 [construit]
Acum deschis index.html în browser-ul dvs. pentru a vedea pagina dvs. salutând.
Nu este foarte distractiv specificarea fișierelor de intrare și ieșire de fiecare dată când rulați Webpack. Din fericire, Webpack ne permite să folosim un fișier de configurare pentru a ne salva problemele. Creați un fișier numit webpack.config.js în rădăcina proiectului dvs. cu următorul conținut:
module.exports = entry: './main.js', ieșire: nume fișier: 'bundle.js';
Acum putem doar tasta WebPACK și nimic altceva pentru a obține aceleași rezultate.
Ce e aia? Nici măcar nu vă puteți deranja să tastați WebPACK de fiecare dată când schimbi un fișier? Nu știu, generația de astăzi etc, etc. Ok, să organizăm un mic server de dezvoltare pentru a face lucrurile mai eficiente. La terminal scrieți:
npm instalează webpack-dev-server -g
Apoi rulați comanda WebPACK-dev-server. Acest lucru va porni un simplu server web care rulează, folosind directorul curent ca loc de a servi fișiere de la. Deschideți o nouă fereastră de browser și accesați http: // localhost: 8080 / webpack-dev-server /. Dacă totul este bine, veți vedea ceva în acest sens:
Acum, nu numai că avem un mic server web minunat, avem unul care ne urmărește codul pentru schimbări. Dacă vede că am modificat un fișier, acesta va rula automat comanda webpack pentru a lega codul nostru și pentru a reîmprospăta pagina fără ca noi să facem un singur lucru. Toate cu configurație zero.
Încercați-l, schimbați numele trecut la spune buna funcția și reveniți la browser pentru a vedea că schimbarea dvs. este aplicată instantaneu.
Una dintre cele mai importante caracteristici ale Webpack este Loaders. Încărcătoarele sunt similare cu "sarcinile" din Grunt și Gulp. Aceștia iau în esență fișiere și le transformă într-un fel înainte de a le include în codul nostru inclus.
Spuneam că am vrut să folosim câteva din avantajele ES2015 din codul nostru. ES2015 este o nouă versiune a JavaScript care nu este acceptată în toate browserele, așa că trebuie să folosim un încărcător pentru a transforma codul nostru ES2015 în cod ES5 simplu vechi care este sprijinit. Pentru a face acest lucru, folosim popularul Babel Loader care, conform instrucțiunilor, se instalează astfel:
npm instalare babel-loader babel-core babel-preset-es2015 -save-dev
Acest lucru instalează nu numai încărcătorul însuși, ci și dependențele sale și o presetare ES2015, deoarece Babel trebuie să știe ce tip de JavaScript este de conversie.
Acum, când încărcătorul este instalat, trebuie să-i spunem lui Babel să o folosească. Actualizați webpack.config.js așa că arată astfel:
module.exports = entry: './main.js', ieșire: nume fișier: 'bundle.js', modul: loaders: [test: /\.js$/, exclude: / node_modules /, loader : 'babel', interogare: presetări: ['es2015']],;
Există câteva lucruri importante pe care trebuie să le menționăm aici. Prima este linia test: /\.js$/, care este o expresie regulată care ne spune să aplicăm acest încărcător tuturor fișierelor cu un .js extensie. asemănător exclude: / node_modules / spune Webpack să ignore node_modules director. încărcător și întrebare sunt destul de auto-explicative - utilizați încărcătorul Babel cu presetarea ES2015.
Reporniți serverul web apăsând ctrl + c și alergând WebPACK-dev-server din nou. Tot ce trebuie să facem acum este să folosim un cod ES6 pentru a testa transformarea. Ce zici de noi ne schimbăm spune buna variabilă să fie o constantă?
const sayHello = cer ('./ say-hello')După salvare, Webpack ar fi trebuit să vă recompenseze automat codul și să vă reîmprospătează browserul. Sperăm că nu veți vedea nicio schimbare. Luați o privire înăuntru bundle.js și vezi dacă poți găsi const cuvinte cheie. Dacă Webpack și Babel și-au făcut locurile de muncă, nu o veți mai vedea - pur și simplu JavaScript vechi.
În Partea a 2-a din acest tutorial, vom examina utilizarea Webpack pentru a adăuga CSS și imaginile pe pagina dvs., precum și pentru a vă pregăti pentru implementare site-ul.
