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 一种新型前端构建工具，能够显著提升前端开发体验它主要由两部分组成：

1. 开发环境：一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）
2. 生产环境：一套构建指令，它使用 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/, '') 
         } 
     } 
}