一文了解vite基础

冥想侃前端
1,053 阅读6分钟

一、概述

vite是一种构建工具，旨在为现代 Web 项目提供更快、更精简的开发体验。它由两个主要部分组成：

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 <project-name>
$ cd <project-name>
$ 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 加载顺序

3.png

我们发现原生 ES 模块和加上 defer 属性的效果是一样的；vite 利用了浏览器对原生 ES 模块的支持，跳过打包（no bundle）过程，将 ES 模块解析编译后直接提供给浏览器；只在必要请求时进行代码转换，这样自然就节省了费时费力的打包时间。

例如我们在请求首页 home.vue 模块时，只有在浏览器请求 home.vue 才将 vue 文件的 template 等解析编译，解析成浏览器可以执行的 js 返回。

浏览器对type="module"这个新特性的支持情况：

4.png

六、加入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 文件：

加载的变量也会通过 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/, '') 
         } 
     } 
}

九、❤️感谢阅读

  1. 如果本文对你有帮助，不要吝啬你的赞哟，你的「赞」是我前行的动力。
  2. 欢迎关注公众号  【冥想侃前端】 ，也可扫码加我微信备注  【加群】  拉你进交流分享群，一起学习进步。

企业微信截图_16281521162245.png

avatar
文章
阅读
粉丝