refactor: vite插件合并到单个文件中维护

This commit is contained in:
Hooray Hu 2024-07-08 16:40:54 +08:00
parent 9a7331f32f
commit 7457fcc23e
17 changed files with 202 additions and 275 deletions

202
vite/plugins.ts Normal file
View File

@ -0,0 +1,202 @@
import path from 'node:path'
import process from 'node:process'
import fs from 'node:fs'
import dayjs from 'dayjs'
import type { PluginOption } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueLegacy from '@vitejs/plugin-legacy'
import VueDevTools from 'vite-plugin-vue-devtools'
import autoImport from 'unplugin-auto-import/vite'
import components from 'unplugin-vue-components/vite'
import Unocss from 'unocss/vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { vitePluginFakeServer } from 'vite-plugin-fake-server'
import Layouts from 'vite-plugin-vue-meta-layouts'
import Pages from 'vite-plugin-pages'
import { compression } from 'vite-plugin-compression2'
import archiver from 'archiver'
import TurboConsole from 'unplugin-turbo-console/vite'
import banner from 'vite-plugin-banner'
import boxen from 'boxen'
import picocolors from 'picocolors'
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}
export default function createVitePlugins(viteEnv, isBuild = false) {
const vitePlugins: (PluginOption | PluginOption[])[] = [
vue(),
vueJsx(),
vueLegacy({
renderLegacyChunks: false,
modernPolyfills: [
'es.array.at',
'es.array.find-last',
],
}),
// https://github.com/vuejs/devtools-next
viteEnv.VITE_OPEN_DEVTOOLS === 'true' && VueDevTools(),
// https://github.com/unplugin/unplugin-auto-import
autoImport({
imports: [
'vue',
'vue-router',
'pinia',
],
dts: './src/types/auto-imports.d.ts',
dirs: [
'./src/utils/composables/**',
],
}),
// https://github.com/unplugin/unplugin-vue-components
components({
dirs: [
'src/components',
'src/layouts/ui-kit',
],
include: [/\.vue$/, /\.vue\?vue/, /\.tsx$/],
dts: './src/types/components.d.ts',
}),
Unocss(),
// https://github.com/vbenjs/vite-plugin-svg-icons
createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/')],
symbolId: 'icon-[dir]-[name]',
svgoOptions: isBuild,
}),
// https://github.com/condorheroblog/vite-plugin-fake-server
vitePluginFakeServer({
logger: !isBuild,
include: 'src/mock',
infixName: false,
enableProd: isBuild && viteEnv.VITE_BUILD_MOCK === 'true',
}),
// https://github.com/dishait/vite-plugin-vue-meta-layouts
Layouts({
defaultLayout: 'index',
}),
// https://github.com/hannoeru/vite-plugin-pages
Pages({
dirs: 'src/views',
exclude: [
'**/components/**/*.vue',
],
}),
// https://github.com/nonzzz/vite-plugin-compression
isBuild && viteEnv.VITE_BUILD_COMPRESS.split(',').includes('gzip') && compression(),
isBuild && viteEnv.VITE_BUILD_COMPRESS.split(',').includes('brotli') && compression({
exclude: [/\.(br)$/, /\.(gz)$/],
algorithm: 'brotliCompress',
}),
(function () {
let outDir: string
return {
name: 'vite-plugin-archiver',
apply: 'build',
configResolved(resolvedConfig) {
outDir = resolvedConfig.build.outDir
},
async closeBundle() {
if (['zip', 'tar'].includes(viteEnv.VITE_BUILD_ARCHIVE)) {
await sleep(1000)
const archive = archiver(viteEnv.VITE_BUILD_ARCHIVE, {
...(viteEnv.VITE_BUILD_ARCHIVE === 'zip' && { zlib: { level: 9 } }),
...(viteEnv.VITE_BUILD_ARCHIVE === 'tar' && { gzip: true, gzipOptions: { level: 9 } }),
})
const output = fs.createWriteStream(`${outDir}.${dayjs().format('YYYY-MM-DD-HH-mm-ss')}.${viteEnv.VITE_BUILD_ARCHIVE === 'zip' ? 'zip' : 'tar.gz'}`)
archive.pipe(output)
archive.directory(outDir, false)
archive.finalize()
}
},
}
})(),
// https://github.com/unplugin/unplugin-turbo-console
TurboConsole(),
// https://github.com/chengpeiquan/vite-plugin-banner
banner(`
/**
* Fantastic-admin
* Powered by Fantastic-admin
* https://fantastic-admin.github.io
*/
`),
{
name: 'vite-plugin-debug-plugin',
transform: (code, id) => {
if (/src\/main.ts$/.test(id)) {
if (viteEnv.VITE_APP_DEBUG_TOOL === 'eruda') {
code = code.concat(`
import eruda from 'eruda'
eruda.init()
`)
}
else if (viteEnv.VITE_APP_DEBUG_TOOL === 'vconsole') {
code = code.concat(`
import VConsole from 'vconsole'
new VConsole()
`)
}
return {
code,
map: null,
}
}
},
},
{
name: 'vite-plugin-disable-devtool',
transform: (code, id) => {
if (/src\/main.ts$/.test(id)) {
if (viteEnv.VITE_APP_DISABLE_DEVTOOL === 'true') {
code = code.concat(`
import DisableDevtool from 'disable-devtool'
DisableDevtool()
`)
}
return {
code,
map: null,
}
}
},
},
{
name: 'vite-plugin-terminal-info',
apply: 'serve',
async buildStart() {
const { bold, green, cyan, bgGreen, underline } = picocolors
// eslint-disable-next-line no-console
console.log(
boxen(
`${bold(green(`${bgGreen('Fantastic-admin')} 驱动`))}\n\n${underline('https://fantastic-admin.github.io')}\n\n当前使用${cyan('基础版')}`,
{
padding: 1,
margin: 1,
borderStyle: 'double',
textAlignment: 'center',
},
),
)
},
},
]
return vitePlugins
}

