前端构建工具|vite快速入门

认识vite

vite组成部分

Vite是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

vite主要功能

以下是 Vite 的主要功能总结：

1. 快速开发服务器

• 即时启动：利用原生 ES 模块，Vite 可以在几毫秒内启动开发服务器，而无需等待整个项目打包。
• 热模块替换 (HMR)：通过 HMR，可以在开发过程中即时更新模块，无需刷新页面，提高开发效率。

2. 轻量级打包

• 现代浏览器支持：Vite 主要面向现代浏览器，利用它们对 ES 模块的支持，减少了传统打包工具的复杂性。
• 优化依赖预构建：通过预构建依赖项来提高性能，Vite 使用 esbuild 进行快速预构建，显著缩短冷启动时间。

3. 丰富的插件系统

• 插件扩展：基于 Rollup 的插件 API，Vite 的插件系统允许开发者轻松扩展和定制构建流程。
• 官方插件：提供了一系列官方插件，如 Vue、React、TypeScript 等，简化框架集成。

4. 构建优化

• 按需加载：Vite 支持动态导入和按需加载，优化生产环境中的资源加载。
• Tree-shaking：移除未使用的代码，减少打包后的文件体积。
• 代码分割：自动进行代码分割，将代码分成多个小块，提升加载性能。

5. 配置灵活

• 简单配置：通过 vite.config.js 文件进行配置，默认配置开箱即用，适合大多数项目。
• 自定义配置：灵活的配置选项允许开发者根据项目需求自定义构建和开发环境。

6. 支持多种前端框架

• Vue：通过官方插件支持 Vue 3，并且支持 Vue 2。
• React：通过官方插件支持 React 和 JSX/TSX。
• Svelte：通过社区插件支持 Svelte。

7. 快速构建工具

• esbuild：使用 esbuild 进行依赖预构建，极大提高了速度。
• Rollup：生产构建使用 Rollup 打包，确保生成高质量的代码。

8. 集成工具

• CSS 支持：内置支持 PostCSS，允许使用现代 CSS 特性和插件。
• 静态资源处理：支持导入各种静态资源（如图片、字体等），并自动进行优化和打包。
• TypeScript 支持：通过插件支持 TypeScript，无需额外配置。

9. 开发环境增强

• 模块联邦：支持模块联邦，允许在多个项目之间共享代码。
• 环境变量：支持 .env 文件定义环境变量，方便管理不同环境下的配置。

基础使用

1. 安装 Vite

安装 Node.js

首先，需要确保系统已经安装了 Node.js。可以从 Node.js 官网 下载并安装最新的 LTS 版本。

创建 Vite 项目

可以使用 npm、Yarn 或 pnpm 来创建 Vite 项目。以下是使用 npm 的命令：

npm create vite@latest my-vite-app
cd my-vite-app  # 然后按照提示操作即可
npm install

上面的命令创建了一个新的 Vite 项目并安装了所需的依赖项。
还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

更多模板： 社区维护模板

2. 项目结构

一个典型的 Vite 项目包含以下目录结构：

my-vite-app/
├── index.html
├── package.json
├── public/
│   └── favicon.ico
└── src/
    ├── assets/
    ├── components/
    ├── App.vue
    ├── main.js
    └── styles/

• index.html：入口 HTML 文件。
• package.json：项目的配置信息和依赖项。
• public/：存放静态资源的目录。
• src/：主要的源码目录。

3. 配置 Vite

Vite 的配置文件是 vite.config.js。这是一个基本的配置文件示例：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000, // 开发服务器端口
  },
  build: {
    outDir: 'dist', // 构建输出目录
  },
})

在安装了 Vite 的项目中，可以在 npm scripts 中使用 vite 可执行文件，或者直接使用 npx vite 运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts：

{
  "scripts": {
    "dev": "vite", // 启动开发服务器，别名：`vite dev`，`vite serve`
    "build": "vite build", // 为生产环境构建产物
    "preview": "vite preview" // 本地预览生产构建产物
  }
}

4. 启动开发服务器

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

npm run dev

这将启动 Vite 开发服务器，并在浏览器中自动打开项目。

5. 构建生产版本

要构建生产版本，可以运行以下命令：

npm run build

这将生成生产环境的静态文件，并将它们输出到 dist 目录中。

6. 示例代码

以下是一个简单的 Vue 组件示例：

src/App.vue

<template>
  <div id="app">
    <h1>Hello Vite + Vue!</h1>
  </div>
</template>

<script>
  export default {
    name: 'App',
  }
</script>

<style scoped>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import './styles.css'

createApp(App).mount('#app')

7. 配置更多功能

Vite 支持多种插件，可以根据需要配置更多功能。例如，可以添加 TypeScript 支持、CSS 预处理器等。

添加 TypeScript 支持

npm install typescript

然后将 src/main.js 重命名为 src/main.ts，并更新相应的代码。

其他资源

• Vite 官方文档
• Vite GitHub 仓库

通过以上步骤，可以快速上手 Vite 并开始开发现代 Web 应用。如果有更多需求，可以查阅 Vite 的官方文档，了解更多高级功能和配置选项。