Share
Det er ganske vanlig praksis i disse dager når du bygger et nettsted for å ha en slags byggeprosess på plass for å bidra til å utføre utviklingsoppgaver og forberede filene dine for et levende miljø.
Du kan bruke Grunt eller Gulp for dette, konstruere en transformasjonskjede som lar deg kaste koden din i den ene enden og få litt sertifisert CSS og JavaScript ut på den andre.
Disse verktøyene er ekstremt populære og svært nyttige. Det er imidlertid en annen måte å gjøre ting på, og det er å bruke Webpack.
Webpack er det som er kjent som en "modulbuntner". Det krever JavaScript-moduler, forstår deres avhengigheter, og sammenkobler dem sammen på den mest effektive måten, og spytter ut en enkelt JS-fil på slutten. Ikke noe spesielt, ikke sant? Ting som RequireJS har gjort dette i årevis.
Vel, her er vridningen. Med Webpack er moduler ikke begrenset til JavaScript-filer. Ved å bruke Loaders forstår Webpack at en JavaScript-modul kan kreve en CSS-fil, og at CSS-filen kan kreve et bilde. De utgitte eiendelene inneholder bare nøyaktig hva som trengs med minimum oppstyr. La oss bli satt opp så vi kan se dette i aksjon.
Som med de fleste utviklingsverktøy, trenger du Node.js installert før du kan fortsette. Forutsatt at du har dette riktig satt opp, må du bare skrive følgende på kommandolinjen alt du trenger å gjøre for å installere Webpack.
npm installere webpack -g
Dette vil installere Webpack og tillate deg å kjøre det fra hvor som helst på systemet ditt. Deretter lager du en ny katalog og innsiden lager en grunnleggende HTML-fil slik:
Webpack moro
Den viktige delen her er referansen til bundle.js, som er hva Webpack vil gjøre for oss. Legg også merke til H2-elementet - vi skal bruke det senere.
Deretter lager du to filer i samme katalog som HTML-filen din. Navn den første main.js, som du kan forestille deg er det viktigste inngangspunktet for skriptet vårt. Deretter nevner du det andre si-hello.js. Dette kommer til å være en enkel modul som tar en persons navn og DOM-element, og legger inn en velkomstmelding i elementet.
// say-hello.js module.exports = funksjon (navn, element) element.textContent = 'Hei' + navn + '!'; ;
Nå som vi har en enkel modul, kan vi kreve dette og ringe det fra main.js. Dette er like enkelt som å gjøre:
Accentsconagua
var sayHello = krever ('./ say-hei'); sayHello ('Guybrush', document.querySelector ('h2'));Nå hvis vi skulle åpne vår HTML-fil, vil denne meldingen åpenbart ikke bli vist som vi ikke har tatt med main.js heller ikke utarbeidet avhengighetene til nettleseren. Det vi trenger å gjøre er å få Webpack å se på main.js og se om det har noen avhengigheter. Hvis det gjør det, bør det samle dem sammen og lage en bundle.js-fil som vi kan bruke i nettleseren.
Gå tilbake til terminalen for å kjøre Webpack. Bare skriv inn:
webpack main.js bundle.js
Den første filen som er oppgitt, er oppføringsfilen vi ønsker at Webpack skal begynne å lete etter avhengigheter i. Det vil fungere hvis noen nødvendige filer krever andre filer og vil fortsette å gjøre dette til det er utarbeidet alle nødvendige avhengigheter. Når den er ferdig, utsender den avhengighetene som en enkelt sammenkoblet fil til bundle.js. Hvis du trykker på retur, bør du se noe slikt:
Hash: 3d7d7339a68244b03c68 Versjon: webpack 1.12.12 Tid: 55ms Asset Size Chunks Chunk Navn bundle.js 1,65 kB 0 [emitted] main [0] ./main.js 90 bytes 0 [built] [1] ./say- hello.js 94 bytes 0 [bygget]
Nå åpen index.html i nettleseren din for å se siden din si hei.
Det er ikke så morsomt å spesifisere våre inn- og utgangsfiler hver gang vi kjører Webpack. Heldigvis gir Webpack oss mulighet til å bruke en config-fil for å redde oss. Opprett en fil som heter webpack.config.js i roten til prosjektet ditt med følgende innhold:
module.exports = entry: './main.js', output: filnavn: 'bundle.js';
Nå kan vi bare skrive Webpack og ingenting annet for å oppnå de samme resultatene.
Hva er det? Du kan ikke engang bli plaget til å skrive Webpack hver gang du endrer en fil? Jeg vet ikke, dagens generasjon osv. Osv. Ok, la oss sette opp en liten utviklingsserver for å gjøre ting enda mer effektivt. På terminalen skriver du:
npm installere webpack-dev-server -g
Kjør deretter kommandoen Webpack-dev-serveren. Dette vil starte en enkel webserver som kjører, ved hjelp av gjeldende katalog som stedet for å betjene filer fra. Åpne et nytt nettleservindu og besøk http: // localhost: 8080 / webpack-dev-server /. Hvis alt er bra, ser du noe i tråd med dette:
Nå har vi ikke bare en fin liten webserver her, vi har en som ser på vår kode for endringer. Hvis det ser vi har endret en fil, vil den automatisk kjøre webpack-kommandoen for å pakke koden og oppdatere siden uten at vi gjør en eneste ting. Alle med null konfigurasjon.
Prøv det, endre navnet passert til si hei funksjonen, og bytt tilbake til nettleseren for å se at endringen din blir brukt umiddelbart.
En av de viktigste funksjonene i Webpack er Loaders. Lastere er analoge med "oppgaver" i Grunt og Gulp. De tar i hovedsak filer og forvandler dem på noen måte før de er inkludert i vår pakkekode.
Si at vi ønsket å bruke noen av ES2015-stilene i vår kode. ES2015 er en ny versjon av JavaScript som ikke støttes i alle nettlesere, så vi må bruke en laster for å transformere ES2015-koden til vanlig gammel ES5-kode som er støttes. For å gjøre dette bruker vi den populære Babel Loader som, i henhold til instruksjonene, installerer vi slik:
npm installer babel-loader babel-core babel-preset-es2015 - save-dev
Dette installerer ikke bare selve lasteren, men dens avhengigheter og en ES2015 forhåndsinnstilt som Babel trenger å vite hvilken type JavaScript det konverterer.
Nå som lasteren er installert, trenger vi bare å fortelle Babel å bruke den. Oppdater webpack.config.js så det ser slik ut:
module.exports = entry: './main.js', output: filnavn: 'bundle.js', modul: loaders: [test: /\.js$/, ekskluder: / node_modules /, loader : 'babel', spørring: forhåndsinnstillinger: ['es2015']],;
Det er noen viktige ting å merke seg her. Den første er linjen test: /\.js$/, som er et vanlig uttrykk som forteller oss om å bruke denne loader til alle filer med a .js forlengelse. på samme måte ekskluder: / node_modules / forteller Webpack å ignorere node_modules katalog. loader og spørsmål er ganske selvforklarende - bruk Babel loader med ES2015 forhåndsinnstilt.
Start datamaskinen på nytt ved å trykke på ctrl + c og kjører Webpack-dev-serveren en gang til. Alt vi trenger å gjøre nå, er å bruke noe ES6-kode for å teste transformasjonen. Hva med om vi endrer vår si hei variabel for å være en konstant?
const sayHello = krever ('./ say-hallo')Etter å ha lagret, må Webpack automatisk ha kompilert koden din og oppdatert nettleseren din. Forhåpentligvis ser du ingen endring overhodet. Ta en titt inn bundle.js og se om du kan finne konst søkeord. Hvis Webpack og Babel har gjort jobbene sine, vil du ikke se det hvor som helst - bare ren gammel JavaScript.
I del 2 av denne opplæringen ser vi på å bruke Webpack for å legge til CSS og bilder på siden din, så vel som at nettstedet ditt er klar for distribusjon.
