@yannick-z/modulo 0.2.0 → 0.3.0

package/src/packer/collect-modules.ts

@@ -1,77 +1,66 @@
-import { existsSync, readdirSync } from "node:fs";
 import { resolve } from "node:path";
 import picocolors from "picocolors";
-import { get_global_config } from "../config/index.ts";
-import { debug_log } from "../tools/debug-log.ts";
+import { debug_log } from "../tools/log.ts";
 import { get_framework_name } from "../tools/get-framework-name.ts";
+import { get_directories, find_entry_file, exists } from "../tools/file.ts";
 import type { ModuloArgs_Pack } from "../args/index.ts";
+import type { GLOBAL_CONFIG } from "../config/type.ts";
 
+/**
+ * 收集模块入口文件
+ * 扫描指定目录下的子目录，查找符合规则的入口文件（index/main/同名文件）
+ *
+ * @param args CLI 参数
+ * @param kind 模块类型（page 或 module）
+ * @returns 模块名到入口文件路径的映射对象，如果未找到任何模块则返回 undefined
+ */
 export function collect_modules(
-  args: ModuloArgs_Pack,
-  kind: "page" | "module"
-) {
-  const global_config = get_global_config(args);
-  const framework_name = get_framework_name();
-  const module_path = global_config.input[`${kind}s`];
-  const exist = existsSync(module_path);
-  debug_log(
-    picocolors.blue("check module_path"),
-    module_path,
-    exist ? "exists" : "NOT exists"
-  );
-  // 解析目录下的所有模块
-  const module_entries = !exist
-    ? []
-    : readdirSync(module_path, { withFileTypes: true })
-        .filter((item) => {
-          debug_log(
-            "checking module is directory",
-            item.name,
-            item.isDirectory()
-          );
-          return item.isDirectory();
-        })
-        // 每个模块都要求以index或者main或者文件夹同名命名
-        .map((dirent) => {
-          const dir_path = resolve(module_path, dirent.name);
-          const entry_file_path = [
-            resolve(dir_path, "index.ts"),
-            resolve(dir_path, "index.tsx"),
-            resolve(dir_path, "index.js"),
-            resolve(dir_path, "index.jsx"),
-            resolve(dir_path, "main.ts"),
-            resolve(dir_path, "main.tsx"),
-            resolve(dir_path, "main.js"),
-            resolve(dir_path, "main.jsx"),
-            // vue组件常常用vue文件作为入口，因此优先级高于同名ts和tsx文件
-            ...(framework_name === "vue"
-              ? [
-                  resolve(dir_path, "index.vue"),
-                  resolve(dir_path, "main.vue"),
-                  resolve(dir_path, `${dirent.name}.vue`),
-                ]
-              : []),
-            resolve(dir_path, `${dirent.name}.ts`),
-            resolve(dir_path, `${dirent.name}.tsx`),
-            resolve(dir_path, `${dirent.name}.js`),
-            resolve(dir_path, `${dirent.name}.jsx`),
-          ].find((path) => {
-            const exists = existsSync(path);
-            debug_log(
-              "checking entry candidate",
-              `${path} ${picocolors[exists ? "green" : "red"](
-                `exists - ${exists}`
-              )}`
-            );
-            return exists;
-          });
-          debug_log("found entry", entry_file_path);
-          return [dirent.name, entry_file_path];
-        })
-        // 没有找到入口的就不管
-        .filter((entry): entry is [string, string] => !!entry[1]);
+	args: ModuloArgs_Pack,
+	kind: "page" | "module",
+	global_config: GLOBAL_CONFIG,
+): Record<string, string> | undefined {
+	const framework_name = get_framework_name();
+	const module_path = global_config.input[`${kind}s`];
+	const isExist = exists(module_path);
 
-  return module_entries.length > 0
-    ? Object.fromEntries(module_entries)
-    : undefined;
+	debug_log(
+		picocolors.blue("check module_path"),
+		module_path,
+		isExist ? "exists" : "NOT exists",
+	);
+
+	if (!isExist) {
+		return undefined;
+	}
+
+	// 基础候选文件名
+	const baseCandidates = ["index", "main"];
+	// 扩展名列表
+	const extensions = [".ts", ".tsx", ".js", ".jsx"];
+	// Vue 特有扩展名
+	if (framework_name === "vue") {
+		extensions.unshift(".vue");
+	}
+
+	// 解析目录下的所有模块
+	const module_entries = get_directories(module_path)
+		.map((dirName) => {
+			const dir_path = resolve(module_path, dirName);
+
+			// 构建候选文件名列表，包含目录名
+			const candidates = [...baseCandidates, dirName];
+
+			// 查找入口文件
+			const entry_file_path = find_entry_file(dir_path, candidates, extensions);
+
+			debug_log("found entry", dirName, entry_file_path || "NOT FOUND");
+
+			return [dirName, entry_file_path];
+		})
+		// 没有找到入口的就不管
+		.filter((entry): entry is [string, string] => !!entry[1]);
+
+	return module_entries.length > 0
+		? Object.fromEntries(module_entries)
+		: undefined;
 }

