3 ms·
A dev server with hot reloading is the big thing vite adds IMHO, at least for your day to day use. It also adds rollup and a more uniform plugin system for you
by qbasic_forever 4y ago
A dev server with hot reloading is the big thing vite adds IMHO, at least for your day to day use. It also adds rollup and a more uniform plugin system for your production builds but really the dev server experience is where vite excels.
If you just want esbuild + hot reloading then dev-server-esbuild might be a good option: https://modern-web.dev/docs/dev-server/plugins/esbuild/ https://modern-web.dev/docs/dev-server/plugins/esbuild/ But really vite isn't much more complex or opinionated compared to it.
- skybrian 4y agoAt least for a small site, you don't actually need a plugin to get hot reloading using esbuild: "scripts": { "build": "esbuild src/app.ts src/app.css --bundle --sourcemap --outdir=site", "dev": "npm run build -- --servedir=site", } Unless you mean something different by "hot reloading" than "recompile on page reload?"
- Volundr 4y agoThey mean recompile on file save and hot-patch the frontend without reloading. See: https://main.vitejs.dev/guide/features.html#hot-module-replacement https://main.vitejs.dev/guide/features.html#hot-module-repla...
- qbasic_forever 4y agoNo tools like vite will detect changes, rebuild/bundle/transform, and then inject the changed HTML, JS, and CSS into the page you're viewing automatically. They work by injecting a script into the HTML they serve which connects over a websocket or SSE to monitor changes and slurp them up when notified by the dev server. It's really a magical experience to have your code open in one window, your browser open next to it, and as soon as you hit ctrl-s instantly see the page change. I won't tweak CSS any other way, changing sizes, colors, etc is amazing with hot reload.
- omnimus 4y agoEsbuild works just fine with browsersync proxy. Simpler approach.