View File

@ -1,25 +0,0 @@
import boxen from 'boxen'
import picocolors from 'picocolors'
import type { Plugin } from 'vite'
export default function appInfo(): Plugin {
return {
name: 'appInfo',
apply: 'serve',
async buildStart() {
const { bold, green, cyan, bgGreen, underline } = picocolors
// eslint-disable-next-line no-console
console.log(
boxen(
`${bold(green(`${bgGreen('Fantastic-admin')} 驱动`))}\n\n${underline('https://fantastic-admin.github.io')}\n\n当前使用${cyan('基础版')}`,
{
padding: 1,
margin: 1,
borderStyle: 'double',
textAlignment: 'center',
},
),
)
},
}
}

View File

@ -1,33 +0,0 @@
import fs from 'node:fs'
import dayjs from 'dayjs'
import archiver from 'archiver'
import type { Plugin } from 'vite'
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}
export default function createArchiver(env): Plugin {
const { VITE_BUILD_ARCHIVE } = env
let outDir: string
return {
name: 'vite-plugin-archiver',
apply: 'build',
configResolved(resolvedConfig) {
outDir = resolvedConfig.build.outDir
},
async closeBundle() {
if (['zip', 'tar'].includes(VITE_BUILD_ARCHIVE)) {
await sleep(1000)
const archive = archiver(VITE_BUILD_ARCHIVE, {
...(VITE_BUILD_ARCHIVE === 'zip' && { zlib: { level: 9 } }),
...(VITE_BUILD_ARCHIVE === 'tar' && { gzip: true, gzipOptions: { level: 9 } }),
})
const output = fs.createWriteStream(`${outDir}.${dayjs().format('YYYY-MM-DD-HH-mm-ss')}.${VITE_BUILD_ARCHIVE === 'zip' ? 'zip' : 'tar.gz'}`)
archive.pipe(output)
archive.directory(outDir, false)
archive.finalize()
}
},
}
}

View File

@ -1,15 +0,0 @@
import autoImport from 'unplugin-auto-import/vite'
export default function createAutoImport() {
return autoImport({
imports: [
'vue',
'vue-router',
'pinia',
],
dts: './src/types/auto-imports.d.ts',
dirs: [
'./src/utils/composables/**',
],
})
}

View File

@ -1,11 +0,0 @@
import banner from 'vite-plugin-banner'
export default function createBanner() {
return banner(`
/**
* Fantastic-admin
* Powered by Fantastic-admin
* https://fantastic-admin.github.io
*/
`)
}

View File

@ -1,12 +0,0 @@
import components from 'unplugin-vue-components/vite'
export default function createComponents() {
return components({
dirs: [
'src/components',
'src/layouts/ui-kit',
],
include: [/\.vue$/, /\.vue\?vue/, /\.tsx$/],
dts: './src/types/components.d.ts',
})
}

View File

@ -1,24 +0,0 @@
import { compression } from 'vite-plugin-compression2'
import type { PluginOption } from 'vite'
export default function createCompression(env, isBuild) {
const plugin: (PluginOption | PluginOption[])[] = []
if (isBuild) {
const { VITE_BUILD_COMPRESS } = env
const compressList = VITE_BUILD_COMPRESS.split(',')
if (compressList.includes('gzip')) {
plugin.push(
compression(),
)
}
if (compressList.includes('brotli')) {
plugin.push(
compression({
exclude: [/\.(br)$/, /\.(gz)$/],
algorithm: 'brotliCompress',
}),
)
}
}
return plugin
}