package/src/packer/get-externals-and-tags.ts

@@ -1,65 +1,88 @@
 import type { ModuloArgs_Pack } from "../args/index.ts";
 import {
-  is_env_external,
-  type ExternalLibs,
-  type ImportExternal,
-  is_module_typed_external_url,
-  type ModuleTypedExternalUrl,
-  type ConfigExternalUrl,
-} from "../config/externals.ts";
-import type { Tag } from "../config/preset/html.ts";
-import { is_string } from "../type/guard.ts";
+	type ExternalLibs,
+	type ConfigExternalUrl,
+	type ImportExternal,
+} from "../config/type.ts";
+import {
+	is_env_external,
+	is_string,
+	is_import_external,
+} from "../type/guard.ts";
 
-function get_external_url(args: ModuloArgs_Pack, url: ConfigExternalUrl) {
-  let _url = url;
-  while (!is_string(_url)) {
-    if (is_env_external(_url)) {
-      _url = _url[args.pack.env];
-    } else {
-      const mode = args.pack.esm ? "esm" : "umd";
-      _url = mode in _url ? (_url as any)[mode] : undefined;
-    }
-  }
-  return _url;
+function getExternalUrl(args: ModuloArgs_Pack, url: ConfigExternalUrl) {
+	let resolvedUrl = url;
+	while (!is_string(resolvedUrl)) {
+		if (is_env_external(resolvedUrl)) {
+			resolvedUrl = resolvedUrl[args.pack.env];
+		} else {
+			// 理论上不会走到这里，因为现在只有 string 和 EnvExternalUrl
+			// 但为了类型安全，还是保留一个 else 分支或者抛出错误
+			return undefined;
+		}
+	}
+	return resolvedUrl;
 }
 
-export function get_externals_importmaps(
-  args: ModuloArgs_Pack,
-  external_list: ExternalLibs
+/**
+ * 解析 External 配置，生成 externals 对象和 importMap
+ * @param args CLI 参数
+ * @param externalLibs 外部依赖配置
+ * @param externalsType External 类型（importmap 或 script）
+ * @returns externals 和 importMap
+ */
+export function getExternalsAndImportMap(
+	args: ModuloArgs_Pack,
+	externalLibs: ExternalLibs,
+	externalsType: "importmap" | "script" = "importmap",
 ) {
-  return Object.entries(external_list).reduce(
-    ({ externals, importmaps }, [lib_name, data]) => {
-      // 归一化为GlobalExternal或者ImportExternal
-      // 此处类型推导有问题，因此手动断言
-      const _data = is_env_external(data) ? data[args.pack.env] : data;
-      const external_lib =
-        typeof _data === "string"
-          ? { url: { esm: _data, umd: _data } }
-          : is_module_typed_external_url(_data)
-          ? { url: _data }
-          : _data;
+	return Object.entries(externalLibs).reduce(
+		({ externals, importMap }, [libName, data]) => {
+			// 归一化为GlobalExternal或者ImportExternal
+			const externalData = is_env_external(data) ? data[args.pack.env] : data;
+
+			let externalLib: ImportExternal;
+
+			if (typeof externalData === "string") {
+				externalLib = { url: externalData };
+			} else {
+				// 此时 externalData 已经是 ImportExternal 类型
+				externalLib = externalData as ImportExternal;
+			}
+
+			const url = getExternalUrl(args, externalLib.url);
+
+			if (externalsType === "script") {
+				// Script 模式：external 映射为全局变量
+				const globalVar = externalLib.global || libName;
+				const importName = externalLib.importName || libName;
+				(Array.isArray(importName) ? importName : [importName]).forEach(
+					(name) => (externals[name] = globalVar),
+				);
 
-      // 合并externals，以剔除打包内容
-      const _importName = external_lib.importName || lib_name;
-      (Array.isArray(_importName) ? _importName : [_importName]).forEach(
-        (name) => (externals[name] = lib_name)
-      );
+				if (url) {
+					importMap[libName] = url; // 复用 importMap 存储 URL，但在 prepare 中会生成 script 标签
+				}
+			} else {
+				// Importmap 模式：external 映射为包名（由 importmap 解析）
+				const importName = externalLib.importName || libName;
+				(Array.isArray(importName) ? importName : [importName]).forEach(
+					(name) => (externals[name] = libName),
+				);
 
-      const url = get_external_url(args, external_lib.url);
-      // 如果有external的url
-      if (url) {
-        // 如果是import的，加入到importmaps
-        importmaps[lib_name] = url;
-      }
+				if (url) {
+					importMap[libName] = url;
+				}
+			}
 
-      return {
-        externals,
-        importmaps,
-      };
-    },
-    {
-      externals: {} as Record<string, string>,
-      importmaps: {} as Record<string, string>,
-    }
-  );
+			return {
+				externals,
+				importMap,
+			};
+		},
+		{
+			externals: {} as Record<string, string>,
+			importMap: {} as Record<string, string>,
+		},
+	);
 }

package/src/packer/lib.ts

@@ -6,79 +6,86 @@ import { get_global_config, get_packagejson } from "../config/index.ts";
 import { framework_plugin } from "../tools/get-ui-plugin.ts";
 import { prepare_config } from "./prepare.ts";
 
+/**
+ * 执行库（module）打包
+ *
+ * 使用 Rslib 将模块目录下的代码打包为 ESM 和 UMD 格式。
+ *
+ * @param args CLI 参数
+ */
 export async function lib_pack(args: ModuloArgs_Pack) {
-  const config = get_global_config(args);
-  const packagejson = get_packagejson();
+	const config = await get_global_config(args);
+	const packagejson = get_packagejson();
 
-  const { entries, externals } = prepare_config(args, "module", config);
+	const { entries, externals } = prepare_config(args, "module", config);
 
-  if (!entries) {
-    return;
-  }
+	if (!entries) {
+		return;
+	}
 
-  const rslibConfig = defineConfig({
-    source: {
-      define: config.define,
-      entry: entries,
-    },
-    plugins: [framework_plugin(args), pluginLess()],
-    resolve: {
-      alias: config.alias,
-    },
-    lib: [
-      {
-        format: "esm",
-        syntax: "esnext",
-        dts: false,
-        output: {
-          assetPrefix: `${config.url.base}/modules`,
-          externals,
-          distPath: {
-            root: config.output.modules,
-            js: "esm",
-            jsAsync: "esm",
-            css: "esm",
-          },
-          minify: config.minify,
-        },
-      },
-      {
-        format: "umd",
-        output: {
-          assetPrefix: `${config.url.base}/modules`,
-          externals,
-          distPath: {
-            root: config.output.modules,
-            js: "umd",
-            jsAsync: "umd",
-            css: "umd",
-          },
-          minify: config.minify,
-        },
-        syntax: "es6",
-        umdName: `${packagejson.name}-modules-[name]`,
-      },
-    ],
-    output: {
-      legalComments: "none",
-      target: "web",
-    },
-    performance: {
-      bundleAnalyze: config.analyze
-        ? {
-            analyzerMode: "disabled",
-            generateStatsFile: true,
-          }
-        : undefined,
-      chunkSplit: {
-        strategy: "all-in-one",
-      },
-    },
-  });
+	const rslibConfig = defineConfig({
+		source: {
+			define: config.define,
+			entry: entries,
+		},
+		plugins: [framework_plugin(args, config), pluginLess()],
+		resolve: {
+			alias: config.alias,
+		},
+		lib: [
+			{
+				format: "esm",
+				syntax: "esnext",
+				dts: false,
+				output: {
+					assetPrefix: `${config.url.base}/modules`,
+					externals,
+					distPath: {
+						root: config.output.modules,
+						js: "esm",
+						jsAsync: "esm",
+						css: "esm",
+					},
+					minify: config.minify,
+				},
+			},
+			{
+				format: "umd",
+				output: {
+					assetPrefix: `${config.url.base}/modules`,
+					externals,
+					distPath: {
+						root: config.output.modules,
+						js: "umd",
+						jsAsync: "umd",
+						css: "umd",
+					},
+					minify: config.minify,
+				},
+				syntax: "es6",
+				umdName: `${packagejson.name}-modules-[name]`,
+			},
+		],
+		output: {
+			legalComments: "none",
+			target: "web",
+		},
+		performance: {
+			bundleAnalyze: config.analyze
+				? {
+						analyzerMode: "disabled",
+						generateStatsFile: true,
+					}
+				: undefined,
+			chunkSplit: {
+				strategy: "all-in-one",
+			},
+		},
+	});
 
-  await build(rslibConfig, { watch: args.cmd === "build" && args.pack.watch });
+	await build(rslibConfig, { watch: args.cmd === "build" && args.pack.watch });
 
-  if (args.cmd === "build") {
-    console.log(picocolors.green("\n**** 构建【module】完成 ****\n"));
-  }
+	if (args.cmd === "build") {
+		console.log(picocolors.green("\n**** 构建【module】完成 ****\n"));
+	}
 }

package/src/packer/page.ts

@@ -4,95 +4,119 @@ import { pluginLess } from "@rsbuild/plugin-less";
 import picocolors from "picocolors";
 import type { ModuloArgs_Pack } from "../args/index.ts";
 import { get_global_config } from "../config/index.ts";
-import { get_package_root } from "../tools/find-path-root.ts";
+import {
+	get_package_root,
+	find_workspace_root,
+} from "../tools/find-path-root.ts";
 import { framework_plugin } from "../tools/get-ui-plugin.ts";
-import { pluginUmd } from "@rsbuild/plugin-umd";
 import { prepare_config } from "./prepare.ts";
+import { AutoExternalPlugin } from "./auto-external-plugin.ts";
 
+/**
+ * 执行页面（page）打包
+ *
+ * 使用 Rsbuild 构建单页应用或多页应用。
+ *
+ * @param args CLI 参数
+ */
 export async function page_pack(args: ModuloArgs_Pack) {
-  const config = get_global_config(args);
+	const config = await get_global_config(args);
 
-  const { entries, externals, importmaps_tag } = prepare_config(
-    args,
-    "page",
-    config
-  );
+	const { entries, externals } = prepare_config(args, "page", config);
 
-  if (!entries) {
-    return;
-  }
+	if (!entries) {
+		return;
+	}
 
-  const rsbuildConfig = defineConfig({
-    source: {
-      define: config.define,
-      entry: entries,
-    },
-    plugins: [
-      framework_plugin(args),
-      pluginLess(),
-      pluginUmd({
-        name: "modulo-page",
-      }),
-    ],
-    tools: {
-      rspack: {
-        experiments: {
-          outputModule: args.pack.esm,
-        },
-      },
-      htmlPlugin: true,
-    },
-    output: {
-      assetPrefix: config.url.cdn || config.url.base,
-      distPath: {
-        root: config.output.dist,
-      },
-      externals,
-      filenameHash: config.output.filenameHash,
-      legalComments: "none",
-      minify: config.minify,
-    },
-    html: {
-      meta: config.html.meta,
-      mountId: config.html.root,
-      scriptLoading: args.pack.esm ? "module" : "defer",
-      tags: [importmaps_tag, ...config.html.tags],
-      template:
-        config.html.template ||
-        resolve(get_package_root(), "template/index.html"),
-      templateParameters: {
-        base_prefix: config.url.base,
-      },
-      title: config.html.title,
-    },
-    resolve: {
-      alias: config.alias,
-    },
-    server: {
-      base: config.url.base,
-      open: config.dev_server.open
-        ? config.dev_server.open.map(
-            (name: string) =>
-              config.url.base +
-              (name.endsWith("html") ? `/${name}` : `/${name}.html`)
-          )
-        : false,
-      port: config.dev_server.port,
-      proxy: config.dev_server.proxy,
-    },
-    performance: {
-      chunkSplit: {
-        strategy: "split-by-experience",
-      },
-    },
-  });
+	const workspaceRoot = find_workspace_root(process.cwd());
 
-  const rsbuild = await createRsbuild({ rsbuildConfig });
-  await rsbuild[args.cmd === "dev" ? "startDevServer" : "build"]({
-    watch: args.cmd === "build" && args.pack.watch,
-  });
+	const rsbuildConfig = defineConfig({
+		source: {
+			define: config.define,
+			entry: entries,
+		},
+		plugins: [framework_plugin(config), pluginLess()],
+		tools: {
+			rspack: {
+				experiments: {
+					outputModule: true,
+				},
+				plugins: [
+					// @ts-ignore Rspack 插件类型兼容问题
+					new AutoExternalPlugin(args, config),
+				],
+			},
+			htmlPlugin: true,
+		},
+		output: {
+			assetPrefix: config.url.cdn || config.url.base,
+			distPath: {
+				root: config.output.dist,
+			},
+			externals,
+			filenameHash: config.output.filenameHash,
+			legalComments: "none",
+			minify: config.minify,
+		},
+		html: {
+			meta: config.html.meta,
+			mountId: config.html.root,
+			scriptLoading: "module",
+			tags: config.html.tags,
+			template:
+				config.html.template ||
+				resolve(get_package_root(), "template/index.html"),
+			templateParameters: {
+				base_prefix: config.url.base,
+			},
+			title: config.html.title,
+		},
+		resolve: {
+			alias: config.alias,
+		},
+		server: {
+			publicDir: workspaceRoot
+				? {
+						name: workspaceRoot,
+						copyOnBuild: false,
+						watch: false,
+					}
+				: undefined,
+			open: config.dev_server.open
+				? config.dev_server.open.map(
+						(name: string) =>
+							config.url.base +
+							(name.endsWith("html") ? `/${name}` : `/${name}.html`),
+					)
+				: false,
+			port: config.dev_server.port,
+			proxy: config.dev_server.proxy,
+		},
+		performance: {
+			chunkSplit: {
+				strategy: "split-by-experience",
+			},
+		},
+	});
 
-  if (args.cmd === "build") {
-    console.log(picocolors.green("\n**** 构建【page】完成 ****"));
-  }
+	console.log(
+		"Dev Server Config:",
+		JSON.stringify(rsbuildConfig.server, null, 2),
+	);
+
+	const rsbuild = await createRsbuild({ rsbuildConfig });
+
+	if (args.cmd === "dev") {
+		await rsbuild.startDevServer();
+	} else if (args.cmd === "preview") {
+		await rsbuild.preview();
+	} else {
+		await rsbuild.build({
+			watch: args.pack.watch,
+		});
+	}
+
+	if (args.cmd === "build") {
+		console.log(picocolors.green("\n**** 构建【page】完成 ****"));
+	}
 }