vite基本知识 - 技术栈

vite的了解与使用

基本知识

开发时，并不对代码打包，而实直接采用ESM的方式运行项目一

项目部署时，再对项目进行打包

核心原理

其核心原理是利用浏览器现在已经支持ES6的import，碰见import就会发送一个HTTP请求去加载文件

使用vite运行项目时，首先会用esbuild进行预构建，将所有模块转换为 ESM，不需要对我们整个项目进行编译打包，Vite 启动一个服务器,在浏览器需要加载某个模块时，它会拦截这些请求，根据请求进行按需编译，（服务器拦截对 *.vue 文件的请求，即时编译它们，然后将它们作为 JavaScript 发回）然后返回给浏览器。

特点

快速的冷启动：采用No Bundle和esbuild预构建，速度远快于Webpack,Esbuild 使用 Go 语言编写，JS 本质上是单线程语言，GO 语言天生具有多线程的优势

高效的热更新：基于ESM实现，同时利用HTTP头来加速整个页面的重新加载，增加缓存策略：源码模块使用协商缓存，依赖模块使用强缓存

基于 Rollup 打包：生产环境下使用Rollup进行打包（目前rollup比较成熟，esbuild虽然快，但有些功能还在开发中）

简单上手体验

Vite 要求 Node.js 版本 >= 12.0.0

快速构建一个项目

 npm init vite@latest

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

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

pnpm来初始化一个项目

pnpm create vite
然后按照提示完成项目的初始化：
输入项目名称
选择框架类型
选择语言类型

下面其实就和上面一样，只是一开始就将项目名称给定好了

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

构建命令

vite：启动开发服务器

vite build：为生产环境构建产物

vite preview：本地预览生产构建产物

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

插件

和webpack类似， npm i 之后，在config文件中引入并使用

eg：legacy是一个语法转换的插件

import legacy from "@vitejs/plugin-legacy";
export default defineConfig({
  plugins: [
    legacy({
      targets: ["defaults", "IE 11"],
    }),
  ],
});

环境变量与模式

.env文件

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

import.meta.env 对象上暴露环境变量

只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码

在 .env.development定义一个 VITE_APP_TITLE='开发环境的标题'，在 .env.test中赋值 VITE_APP_TITLE='测试环境的标题'，在 .env.production中赋值 VITE_APP_TITLE='生产环境的标题'

VITE_APP_TITLE='开发环境的标题'

在vue文件中通过import.meta.env 就可以使用了：

const title = import.meta.env.VITE_APP_TITLE