Vite Tutorial: A Next-Generation Frontend Tool | Tech Wiki Online

Vite Tutorial: A Next-Generation Frontend Tool

Recently, I’ve been exploring Vite, which is often referred to as “the new create-react-app”. While there are many tools that serve a similar purpose, such as Parcel, esbuild, Rollup, Rome, webpack, and Turbopack, Vite stands out in its unique approach.

Vite describes itself as a “next-generation frontend tool”. It functions as a module bundler like webpack or Turbopack, but with a significant difference. Instead of creating a single bundled JavaScript file that is sent to the browser, Vite leverages the native browser’s ES modules support to directly ship modules to the browser. As a result, when inspecting a Vite-powered website in the browser’s DevTools, you’ll see all your application files being sent individually.

This unconventional behavior is the primary reason for Vite’s exceptional speed and represents a radical change in how build tools operate.

Here’s a summary of what Vite offers:

1. A scaffolding tool for popular libraries and frameworks, including React.
2. A development server with hot module replacement (HMR).
3. A build tool for creating the production version of your code.

It’s worth noting that Vite is built on top of Rollup and internally utilizes SWC, a faster implementation of Babel. With Vite, your application code is compiled into individual ES modules, which are directly shipped to the browser. Unlike traditional bundlers, Vite does not create a final bundled version of the code. Instead, it relies on the browser to handle module dependencies.

In terms of user-friendliness and adoption, Vite has garnered positive feedback. My favorite use case for Vite is initializing new JavaScript or React applications. Additionally, Vite offers built-in integration for Svelte, SvelteKit, and other frameworks.

To initialize a new project using Vite, you can use the following command:

npm create vite

This command will prompt you to provide a name for your project, which will be used as the folder name. In case you enter an invalid folder/package name (e.g., containing spaces), Vite will prompt you to enter a valid one.

After providing the project name, you’ll be prompted to choose a framework from a list of options. Depending on your selection, you will have different configuration choices. For example, if you choose to create a basic vanilla JavaScript project, you’ll have the following options:

• Use TypeScript
• Use a JavaScript framework (React, Vue, or Preact)
• Use a static site generator (Eleventy or VuePress)
• Use a bundler (webpack or Rollup)

Once you’ve made your choices, a project with the selected configuration will be created. The project files will be arranged accordingly. In the created package.json file, Vite will be configured to run the project. Interestingly, the project won’t have a node_modules folder by default.

To install the necessary dependencies, navigate to the project folder in your terminal and run npm install. Afterward, you can start the development server by running npm run dev, which will initiate Vite and launch the application.

Using Vite’s streamlined process, you can quickly set up a web server that is pre-configured to support ES modules for modern JavaScript development. Whether you’re building a vanilla JavaScript project or a React application, Vite simplifies the setup process and ensures compatibility with the latest frontend standards.

tags: [“Vite”, “frontend development”, “module bundler”, “JavaScript”, “React”, “Rollup”, “SWC”]