@moluoxixi/vite-config 0.0.32 → 0.0.35

package/lib/index.d.ts

@@ -1,4 +1,6 @@
+import { AutoRoutesConfig, CDNOptions, CompressionPlugin, ImageminPlugin, PluginConfig, PluginType, QiankunPlugin, VisualizerOptions, ViteConfigType } from './src/_types';
 import { createViteConfig, getViteConfig } from './src/index.ts';
 export default createViteConfig;
 export { wrapperEnv } from './src/_utils/index.ts';
 export { getViteConfig, createViteConfig as ViteConfig };
+export type { AutoRoutesConfig, CDNOptions, CompressionPlugin, ImageminPlugin, PluginConfig, PluginType, QiankunPlugin, VisualizerOptions, ViteConfigType };

package/lib/src/_utils/detectFramework.cjs

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fs = require("node:fs");
+const path = require("node:path");
+const process = require("node:process");
+function detectFramework(config, rootDir) {
+  const root = rootDir || process.cwd();
+  const packageJsonPath = path.resolve(root, "package.json");
+  let vue = config.vue;
+  let react = config.react;
+  let vitepress = config.vitepress;
+  const hasExplicitFramework = vue === true || react === true || vitepress === true;
+  if (!hasExplicitFramework) {
+    let dependencies = {};
+    let devDependencies = {};
+    if (fs.existsSync(packageJsonPath)) {
+      try {
+        const packageJsonContent = fs.readFileSync(packageJsonPath, "utf-8");
+        const packageJson = JSON.parse(packageJsonContent);
+        dependencies = packageJson.dependencies || {};
+        devDependencies = packageJson.devDependencies || {};
+      } catch (error) {
+        console.warn(`无法读取 package.json: ${packageJsonPath}`, error);
+      }
+    }
+    if (vue === void 0) {
+      if (dependencies.vue || devDependencies.vue) {
+        vue = true;
+      }
+    }
+    if (react === void 0 && vue !== true) {
+      if (dependencies.react || devDependencies.react) {
+        react = true;
+      }
+    }
+    if (vitepress === void 0 && vue !== true && react !== true) {
+      if (dependencies.vitepress || devDependencies.vitepress) {
+        vitepress = true;
+      }
+    }
+  }
+  return {
+    vue: vue ?? false,
+    react: react ?? false,
+    vitepress: vitepress ?? false
+  };
+}
+exports.detectFramework = detectFramework;

package/lib/src/_utils/getEnv.cjs

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("node:fs");
+require("node:path");
+require("node:process");
+require("dotenv");
+function wrapperEnv(env) {
+  const result = {};
+  for (const key in env) {
+    if (Object.prototype.hasOwnProperty.call(env, key)) {
+      const value = env[key].trim();
+      if (value === "true" || value === "false") {
+        result[key] = value === "true";
+      } else if (!Number.isNaN(Number(value))) {
+        result[key] = Number(value);
+      } else if (value === "") {
+        result[key] = null;
+      } else {
+        result[key] = value;
+      }
+    }
+  }
+  return result;
+}
+exports.wrapperEnv = wrapperEnv;

package/lib/src/constants/index.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function getCamelCase(str) {
+  return str.replace(/[-_]+/g, " ").replace(/(?:^|\s)\w/g, (match) => match.toUpperCase()).replace(/\s+/g, "");
+}
+function getCdnModules(modules2) {
+  function getPath(str) {
+    if (!str)
+      return "";
+    return str.startsWith("/") ? str : `/${str}`;
+  }
+  return modules2.map((item) => {
+    if (typeof item === "string") {
+      return {
+        name: item,
+        var: getCamelCase(item),
+        path: ""
+      };
+    } else {
+      return item;
+    }
+  }).map((item) => {
+    return {
+      name: item.name,
+      var: item.var || getCamelCase(item.name),
+      path: getPath(item.path),
+      css: getPath(item.css)
+    };
+  });
+}
+const modules = getCdnModules([]);
+exports.modules = modules;

package/lib/src/index.cjs

