@moluoxixi/vite-config 0.0.33 → 0.0.35

package/es/src/_utils/detectFramework.mjs

@@ -0,0 +1,45 @@
+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
+  };
+}
+export {
+  detectFramework
+};

package/es/src/_utils/getEnv.mjs

@@ -0,0 +1,21 @@
+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;
+}
+export {
+  wrapperEnv
+};

package/es/src/constants/index.mjs

@@ -0,0 +1,32 @@
+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([]);
+export {
+  modules
+};

package/es/src/index.mjs

@@ -0,0 +1,395 @@
+import { dynamicImport } from "../_utils/dynamicImport.mjs";
+import { validateMutuallyExclusive, deepMerge } from "../_utils/object.mjs";
+import { detectFramework } from "./_utils/detectFramework.mjs";
+import addScopedAndReplacePrefixPlugin from "./plugins/addScopedAndReplacePrefix.mjs";
+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(
+    {
+      vue: vueRaw,
+      react: reactRaw,
+      vitepress: vitepressRaw
+    },
+    rootPath
+  );
+  const { vue, react, vitepress } = 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(Promise.resolve(VitejsPluginVue));
+    plugins.push(pluginVue());
+  }
+  if (react) {
+    const pluginReact = await dynamicImport(Promise.resolve(VitejsPluginReact));
+    plugins.push(pluginReact());
+  }
+  if (isVueOrVitepress) {
+    const vueJsx = await dynamicImport(Promise.resolve(VitejsPluginVueJsx));
+    plugins.push(vueJsx());
+  }
+  if (pageRoutes) {
+    const Pages = await dynamicImport(Promise.resolve(VitePluginPages));
+    const extensions = [];
+    if (vue) {
+      extensions.push("vue");
+    }
+    if (react) {
+      extensions.push("tsx", "jsx");
+    }
+    plugins.push(Pages(
+      deepMerge(
+        {
+          dirs: "src/pages",
+          extensions,
+          exclude: [
+            "**/components/**",
+            "**/__tests__/**"
+          ]
+        },
+        pageRoutes
+      )
+    ));
+  }
+  if (isDev && devtools && isVueOrVitepress) {
+    const vueDevTools = await dynamicImport(Promise.resolve(VitePluginVueDevtools));
+    plugins.push(vueDevTools());
+  }
+  if (autoImport && isVueOrVitepress) {
+    const AutoImport = await dynamicImport(import("unplugin-auto-import/vite"));
+    const ElementPlusResolverModule = await dynamicImport(import("unplugin-vue-components/resolvers"));
+    const { ElementPlusResolver } = ElementPlusResolverModule;
+    plugins.push(AutoImport(
+      deepMerge(
+        {
+          imports: ["vue"],
+          resolvers: [ElementPlusResolver()],
+          dts: Path.resolve(rootPath, "./typings/auto-imports.d.ts")
+        },
+        autoImport
+      )
+    ));
+  }
+  if (autoComponent && isVueOrVitepress) {
+    const Components = await dynamicImport(import("unplugin-vue-components/vite"));
+    const ElementPlusResolverModule = await dynamicImport(import("unplugin-vue-components/resolvers"));
+    const { ElementPlusResolver } = ElementPlusResolverModule;
+    plugins.push(Components(
+      deepMerge(
+        {
+          resolvers: [ElementPlusResolver()],
+          globs: [],
+          dts: Path.resolve(rootPath, "./typings/components.d.ts")
+        },
+        autoComponent
+      )
+    ));
+  }
+  if (compression) {
+    const viteCompression = await dynamicImport(Promise.resolve(VitePluginCompression));
+    const compressionPlugin = viteCompression;
+    plugins.push(compressionPlugin(
+      deepMerge(
+        {
+          algorithm: "brotliCompress",
+          verbose: true,
+          disable: false,
+          ext: ".gz",
+          threshold: 10240,
+          deleteOriginFile: false
+        },
+        compression
+      )
+    ));
+  }
+  if (imagemin) {
+    const viteImagemin = await dynamicImport(Promise.resolve(VitePluginImagemin));
+    const imageminPlugin = viteImagemin;
+    plugins.push(imageminPlugin(
+      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(Promise.resolve(VitePluginCdnImport));
+    const { modules } = await dynamicImport(import("./constants/index.mjs"));
+    plugins.push(importToCDN(
+      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(Promise.resolve(RollupPluginVisualizer));
+    plugins.push(visualizerPlugin(
+      deepMerge(
+        {
+          open: true
+        },
+        visualizer
+      )
+    ));
+  }
+  if (pwa) {
+    const pwaModule = await dynamicImport(Promise.resolve(VitePluginPwa));
+    const { VitePWA } = pwaModule;
+    plugins.push(VitePWA(
+      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(Promise.resolve(CodeInspectorPlugin));
+    const { codeInspectorPlugin } = codeInspectorModule;
+    plugins.push(codeInspectorPlugin(
+      deepMerge(
+        {
+          bundler: "vite",
+          showSwitch: true
+        },
+        codeInspector
+      )
+    ));
+  }
+  if (qiankun) {
+    const qiankunPlugin = await dynamicImport(Promise.resolve(VitePluginQiankun));
+    const qiankunPluginFn = qiankunPlugin;
+    plugins.push(qiankunPluginFn(envSystemCode || "el", { useDevMode: qiankunDevMode }));
+    if (appCode) {
+      plugins.push(addScopedAndReplacePrefixPlugin({
+        prefixScoped: `div[data-qiankun='${envSystemCode}']`,
+        oldPrefix: "el",
+        newPrefix: appCode,
+        useDevMode: qiankunDevMode
+      }));
+    }
+  }
+  if (autoRoutes && isVueOrVitepress) {
+    const AutoRoutesPlugin = await dynamicImport(import("../AutoRoutesPlugin/index.mjs"));
+    plugins.push(AutoRoutesPlugin(
+      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: deepMerge({
+        env: {
+          VUE_APP_VXE_ENV: "production"
+        }
+      }, process)
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: "modern-compiler"
+        }
+      },
+      postcss: {
+        plugins: [TailwindcssPostcss(), 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));
+}
+export {
+  createViteConfig,
+  createViteConfig as default,
+  getViteConfig
+};

package/es/src/plugins/addScopedAndReplacePrefix.mjs

@@ -0,0 +1,54 @@
+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;
+    }
+  };
+}
+export {
+  addScopedAndReplacePrefixPlugin as default
+};

package/lib/AutoRoutesPlugin/index.cjs

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const virtual = require("../_utils/virtual.cjs");
+const routeGenerator = require("./routeGenerator.cjs");
+function extractGlob(globVal) {
+  return globVal.glob || globVal;
+}
+function getEagerOption(globVal, globalEager) {
+  return globVal.eager ?? globalEager ?? false;
+}
+function generateImportCode(varName, glob, eager) {
+  if (eager) {
+    return `const ${varName} = import.meta.glob(${JSON.stringify(glob)}, { eager: true, import: 'default' });
+`;
+  }
+  return `const ${varName} = import.meta.glob(${JSON.stringify(glob)});
+`;
+}
+function createAutoRoutesPlugin({ routeConfig, virtualModuleId, dts, root, eager: globalEager }) {
+  const VIRTUAL_MODULE_ID = virtualModuleId || "virtual:auto-routes";
+  const watchGlobs = Object.values(routeConfig).flatMap((globVal) => {
+    const g = extractGlob(globVal);
+    return Array.isArray(g) ? g : [g];
+  });
+  return virtual.createVirtualPlugin(
+    {
+      name: "vite-plugin-auto-routes",
+      virtualModuleId: VIRTUAL_MODULE_ID,
+      dts,
+      root,
+      watch: watchGlobs,
+      enforce: "pre",
+      // 生成虚拟模块代码：仅负责产出字符串，监听/HMR/缓存由工厂统一处理
+      generateModule: () => {
+        const imports = [];
+        const routes = [];
+        Object.entries(routeConfig).forEach(([prefix, globVal], index) => {
+          const varName = `files${index}`;
+          const glob = extractGlob(globVal);
+          const eager = getEagerOption(globVal, globalEager);
+          const baseRoute = globVal.baseRoute;
+          const baseRouteParam = baseRoute !== void 0 ? JSON.stringify(baseRoute) : "undefined";
+          imports.push(generateImportCode(varName, glob, eager));
+          routes.push(`...generateRoutes(${varName}, '${prefix}',${baseRouteParam}, ${eager})`);
+        });
+        const routesCode = routes.length > 0 ? `[${routes.join(",\n")}]` : "[]";
+        return `
+          ${imports.join("\n")}
+          ${routeGenerator.findParentRouteHandle}
+          ${routeGenerator.parseModulePath}
+          ${routeGenerator.processComponent}
+          ${routeGenerator.cleanRoute}
+          ${routeGenerator.findDefaultRouteHandle}
+
+          const findParentRoute = ${routeGenerator.findParentRouteHandle}
+          // 用于routes
+          const generateRoutes = ${routeGenerator.generateRoutes};
+          // 用于导出
+          const findDefaultRoute = ${routeGenerator.findDefaultRouteHandle};
+
+          const routes = ${routesCode}.flat().filter(Boolean);
+
+          export { routes, findDefaultRoute };
+          export default routes;
+        `;
+      },
+      // 生成类型声明文件
+      generateDts: () => `// 此文件由ViteConfig自动生成，请勿手动修改
+declare module 'virtual:auto-routes' {
+  interface RouteModule {
+    path: string
+    name: string
+    meta?: any
+    component: () => Promise<any>
+    children?: RouteModule[]
+  }
+
+  const routes: RouteModule[]
+  const findDefaultRoute: (routes: any[]) => string
+  export { findDefaultRoute, routes }
+  export default routes
+}`
+    }
+  );
+}
+exports.default = createAutoRoutesPlugin;