Vite入门 基础知识
前言
Vite(法语单词,“快” 的意思)是一种新型的前端构建工具,旨在为现代 Web 项目提供更快、更精简的开发体验。
最初是配合 Vue3.0 一起使用的,后来适配了各种前端项目,目前提供了 Vue、React、Preact 框架模板。
Vite 由两个主要部分组成:
- 一个开发服务器,在原生 ES 模块上提供丰富的功能增强,例如极快的热模块替换 (HMR)。
- 将您的代码与Rollup捆绑在一起的构建命令,预配置为输出高度优化的静态资产用于生产。
vite 设计的背景:
我们使用 JavaScript 开发的工具需要很长时间才能启动开发服务器,即使使用 HMR,文件修改后的效果也需要几秒钟才能在浏览器中反映出来,而 vite 就是来解决这些问题的。
特点
- 极速的服务启动,使用原生 ESM 文件,无需打包!
- 轻量快速的热重载,无论应用程序大小如何,都始终极快的模块热重载(HMR)
- 丰富的功能,对 TypeScript、JSX、CSS 等支持开箱即用。
- 优化的构建,可选“多页应用”或“库”模式的预配置 Rollup 构建
- 通用的插件,在开发和构建之间共享 Rollup-superset 插件接口。
- 完全类型化的 API,灵活的 API 和完整 TypeScript 类型。
vite 一种新型前端构建工具,能够显著提升前端开发体验它主要由两部分组成:
- 开发环境:一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)
- 生产环境:一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。
简单说就是: 在开发期,它是利用浏览的 Native ES Modules 特性来导入并且组织代码,生产环境中则是利用 Rollup 作为打包工具。
安装
Vite 需要 Node.js 版本 >= 12.0.0 npm init vite@latest 使用 NPM $ npm init vite-app $ cd $ npm install $ npm run dev
css 预处理
对 css 预处理,Vite 提供了开箱支持,我们只要安装对应的预处理依赖,无需配置,即可进行使用:
# .scss and .sass npm install -D sass # .less npm install -D less # .styl and .stylus npm install -D stylus
原生 es 和普通 js 脚本对比
- es module 默认使用严格模式
- es module 有自己的作用域,使用 var 并不会创建全局变量
- export 和 import 关键字仅可在 es module 中使用
- es module 只会被浏览器解析并执行一次,普通 js 脚本每次引入都会解析执行
- es module 有跨域限制
我们都知道,js 的加载解析默认是会阻塞浏览器的,因此 script 标签一般都放在页面底部;但是我们可以给 script 加上 defer
来让 js 并发加载执行:
JS 加载顺序
我们发现原生 ES 模块和加上 defer 属性的效果是一样的;vite 利用了浏览器对原生 ES 模块的支持,跳过打包(no bundle)过程,将 ES 模块解析编译后直接提供给浏览器;只在必要请求时进行代码转换,这样自然就节省了费时费力的打包时间。
例如我们在请求首页 home.vue 模块时,只有在浏览器请求 home.vue 才将 vue 文件的 template 等解析编译,解析成浏览器可以执行的 js 返回。
浏览器对type="module"
这个新特性的支持情况:
加入 TS
vite
可直接导入.ts
文件,通过<script lang="ts">
使用
<script lang="ts"> import { defineComponent } from 'vue' interface People { age: number; name: string; } export default defineComponent({ setup() { const state = ref<People[]>([]); setTimeout(() => { state.value.push({ age: 18, name: "码云笔记" }); }, 1000); }, }); </script>
ts
版本指定,package.json
{ "devDependencies": { "typescript": "^4.2.0" } }
vite 环境变量
很多情况下我们需要对打包的变量根据环境进行区分,比如请求的域名等,和 vue-cli 一样,vite 也可以区分打包环境,不过它的变量比较特殊;我们知道它并不是通过 webpack 的 DefinePlugin 方式来定义全局变量,因此不能通过 process.env 来获取;而是通过一个特殊的 import.meta.env 对象来暴露,这个对象有一些公共的内在变量:
import.meta.env.MODE
:运行模式,通过--mode
来设置import.meta.env.BASE_URL
:部署的公共基础路径,由 config 文件中的 base 确定import.meta.env.PROD:boolean
值,是否运行在生产环境import.meta.env.DEV:boolean
值,是否运行在开发环境(永远与import.meta.env.PROD
相反)
Vite 支持dotenv
,可以从项目根目录的文件加载额外的环境变量:
.env # 所有环境都加载 .env.test # 测试环境 .env.prod # 正式环境
加载的变量也会通过import.meta.env
暴露给客户端代码,不过为了防止变量泄露,只有VITE_
为前缀的变量才会暴露
这里引入一个模式的概念,默认情况下serve
命令运行开发模式(development),而 build 命令会运行生产模式(production),但是我们可以通过env
文件定义自己需要的模式;可以通过--mode
选项覆盖命令使用的默认模式
比如我们项目在测试和正式环境之外可能还会设置一个预发环境,将一些线上的数据拷贝过来以便模拟真实场景,我们就可以定义一个 dev 模式:
vite build --mode dev
我们可以将用到的环境配置放入.env.dev
文件:
# .env.staging # 自定义打包环境 VITE_DEFINE_ENV = production # public path VITE_PUBLIC_PATH = '/' # 后台基础 api 地址 例如:https://gray-admin-kf.cloud.kemai. cn, 可以设置多个后台 api 接口 VITE_APP_BASE_API = 'https://gray-admin-kf.cloud.kemai. cn' # base path 打包路径 VITE_APP_BASE_PATH = '/'
项目配置
项目根目录创建vite.config.js
,可以对vite
项目进行深度配置。
定义别名
const path = require("path"); module.exports = { alias: { // 路径映射必须以/开头和结尾 "/common/": path.resolve(__dirname, "src/common"), }, };
使用:
import Comp from "/common/table.vue";
代理
export default { proxy: { '/api': { target: 'http://jsonplaceholder.typicode. com', changeOrigin: true, rewrite: path => path.replace(/^\/api/, '') } } }