@@ -0,0 +1,425 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const path = require("node:path");
+const tailwindcss = require("@tailwindcss/postcss");
+const autoprefixer = require("autoprefixer");
+const vite = require("vite");
+const vitePluginHtml = require("vite-plugin-html");
+require("vue");
+const dynamicImport = require("../_utils/dynamicImport.cjs");
+require("node:fs");
+require("node:process");
+const object = require("../_utils/object.cjs");
+const detectFramework = require("./_utils/detectFramework.cjs");
+const addScopedAndReplacePrefix = require("./plugins/addScopedAndReplacePrefix.cjs");
+async function getViteConfig(Config = {}, params) {
+  const config = typeof Config === "function" ? Config(params) : Config;
+  const { mode = "base" } = params || {};
+  const rootPath = config.rootPath || process.cwd();
+  const modeConfig = config.mode || {};
+  const baseConfig = modeConfig.base || {};
+  const currentModeConfig = modeConfig[mode] || {};
+  const viteEnv = { ...baseConfig, ...currentModeConfig };
+  const isDev = mode === "development";
+  const {
+    autoImport = config.autoImport ?? true,
+    autoComponent = config.autoComponent ?? true,
+    compression = config.compression ?? true,
+    imagemin = config.imagemin ?? true,
+    codeInspector = config.codeInspector ?? true,
+    port = config.port,
+    visualizer = config.visualizer ?? false,
+    autoRoutes = config.autoRoutes ?? false,
+    cdn = config.cdn ?? false,
+    pageRoutes = config.pageRoutes ?? false,
+    pwa = config.pwa ?? false,
+    devtools = config.devtools,
+    open = config.open,
+    qiankunDevMode = config.qiankunDevMode,
+    qiankun = config.qiankun,
+    namespace = config.namespace,
+    dropConsole = config.dropConsole,
+    vue: vueRaw = config.vue,
+    react: reactRaw = config.react,
+    vitepress: vitepressRaw = config.vitepress
+  } = viteEnv;
+  const frameworkResult = detectFramework.detectFramework(
+    {
+      vue: vueRaw,
+      react: reactRaw,
+      vitepress: vitepressRaw
+    },
+    rootPath
+  );
+  const { vue, react, vitepress } = object.validateMutuallyExclusive(
+    frameworkResult,
+    "vue"
+  );
+  const appTitle = config.appTitle;
+  const appCode = config.appCode;
+  const isVueOrVitepress = vue || vitepress;
+  const envSystemCode = isDev && !qiankunDevMode ? "el" : namespace ?? appCode;
+  const plugins = [
+    vitePluginHtml.createHtmlPlugin({
+      inject: {
+        data: {
+          title: appTitle
+        }
+      }
+    })
+  ];
+  if (vue) {
+    const pluginVue = await dynamicImport.dynamicImport(import("@vitejs/plugin-vue"));
+    plugins.push(pluginVue());
+  }
+  if (react) {
+    const pluginReact = await dynamicImport.dynamicImport(import("@vitejs/plugin-react"));
+    plugins.push(pluginReact());
+  }
+  if (isVueOrVitepress) {
+    const vueJsx = await dynamicImport.dynamicImport(import("@vitejs/plugin-vue-jsx"));
+    plugins.push(vueJsx());
+  }
+  if (pageRoutes) {
+    const Pages = await dynamicImport.dynamicImport(import("vite-plugin-pages"));
+    const extensions = [];
+    if (vue) {
+      extensions.push("vue");
+    }
+    if (react) {
+      extensions.push("tsx", "jsx");
+    }
+    plugins.push(Pages(
+      object.deepMerge(
+        {
+          dirs: "src/pages",
+          extensions,
+          exclude: [
+            "**/components/**",
+            "**/__tests__/**"
+          ]
+        },
+        pageRoutes
+      )
+    ));
+  }
+  if (isDev && devtools && isVueOrVitepress) {
+    const vueDevTools = await dynamicImport.dynamicImport(import("vite-plugin-vue-devtools"));
+    plugins.push(vueDevTools());
+  }
+  if (autoImport && isVueOrVitepress) {
+    const AutoImport = await dynamicImport.dynamicImport(import("unplugin-auto-import/vite"));
+    const ElementPlusResolverModule = await dynamicImport.dynamicImport(import("unplugin-vue-components/resolvers"));
+    const { ElementPlusResolver } = ElementPlusResolverModule;
+    plugins.push(AutoImport(
+      object.deepMerge(
+        {
+          imports: ["vue"],
+          resolvers: [ElementPlusResolver()],
+          dts: path.resolve(rootPath, "./typings/auto-imports.d.ts")
+        },
+        autoImport
+      )
+    ));
+  }
+  if (autoComponent && isVueOrVitepress) {
+    const Components = await dynamicImport.dynamicImport(import("unplugin-vue-components/vite"));
+    const ElementPlusResolverModule = await dynamicImport.dynamicImport(import("unplugin-vue-components/resolvers"));
+    const { ElementPlusResolver } = ElementPlusResolverModule;
+    plugins.push(Components(
+      object.deepMerge(
+        {
+          resolvers: [ElementPlusResolver()],
+          globs: [],
+          dts: path.resolve(rootPath, "./typings/components.d.ts")
+        },
+        autoComponent
+      )
+    ));
+  }
+  if (compression) {
+    const viteCompression = await dynamicImport.dynamicImport(import("vite-plugin-compression"));
+    const compressionPlugin = viteCompression;
+    plugins.push(compressionPlugin(
+      object.deepMerge(
+        {
+          algorithm: "brotliCompress",
+          verbose: true,
+          disable: false,
+          ext: ".gz",
+          threshold: 10240,
+          deleteOriginFile: false
+        },
+        compression
+      )
+    ));
+  }
+  if (imagemin) {
+    const viteImagemin = await dynamicImport.dynamicImport(import("vite-plugin-imagemin"));
+    const imageminPlugin = viteImagemin;
+    plugins.push(imageminPlugin(
+      object.deepMerge(
+        {
+          gifsicle: { optimizationLevel: 7, interlaced: false },
+          optipng: { optimizationLevel: 7 },
+          mozjpeg: { quality: 20 },
+          pngquant: { quality: [0.8, 0.9], speed: 4 },
+          svgo: {
+            plugins: [{ name: "removeViewBox" }, { name: "removeEmptyAttrs", active: false }]
+          }
+        },
+        imagemin
+      )
+    ));
+  }
+  if (cdn) {
+    const importToCDN = await dynamicImport.dynamicImport(import("vite-plugin-cdn-import"));
+    const { modules } = await dynamicImport.dynamicImport(Promise.resolve().then(() => require("./constants/index.cjs")));
+    plugins.push(importToCDN(
+      object.deepMerge(
+        {
+          enableInDevMode: false,
+          prodUrl: "/{name}@{version}{path}",
+          modules,
+          generateScriptTag: (_name, scriptUrl) => {
+            const esmArr = ["esm", ".mjs"];
+            const isESM = esmArr.some((item) => scriptUrl.includes(item));
+            if (isESM) {
+              return {
+                attrs: {
+                  src: scriptUrl,
+                  type: "module",
+                  crossorigin: "anonymous"
+                },
+                injectTo: "head"
+              };
+            } else {
+              return {
+                attrs: {
+                  src: scriptUrl,
+                  crossorigin: "anonymous"
+                },
+                injectTo: "head"
+              };
+            }
+          }
+        },
+        cdn
+      )
+    ));
+  }
+  if (visualizer) {
+    const visualizerPlugin = await dynamicImport.dynamicImport(import("rollup-plugin-visualizer"));
+    plugins.push(visualizerPlugin(
+      object.deepMerge(
+        {
+          open: true
+        },
+        visualizer
+      )
+    ));
+  }
+  if (pwa) {
+    const pwaModule = await dynamicImport.dynamicImport(import("vite-plugin-pwa"));
+    const { VitePWA } = pwaModule;
+    plugins.push(VitePWA(
+      object.deepMerge(
+        {
+          strategies: "generateSW",
+          registerType: "autoUpdate",
+          // 开发模式下也启用
+          devOptions: {
+            enabled: true
+          },
+          includeAssets: ["favicon.ico", "apple-touch-icon.png", "mask-icon.svg"],
+          manifest: {
+            id: appCode ? `/${appCode}/` : "/",
+            start_url: appCode ? `/${appCode}/` : "/",
+            name: appTitle || "应用",
+            short_name: appTitle || "应用",
+            description: "渐进式 Web 应用",
+            display: "standalone",
+            background_color: "#ffffff",
+            theme_color: "#BA42BF"
+          }
+        },
+        pwa
+      )
+    ));
+  }
+  if (isDev && codeInspector) {
+    const codeInspectorModule = await dynamicImport.dynamicImport(import("code-inspector-plugin"));
+    const { codeInspectorPlugin } = codeInspectorModule;
+    plugins.push(codeInspectorPlugin(
+      object.deepMerge(
+        {
+          bundler: "vite",
+          showSwitch: true
+        },
+        codeInspector
+      )
+    ));
+  }
+  if (qiankun) {
+    const qiankunPlugin = await dynamicImport.dynamicImport(import("vite-plugin-qiankun"));
+    const qiankunPluginFn = qiankunPlugin;
+    plugins.push(qiankunPluginFn(envSystemCode || "el", { useDevMode: qiankunDevMode }));
+    if (appCode) {
+      plugins.push(addScopedAndReplacePrefix.default({
+        prefixScoped: `div[data-qiankun='${envSystemCode}']`,
+        oldPrefix: "el",
+        newPrefix: appCode,
+        useDevMode: qiankunDevMode
+      }));
+    }
+  }
+  if (autoRoutes && isVueOrVitepress) {
+    const AutoRoutesPlugin = await dynamicImport.dynamicImport(Promise.resolve().then(() => require("../AutoRoutesPlugin/index.cjs")));
+    plugins.push(AutoRoutesPlugin(
+      object.deepMerge(
+        {
+          root: rootPath,
+          routeConfig: {
+            views: ["/src/views/**/index.vue", "!/src/views/**/components/*"],
+            examples: "/src/examples/**/index.vue",
+            componentExamples: {
+              glob: ["/src/components/**/Example.vue", "!/src/components/**/components/*"],
+              baseRoute: "组件示例"
+            }
+          },
+          dts: path.resolve(rootPath, "./typings/auto-routes.d.ts")
+        },
+        autoRoutes
+      )
+    ));
+  }
+  const defaultConfig = {
+    plugins,
+    esbuild: {
+      pure: !isDev && dropConsole ? ["console.log", "console.info", "console.debug"] : []
+    },
+    build: {
+      sourcemap: isDev,
+      outDir: appCode || "dist",
+      cssCodeSplit: true,
+      chunkSizeWarningLimit: 1500,
+      minify: "esbuild",
+      rollupOptions: {
+        external: [],
+        output: {
+          globals: {},
+          chunkFileNames: "static/js/[name]-[hash].js",
+          entryFileNames: "static/js/[name]-[hash].js",
+          assetFileNames: "static/[ext]/[name]-[hash].[ext]",
+          manualChunks: (id) => {
+            if (id.includes("node_modules")) {
+              if (id.includes("lodash-es")) {
+                return "lodash-vendor";
+              }
+              if (id.includes("element-plus")) {
+                return "el-vendor";
+              }
+              if (id.includes("@vue") || id.includes("vue")) {
+                return "vue-vendor";
+              }
+              if (id.includes("antd") || id.includes("@ant-design")) {
+                return "antd-vendor";
+              }
+              if (id.includes("react-dom")) {
+                return "react-dom-vendor";
+              }
+              if (id.includes("react")) {
+                return "react-vendor";
+              }
+              return "vendor";
+            }
+          }
+        }
+      }
+    },
+    define: {
+      __SYSTEM_CODE__: JSON.stringify(envSystemCode),
+      process: object.deepMerge({
+        env: {
+          VUE_APP_VXE_ENV: "production"
+        }
+      }, process)
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: "modern-compiler"
+        }
+      },
+      postcss: {
+        plugins: [tailwindcss(), autoprefixer()]
+      },
+      devSourcemap: isDev
+    },
+    resolve: {
+      extensions: [".js", ".jsx", ".ts", ".tsx", ".vue"],
+      alias: {
+        "@": path.resolve(rootPath, "./src")
+      }
+    },
+    server: {
+      host: "0.0.0.0",
+      port,
+      open,
+      cors: true,
+      proxy: {}
+    }
+  };
+  if (!vitepress && appCode) {
+    defaultConfig.base = `/${appCode}`;
+  }
+  const viteConfig = typeof config.viteConfig === "function" ? config.viteConfig(params) : config.viteConfig;
+  const viteConfigPluginNames = ((viteConfig == null ? void 0 : viteConfig.plugins) || []).map((i) => {
+    const plugin = Array.isArray(i) ? i[0] : i;
+    return plugin == null ? void 0 : plugin.name;
+  }).filter((name) => Boolean(name));
+  const defaultPluginNamesMap = (defaultConfig.plugins || []).reduce((nameMap, i) => {
+    const plugin = Array.isArray(i) ? i[0] : i;
+    const name = plugin == null ? void 0 : plugin.name;
+    if (name) {
+      nameMap[name] = i;
+    }
+    return nameMap;
+  }, {});
+  const uniquePlugin = [];
+  Object.keys(defaultPluginNamesMap).forEach((name) => {
+    if (!viteConfigPluginNames.includes(name)) {
+      uniquePlugin.push(defaultPluginNamesMap[name]);
+    }
+  });
+  defaultConfig.plugins = uniquePlugin;
+  return vite.mergeConfig(defaultConfig, viteConfig || {});
+}
+function createViteConfig(Config) {
+  return vite.defineConfig(async (params) => await getViteConfig(Config, params));
+}
+exports.createViteConfig = createViteConfig;
+exports.default = createViteConfig;
+exports.getViteConfig = getViteConfig;

