🏎 Vite

Native modularised development for JavaScript in the browser. Before Vite, most tools, such as Webpack, were used to ‘bundle’ the source. This meant processing all the JavaScript files to work in the non-modularised way browsers handled JavaScript (source).

The name comes from the French word for “quick”, so it’s pronounced /vit/.

Vite in VSCode

The following VSCode launch.json file can be used to debug the TypeScript code in VSCode while a project build with Vite is running in the browser:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:5173",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

5173 is the default port that Vite runs on.