@hzab/vite-config 0.0.2-alpha.0 → 0.0.3-alpha.1

package/src/create-library-vite-config.ts

@@ -1,199 +1,248 @@
-import path from "node:path";
-import basicSsl from "@vitejs/plugin-basic-ssl";
-import react from "@vitejs/plugin-react";
-import { mergeConfig, type PluginOption, type UserConfig } from "vite";
-import { createHtmlPlugin } from "vite-plugin-html";
-
-import { lifecyclePlugin } from "./plugins/lifecycle.ts";
-import { buildLessOptions } from "./plugins/less-tilde.ts";
-import { reactCompilerPlugin } from "./plugins/react-compiler.ts";
-import { svgReactPlugin } from "./plugins/svg-react.ts";
-
-import type { CreateLibraryViteConfigOptions, LibraryFormats } from "./types.ts";
-
-/**
- * 组件库构建默认外置
- * 传入 `externals` 时整表替换；追加时展开本常量。
- * @public
- */
-export const DEFAULT_LIBRARY_EXTERNALS = ["react", "react-dom"] as const;
-
-/**
- * UMD / IIFE 默认全局名。未出现在表里的字符串 external 用自身包名。
- * @public
- */
-export const DEFAULT_LIBRARY_GLOBALS: Record<string, string> = {
-  react: "React",
-  "react-dom": "ReactDOM",
-};
-
-const DEFAULT_LIBRARY_FORMATS: LibraryFormats[] = ["umd"];
-
-function needsLibraryName(formats: readonly LibraryFormats[]): boolean {
-  return formats.includes("umd") || formats.includes("iife");
-}
-
-function resolveExternals(
-  externals: CreateLibraryViteConfigOptions["externals"],
-): (string | RegExp)[] {
-  if (externals === false) return [];
-  if (externals == null) return [...DEFAULT_LIBRARY_EXTERNALS];
-  return externals;
-}
-
-function resolveLibraryFileName(
-  fileName: CreateLibraryViteConfigOptions["fileName"],
-  formats: readonly LibraryFormats[],
-): string | ((format: string, entryName: string) => string) {
-  if (fileName != null) return fileName;
-  if (formats.length === 1) {
-    return () => "index.js";
-  }
-  return (format) => (format === "es" ? "index.js" : `index.${format}.js`);
-}
-
-function resolveLibraryGlobals(
-  externals: readonly (string | RegExp)[],
-  globals?: Record<string, string>,
-): Record<string, string> {
-  const inferred: Record<string, string> = {};
-  for (const ext of externals) {
-    if (typeof ext !== "string") continue;
-    inferred[ext] = DEFAULT_LIBRARY_GLOBALS[ext] ?? ext;
-  }
-  return { ...inferred, ...globals };
-}
-
-/** 字符串 external 同时匹配子路径（如 `react` → `react/jsx-runtime`）。 */
-export function matchLibraryExternal(id: string, externals: readonly (string | RegExp)[]): boolean {
-  const source = id.split("?")[0] ?? id;
-  return externals.some((ext) => {
-    if (typeof ext === "string") {
-      return source === ext || source.startsWith(`${ext}/`);
-    }
-    return ext.test(source);
-  });
-}
-
-function resolveLibraryGlobalName(id: string, globals: Record<string, string>): string {
-  const source = id.split("?")[0] ?? id;
-  if (globals[source]) return globals[source];
-  const matched = Object.keys(globals).find(
-    (key) => source === key || source.startsWith(`${key}/`),
-  );
-  return matched ? (globals[matched] ?? source) : source;
-}
-
-/**
- * 组装组件库 Vite 配置：build 走 `build.lib`（默认 UMD → `lib/`），serve 为预览应用。
- *
- * 不启用 Hash 部署、public 复制、public-config。不默认 `example/` 预览目录或 antd / Formily externals。
- *
- * 合并顺序：`base(options) → mergeConfig(base, vite) → configure(final)`
- * @public
- */
-export function createLibraryViteConfig(options: CreateLibraryViteConfigOptions): UserConfig {
-  const {
-    rootDir,
-    command,
-    alias,
-    entry = "src/index.ts",
-    name,
-    outDir = "lib",
-    fileName,
-    cssFileName = "index",
-    formats = DEFAULT_LIBRARY_FORMATS,
-    externals: externalsOption,
-    globals: globalsOption,
-    useHttps = false,
-    openBrowser = true,
-    devProxy,
-    reactCompiler = "build-only",
-    react: enableReact = true,
-    svgr: svgrOption = false,
-    less,
-    previewHtml,
-    onRun,
-    onDone,
-    plugins: extraPlugins = [],
-    vite: viteOverride,
-    configure,
-  } = options;
-
-  const isDev = command === "serve";
-  const isBuild = command === "build";
-
-  if (isBuild && needsLibraryName(formats) && (name == null || name.trim() === "")) {
-    throw new Error(
-      '[vite-config] createLibraryViteConfig: `name` is required when formats include "umd" or "iife".',
-    );
-  }
-
-  const plugins: PluginOption[] = [
-    ...(svgrOption ? [svgReactPlugin(svgrOption === true ? {} : svgrOption)] : []),
-    ...(enableReact ? [react()] : []),
-    ...reactCompilerPlugin({ command, mode: reactCompiler }),
-    ...(isDev && previewHtml
-      ? [
-          createHtmlPlugin({
-            minify: false,
-            template: path.resolve(rootDir, previewHtml),
-          }),
-        ]
-      : []),
-    ...(isDev && useHttps ? [basicSsl()] : []),
-    ...extraPlugins,
-    ...(isBuild && (onRun || onDone) ? [lifecyclePlugin({ onRun, onDone })] : []),
-  ];
-
-  const resolvedExternals = resolveExternals(externalsOption);
-  const resolvedGlobals = resolveLibraryGlobals(resolvedExternals, globalsOption);
-
-  const base: UserConfig = {
-    root: rootDir,
-    publicDir: false,
-    plugins,
-    resolve: {
-      alias,
-    },
-    css: {
-      preprocessorOptions: {
-        less: buildLessOptions(less),
-      },
-    },
-    ...(isDev
-      ? {
-          server: {
-            https: useHttps ? {} : undefined,
-            host: true,
-            open: openBrowser,
-            ...(devProxy ? { proxy: devProxy } : {}),
-          },
-        }
-      : {
-          build: {
-            outDir,
-            emptyOutDir: true,
-            lib: {
-              entry: path.resolve(rootDir, entry),
-              ...(name != null && name.trim() !== "" ? { name } : {}),
-              formats,
-              fileName: resolveLibraryFileName(fileName, formats),
-              cssFileName,
-            },
-            rolldownOptions: {
-              external: (id: string) => matchLibraryExternal(id, resolvedExternals),
-              output: {
-                globals: (id: string) => resolveLibraryGlobalName(id, resolvedGlobals),
-              },
-            },
-          },
-        }),
-  };
-
-  let merged = viteOverride ? mergeConfig(base, viteOverride) : base;
-  if (configure) {
-    merged = configure(merged);
-  }
-  return merged;
-}
+import { readFile, rm, writeFile } from "node:fs/promises";
+import path from "node:path";
+import basicSsl from "@vitejs/plugin-basic-ssl";
+import react from "@vitejs/plugin-react";
+import { mergeConfig, type Plugin, type PluginOption, type UserConfig } from "vite";
+import { createHtmlPlugin } from "vite-plugin-html";
+
+import { lifecyclePlugin } from "./plugins/lifecycle.ts";
+import { buildLessOptions } from "./plugins/less-tilde.ts";
+import { reactCompilerPlugin } from "./plugins/react-compiler.ts";
+import { svgReactPlugin } from "./plugins/svg-react.ts";
+
+import type { CreateLibraryViteConfigOptions, LibraryFormats } from "./types.ts";
+
+/**
+ * 组件库构建默认外置
+ * 传入 `externals` 时整表替换；追加时展开本常量。
+ * @public
+ */
+export const DEFAULT_LIBRARY_EXTERNALS = ["react", "react-dom"] as const;
+
+/**
+ * UMD / IIFE 默认全局名。未出现在表里的字符串 external 用自身包名。
+ * @public
+ */
+export const DEFAULT_LIBRARY_GLOBALS: Record<string, string> = {
+  react: "React",
+  "react-dom": "ReactDOM",
+};
+
+const DEFAULT_LIBRARY_FORMATS: LibraryFormats[] = ["umd"];
+
+/**
+ * 删除 CJS 产物的 sourcemap，并抹掉产物末尾的 `sourceMappingURL` 注释。
+ *
+ * 理由：webpack 5（`exports.import`）与 webpack 4（`mainFields: browser → module → main`）都命中
+ * ESM 产物，CJS map 只对 Node SSR + `--enable-source-maps` 有意义，却让随包 map 体积翻倍
+ * （实测 `form-render` 双份 701KB、`form-render-mobile` 622KB，超 check-package 的 512KB 守卫）。
+ * 源码调试由 ESM map（含 `sourcesContent`）+ 随包发布的 `src` 覆盖。
+ * 决策见 docs/src-direct-vs-dist-evaluation.md §11 第 6 项 (c)。
+ */
+function stripCjsSourcemapPlugin(): Plugin {
+  let outDir = "";
+  return {
+    name: "hzab:strip-cjs-sourcemap",
+    apply: "build",
+    configResolved(config) {
+      outDir = config.build.outDir;
+    },
+    async writeBundle(_options, bundle) {
+      for (const fileName of Object.keys(bundle)) {
+        const file = path.resolve(outDir, fileName);
+        if (fileName.endsWith(".cjs.map")) {
+          await rm(file, { force: true });
+          continue;
+        }
+        if (!fileName.endsWith(".cjs")) continue;
+        // 注释必须一起删：留着会让 DevTools / webpack 去请求已不存在的 map。
+        const code = await readFile(file, "utf8");
+        const stripped = code.replace(/\n?\/\/# sourceMappingURL=\S+\s*$/u, "\n");
+        if (stripped !== code) await writeFile(file, stripped, "utf8");
+      }
+    },
+  };
+}
+
+function needsLibraryName(formats: readonly LibraryFormats[]): boolean {
+  return formats.includes("umd") || formats.includes("iife");
+}
+
+function resolveExternals(
+  externals: CreateLibraryViteConfigOptions["externals"],
+): (string | RegExp)[] {
+  if (externals === false) return [];
+  if (externals == null) return [...DEFAULT_LIBRARY_EXTERNALS];
+  return externals;
+}
+
+function resolveLibraryFileName(
+  fileName: CreateLibraryViteConfigOptions["fileName"],
+  formats: readonly LibraryFormats[],
+): string | ((format: string, entryName: string) => string) {
+  if (fileName != null) return fileName;
+  if (formats.length === 1) {
+    return () => "index.js";
+  }
+  // cjs 产物用 `.cjs` 后缀：宿主包若声明 `"type": "module"`，`.js` 会被当作 ESM 解析，
+  // 而 cjs 产物内容是 CommonJS（module.exports），require() 会因 ESM 误判而失败。
+  return (format) => {
+    if (format === "es") return "index.js";
+    if (format === "cjs") return "index.cjs";
+    return `index.${format}.js`;
+  };
+}
+
+function resolveLibraryGlobals(
+  externals: readonly (string | RegExp)[],
+  globals?: Record<string, string>,
+): Record<string, string> {
+  const inferred: Record<string, string> = {};
+  for (const ext of externals) {
+    if (typeof ext !== "string") continue;
+    inferred[ext] = DEFAULT_LIBRARY_GLOBALS[ext] ?? ext;
+  }
+  return { ...inferred, ...globals };
+}
+
+/** 字符串 external 同时匹配子路径（如 `react` → `react/jsx-runtime`）。 */
+export function matchLibraryExternal(id: string, externals: readonly (string | RegExp)[]): boolean {
+  const source = id.split("?")[0] ?? id;
+  return externals.some((ext) => {
+    if (typeof ext === "string") {
+      return source === ext || source.startsWith(`${ext}/`);
+    }
+    return ext.test(source);
+  });
+}
+
+function resolveLibraryGlobalName(id: string, globals: Record<string, string>): string {
+  const source = id.split("?")[0] ?? id;
+  if (globals[source]) return globals[source];
+  const matched = Object.keys(globals).find(
+    (key) => source === key || source.startsWith(`${key}/`),
+  );
+  return matched ? (globals[matched] ?? source) : source;
+}
+
+/**
+ * 组装组件库 Vite 配置：build 走 `build.lib`（默认 UMD → `lib/`），serve 为预览应用。
+ *
+ * 不启用 Hash 部署、public 复制、public-config。不默认 `example/` 预览目录或 antd / Formily externals。
+ *
+ * 合并顺序：`base(options) → mergeConfig(base, vite) → configure(final)`
+ * @public
+ */
+export function createLibraryViteConfig(options: CreateLibraryViteConfigOptions): UserConfig {
+  const {
+    rootDir,
+    command,
+    alias,
+    entry = "src/index.ts",
+    name,
+    outDir = "lib",
+    fileName,
+    cssFileName = "index",
+    formats = DEFAULT_LIBRARY_FORMATS,
+    externals: externalsOption,
+    globals: globalsOption,
+    useHttps = false,
+    openBrowser = true,
+    devProxy,
+    reactCompiler = "build-only",
+    react: enableReact = true,
+    svgr: svgrOption = false,
+    less,
+    previewHtml,
+    onRun,
+    onDone,
+    plugins: extraPlugins = [],
+    vite: viteOverride,
+    configure,
+  } = options;
+
+  const isDev = command === "serve";
+  const isBuild = command === "build";
+
+  if (isBuild && needsLibraryName(formats) && (name == null || name.trim() === "")) {
+    throw new Error(
+      '[vite-config] createLibraryViteConfig: `name` is required when formats include "umd" or "iife".',
+    );
+  }
+
+  const plugins: PluginOption[] = [
+    ...(svgrOption ? [svgReactPlugin(svgrOption === true ? {} : svgrOption)] : []),
+    ...(enableReact ? [react()] : []),
+    ...reactCompilerPlugin({ command, mode: reactCompiler }),
+    ...(isDev && previewHtml
+      ? [
+          createHtmlPlugin({
+            minify: false,
+            template: path.resolve(rootDir, previewHtml),
+          }),
+        ]
+      : []),
+    ...(isDev && useHttps ? [basicSsl()] : []),
+    ...extraPlugins,
+    ...(isBuild && (onRun || onDone) ? [lifecyclePlugin({ onRun, onDone })] : []),
+    ...(isBuild ? [stripCjsSourcemapPlugin()] : []),
+  ];
+
+  const resolvedExternals = resolveExternals(externalsOption);
+  const resolvedGlobals = resolveLibraryGlobals(resolvedExternals, globalsOption);
+
+  const base: UserConfig = {
+    root: rootDir,
+    publicDir: false,
+    plugins,
+    resolve: {
+      alias,
+    },
+    css: {
+      preprocessorOptions: {
+        less: buildLessOptions(less),
+      },
+    },
+    ...(isDev
+      ? {
+          server: {
+            https: useHttps ? {} : undefined,
+            host: true,
+            open: openBrowser,
+            ...(devProxy ? { proxy: devProxy } : {}),
+          },
+        }
+      : {
+          build: {
+            outDir,
+            emptyOutDir: true,
+            // 产物随包发布：消费方 webpack 的 devtool 会消费依赖自带的 map，缺失时
+            // DevTools 只能看到缩短标识符后的编译产物（见 docs/src-direct-vs-dist-evaluation.md §7.1）。
+            sourcemap: true,
+            // 降到 ES2018：webpack 4（umi3 线 abt-app）内置 acorn 6 解析到 ES2019 为止，不认 ES2020 的
+            // `?.` / `??`，产物保持默认 target 会让该线直接 Module parse failed。ES2018 是覆盖 acorn 6
+            // 边界的最小目标（对象展开仍保留），见 docs/src-direct-vs-dist-evaluation.md §7.2。
+            target: "es2018",
+            lib: {
+              entry: path.resolve(rootDir, entry),
+              ...(name != null && name.trim() !== "" ? { name } : {}),
+              formats,
+              fileName: resolveLibraryFileName(fileName, formats),
+              cssFileName,
+            },
+            rolldownOptions: {
+              external: (id: string) => matchLibraryExternal(id, resolvedExternals),
+              output: {
+                globals: (id: string) => resolveLibraryGlobalName(id, resolvedGlobals),
+              },
+            },
+          },
+        }),
+  };
+
+  let merged = viteOverride ? mergeConfig(base, viteOverride) : base;
+  if (configure) {
+    merged = configure(merged);
+  }
+  return merged;
+}

package/src/create-package-vitest-config.ts

@@ -1,54 +1,54 @@
-import react from "@vitejs/plugin-react";
-import { mergeConfig, type PluginOption } from "vite";
-
-import { stubLessPlugin } from "./plugins/stub-less.ts";
-
-import type { CreatePackageVitestConfigOptions } from "./vitest-types.ts";
-import type { ViteUserConfig as VitestUserConfig } from "vitest/config";
-
-/**
- * 组装包级 Vitest 配置。
- *
- * 合并顺序：`base(options) → mergeConfig(base, vite) → configure(final)`
- */
-export function createPackageVitestConfig(
-  options: CreatePackageVitestConfigOptions,
-): VitestUserConfig {
-  const {
-    packageRoot,
-    alias,
-    react: enableReact = false,
-    stubLess = false,
-    environment = "happy-dom",
-    include = ["test/**/*.test.ts"],
-    setupFiles,
-    plugins: extraPlugins = [],
-    vite: viteOverride,
-    configure,
-  } = options;
-
-  const plugins: PluginOption[] = [
-    ...(enableReact ? [react()] : []),
-    ...(stubLess ? [stubLessPlugin()] : []),
-    ...extraPlugins,
-  ];
-
-  const base: VitestUserConfig = {
-    root: packageRoot,
-    plugins,
-    resolve: {
-      alias,
-    },
-    test: {
-      environment,
-      include,
-      ...(setupFiles ? { setupFiles } : {}),
-    },
-  };
-
-  let merged = viteOverride ? mergeConfig(base, viteOverride) : base;
-  if (configure) {
-    merged = configure(merged);
-  }
-  return merged;
-}
+import react from "@vitejs/plugin-react";
+import { mergeConfig, type PluginOption } from "vite";
+
+import { stubLessPlugin } from "./plugins/stub-less.ts";
+
+import type { CreatePackageVitestConfigOptions } from "./vitest-types.ts";
+import type { ViteUserConfig as VitestUserConfig } from "vitest/config";
+
+/**
+ * 组装包级 Vitest 配置。
+ *
+ * 合并顺序：`base(options) → mergeConfig(base, vite) → configure(final)`
+ */
+export function createPackageVitestConfig(
+  options: CreatePackageVitestConfigOptions,
+): VitestUserConfig {
+  const {
+    packageRoot,
+    alias,
+    react: enableReact = false,
+    stubLess = false,
+    environment = "happy-dom",
+    include = ["test/**/*.test.ts"],
+    setupFiles,
+    plugins: extraPlugins = [],
+    vite: viteOverride,
+    configure,
+  } = options;
+
+  const plugins: PluginOption[] = [
+    ...(enableReact ? [react()] : []),
+    ...(stubLess ? [stubLessPlugin()] : []),
+    ...extraPlugins,
+  ];
+
+  const base: VitestUserConfig = {
+    root: packageRoot,
+    plugins,
+    resolve: {
+      alias,
+    },
+    test: {
+      environment,
+      include,
+      ...(setupFiles ? { setupFiles } : {}),
+    },
+  };
+
+  let merged = viteOverride ? mergeConfig(base, viteOverride) : base;
+  if (configure) {
+    merged = configure(merged);
+  }
+  return merged;
+}

package/src/create-vite-config.ts

@@ -1,22 +1,22 @@
-import { createAppViteConfig } from "./create-app-vite-config.ts";
-
-import type { CreateAppViteConfigOptions, CreateAppViteConfigResult } from "./types.ts";
-
-/** @public */
-export type CreateViteConfigOptions = Partial<CreateAppViteConfigOptions>;
-
-/**
- * Default Vite factory for consumer apps.
- * Existing `createAppViteConfig` remains the full-control API.
- * @public
- */
-export function createViteConfig(options: CreateViteConfigOptions = {}): CreateAppViteConfigResult {
-  return createAppViteConfig({
-    rootDir: options.rootDir ?? process.cwd(),
-    command: options.command ?? "serve",
-    mode: options.mode ?? "development",
-    openBrowser: options.openBrowser ?? false,
-    reactCompiler: false,
-    ...options,
-  });
-}
+import { createAppViteConfig } from "./create-app-vite-config.ts";
+
+import type { CreateAppViteConfigOptions, CreateAppViteConfigResult } from "./types.ts";
+
+/** @public */
+export type CreateViteConfigOptions = Partial<CreateAppViteConfigOptions>;
+
+/**
+ * Default Vite factory for consumer apps.
+ * Existing `createAppViteConfig` remains the full-control API.
+ * @public
+ */
+export function createViteConfig(options: CreateViteConfigOptions = {}): CreateAppViteConfigResult {
+  return createAppViteConfig({
+    rootDir: options.rootDir ?? process.cwd(),
+    command: options.command ?? "serve",
+    mode: options.mode ?? "development",
+    openBrowser: options.openBrowser ?? false,
+    reactCompiler: false,
+    ...options,
+  });
+}