vite静态资源处理

基于vite打包,将会提供如下额外功能

1、css

.module.css为后缀名的CSS文件都被认为是一个 CSS modules 文件

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

2、静态资源处理

(1)导入一个静态资源会返回解析后的 URL：

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

(2)构建完整资源路径

import.meta.url：暴露当前模块的 URL,与new URL结合使用,通过相对路径就能得到被完整解析的静态资源URL

const imgUrl = new URL('./img.png', import.meta.url).href
document.getElementById('hero-img').src = imgUrl

(3)额外参数的导入

显式加载资源为一个 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'

3、JSON

导入整个对象

import json from './example.json'

对一个根字段使用具名导入 —— 有效帮助 treeshaking！

import { field } from './example.json'

3、文件导入添加了glob匹配模式

(1)导入多个文件

const modules = import.meta.glob('./dir/*.js')

编译成

const modules = {
  './dir/foo.js': () => import('./dir/foo.js'),
  './dir/bar.js': () => import('./dir/bar.js')
}

(2)直接引入所有的模块，取消动态导入实现和构建时分离为独立的chunk

const modules = import.meta.globEager('./dir/*.js')

编译成

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
}

(3)以字符串形式导入资源

const modules = import.meta.glob('./dir/*.js', { assert: { type: 'raw' } })

结果为

const modules = {
  './dir/foo.js': '{\n  "msg": "foo"\n}\n',
  './dir/bar.js': '{\n  "msg": "bar"\n}\n'
}