package/lib/src/plugins/addScopedAndReplacePrefix.cjs

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+function changeHtmlClassPrefix(htmlString = "", oldPrefix = "", newPrefix = "") {
+  const regex = new RegExp(
+    `(class|style)\\s*:\\s*((["']((${oldPrefix}\\b)-).*["'])|((_normalizeClass|_normalizeStyle)\\(.*(${oldPrefix}\\b)-.*\\)))`,
+    "g"
+  );
+  return htmlString.replace(regex, (match = "") => {
+    return match.replace(oldPrefix, newPrefix);
+  });
+}
+function changeSelectorPrefix(cssString = "", oldPrefix = "", newPrefix = "") {
+  const regex = new RegExp(`(\\.${oldPrefix}\\b|#${oldPrefix}\\b|--${oldPrefix}\\b)`, "g");
+  return cssString.replace(regex, (match = "") => {
+    return match.replace(oldPrefix, newPrefix);
+  });
+}
+function addScopedAndReplacePrefixPlugin({
+  prefixScoped = "",
+  oldPrefix = "",
+  newPrefix = "",
+  useDevMode = false
+}) {
+  let isProduction;
+  return {
+    name: "addScopedAndReplacePrefix",
+    configResolved(config) {
+      isProduction = config.command === "build" || config.isProduction;
+    },
+    transform(code = "", id = "") {
+      if (!isProduction && !useDevMode)
+        return code;
+      if (!oldPrefix || !newPrefix)
+        return code;
+      if (id.includes("node_modules"))
+        return code;
+      const cssLangs = ["css", "scss", "less", "stylus", "styl"];
+      let newCode = code;
+      if (id.endsWith(".vue")) {
+        newCode = changeHtmlClassPrefix(newCode, oldPrefix, newPrefix);
+      } else if (cssLangs.some((lang) => id.endsWith(`.${lang}`))) {
+        if (oldPrefix && newPrefix) {
+          newCode = changeSelectorPrefix(newCode, oldPrefix, newPrefix);
+        }
+        if (prefixScoped) {
+          newCode = `${newCode}${prefixScoped}{${newCode}}`;
+        }
+        return newCode;
+      }
+      return newCode;
+    }
+  };
+}
+exports.default = addScopedAndReplacePrefixPlugin;

