Vite - rvdegroen/notes GitHub Wiki
Table of contents
What is Vite?
Vite is the french word for "fast" (pronounced like feet). Vite was created in 2021 by Evan You as a building tool for modern development projects to simplify and speed up the building process of an application. Vite is a Javascript building tool comes with a development server, that serves your code locally during development & bundles your assets together for production, which makes Vite faster when you're working on your product.
Why use Vite?
It is different from other bundlers because it bundles dependencies 10-100 times faster than any other Javascript-based bundlers, like Parcel, Webpack or Rollup. Vite uses esbuild and is written in Go.
I'm not sure if I understand the whole back story but Evan You basically explains that back in the "old" days, before native ES modules were a thing, the browser didn't support modularized code (multiple files) so module systems like CommonJS were created to be able to write code in tools or bundlers like Parcel, to bundle the files together to a single file, which could be run in the browser. Since the browser can now handle these things natively, we can save ourselve some work.
How do you use Vite locally?
Since I'll be working locally, I will only be mentioning on how to start up your first Vite project. In this documentation you can read on hwo to set it all up, but basically you can run this line of code by using NPM:
$ npm create vite@latest
Multi-page apps
Vite also supports multi-page apps: think about multiple HTML documents, like my project. During deployment I had the issue that my pages wouldn't load, but apparently you have to set this up in a seperate vite.config.js file. You can read all about this on this page.
Here is an example of the code:
// vite.config.js
import { resolve } from 'path'
import { defineConfig } from 'vite'
export default defineConfig({
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
nested: resolve(__dirname, 'nested/index.html')
}
}
}
})
How to create a React project with Vite?
Creating a React project with Vite is actually very simple and you can read more about it on this page. To create a React template of Vite you simple have to type the following in the terminal:
pnpm create vite my-react-app --template react