Assets

Beståndsdelar

Assetsystemet består av följande delar:

Vite

Vite är ett byggverktyg med en snabb devserver med HMR (Hot Module Replacement) stöd och ett optimerat Rollup-baserat byggkommando.

Dusk

Assetsystemets hjärta ligger i Dusk och hanterar enqueue:ande av assets, devserver hantering i PHP och definierar asset-relaterade Blade direktiv.

Kommandon

Horizon använder dessa kommandon för frontendrutiner:

• pnpm dev — Startar devservern.
• pnpm build — Start produktionsbygge.
• pnpm lint — Lintar TypeScript/JavaScript och SCSS/CSS kod.
  • pnpm lint:js — Lintar endast TypeScript/JavaScript.
  • pnpm lint:css — Lintar endast SCSS/CSS kod.
• pnpm translate — Skapar/uppdaterar .pot filer baserat enligt koden. (Se översättningssektionen för mer info)

Devservern

Vites devserver skiljer sig från Browersync i att den inte agerar som en proxy, den bara servar TypeScript/JavaScript, SCSS/CSS och diverse assets som definierats. Detta betyder att du använder samma URL när du använder devservern eller inte.

Assetsystemet vet om du vill använda devservern eller inte baserat på om public mappen, som skapas när man gör ett produktionsbygge, finns eller inte.

När devservern startar tar den bort public mappen. Detta signalerar till assetsystemet att devservern ska användas.

Assetfilosofi

I Horizon utgår de flesta asset-relaterade grejer från TypeScript/JavaScript filer. SCSS och CSS importeras inne i script filerna. Om SCSS/CSS används globalt bör de importeras i app.ts, annars bör de importeras i relevant fil.

Temats assets

TypeScript/JavaScript filer som ligger i mapparna resources/scripts och resources/scripts/blocks tas automatiskt med i bygget.

Om man manuellt behöver definiera de filer som ska med i bygget görs det i vite.config.js filen, under build.rollupOptions.input. Varje fil som definieras här blir en egen fil.