refactor(preset): 美化插件逻辑

dishait · Dec 30, 2023 · 576acae · 576acae
1 parent e311f7a
commit 576acae
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 113 deletions.
diff --git a/package.json b/package.json
@@ -78,6 +78,7 @@
     "unplugin-vue-router": "^0.7.0",
     "vite": "^5.0.10",
     "vite-auto-import-resolvers": "^3.2.0",
+    "vite-layers": "^0.4.0",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-env-types": "^0.1.3",
     "vite-plugin-mock": "2.9.8",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/presets/index.ts b/presets/index.ts
@@ -1,6 +1,4 @@
-import { isPackageExists } from 'local-pkg'
 import Prism from 'markdown-it-prism'
-import { argv } from 'process'
 import UnoCss from 'unocss/vite'
 import AutoImport from 'unplugin-auto-import/vite'
 import {
@@ -26,7 +24,7 @@ import Components from 'unplugin-vue-components/vite'
 import Markdown from 'unplugin-vue-markdown/vite'
 import { VueRouterAutoImports } from 'unplugin-vue-router'
 import Router from 'unplugin-vue-router/vite'
-import { loadEnv } from 'vite'
+
 import { AutoGenerateImports, vue3Presets } from 'vite-auto-import-resolvers'
 import Compression from 'vite-plugin-compression'
 import EnvTypes from 'vite-plugin-env-types'
@@ -41,18 +39,18 @@ import Legacy from '@vitejs/plugin-legacy'
 import Vue from '@vitejs/plugin-vue'
 import Jsx from '@vitejs/plugin-vue-jsx'
 
-import type { ComponentResolver } from 'unplugin-vue-components/types'
-
 // 内置插件
-import { Alias, Restart, Warmup, Lightningcss } from './plugins'
+import { Alias, Lightningcss, Restart, Warmup } from './plugins'
+import { defaultBuildTargets, detectResolvers, useEnv } from './shared/detect'
 import { r } from './shared/path'
-import { defaultBuildTargets } from './shared/detect'
+import type { PluginOption } from 'vite'
 
 export default function () {
 	const env = useEnv()
 	const safelist =
 		'prose px-2 sm:px-0 md:prose-lg lg:prose-lg dark:prose-invert text-left w-screen prose-slate prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600'
-	const plugins = [
+
+	const plugins: PluginOption[] = [
 		/**
 		 * 兼容不支持 esmModule 的浏览器
 		 * https://www.npmjs.com/package/@vitejs/plugin-legacy
@@ -107,11 +105,6 @@ export default function () {
 		Layouts({
 			skipTopLevelRouteLayout: true,
 		}),
-		/**
-		 * 开发面板
-		 * https://github.com/webfansplz/vite-plugin-vue-devtools
-		 */
-		env.VITE_APP_DEV_TOOLS && VueDevTools(),
 		/**
 		 * mock 服务
 		 * https://github.com/vbenjs/vite-plugin-mock
@@ -134,7 +127,7 @@ export default function () {
 					names: ['RouterLink', 'RouterView'],
 				},
 			],
-			resolvers: normalizeResolvers({
+			resolvers: detectResolvers({
 				onlyExist: [
 					[VantResolver(), 'vant'],
 					[QuasarResolver(), 'quasar'],
@@ -178,11 +171,6 @@ export default function () {
 			// @ts-ignore
 			algorithm: env.VITE_APP_COMPRESSINON_ALGORITHM,
 		}),
-		/**
-		 * 生产环境下移除 console.log, console.warn, console.error
-		 * https://github.com/dishait/vite-plugin-removelog
-		 */
-		process.env.NODE_ENV !== 'debug' && Removelog(),
 		/**
 		 * 别名插件 (内置)
 		 * 支持 `~` 和 `@` 别名到 `src`
@@ -193,16 +181,53 @@ export default function () {
 		 * 如果 package.json 或 pnpm-lock.yaml 更新的话，强制重启
 		 */
 		Restart(),
+		/**
+		 * css 原子引擎
+		 * https://github.com/unocss/unocss
+		 */
+		UnoCss({
+			safelist: env.VITE_APP_MARKDOWN ? safelist.split(' ') : undefined,
+		}),
 	]
+	/**
+	 * 开发面板
+	 * https://github.com/webfansplz/vite-plugin-vue-devtools
+	 */
+	if (env.VITE_APP_DEV_TOOLS) {
+		plugins.push(VueDevTools())
+	}
 
+	/**
+	 * 生产环境下移除 console.log, console.warn, console.error
+	 * https://github.com/dishait/vite-plugin-removelog
+	 */
+	if (process.env.NODE_ENV !== 'debug') {
+		plugins.push(Removelog())
+	}
+
+	/**
+	 * markdown 渲染插件
+	 * https://github.com/mdit-vue/unplugin-vue-markdown
+	 */
+	if (env.VITE_APP_MARKDOWN) {
+		plugins.push(
+			Markdown({
+				wrapperClasses: safelist,
+				markdownItSetup(md) {
+					md.use(Prism)
+				},
+			}),
+		)
+	}
+
+	/**
+	 * api 自动按需引入
+	 * https://github.com/antfu/unplugin-auto-import
+	 */
 	if (env.VITE_APP_API_AUTO_IMPORT) {
 		const dirs = env.VITE_APP_DIR_API_AUTO_IMPORT
 			? ['src/stores/**', 'src/composables/**', 'src/api/**']
 			: []
-		/**
-		 * api 自动按需引入
-		 * https://github.com/antfu/unplugin-auto-import
-		 */
 		plugins.push(
 			AutoImport({
 				dirs,
@@ -215,7 +240,7 @@ export default function () {
 					}),
 					VueRouterAutoImports,
 				],
-				resolvers: normalizeResolvers({
+				resolvers: detectResolvers({
 					onlyExist: [
 						[ElementPlusResolver(), 'element-plus'],
 						[TDesignResolver({ library: 'vue-next' }), 'tdesign-vue-next'],
@@ -230,94 +255,5 @@ export default function () {
 		)
 	}
 
-	if (env.VITE_APP_MARKDOWN) {
-		/**
-		 * markdown 渲染插件
-		 * https://github.com/mdit-vue/unplugin-vue-markdown
-		 */
-		plugins.push(
-			Markdown({
-				wrapperClasses: safelist,
-				markdownItSetup(md) {
-					md.use(Prism)
-				},
-			}),
-		)
-	}
-	/**
-	 * css 原子引擎
-	 * https://github.com/unocss/unocss
-	 */
-	plugins.push(
-		UnoCss({
-			safelist: env.VITE_APP_MARKDOWN ? safelist.split(' ') : undefined,
-		}),
-	)
-
 	return plugins
 }
-
-// 获取环境变量
-function useEnv() {
-	function detectMode() {
-		const { NODE_ENV } = process.env
-		const hasModeIndex = argv.findIndex((a) => a === '--mode' || a === '-m')
-		if (hasModeIndex !== -1) {
-			return argv[hasModeIndex + 1]
-		}
-		return NODE_ENV || 'development'
-	}
-
-	function stringToBoolean(v: string) {
-		return Boolean(v === 'true' || false)
-	}
-
-	const {
-		VITE_APP_TITLE,
-		VITE_APP_DEV_TOOLS,
-		VITE_APP_MARKDOWN,
-		VITE_APP_API_AUTO_IMPORT,
-		VITE_APP_MOCK_IN_PRODUCTION,
-		VITE_APP_DIR_API_AUTO_IMPORT,
-		VITE_APP_COMPRESSINON_ALGORITHM,
-	} = loadEnv(detectMode(), '.')
-
-	return {
-		VITE_APP_TITLE,
-		VITE_APP_COMPRESSINON_ALGORITHM,
-		VITE_APP_DEV_TOOLS: stringToBoolean(VITE_APP_DEV_TOOLS),
-		VITE_APP_MARKDOWN: stringToBoolean(VITE_APP_MARKDOWN),
-		VITE_APP_API_AUTO_IMPORT: stringToBoolean(VITE_APP_API_AUTO_IMPORT),
-		VITE_APP_MOCK_IN_PRODUCTION: stringToBoolean(VITE_APP_MOCK_IN_PRODUCTION),
-		VITE_APP_DIR_API_AUTO_IMPORT: stringToBoolean(VITE_APP_DIR_API_AUTO_IMPORT),
-	}
-}
-
-type Arrayable<T> = T | Array<T>
-
-interface Options {
-	onlyExist?: [Arrayable<ComponentResolver>, string][]
-	include?: ComponentResolver[]
-}
-
-/**
- * 规范化 resolvers
- */
-export function normalizeResolvers(options: Options = {}) {
-	const { onlyExist = [], include = [] } = options
-
-	const existedResolvers = []
-	for (let i = 0; i < onlyExist.length; i++) {
-		const [resolver, packageName] = onlyExist[i]
-		if (
-			isPackageExists(packageName, {
-				paths: [r('./')],
-			})
-		) {
-			existedResolvers.push(resolver)
-		}
-	}
-	existedResolvers.push(...include)
-
-	return existedResolvers
-}
diff --git a/presets/shared/detect.ts b/presets/shared/detect.ts
@@ -4,7 +4,11 @@
  */
 
 import { r } from './path'
+import { loadEnv } from 'vite'
 import browserslist from 'browserslist'
+import { detectMode } from 'vite-layers'
+import { isPackageExists } from 'local-pkg'
+import type { ComponentResolver } from 'unplugin-vue-components'
 
 const { loadConfig: browserslistLoadConfig } = browserslist
 
@@ -14,3 +18,59 @@ const { loadConfig: browserslistLoadConfig } = browserslist
 export const defaultBuildTargets = browserslistLoadConfig({
 	path: r('./'),
 }) || ['last 2 versions and not dead, > 0.3%, Firefox ESR']
+
+type Arrayable<T> = T | Array<T>
+
+interface Options {
+	onlyExist?: [Arrayable<ComponentResolver>, string][]
+	include?: ComponentResolver[]
+}
+
+/**
+ * 发现 resolvers
+ */
+export function detectResolvers(options: Options = {}) {
+	const { onlyExist = [], include = [] } = options
+
+	const existedResolvers = []
+	for (let i = 0; i < onlyExist.length; i++) {
+		const [resolver, packageName] = onlyExist[i]
+		if (
+			isPackageExists(packageName, {
+				paths: [r('./')],
+			})
+		) {
+			existedResolvers.push(resolver)
+		}
+	}
+	existedResolvers.push(...include)
+
+	return existedResolvers
+}
+
+// 获取环境变量
+export function useEnv() {
+	function stringToBoolean(v: string) {
+		return Boolean(v === 'true' || false)
+	}
+
+	const {
+		VITE_APP_TITLE,
+		VITE_APP_DEV_TOOLS,
+		VITE_APP_MARKDOWN,
+		VITE_APP_API_AUTO_IMPORT,
+		VITE_APP_MOCK_IN_PRODUCTION,
+		VITE_APP_DIR_API_AUTO_IMPORT,
+		VITE_APP_COMPRESSINON_ALGORITHM,
+	} = loadEnv(detectMode(), '.')
+
+	return {
+		VITE_APP_TITLE,
+		VITE_APP_COMPRESSINON_ALGORITHM,
+		VITE_APP_DEV_TOOLS: stringToBoolean(VITE_APP_DEV_TOOLS),
+		VITE_APP_MARKDOWN: stringToBoolean(VITE_APP_MARKDOWN),
+		VITE_APP_API_AUTO_IMPORT: stringToBoolean(VITE_APP_API_AUTO_IMPORT),
+		VITE_APP_MOCK_IN_PRODUCTION: stringToBoolean(VITE_APP_MOCK_IN_PRODUCTION),
+		VITE_APP_DIR_API_AUTO_IMPORT: stringToBoolean(VITE_APP_DIR_API_AUTO_IMPORT),
+	}
+}