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