前端构建工具Vite

前端开发构建工具：Vite - 支持模板 vue、vue-ts

Vs code 安装Vue3配套语法支持、TS支持：Volar - 需要禁用vue2对应的vetur，推荐使用Less

一、搭建Vite项目

创建项目，运行npm init vite@latest命令，按照提示操作即可！

（1）若想构建一个 Vite + Vue 项目，运行 npm init vite@latest my-vue-app --template vue
（1）若想构建一个 Vite + Vue + Typescript 项目，运行 npm init vite@latest my-vue-app --template vue-ts

更多框架-基础模板：create-vite、社区模板：awesome-vite

运行项目

npm install
npm run dev

二、功能

Vite 通过原生 ESM 导入提供了用于打包的增强功能。
NPM 依赖解析和预构建，预构建由 esbuild 执行。

ESM格式：
es — 将 bundle 保存为 ES 模块文件。在现代浏览器中用 <script type=module> 标签引入（别名：ems, module）。

模块热重载
Vite 提供了一套原生 ESM 的 HMR API
TypeScript
（1）Vite 仅执行 .ts 文件的转译工作，并不执行任何类型检查。
在构建脚本中运行 tsc --noEmit 或者安装 vue-tsc 然后运行 vue-tsc --noEmit 来对你的 *.vue 文件做类型检查
（2）TS 编译器选项
tsconfig.json 中 compilerOptions 下的一些配置项需要特别注意。
第一优先级支持插件
（1）Vue 3 单文件组件支持：@vitejs/plugin-vue
（2）Vue 3 JSX 支持：@vitejs/plugin-vue-jsx - 提供Vue3特性支持，包括 HMR，全局组件解析，指令和插槽。
CSS
（1）@import 内联和变基
Vite 通过 postcss-import 预配置支持了 CSS @import 内联，路径别名也遵从 CSS @import。
（2）CSS Modules
以.module.css为后缀名的CSS文件被认为是一个CSS modules文件。
导入这样的文件会返回一个相应的模块对象：

import classes from './example.module.css'
document.getElementById('foo').className = classes.red

三、使用插件

插件配置
（1）要使用一个插件，需要将它添加到项目的devDependencies，并在 vite.config.js 配置文件中的 plugins 数组中引入它。

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

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
})

（2）plugins 也可以接受将多个插件作为单个元素的预设。这对于使用多个插件实现的复杂特性（如框架集成）很有用。

// 1）框架插件
import frameworkRefresh from 'vite-plugin-framework-refresh'
import frameworkDevtools from 'vite-plugin-framework-devtools'

export default function framework(config) {
  return [frameworkRefresh(config), frameworkDevTools(config)]
}

// 2）vite.config.js
import { defineConfig } from 'vite'
import framework from 'vite-plugin-framework'

export default defineConfig({
  plugins: [framework()]
})

查找插件
Vite 官方插件
 社区插件
 Rollup 官方插件
 兼容 Rollup 的插件
按需应用
默认情况下插件在开发 (serve) 和生产 (build) 模式中都会调用。
如果插件在服务/构建期间按需使用，使用 apply 属性指明它们仅在 'build' 或 'serve' 模式时调用：

export default defineConfig({
  plugins: [
    {
      ...typescript2(),
      apply: 'build'
    }
  ]
})

创建插件

四、构建生产版本

公共基础路径
（1）当访问过程中需要使用动态连接的 url 时，可以使用全局注入的 import.meta.env.BASE_URL 变量，它的值为公共基础路径。
自定义构建
可以通过多种构建配置选项来自定义构建。

五、环境变量和模式

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。

import.meta.env.MODE: {string} 应用运行的模式。
import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。
import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (与 import.meta.env.PROD相反)

从环境目录中的下列文件加载额外的环境变量：

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

环境变量也会通过 import.meta.env 暴露给客户端源码。
为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。

TypeScript 的智能提示
想要在代码中获取以 VITE_ 为前缀的用户自定义环境变量的 TypeScript 智能提示。
在 src 目录下创建一个 env.d.ts 文件，增加 ImportMetaEnv 的定义：

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  // 更多环境变量...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

模式

当执行 vite build 时，它会自动加载 .env.production 中可能存在的环境变量。

一个典型的例子是，你可能希望有一个 “staging” (预发布|预上线) 模式，具有开发的环境变量，生产的行为。
(1)通过传递 --mode 选项标志来覆盖命令使用的默认模式。

vite build --mode staging   # 为staging 模式构建应用

(2)还需要一个 .env.staging 文件：

# .env.staging
NODE_ENV=production
VITE_APP_TITLE=My App (staging)

现在，staging 应用具有类似于生产的行为，但显示的标题与生产环境不同。