基于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' }