als-web/build/plugins.ts

import { PluginOption } from 'vite'
import { VitePWA } from 'vite-plugin-pwa'
import { visualizer } from 'rollup-plugin-visualizer'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import eslintPlugin from 'vite-plugin-eslint'
import simpleHtmlPlugin from 'vite-plugin-simple-html'
import vueSetupExtend from 'unplugin-vue-setup-extend-plus/vite'
import createAutoImport from '../vite/plugins/auto-import'
import createComponents from '../vite/plugins/components'
import prismjsPlugin from '../vite/plugins/prismjs-plugin'
import createCompression from '../vite/plugins/compression'
import createIcons from '../vite/plugins/icons'
import createSvgIconsPlugin from '../vite/plugins/svg-icon'
/**
 * 创建 vite 插件
 * @param viteEnv
 */
export const createVitePlugins = (viteEnv: ViteEnv, isBuild = false): (PluginOption | PluginOption[])[] => {
  const { VITE_GLOB_APP_TITLE, VITE_REPORT, VITE_PWA } = viteEnv
  return [
    vue(),
    // vue 可以使用 jsx/tsx 语法
    vueJsx(),
    // esLint 报错信息显示在浏览器界面上
    eslintPlugin(),
    // name 可以写在 script 标签上
    vueSetupExtend({}),
    // vue api
    createAutoImport(),
    createComponents(),
    createIcons(),
    createSvgIconsPlugin(isBuild),
    // 创建打包压缩配置
    createCompression(viteEnv),
    // 注入变量到 html 文件
    simpleHtmlPlugin({
      minify: true,
      inject: {
        data: { title: VITE_GLOB_APP_TITLE }
      }
    }),
    // 代码高亮
    prismjsPlugin(),
    // vitePWA
    VITE_PWA && createVitePwa(viteEnv),
    // 是否生成包预览，分析依赖包大小做优化处理
    VITE_REPORT && (visualizer({ filename: 'stats.html', gzipSize: true, brotliSize: true }) as PluginOption)
  ]
}

/**
 * @description VitePwa
 * @param viteEnv
 */
const createVitePwa = (viteEnv: ViteEnv): PluginOption | PluginOption[] => {
  const { VITE_GLOB_APP_TITLE } = viteEnv
  return VitePWA({
    registerType: 'autoUpdate',
    manifest: {
      name: VITE_GLOB_APP_TITLE,
      short_name: VITE_GLOB_APP_TITLE,
      theme_color: '#ffffff',
      icons: [
        {
          src: '/log.png',
          sizes: '192x192',
          type: 'image/png'
        },
        {
          src: '/log.png',
          sizes: '512x512',
          type: 'image/png'
        },
        {
          src: '/log.png',
          sizes: '512x512',
          type: 'image/png',
          purpose: 'any maskable'
        }
      ]
    }
  })
}