Vite 学习笔记（二）

vite 配置文件处理细节

// vite.config.js
export default {
    optimizeDeps: {
        exclude: []
    }
}

编辑 vite 配置文件时，有的编辑器默认会有语法提示，如果没有，则可以：

1. 找相关的插件

2. 通过引入 defineConfig 方法

   // vite.config.js
   import { defineConfig } from 'vite'
   
   export default defineConfig({
       optimizeDeps: {
           exclude: []
       }
   })
   

   由于 vite 是由 TypeScript 编写的，defineConfig 的参数类型是设定好的，只要编辑器支持 TypeScript，则编写配置的时候也会有语法提示。

3. 通过 jsdoc 指定类型从而获得语法提示

   // vite.config.js
   /** @type import('vite').UserConfig */
   const viteConfig = {
       optimizeDeps: {
           exclude: []
       }
   }
   

环境配置

使用 webpack 的时候，有时要在不同的文件中分别写不同环境的配置：

1. webpack.dev.config
2. webpack.prod.config
3. webpack.base.config

而在 vite 的配置文件里可以这样写

// vite.config.js
import { defineConfig } from 'vite'
import ViteBaseConfig from './vite.base.config.js'
import ViteDevConfig from './vite.dev.config.js'
import ViteProdConfig from './vite.prod.config.js'

// 策略模式
const envResolver = {
    "build": () => Object.assign({}, viteBaseConfig, viteProdConfig),
    "serve": () => Object.assign({}, viteBaseConfig, viteDevConfig)
}

export default defineConfig(({ command }) => {
    return envResolver[command]()
})