package/package.json

@@ -1,37 +1,37 @@
 {
   "name": "@moluoxixi/vite-config",
-  "version": "0.0.32",
+  "version": "0.0.35",
   "description": "ViteConfig 组件",
   "sideEffects": [
     "*.css",
     "*.scss"
   ],
   "peerDependencies": {
-    "vite": "6.2.4",
-    "vue": "3.5.18"
+    "vite": "^6.2.4",
+    "vue": "^3.5.18"
   },
   "dependencies": {
-    "dotenv": "16.6.1",
-    "@tailwindcss/postcss": "4.1.11",
-    "@vitejs/plugin-react": "4.7.0",
-    "@vitejs/plugin-vue": "5.2.4",
-    "@vitejs/plugin-vue-jsx": "4.2.0",
-    "autoprefixer": "10.4.21",
-    "code-inspector-plugin": "1.3.3",
-    "rollup-plugin-visualizer": "5.14.0",
-    "unplugin-auto-import": "19.3.0",
-    "unplugin-vue-components": "28.8.0",
-    "vite-plugin-cdn-import": "1.0.1",
-    "vite-plugin-compression": "0.5.1",
-    "vite-plugin-html": "3.2.2",
-    "vite-plugin-imagemin": "0.6.1",
-    "vite-plugin-pages": "0.33.2",
-    "vite-plugin-pwa": "1.2.0",
-    "vite-plugin-qiankun": "1.0.15",
-    "vite-plugin-vue-devtools": "7.7.7",
-    "lodash-es": "4.17.21",
-    "postcss": "8.5.6",
-    "postcss-selector-parser": "7.1.0"
+    "dotenv": "^16.6.1",
+    "@tailwindcss/postcss": "^4.1.11",
+    "@vitejs/plugin-react": "^4.7.0",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue-jsx": "^4.2.0",
+    "autoprefixer": "^10.4.21",
+    "code-inspector-plugin": "^1.3.3",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "unplugin-auto-import": "^19.3.0",
+    "unplugin-vue-components": "^28.8.0",
+    "vite-plugin-cdn-import": "^1.0.1",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-html": "^3.2.2",
+    "vite-plugin-imagemin": "^0.6.1",
+    "vite-plugin-pages": "^0.33.2",
+    "vite-plugin-pwa": "^1.2.0",
+    "vite-plugin-qiankun": "^1.0.15",
+    "vite-plugin-vue-devtools": "^7.7.7",
+    "lodash-es": "^4.17.21",
+    "postcss": "^8.5.6",
+    "postcss-selector-parser": "^7.1.0"
   },
   "publishConfig": {
     "access": "public"