From e2eaa643d59851897e873b0a752575a286873484 Mon Sep 17 00:00:00 2001 From: CharleeWa <18888351756@163.com> Date: Thu, 8 Feb 2024 15:14:51 +0800 Subject: [PATCH] refactor: Modularize Vite plugin management --- build/vite/index.ts | 97 ++++++++++++++++++++++-------------- build/vite/vconsole.ts | 44 +++++++++++++++++ vite.config.ts | 109 ++++++++--------------------------------- 3 files changed, 124 insertions(+), 126 deletions(-) create mode 100644 build/vite/vconsole.ts diff --git a/build/vite/index.ts b/build/vite/index.ts index a766bdc..a4fa506 100644 --- a/build/vite/index.ts +++ b/build/vite/index.ts @@ -1,45 +1,66 @@ -import path from 'node:path' -import { viteVConsole } from 'vite-plugin-vconsole' +import vue from '@vitejs/plugin-vue' +import legacy from '@vitejs/plugin-legacy' +import vueJsx from '@vitejs/plugin-vue-jsx' +import { visualizer } from 'rollup-plugin-visualizer' +import Components from 'unplugin-vue-components/vite' +import AutoImport from 'unplugin-auto-import/vite' +import VueRouter from 'unplugin-vue-router/vite' +import { VueRouterAutoImports } from 'unplugin-vue-router' +import { VantResolver } from 'unplugin-vue-components/resolvers' +import { unheadVueComposablesImports } from '@unhead/vue' +import VueDevTools from 'vite-plugin-vue-devtools' +import mockDevServerPlugin from 'vite-plugin-mock-dev-server' +import UnoCSS from 'unocss/vite' +import { createViteVConsole } from './vconsole' -// https://github.com/vadxq/vite-plugin-vconsole/issues/21 +export function createVitePlugins() { + return [ + VueRouter({ + routesFolder: 'src/views', + dts: 'src/typed-router.d.ts', + }), -export function createViteVConsole(command: 'serve' | 'build') { - return viteVConsole({ - entry: [path.resolve('src/main.ts')], - enabled: command === 'serve', - config: { - maxLogNumber: 1000, - theme: 'light', - }, - dynamicConfig: { - theme: `document.documentElement.classList.contains('dark') ? 'dark' : 'light'`, - }, - eventListener: ` - const targetElement = document.querySelector('html'); // 择要监听的元素 - const observerOptions = { - attributes: true, // 监听属性变化 - attributeFilter: ['class'] // 只监听class属性变化 - }; + vue(), + vueJsx(), + visualizer(), + UnoCSS(), + mockDevServerPlugin(), - // 定义回调函数来处理观察到的变化 - function handleAttributeChange(mutationsList) { - for(let mutation of mutationsList) { - if (mutation.type === 'attributes' && mutation.attributeName === 'class') { - if (window && window.vConsole) { - window.vConsole.dynamicChange.value = new Date().getTime(); - } - } - } - } + legacy({ + targets: ['defaults', 'not IE 11'], + }), - // 创建观察者实例并传入回调函数 - const observer = new MutationObserver(handleAttributeChange); + Components({ + extensions: ['vue'], + resolvers: [VantResolver()], + include: [/\.vue$/, /\.vue\?vue/], + dts: 'src/components.d.ts', + }), - // 开始观察目标元素 - observer.observe(targetElement, observerOptions); + AutoImport({ + include: [ + /\.[tj]sx?$/, + /\.vue$/, + /\.vue\?vue/, + ], + imports: [ + 'vue', + 'vitest', + '@vueuse/core', + VueRouterAutoImports, + { + 'vue-router/auto': ['useLink'], + }, + unheadVueComposablesImports, + ], + dts: 'src/auto-imports.d.ts', + dirs: [ + 'src/composables', + ], + }), - // 当不再需要观察时，停止观察 - // observer.disconnect(); - `, - }) + createViteVConsole(), + + VueDevTools(), + ] } diff --git a/build/vite/vconsole.ts b/build/vite/vconsole.ts new file mode 100644 index 0000000..541270e --- /dev/null +++ b/build/vite/vconsole.ts @@ -0,0 +1,44 @@ +import path from 'node:path' +import { viteVConsole } from 'vite-plugin-vconsole' + +export function createViteVConsole() { + return viteVConsole({ + entry: [path.resolve('src/main.ts')], + enabled: false, + config: { + maxLogNumber: 1000, + theme: 'light', + }, + // https://github.com/vadxq/vite-plugin-vconsole/issues/21 + dynamicConfig: { + theme: `document.documentElement.classList.contains('dark') ? 'dark' : 'light'`, + }, + eventListener: ` + const targetElement = document.querySelector('html'); // 择要监听的元素 + const observerOptions = { + attributes: true, // 监听属性变化 + attributeFilter: ['class'] // 只监听class属性变化 + }; + + // 定义回调函数来处理观察到的变化 + function handleAttributeChange(mutationsList) { + for(let mutation of mutationsList) { + if (mutation.type === 'attributes' && mutation.attributeName === 'class') { + if (window && window.vConsole) { + window.vConsole.dynamicChange.value = new Date().getTime(); + } + } + } + } + + // 创建观察者实例并传入回调函数 + const observer = new MutationObserver(handleAttributeChange); + + // 开始观察目标元素 + observer.observe(targetElement, observerOptions); + + // 当不再需要观察时，停止观察 + // observer.disconnect(); + `, + }) +} diff --git a/vite.config.ts b/vite.config.ts index 57065d1..cfdecd9 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -2,84 +2,37 @@ import path from 'node:path' import process from 'node:process' import { loadEnv } from 'vite' import type { ConfigEnv, UserConfig } from 'vite' - -import { visualizer } from 'rollup-plugin-visualizer' -import Components from 'unplugin-vue-components/vite' -import AutoImport from 'unplugin-auto-import/vite' -import VueRouter from 'unplugin-vue-router/vite' -import { VueRouterAutoImports } from 'unplugin-vue-router' -import { VantResolver } from 'unplugin-vue-components/resolvers' -import { unheadVueComposablesImports } from '@unhead/vue' - -import vue from '@vitejs/plugin-vue' -import legacy from '@vitejs/plugin-legacy' -import vueJsx from '@vitejs/plugin-vue-jsx' - import viewport from 'postcss-mobile-forever' import autoprefixer from 'autoprefixer' +import { createVitePlugins } from './build/vite' -import VueDevTools from 'vite-plugin-vue-devtools' -import mockDevServerPlugin from 'vite-plugin-mock-dev-server' - -import UnoCSS from 'unocss/vite' -import { createViteVConsole } from './build/vite' - -export default ({ command, mode }: ConfigEnv): UserConfig => { +export default ({ mode }: ConfigEnv): UserConfig => { const root = process.cwd() const env = loadEnv(mode, root) return { base: env.VITE_APP_PUBLIC_PATH, + plugins: createVitePlugins(), - plugins: [ - VueRouter({ - routesFolder: 'src/views', - dts: 'src/typed-router.d.ts', - }), + server: { + host: true, + port: 3000, + proxy: { + '/api': { + target: '', + ws: false, + changeOrigin: true, + }, + }, + }, - vue(), - vueJsx(), - visualizer(), - UnoCSS(), - mockDevServerPlugin(), - - legacy({ - targets: ['defaults', 'not IE 11'], - }), - - Components({ - extensions: ['vue'], - resolvers: [VantResolver()], - include: [/\.vue$/, /\.vue\?vue/], - dts: 'src/components.d.ts', - }), - - AutoImport({ - include: [ - /\.[tj]sx?$/, - /\.vue$/, - /\.vue\?vue/, - ], - imports: [ - 'vue', - 'vitest', - '@vueuse/core', - VueRouterAutoImports, - { - 'vue-router/auto': ['useLink'], - }, - unheadVueComposablesImports, - ], - dts: 'src/auto-imports.d.ts', - dirs: [ - 'src/composables', - ], - }), - - createViteVConsole(command), - - VueDevTools(), - ], + resolve: { + alias: { + '~@': path.join(__dirname, './src'), + '@': path.join(__dirname, './src'), + '~': path.join(__dirname, './src/assets'), + }, + }, css: { postcss: { @@ -98,25 +51,5 @@ export default ({ command, mode }: ConfigEnv): UserConfig => { cssCodeSplit: false, chunkSizeWarningLimit: 2048, }, - - resolve: { - alias: { - '~@': path.join(__dirname, './src'), - '@': path.join(__dirname, './src'), - '~': path.join(__dirname, './src/assets'), - }, - }, - - server: { - host: true, - port: 3000, - proxy: { - '/api': { - target: '', - ws: false, - changeOrigin: true, - }, - }, - }, } }