9. Vite & TypeScript configuratie

Deze pagina beschrijft hoe de TypeScript lesvoorbeelden uit de JavaScript cursus aangepast kunnen worden zodat de ?raw parameter niet toegevoegd moet worden aan elke import van een HTML-file.

Aangezien de files geïmporteerd worden via Vite, moeten we de Vite configuratie aanpassen zodat de ?raw parameter automatisch toegevoegd wordt aan elke import voor een HTML-bestand. Hiervoor moet een nieuwe vite.config.ts aangemaakt worden in de root van het project.

/vite.config.ts

import { defineConfig } from 'vite'

export default defineConfig({})

Bovenstaande code is een minimale Vite configuratie die niets van de standaardinstellingen aanpast. Om het standaard gedrag te overschrijven moeten we plugins gebruiken, deze zijn beschikbaar op het NPM registry, maar kunnen natuurlijk ook zelf geschreven worden.

Hieronder schrijven we een eenvoudige plugin die ?raw toevoegt aan een .html import, hiervoor gebruiken we drie properties:

1. name: Deze property geeft de naam van de plugin aan, de waarde die hier meegegeven wordt is dan ook vrij te kiezen.
2. enforce: Via deze property kan geconfigureerd worden wanneer de plugin uitgevoerd moet worden. Aangezien de plugin de standaard aanpassingen doet aan de manier waarop Vite bestanden inleest, moeten we hier de pre waarde gebruiken. Zo wordt de plugin uitgevoerd voordat Vite begint met het bundelen/verwerken van de bestanden.
3. resolveId: Deze functie krijgt de URI terug die de gebruiker in de import statements gebruikt heeft, verder worden ook de standaard import settings doorgegeven die elders geconfigureerd zijn (of de default als er geen aanpassingen) gedaan zijn. In deze functie controleren we eerst of we met een .html file te maken hebben (in de plaats van een .ts, .png, ... bestand). Vervolgens controleren we dat het HTML-bestand niet index.html is, aan de import voor deze file mag geen ?raw toegevoegd worden omdat Vite hierin moet kunnen zoeken naar script tags en andere dingen die mee gebundeld moeten worden. Tenslotte voegen we de parameter toe als deze nog niet toegevoegd is. Als we enkel de source aanpassen met de raw parameter, zal Vite het bestand niet kunnen verwerken omdat Vite een absolute URL verwacht en er normaliter een relatieve URL gebruikt wordt in imports. Via this.resolve kunnen we de source property omvormen naar een absolute URL die wel door Vite verwerkt wordt.

/vite.config.ts

import { defineConfig } from 'vite'

export default defineConfig({
    plugins: [
        {
            name: 'auto-raw-html-import',
            enforce: 'pre',
            resolveId(source, importer, options) {
                if (!source.endsWith('index.html') && source.endsWith('.html') && !source.includes('?')) {
                    return this.resolve(`${source}?raw`, importer, options)
                }
                return null
            }
        }
    ]
})

/src/main.ts

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap'
import homePage from './pages/home/home.html'

const root = document.querySelector<HTMLDivElement>('#app')!
root.innerHTML = homePage

Na deze aanpassingen werkt de applicatie wel, maar geeft TypeScript nog een foutmelding.

l

TS2307: Cannot find module ./ pages/ home. html or its corresponding type declarations.

Om deze fout op te lossen moeten we TypeScript duidelijk maken dat HTML-files geïmporteerd mogen worden. Hiervoor declareren we een index.d.ts file in de src map.

/src/index.d.ts

declare module "*.html"