feat: 将 app-config 注入改为 vite 插件实现

build/constant.ts

@@ -2,5 +2,3 @@
  * The name of the configuration file entered in the production environment
  */
 export const GLOB_CONFIG_FILE_NAME = '_app.config.js'
-
-export const OUTPUT_DIR = 'dist'

build/script/buildConf.ts

-/**
- * Generate additional configuration files when used for packaging. The file can be configured with some global variables, so that it can be changed directly externally without repackaging
- */
-import { GLOB_CONFIG_FILE_NAME, OUTPUT_DIR } from '../constant'
-import fs, { writeFileSync } from 'fs-extra'
-import colors from 'picocolors'
-
-import { getEnvConfig, getRootPath } from '../utils'
-import { getConfigFileName } from '../getConfigFileName'
-
-import pkg from '../../package.json'
-
-interface CreateConfigParams {
-    configName: string
-    config: any
-    configFileName?: string
-}
-
-function createConfig(params: CreateConfigParams) {
-    const { configName, config, configFileName } = params
-    try {
-        const windowConf = `window.${configName}`
-        // Ensure that the variable will not be modified
-        let configStr = `${windowConf}=${JSON.stringify(config)};`
-        configStr += `
-       Object.freeze(${windowConf});
-       Object.defineProperty(window, "${configName}", {
-         configurable: false,
-         writable: false,
-       });
-     `.replace(/\s/g, '')
-
-        fs.mkdirp(getRootPath(OUTPUT_DIR))
-        writeFileSync(getRootPath(`${OUTPUT_DIR}/${configFileName}`), configStr)
-
-        console.log(colors.cyan(`✨ [${pkg.name}]`) + ` - configuration file is build successfully:`)
-        console.log(colors.gray(OUTPUT_DIR + '/' + colors.green(configFileName)) + '\n')
-    } catch (error) {
-        console.log(colors.red('configuration file configuration file failed to package:\n' + error))
-    }
-}
-
-export function runBuildConfig() {
-    const config = getEnvConfig()
-    const configFileName = getConfigFileName(config)
-    createConfig({ config, configName: configFileName, configFileName: GLOB_CONFIG_FILE_NAME })
-}

build/script/postBuild.ts

-// #!/usr/bin/env node
-
-import { runBuildConfig } from './buildConf'
-import colors from 'picocolors'
-
-import pkg from '../../package.json'
-
-export const runBuild = async () => {
-    try {
-        const argvList = process.argv.splice(2)
-
-        // Generate configuration file
-        if (!argvList.includes('disabled-config')) {
-            runBuildConfig()
-        }
-
-        console.log(`✨ ${colors.cyan(`[${pkg.name}]`)}` + ' - build successfully!')
-    } catch (error) {
-        console.log(colors.red('vite build error:\n' + error))
-        process.exit(1)
-    }
-}
-runBuild()

build/vite/plugin/config.ts

+import path from 'node:path'
+import fs from 'node:fs'
+import colors from 'picocolors'
+import type { Plugin, ResolvedConfig } from 'vite'
+import { getEnvConfig, getRootPath } from '../../utils'
+import { getConfigFileName } from '../../getConfigFileName'
+import { GLOB_CONFIG_FILE_NAME } from '../../constant'
+import pkg from '../../../package.json'
+
+export function configBuildPlugin(): Plugin {
+    let outputPath: string
+    let config: ResolvedConfig
+
+    return {
+        name: 'vite:app:config',
+        apply: 'build',
+        enforce: 'post',
+        configResolved(resolvedConfig: ResolvedConfig) {
+            config = resolvedConfig
+            outputPath = path.isAbsolute(config.build.outDir)
+                ? config.build.outDir
+                : path.join(config.root, config.build.outDir)
+        },
+        async closeBundle() {
+            const config = getEnvConfig()
+            const configName = getConfigFileName(config)
+            const windowConf = `window.${configName}`
+
+            // Ensure that the variable will not be modified
+            let configStr = `${windowConf}=${JSON.stringify(config)};`
+            configStr += `
+                Object.freeze(${windowConf});
+                Object.defineProperty(window, "${configName}", {
+                    configurable: false,
+                    writable: false,
+                });
+            `.replace(/\s/g, '')
+
+            fs.writeFileSync(getRootPath(`${outputPath}/${GLOB_CONFIG_FILE_NAME}`), configStr)
+
+            console.log(`${colors.cyan(`✨ [${pkg.name}]`)} configuration file is build successfully:`)
+            console.log(`${colors.gray(`${outputPath}/${colors.green(GLOB_CONFIG_FILE_NAME)}`)}\n`)
+        },
+    } as Plugin
+}

