Ryd op i din kode med Parcel

TeknologiKode

5. apr.

Skrevet af

Lasse Borly
Udvikler

Kunne du tænke dig at slippe for at copypaste din gulpfile.js, hver gang du starter et nyt Drupal projekt? En kontinuerligt opdateret værktøjskasse, der selv finder ud af, hvilke redskaber den skal benytte sig af netop til dit projekt?

Parcel er i skrivende stund netop udkommet i en version 2. Dog kun i beta. Men det er værd at kaste et blik på alligevel.

Hvad er Parcel?

"Parcel is a compiler for all your code, regardless of the language or toolchain.
Parcel takes all of your files and dependencies, transforms them, and merges them together into a smaller set of output files that can be used to run your code."

Det lyder jo godt. Men det lyder som det, Gulp allerede hjælper med? Eller hvad? Gulps mission statement er dog en smule anderledes og spænder bredere:

“A toolkit to automate & enhance your workflow.
Leverage gulp and the flexibility of JavaScript to automate slow, repetitive workflows and compose them into efficient build pipelines.”

Gulp hjælper med at automatisere, så du ikke selv skal køre babel efterfulgt af sass på kommandolinjen. Så nej, Parcel kan ikke erstatte Gulp fuldstændigt. De to værktøjer forsøger fundamentalt ikke at gøre det samme.

Det Parcel kan erstatte er de 80% af tiden, hvor vores eneste job er at transpilere JavaScript og SASS til CSS. Så kan Parcel også en masse andet - men det kan du læse mere om i deres egen dokumentation.

Her kommer et eksempel

{
  "scripts": {
    "build": "parcel build './src/**/*.(js|scss)' --dist-dir './dist'",
    "watch": "parcel watch './src/**/*.(js|scss)' --dist-dir './dist' --no-hmr"
  },
  "devDependencies": {
    "@parcel/transformer-sass": "^2.0.0-beta.2",
    "parcel": "^2.0.0-beta.2"
  }
}

Ovenstående indsætter du i din package.json fil, og derefter er du klar til at køre npm install.

Lad os lige gennemgå build kommandoen.

"build": "parcel build './src/**/*.(js|scss)' --dist-dir './dist'",

Her beder vi Parcel om at kigge i vores src/ mappe og transpile alle de filer Parcel finder og smide dem ned i dist/ mappen.

Det sker for både vores js og scss filer som angivet i glob mønsteret.

For at vi ikke skal blive ved med at køre npm run build hele tiden, har vi også watch kommandoen. Den sørger for at transpileringen sker hver gang, vi foretager en ændring i vores src/ .js og .scss filer. Det sluttelige --no-hmr flag vi smider på watch kommandoen, betyder Hot Module Replacement.
Det er en funktion vi ikke har mulighed for at benytte os af i sammenspil med vores nuværende Drupal 9
opsætning. Så vi vælger at fjerne funktionen for at afkomplicere vores opsætning.

Det sidste vi kan vælge at tilføje til vores package.json, er en browserlist defination.

{  
  "scripts": {
    "build": "parcel build './src/**/*.(js|scss)' --dist-dir './dist'",
    "watch": "parcel build './src/**/*.(js|scss)' --dist-dir './dist' --no-hmr"
  },
  "devDependencies": {
    "@parcel/transformer-sass": "^2.0.0-beta.2",
    "parcel": "^2.0.0-beta.2"
  },
  "browserslist": ["> 0.2%", "not dead"]
}

Vil du prøve selv?

Vi har også stykket et komplet Drupal 9 + Parcel v2 eksempel sammen, som du selv kan forke og prøve af. Klik på linket og gå bananas!

Transpilering og tooling forandrer sig konstant. På trods af at grunt og gulp stadig virker og gør deres arbejde godt, er det værd at stikke hovedet frem engang imellem. Lige se om der er kommet noget nyt, der forsimpler eller effektiviserer en eksisterende process.

Parcel er en del af de mange simplificeringsinitativer, der findes. I effektiviseringsafdelingen kunne det måske være spændende at tage et kig på esbuild og swc. Alternativer til babel og webpack/parcel, men skrevet i Go og Rust i stedet for JS med henblik på øget performance.

Håber det var brugbart - tak fordi du læste med!