Navigera i webbdjungeln: Byggverktyg

Även om webbläsaren stödjer Javascript, så kommer man bara undan kompilering i dom allra minsta projekten. Koden som skickas över nätverket till webbläsaren bör vara kompakt, och oftast är få requests att föredra. För att samla ihop all kod till "bundles", så används en "bundler", vilket jag rätt och slätt har benämnt "byggverktyg". I den här artikeln går vi igenom några av dom populäraste verktygen.

Webpack

År 2019 är Webpack det vanligaste byggverktyget. Det tillåter en stor mängd transformationer av kod genom url:er. Man kan t.ex. definiera att Javascript-url:er ska transformeras med kompilatorn Babel, och att när man importerar en CSS-fil till Javascript, så ska CSS:en inkluderas inline (inbäddad) i Javascripten. Och t.ex. att bildfiler under 25 kB ska inkluderas inline i CSS:en, medan större filer läggs i filsystemet.

Vidare stöds "hot module replacement" (HMR), vilket innebär att man under utveckling kan spara en fil i sin editor, och så uppdateras webbsidan automatiskt med den nya koden. Första gången man ser det är det magiskt.

Webpack är alltså mycket kraftfullt, men dess flexibilitet gör att konfigurationen blir snabbt krånglig och svårförstådd.

Parcel

Parcel marknadsför sig som byggverktyget utan konfiguration. Om Parcel t.ex. ser att du försöker importera en Typescript-fil, så förstår verktyget att filen måste byggas med Typescript-kompilatorn.

Jag rekommenderar att börja med Parcel, och bara byta till Webpack om just ditt användningsfall inte stöds.

Mer

Det finns ett stort antal byggverktyg, med olika för- och nackdelar. Här är ett par verktyg som har varit stora en gång i tiden, men som fick ge plats åt nya, flexiblare verktyg.

• Grunt: Använder ett konfigurationsskript för att definiera ett antal kommandon som man kan köra.
• Gulp: Fungerar likt Grunt, men när det finns många delsteg i ett bygge, behöver verktyget inte skapa temporära filer.