feat: 🚀 订阅功能

build/getEnv.ts

@@ -0,0 +1,46 @@
+import path from "path";
+
+export function isDevFn(mode: string): boolean {
+    return mode === "development";
+}
+
+export function isProdFn(mode: string): boolean {
+    return mode === "production";
+}
+
+export function isTestFn(mode: string): boolean {
+    return mode === "test";
+}
+
+/**
+ * Whether to generate package preview
+ */
+export function isReportMode(): boolean {
+    return process.env.VITE_REPORT === "true";
+}
+
+// Read all environment variable configuration files to process.env
+export function wrapperEnv(envConf: Recordable): ViteEnv {
+    const ret: any = {};
+
+    for (const envName of Object.keys(envConf)) {
+        let realName = envConf[envName].replace(/\\n/g, "\n");
+        realName = realName === "true" ? true : realName === "false" ? false : realName;
+        if (envName === "VITE_PORT") realName = Number(realName);
+        if (envName === "VITE_PROXY") {
+            try {
+                realName = JSON.parse(realName);
+            } catch (error) {}
+        }
+        ret[envName] = realName;
+    }
+    return ret;
+}
+
+/**
+ * Get user root directory
+ * @param dir file path
+ */
+export function getRootPath(...dir: string[]) {
+    return path.resolve(process.cwd(), ...dir);
+}

build/plugins.ts

@@ -0,0 +1,144 @@
+import { resolve } from "path";
+import { PluginOption } from "vite";
+import { VitePWA } from "vite-plugin-pwa";
+import { visualizer } from "rollup-plugin-visualizer";
+import { createHtmlPlugin } from "vite-plugin-html";
+import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+import eslintPlugin from "vite-plugin-eslint";
+import viteCompression from "vite-plugin-compression";
+import vueSetupExtend from "unplugin-vue-setup-extend-plus/vite";
+// 自动导入vue中hook reactive ref等
+import AutoImport from "unplugin-auto-import/vite";
+// 自动导入ui-组件 比如说ant-design-vue  element-plus等
+import Components from "unplugin-vue-components/vite";
+// element
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
+// 导入图标
+import Icons from "unplugin-icons/vite";
+import IconsResolver from "unplugin-icons/resolver";
+
+/**
+ * 创建 vite 插件
+ * @param viteEnv
+ */
+export const createVitePlugins = (viteEnv: ViteEnv): (PluginOption | PluginOption[])[] => {
+    const { VITE_GLOB_APP_TITLE, VITE_REPORT, VITE_PWA } = viteEnv;
+    return [
+        vue(),
+        // vue 可以使用 jsx/tsx 语法
+        vueJsx(),
+        // esLint 报错信息显示在浏览器界面上
+        eslintPlugin(),
+        // name 可以写在 script 标签上
+        vueSetupExtend({}),
+        // 创建打包压缩配置
+        createCompression(viteEnv),
+        // 注入变量到 html 文件
+        createHtmlPlugin({
+            inject: {
+                data: { title: VITE_GLOB_APP_TITLE }
+            }
+        }),
+        // 使用 svg 图标
+        createSvgIconsPlugin({
+            iconDirs: [resolve(process.cwd(), "src/assets/icons")],
+            symbolId: "icon-[dir]-[name]"
+        }),
+        // element按需导入
+        AutoImport({
+            // 安装两行后你会发现在组件中不用再导入ref，reactive等
+            imports: ["vue", "vue-router"],
+            dts: "src/auto-import.d.ts",
+            // element
+            resolvers: [
+                ElementPlusResolver({ importStyle: "sass" }),
+                IconsResolver({
+                    prefix: "Icon"
+                })
+            ]
+        }),
+        Components({
+            // element
+            resolvers: [
+                ElementPlusResolver({ importStyle: "sass" }),
+                IconsResolver({
+                    enabledCollections: ["ep"]
+                })
+            ],
+            // 默认存放位置
+            dts: "src/components.d.ts"
+        }),
+        Icons({
+            autoInstall: true
+        }),
+        // vitePWA
+        VITE_PWA && createVitePwa(viteEnv),
+        // 是否生成包预览，分析依赖包大小做优化处理
+        VITE_REPORT && (visualizer({ filename: "stats.html", gzipSize: true, brotliSize: true }) as PluginOption)
+    ];
+};
+
+/**
+ * @description 根据 compress 配置，生成不同的压缩规则
+ * @param viteEnv
+ */
+const createCompression = (viteEnv: ViteEnv): PluginOption | PluginOption[] => {
+    const { VITE_BUILD_COMPRESS = "none", VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv;
+    const compressList = VITE_BUILD_COMPRESS.split(",");
+    const plugins: PluginOption[] = [];
+    if (compressList.includes("gzip")) {
+        plugins.push(
+            viteCompression({
+                ext: ".gz",
+                algorithm: "gzip",
+                deleteOriginFile: VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE
+            })
+        );
+    }
+    if (compressList.includes("brotli")) {
+        plugins.push(
+            viteCompression({
+                ext: ".br",
+                algorithm: "brotliCompress",
+                deleteOriginFile: VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE
+            })
+        );
+    }
+    return plugins;
+};
+
+/**
+ * @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: "/logo.png",
+                    sizes: "192x192",
+                    type: "image/png"
+                },
+                {
+                    src: "/logo.png",
+                    sizes: "512x512",
+                    type: "image/png"
+                },
+                {
+                    src: "/logo.png",
+                    sizes: "512x512",
+                    type: "image/png",
+                    purpose: "any maskable"
+                }
+            ]
+        }
+    });
+};

build/proxy.ts

@@ -0,0 +1,30 @@
+import type { ProxyOptions } from "vite";
+
+type ProxyItem = [string, string];
+
+type ProxyList = ProxyItem[];
+
+type ProxyTargetList = Record<string, ProxyOptions>;
+
+/**
+ * 创建代理，用于解析 .env.development 代理配置
+ * @param list
+ */
+export function createProxy(list: ProxyList = []) {
+    const ret: ProxyTargetList = {};
+    for (const [prefix, target] of list) {
+        const httpsRE = /^https:\/\//;
+        const isHttps = httpsRE.test(target);
+
+        // https://github.com/http-party/node-http-proxy#options
+        ret[prefix] = {
+            target: target,
+            changeOrigin: true,
+            ws: true,
+            rewrite: path => path.replace(new RegExp(`^${prefix}`), ""),
+            // https is require secure=false
+            ...(isHttps ? { secure: false } : {})
+        };
+    }
+    return ret;
+}