Vite：下一代前端构建工具的快速上手

2024-05-17 本文已影响0人天涯学馆

Vite 是由 Vue.js 的作者尤雨溪开发的下一代前端构建工具，它以其快速的冷启动、按需编译和热更新能力而受到广泛关注。Vite 通过利用浏览器原生的 ES 模块导入功能，提供了几乎即时的开发环境启动速度和高度优化的开发体验。

安装 Vite

首先，确保你的系统中已安装 Node.js（推荐使用 LTS 版本）。然后，通过 npm 或 yarn 全局安装 Vite：

npm install -g create-vite
# 或者使用 yarn
yarn global add create-vite

创建新项目

使用 create-vite 命令创建一个新的 Vite 项目。这里以创建一个 Vue 项目为例：

create-vite my-vite-project --template vue
cd my-vite-project

这将初始化一个基于 Vue 3 的 Vite 项目。

开发与运行

在项目根目录下，运行以下命令启动开发服务器：

npm run dev
# 或者使用 yarn
yarn dev

Vite 会立即启动一个本地开发服务器，你可以在浏览器中访问 http://localhost:5173 查看你的应用。Vite 支持热模块替换（HMR），这意味着你在编辑代码时，浏览器页面会实时更新，无需刷新。

构建生产版本

当准备部署应用时，运行以下命令构建生产版本：

npm run build
# 或者使用 yarn
yarn build

这将生成一个优化过的、可用于生产的静态文件夹，通常位于 dist 目录下。

Vite配置

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; // 假设我们使用Vue
import { resolve } from 'path';

// 环境变量
const env = process.env.NODE_ENV === 'production' ? 'prod' : 'dev';

export default defineConfig({
  // 应用的基础路径
  base: '/my-app/',

  // 项目入口文件
  root: './src',

  // 输出目录
  outDir: 'dist',
  
  mode: env,
  envPrefix: 'VITE_', // 所有以VITE_开头的环境变量将被注入到import.meta.env中
  envFile: `.env.${env}.local`, // 读取对应环境的.env文件

  // 动态导入polyfill
  optimizeDeps: {
    include: ['@vue/reactivity'], // 强制包含动态导入的库
  },

  // 服务器配置
  server: {
    // 服务器端口
    port: 3000,
    // 是否开启HTTPS
    https: false,
    // 开启热模块替换
    hmr: true,
    // 代理配置，用于API请求转发
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
      },
    },
    middlewareMode: true, // 开启中间件模式
    before(app) {
      app.use(async (ctx, next) => {
        ctx.body = 'Hello, this is a custom middleware!';
        await next();
      });
    },
  },

  // 构建配置
  build: {
    // 生产环境是否压缩代码
    minify: true,
    // 输出目录
    outDir: 'dist',
    // 资源文件存放目录
    assetsDir: 'assets',
    // chunk大小警告阈值
    chunkSizeWarningLimit: 500,
    rollupOptions: {
      input: 'src/main.js',
      output: {
        manualChunks(id) {
          if (id.startsWith('node_modules')) {
            return id.toString().replace(/(\.[a-z]+)|[\\/]/g, '_');
          }
        },
      },
    },
  },

  // 预处理器配置，如CSS
  css: {
    // CSS模块化
    modules: {
      generateScopedName: '[name]_[local]_[hash:base64:5]',
    },
  },

  // 预览环境配置
  preview: {
    port: 8080,
  },

  // 插件配置
  plugins: [
    // 可以在这里添加自定义或第三方插件
  ],

  // 解析选项
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    // 别名配置
    alias: {
      '@': '/src',
    },
  },

  // Esbuild配置，用于优化构建速度
  esbuild: {
    // 启用/禁用esbuild的tree shaking
    treeShaking: true,
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
  },
  
  transpileDependencies: ['my-dep'], // 指定需要转译的依赖

  // 额外的Rollup配置
  rollupOptions: {
    // 可以在这里添加Rollup的配置项
  },
});

Vite 的核心特性

快速启动：Vite 利用浏览器的原生 ES 模块支持，无需打包即可快速启动开发服务器，显著提升了启动速度。
按需编译：在开发模式下，Vite 只编译你正在查看的模块，大大加快了编辑-刷新的循环。
热模块替换（HMR）：Vite 提供了非常快速的 HMR 体验，几乎做到了无缝的实时更新。
配置简单：Vite 的配置文件 vite.config.js 相较于 Webpack 更为简洁，降低了入门门槛。
兼容性良好：Vite 支持多种框架，包括 Vue、React、Preact、Svelte 等，并且可以轻松适配自定义配置。
插件系统：Vite 提供了强大的插件系统，允许开发者扩展其功能，满足特定项目需求。

进阶探索

配置文件：虽然Vite的默认配置已经很强大，但你可以在 vite.config.js 中进行更多定制，如配置代理、别名、CSS预处理器等。
Vue DevTools：在开发Vue应用时，确保安装并启用Vue DevTools浏览器扩展，以便更好地调试应用状态。
TypeScript支持：如果项目中使用TypeScript，Vite已默认支持，你只需在项目中包含.ts或.tsx文件即可。
优化：学习如何利用Vite的内置优化选项和外部插件，进一步提升应用性能。