Adding Vite to Your Existing Web App

Vite, pronounced "veet," is a modern JavaScript bundler renowned for its speed and ease of use. It's a powerful tool requiring minimal configuration, yet offering extensive customization options. This article details migrating an existing project from another bundler (like Webpack) to Vite. For new projects, refer to the official Vite documentation. Even for legacy migrations, scaffolding a simple Vite project first is recommended for a better understanding of its structure.

Migration from Webpack to Vite

This guide reflects the experience of migrating a substantial, long-standing Webpack project. The process highlights Vite's configuration capabilities during the transition.

Unnecessary Webpack Configurations in Vite

Vite inherently handles many tasks typically requiring extensive Webpack configurations. This eliminates the need for many common Webpack plugins and settings.

Static Asset Handling

Webpack often requires explicit configuration for loading static assets (images, fonts, etc.):

{
  test: /\.(png|jpg|gif|svg|eot|woff|woff2|ttf)$/,
  use: [
    {
      loader: "file-loader"
    }
  ]
}

Vite manages this automatically.

Styling (CSS/SCSS)

Webpack's styling configuration can be complex:

{
  test: /\.s?css$/,
  use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
},

// later

new MiniCssExtractPlugin({ filename: "[name]-[contenthash].css" }),

Vite supports CSS and SCSS natively; simply install Sass, and Vite handles the rest.

Transpilation (TypeScript/JSX)

Webpack needs transpilation for TypeScript and JSX:

{
  test: /\.(t|j)sx?$/,
  exclude: /node_modules/,
  loader: "babel-loader"
},

...with a corresponding Babel configuration. Vite handles this out-of-the-box, supporting modern JavaScript features and TypeScript. A plugin is available for older browser support.

Node Modules Resolution

Webpack requires explicit configuration for resolving node_modules:

resolve: {
  modules: [path.resolve("./node_modules")]
}

Vite handles this automatically.

Production/Development Modes

Webpack often uses mode to differentiate between environments:

mode: isProd ? "production" : "development",

Vite uses separate commands (vite for development, vite build for production).

File Extensions

Webpack often requires specifying file extensions:

resolve: {
  extensions: [".ts", ".tsx", ".js"],
}

Vite automatically handles common extensions.

Rollup Plugin Compatibility

Many Rollup plugins are compatible with Vite, providing a smooth transition for existing plugins. Consult the Vite documentation for compatibility information.

Setting up Your First Vite Project

For migrating an existing project, begin with an HTML entry point (e.g., index.html) referencing your JavaScript entry file. Install necessary plugins (e.g., @vitejs/plugin-react for React projects). Create a vite.config.ts file:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()]
});

Add npm scripts:

"dev": "vite",
"build": "vite build",
"preview": "vite preview",

Start the development server with npm run dev.

Advanced Configuration: Aliases, Environment Variables, and Proxies

Aliases

Webpack aliases can be replicated in Vite using resolve.alias:

resolve: {
  alias: {
    jscolor: path.resolve("./util/jscolor.js"),
    app: path.resolve("./app"),
    // ...more aliases
  }
},

Environment Variables

Vite uses import.meta.env for environment variables, typically prefixed with VITE_. For legacy projects, a custom plugin might be needed to handle existing process.env variables: (Example omitted for brevity, but similar to the original example)

Server Proxying

For proxying requests to backend services during development:

server: {
  proxy: {
    "/graphql": "http://localhost:3001"
  }
}

Building Libraries

For building libraries, configure the build option in vite.config.ts: (Example omitted for brevity, but similar to the original example)

Conclusion

Vite offers a significant improvement in web application development, providing speed and ease of use. Its features and compatibility with Rollup plugins make migrating existing projects relatively straightforward.

The above is the detailed content of Adding Vite to Your Existing Web App. For more information, please follow other related articles on the PHP Chinese website!