Vite入门 基础知识

前言

Vite(法语单词,“快” 的意思)是一种新型的前端构建工具,旨在为现代 Web 项目提供更快、更精简的开发体验。

最初是配合 Vue3.0 一起使用的,后来适配了各种前端项目,目前提供了 Vue、React、Preact 框架模板。

Vite 由两个主要部分组成:

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 [email protected]

使用 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 加载顺序

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

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

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

浏览器对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/, '') 
         } 
     } 
}

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » Vite入门 基础知识

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们