🤿 Vite (1 h)

🤿 Avancerad fördjupning

Denna modul är avancerad fördjupning. Om du har fullt upp redan, skippa denna modul! Du kan återvända till den senare.

Detta är ingen kunskap som på något sätt är nödvändig i nuläget.

För den som vill lära sig om bundling, build tools & performance optimization, läs vidare…

Tips

I och med användningen av Vite blir också några av tilläggen i VS Code som vi använt hittills, t.ex. Live Sass Compiler och Live Server, onödiga/redundanta.

💡 Introduktion till ämnet (flipped classroom)

⏰ Tidsåtgång: c.a. 1 h

Installera Vite (10 min)

Filer som skapas av Vite (10 min)

Vite, Sass och Tailwind (7 min)

Vite, ESLint och Prettier (10 min)

Fixa alla fel (18 min)

Refaktorera koden (7 min)

🐛 Buggar & korrigeringar till videos

Expose host på Windows

Följande kommando fungerar inte på Windows av någon anledning:

pnpm run dev --host

Istället måste man skriva:

npm run dev -- --host

Klagomål på att @use/@import inte kan ligga inne i @media screen and …?

Bransch-standard verkar vara att lägga media query-reglerna INNE I själva filen för t.ex. desktop eller mobil.

Min (Jennis) personliga preferens är att ha det i style.scss.

Vill man komma runt branschstandarden så kan man uppdatera sin .stylelintrc.json så att den ser ut såhär:

{
  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
  "customSyntax": "postcss-scss",
  "plugins": ["stylelint-scss"],
  "rules": {
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": true,
    "import-notation": "string",
    "no-invalid-position-at-import-rule": null
  }
}

📖 Läsanvisningar

• JavaScript - The Definitive Guide: 17.5 - Code Bundling

✅ Avstämning

Använd denna lista för att "checka av" att du förstår modulens koncept.

Terminologi

• Bundlers: webpack, Parcel, Rollup, Vite
• "dist"
• Cache busting
• File hash
• package.json
• package-lock.json

Du är klar när…

• Du vet hur du lägger till npm-paket
• Du kan använda ESLint & Prettier
• Du har provat att installera Vite

📚 Resurser

• Vite

Våga Fråga-lådan

Anonyma frågelådan

Klar?