vite-handbook
vitejsrollupbuild
本文主要记录实际应用、库构建模式开发遇到的技巧及解决方案
样式处理
css-module
: 使用xxx.module.css开启@import
: 需要安装postcss-importlightingcss
: parcel2使用rust编写的css处理模块,速度快、体积小css.preprocessorOptions
: 当处理到对应css预处理文件后缀时会通过预处理器选项解析(processorOptions.scss、processorOptions.less
)
静态资源
public
在public文件夹下的资源不经处理可以直接引入使用
ts
资源后缀
ts
模块解析
import.meta
: 包含当前模块的元信息(VITE_ENVIRONMENT_VARIABLE、url、hot等)Module URL
: new URL('things.xxx', import.meta.url)Glob Import
: import.meta.glob('./xx/*.js')返回指定目录下匹配到的所有文件
构建相关
库打包
monorepo开发模式下如果模块未能正确处理,通常需要显式通过optimizeDeps
或者esbuild
配置项处理
ts
组件库打包需要注意剔除作为vendors的纯依赖
ts
插件生态
通常可以通过awesome vite进行查找符合需求的插件,但也存在有一些未记载的插件需要自行查找
vite-imagetools
: 基于sharp
的图片处理库,可以通过设置资源修饰符来进行裁剪vite-plugin-dts
: 根据源码创建typescript类型生命文件vite-plugin-lib-inject-css
: 在库模式打包下插入对应cssvite-plugin-federation
: 模块联邦的vite版本实现可以与webpack构建产物互通