build/vite/plugin/index.ts

-import { PluginOption } from 'vite'
+import type { PluginOption } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import legacy from '@vitejs/plugin-legacy'
@@ -15,6 +15,7 @@ import { configVisualizerConfig } from './visualizer'
 import { configThemePlugin } from './theme'
 import { configSvgIconsPlugin } from './svgSprite'
 import { configAutoImportPlugin } from './autoImport'
+import { configBuildPlugin } from './config'
 
 export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
     const { VITE_USE_MOCK, VITE_LEGACY, VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv
@@ -63,13 +64,16 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
 
     // The following plugins only work in the production environment
     if (isBuild) {
-        // vite-plugin-imagemin
+        // config
+        vitePlugins.push(configBuildPlugin())
 
-        // rollup-plugin-gzip
-        vitePlugins.push(configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE))
+        if (process.env.RUNTIME !== 'electron') {
+            // rollup-plugin-gzip
+            vitePlugins.push(configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE))
 
-        // vite-plugin-pwa
-        vitePlugins.push(configPwaConfig(viteEnv))
+            // vite-plugin-pwa
+            vitePlugins.push(configPwaConfig(viteEnv))
+        }
     }
 
     return vitePlugins

vite.config.ts

-import type { UserConfig, ConfigEnv } from 'vite'
-import pkg from './package.json'
+import { resolve } from 'node:path'
+import type { ConfigEnv, UserConfig } from 'vite'
 import dayjs from 'dayjs'
 import { loadEnv } from 'vite'
-import { resolve } from 'path'
+import pkg from './package.json'
 import { generateModifyVars } from './build/generate/generateModifyVars'
 import { createProxy } from './build/vite/proxy'
 import { wrapperEnv } from './build/utils'
 import { createVitePlugins } from './build/vite/plugin'
-import { OUTPUT_DIR } from './build/constant'
 
 function pathResolve(dir: string) {
     return resolve(process.cwd(), '.', dir)
@@ -43,12 +42,12 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
                 // /@/xxxx => src/xxxx
                 {
                     find: /\/?@\//,
-                    replacement: pathResolve('src') + '/',
+                    replacement: `${pathResolve('src')}/`,
                 },
                 // /#/xxxx => types/xxxx
                 {
                     find: /\/#\//,
-                    replacement: pathResolve('types') + '/',
+                    replacement: `${pathResolve('types')}/`,
                 },
             ],
         },
@@ -66,7 +65,6 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
         build: {
             target: 'es2015',
             cssTarget: 'chrome80',
-            outDir: OUTPUT_DIR,
             // minify: 'terser',
             /**
              * 当 minify=“minify:'terser'” 解开注释
@@ -115,13 +113,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
 
         optimizeDeps: {
             // @iconify/iconify: The dependency is dynamically and virtually loaded by @purge-icons/generated, so it needs to be specified explicitly
-            include: [
-                '@vue/runtime-core',
-                '@vue/shared',
-                '@iconify/iconify',
-                'ant-design-vue/es/locale/zh_CN',
-                'ant-design-vue/es/locale/en_US',
-            ],
+            include: ['@iconify/iconify', 'ant-design-vue/es/locale/zh_CN', 'ant-design-vue/es/locale/en_US'],
         },
     }
 }