vite-handbook

本文主要记录实际应用、库构建模式开发遇到的技巧及解决方案

样式处理

css-module: 使用xxx.module.css开启
@import: 需要安装postcss-import
lightingcss: parcel2使用rust编写的css处理模块,速度快、体积小
css.preprocessorOptions: 当处理到对应css预处理文件后缀时会通过预处理器选项解析(processorOptions.scss、processorOptions.less)

静态资源

public

在public文件夹下的资源不经处理可以直接引入使用

import xxx from "/images/xxx.jpg"

资源后缀

import shader from './shader.glsl?raw'

import worker from './task.js?worker'

import sharedWorker from './task.js?sharedworker'

import inlineWorker from './task.js?worker&inline'

模块解析

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配置项处理

export default defineConfig({
  optimizeDeps: {
    include: ['some-linked-package']
  }
})

组件库打包需要注意剔除作为vendors的纯依赖

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      name: 'myCunstomLibary',
      fileName: 'myLib',
      format: ['es', 'umd'],
      entry: resolve(__dirname, 'src/components/index.ts')
    },
    rollupOptions: {
      external: ['react', 'react-dom', 'react/jsx-runtime'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM'
        }
      }
    }
  }
})

插件生态

通常可以通过 awesome vite 进行查找符合需求的插件,但也存在有一些未记载的插件需要自行查找

vite-imagetools: 基于sharp的图片处理库,可以通过设置资源修饰符来进行裁剪
vite-plugin-dts: 根据源码创建typescript类型生命文件
vite-plugin-lib-inject-css: 在库模式打包下插入对应css
vite-plugin-federation: 模块联邦的vite版本实现可以与webpack构建产物互通