View File

@ -1,5 +0,0 @@
import TurboConsole from 'unplugin-turbo-console/vite'
export default function createConsole() {
return TurboConsole()
}

View File

@ -1,28 +0,0 @@
import type { Plugin } from 'vite'
export default function createDebugTool(env): Plugin {
const { VITE_APP_DEBUG_TOOL } = env
return {
name: 'debug-tool',
transform: (code, id) => {
if (/src\/main.ts$/.test(id)) {
if (VITE_APP_DEBUG_TOOL === 'eruda') {
code = code.concat(`
import eruda from 'eruda'
eruda.init()
`)
}
else if (VITE_APP_DEBUG_TOOL === 'vconsole') {
code = code.concat(`
import VConsole from 'vconsole'
new VConsole()
`)
}
return {
code,
map: null,
}
}
},
}
}

View File

@ -1,6 +0,0 @@
import VueDevTools from 'vite-plugin-vue-devtools'
export default function createDevtools(env) {
const { VITE_OPEN_DEVTOOLS } = env
return VITE_OPEN_DEVTOOLS === 'true' && VueDevTools()
}

View File

@ -1,22 +0,0 @@
import type { Plugin } from 'vite'
export default function createDisableDevtool(env): Plugin {
const { VITE_APP_DISABLE_DEVTOOL } = env
return {
name: 'disable-devtool',
transform: (code, id) => {
if (/src\/main.ts$/.test(id)) {
if (VITE_APP_DISABLE_DEVTOOL === 'true') {
code = code.concat(`
import DisableDevtool from 'disable-devtool'
DisableDevtool()
`)
}
return {
code,
map: null,
}
}
},
}
}

View File

@ -1,50 +0,0 @@
import type { PluginOption } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueLegacy from '@vitejs/plugin-legacy'
import appInfo from './app-info'
import createDevtools from './devtools'
import createAutoImport from './auto-import'
import createComponents from './components'
import createUnocss from './unocss'
import createSvgIcon from './svg-icon'
import createMock from './mock'
import createLayouts from './layouts'
import createPages from './pages'
import createCompression from './compression'
import createArchiver from './archiver'
import createConsole from './console'
import createBanner from './banner'
import createDebugTool from './debug-tool'
import createDisableDevtool from './disable-devtool'
export default function createVitePlugins(viteEnv, isBuild = false) {
const vitePlugins: (PluginOption | PluginOption[])[] = [
appInfo(),
vue(),
vueJsx(),
vueLegacy({
renderLegacyChunks: false,
modernPolyfills: [
'es.array.at',
'es.array.find-last',
],
}),
]
vitePlugins.push(createDevtools(viteEnv))
vitePlugins.push(createAutoImport())
vitePlugins.push(createComponents())
vitePlugins.push(createUnocss())
vitePlugins.push(createSvgIcon(isBuild))
vitePlugins.push(createMock(viteEnv, isBuild))
vitePlugins.push(createLayouts())
vitePlugins.push(createPages())
vitePlugins.push(...createCompression(viteEnv, isBuild))
vitePlugins.push(createArchiver(viteEnv))
vitePlugins.push(createConsole())
vitePlugins.push(createBanner())
vitePlugins.push(createDebugTool(viteEnv))
vitePlugins.push(createDisableDevtool(viteEnv))
return vitePlugins
}

View File

@ -1,7 +0,0 @@
import Layouts from 'vite-plugin-vue-meta-layouts'
export default function createLayouts() {
return Layouts({
defaultLayout: 'index',
})
}

View File

@ -1,11 +0,0 @@
import { vitePluginFakeServer } from 'vite-plugin-fake-server'
export default function createMock(env, isBuild) {
const { VITE_BUILD_MOCK } = env
return vitePluginFakeServer({
logger: !isBuild,
include: 'src/mock',
infixName: false,
enableProd: isBuild && VITE_BUILD_MOCK === 'true',
})
}

View File

@ -1,10 +0,0 @@
import Pages from 'vite-plugin-pages'
export default function createPages() {
return Pages({
dirs: 'src/views',
exclude: [
'**/components/**/*.vue',
],
})
}

View File

@ -1,11 +0,0 @@
import path from 'node:path'
import process from 'node:process'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default function createSvgIcon(isBuild) {
return createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/')],
symbolId: 'icon-[dir]-[name]',
svgoOptions: isBuild,
})
}

View File

@ -1,5 +0,0 @@
import Unocss from 'unocss/vite'
export default function createUnocss() {
return Unocss()
}