vite 自带常用功能

vite 自带的功能:

1. vite 具备 NPM 依赖解析 和 预构建

依赖： 是强缓存依赖，通过HTTP头来缓存请求得到的依赖 预构建： 用来将 CommonJS/UMD 转换为 ESM 格式, 靠 esbuild 来执行

2. 模块热替换

利用的是 原生的 ESM 的 HMR API

3. TS

vite 自带ts转义功能， 并只是转义， 不检查类型，也是利用 esbuild 来将 TS --> JS 的

4. JSX

vite 也自带 TSX ---> SJ的转义功能， 也是利用 esbuild 来完成的

5. CSS

vite 在导入 .css 文件将会把内容插入到 <style> 标签中， 同时也带有 HMR 支持。 并且会自动变基。

变基的解释： 所有 CSS url() 引用，即使导入的文件在不同的目录中，也总是自动变基，以确保正确性。

因为vite自带有postcss-import功能， 所以， 也支持 CSS 的 @import内联

当碰到以 .module.css 后缀结束的文件时， 会把该文件当成是一个 CSS Module， 进行模块处理, 并会得到一个模块对象。

代码如下：

/* example.module.css */ 
.red { color: red; }

import classes from './example.module.css' 
document.getElementById('foo').className = classes.red

6. CSS 预处理器的功能

vite的目标直接就是现代浏览器， 所以， 不管你的项目中 写了什么样的 css 预处理代码， 比如： .scss, .sass, .less, .styl 和 .stylus 等， vite 都已内置了支持功能， 无需配置， 可直接使用， 只需给项目安装一下对应的预处理模块依赖即可：

# .scss and .sass 
npm add -D sass 

# .less 
npm add -D less 

# .styl and .stylus 
npm add -D stylus

然后再给标签说一声即可

<style lang="sass">

7. 防止 导入的 CSS 注入到页面？

import styles from './foo.css' // 样式将会注入页面 
import otherStyles from './bar.css?inline' // 样式不会注入页面

8. vite 对静态资源的 处理

当我们将图片当成静态资源进行导入的时候， vite 会自动将该导入解析为一个url地址并返回， 我们的随意当成一个地址来进行使用

import imgUrl from './img.png' 
document.getElementById('hero-img').src = imgUrl

我们也可以通过加载是地址？后的query， 来控制器返回结果

// 显式加载资源为一个 URL 
import assetAsURL from './asset.js?url'

// 以字符串形式加载资源 
import assetAsString from './shader.glsl?raw'

// 加载为 Web Worker 
import Worker from './worker.js?worker'

// 在构建时 Web Worker 内联为 base64 字符串 
import InlineWorker from './worker.js?worker&inline'

9. 对 JSON 的支持

可以将 整个 JSON 当成模块对象来进行导入

// 导入整个对象 
import json from './example.json' 

// 对一个根字段使用具名导入 —— 有效帮助 treeshaking！ 
import { field } from './example.json'

10. 支持全局 多个 模块导入

// 一次导入多个 js 模块
const modules = import.meta.glob('./dir/*.js')

// 相当于下方的代码
// vite 生成的代码 
const modules = { 
    './dir/foo.js': () => import('./dir/foo.js'), 
    './dir/bar.js': () => import('./dir/bar.js') 
}

// 那么接下来， 我们就可以遍历 `modules` 对象的 key 值来访问相应的模块：
for (const path in modules) { 
    modules[path]().then((mod) => { 
        console.log(path, mod) 
    }) 
}

以上代码输入 多文件模块的 动态导入

如果不想动态导入， 想直接导入那么多模块， 你可以传入 { eager: true } 作为第二个参数, 代码如下：

const modules = import.meta.glob('./dir/*.js', { eager: true })

// 以上会被转译为下面的样子：
// vite 生成的代码 
import * as __glob__0_0 from './dir/foo.js' 
import * as __glob__0_1 from './dir/bar.js' 
const modules = { 
    './dir/foo.js': __glob__0_0, 
    './dir/bar.js': __glob__0_1 
}

11. import.meta.glob(参数1 ， 参数2) 函数的 用法

• 匹配多个 (参数1 为 数组的时候)

const modules = import.meta.glob(['./dir/*.js', './another/*.js'])

• 反向匹配

const modules = import.meta.glob(['./dir/*.js', '!**/bar.js'])

• 只导入某一部分

const modules = import.meta.glob('./dir/*.js', { import: 'setup' })
// vite 生成的代码 
const modules = { 
    './dir/foo.js': () => import('./dir/foo.js').then((m) => m.setup), 
    './dir/bar.js': () => import('./dir/bar.js').then((m) => m.setup) 
}

• 自定义查询(或参数)导入

const modules = import.meta.glob('./dir/*.js', { 
    query: { foo: 'bar', bar: true } 
})

// vite 生成的代码 
const modules = { 
    './dir/foo.js': () => import('./dir/foo.js?foo=bar&bar=true').then((m) => m.setup), 
    './dir/bar.js': () => import('./dir/bar.js?foo=bar&bar=true').then((m) => m.setup) 
}

特别注意，所有 import.meta.glob 的参数都必须以字面量传入。不可以 在其中使用变量或表达式。

如要使用变量， 可利用 vite 提供的动态导入功能

12. vite 之 动态导入

const module = await import(`./dir/${file}.js`)

注意： 该变量 file 只能支持 一层深 的文件名， 如果 file 是 foo/bar，导入将会失败

13. vite 全局环境

方式一： 直接在配置文件中增加全局环境

// vite.config.js 
...
import { defineConfig } from 'vite'
export default defineConfig({

  define: {
    __TestName__: `"zhangsan"`
  },
 ......
})

// 在某一个组件中使用
<script setup>
    console.log(__TestName)
</script>

方式二： 在项目中增加 .env 文件， vite.config.js 文件， 会自动加载该文件中的全局变量

// .env

// 该文件中的全局环境 必须以 VITE_ 开头
VITE_NAME = lisi
VVV_AGE=213 

// 在某一个组件中使用
console.log(import.meta.env)
// 会发现该打印中 只有 VITE_NAME, 没有 VVV_AGE

备注：

.env # 所有情况下都会加载

.env.local # 所有情况下都会加载，但会被 git 忽略

.env.[mode] # 只在指定模式下加载

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