@yannick-z/modulo 0.2.0 → 0.3.1

package/src/packer/page.ts

@@ -4,95 +4,118 @@ 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: config.externalsType === "importmap" ? true : undefined,
+				},
+				plugins: [
+					// @ts-ignore Rspack 插件类型兼容问题
+					new AutoExternalPlugin(args, config),
+				],
+			},
+		},
+		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: config.externalsType === "importmap" ? undefined : "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】完成 ****"));
+	}
 }

package/src/packer/prepare.ts

@@ -2,75 +2,81 @@ import picocolors from "picocolors";
 import type { ModuloArgs_Pack } from "../args/index.ts";
 import { collect_modules } from "./collect-modules.ts";
 import { omit_root_path_for_entries } from "../tools/omit-root-path.ts";
-import { get_externals_importmaps } from "./get-externals-and-tags.ts";
+import { getExternalsAndImportMap } from "./get-externals-and-tags.ts";
 import type { GLOBAL_CONFIG } from "../config/type.ts";
 
 let printed = false;
 
 export function prepare_config(
-  args: ModuloArgs_Pack,
-  kind: "page" | "module",
-  config: GLOBAL_CONFIG
+	args: ModuloArgs_Pack,
+	kind: "page" | "module",
+	config: GLOBAL_CONFIG,
 ) {
-  const { externals, importmaps } = get_externals_importmaps(
-    args,
-    config.externals
-  );
+	console.log(picocolors.blueBright(`\n**** 开始构建 【${kind}】 ****`));
+	const entries = collect_modules(args, kind, config);
 
-  !printed &&
-    console.log(
-      `${picocolors.blue("\nexternals:")}\n${JSON.stringify(
-        externals,
-        null,
-        2
-      )}\n`
-    );
+	if (!entries) {
+		console.log(picocolors.red(`\n没有要构建的${kind}，跳过\n`));
+	} else {
+		console.log(
+			`${picocolors.blue(`\n${kind} entries:`)}\n${JSON.stringify(
+				omit_root_path_for_entries(entries),
+				null,
+				2,
+			)}\n`,
+		);
+	}
 
-  if (kind === "page") {
-    console.log(
-      `${picocolors.blue("html_tags:")}\n${JSON.stringify(
-        config.html.tags,
-        null,
-        2
-      )}\n`
-    );
-  }
+	const { externals, importMap } = getExternalsAndImportMap(
+		args,
+		config.externals,
+		config.externalsType,
+	);
 
-  const importmaps_tag = {
-    append: false,
-    head: true,
-    tag: "script",
-    attrs: { type: args.pack.esm ? "importmap" : "systemjs-importmap" },
-    children: `{
-         "imports": ${JSON.stringify(importmaps, null, 2)}
-      }`,
-  };
+	!printed &&
+		console.log(
+			`${picocolors.blue("\nexternals:")}\n${JSON.stringify(
+				externals,
+				null,
+				2,
+			)}\n`,
+		);
 
-  !printed &&
-    console.log(
-      `${picocolors.blue("\nimportmaps:")}\n${JSON.stringify(
-        importmaps,
-        null,
-        2
-      )}\n`
-    );
+	let importMapsTag: any;
 
-  printed = true;
+	if (config.externalsType === "script") {
+		// script 注入模式，生成多个 script 标签
+		importMapsTag = Object.values(importMap).map((url) => ({
+			tag: "script",
+			attrs: { src: url },
+			append: false,
+			head: true,
+		}));
+	} else {
+		// importmap 模式
+		importMapsTag = [
+			{
+				append: false,
+				head: true,
+				tag: "script",
+				attrs: { type: "importmap" },
+				children: `{
+            "imports": ${JSON.stringify(importMap, null, 2)}
+        }`,
+			},
+		];
+	}
 
-  console.log(picocolors.blueBright(`\n**** 开始构建 【${kind}】 ****`));
-  const entries = collect_modules(args, kind);
+	!printed &&
+		console.log(
+			`${picocolors.blue("\nimportmaps/scripts:")}\n${JSON.stringify(
+				importMap,
+				null,
+				2,
+			)}\n`,
+		);
 
-  if (!entries) {
-    console.log(picocolors.red(`\n没有要构建的${kind}，跳过\n`));
-  } else {
-    console.log(
-      `${picocolors.blue(`\n${kind} entries:`)}\n${JSON.stringify(
-        omit_root_path_for_entries(entries),
-        null,
-        2
-      )}\n`
-    );
-  }
+	printed = true;
 
-  return { entries, externals, importmaps_tag };
+	return { entries, externals, importMapsTag };
 }

package/src/tools/cli.ts

@@ -0,0 +1,21 @@
+import readline from "node:readline";
+import picocolors from "picocolors";
+
+/**
+ * CLI 交互式确认
+ * @param message 提示信息
+ * @returns Promise<boolean> 用户是否确认 (Y/y 为 true)
+ */
+export async function confirm(message: string): Promise<boolean> {
+	const rl = readline.createInterface({
+		input: process.stdin,
+		output: process.stdout,
+	});
+
+	return new Promise((resolve) => {
+		rl.question(`${picocolors.yellow(message)} (Y/n) `, (answer) => {
+			rl.close();
+			resolve(answer.toLowerCase() === "y" || answer === "");
+		});
+	});
+}

package/src/tools/file.ts

@@ -1,19 +1,89 @@
-import { readFileSync } from 'node:fs';
-import { resolve } from 'node:path';
-import picocolors from 'picocolors';
-import { debug_log } from './debug-log.ts';
+import { readFileSync, readdirSync, existsSync, statSync } from "node:fs";
+import { resolve, join } from "node:path";
+import picocolors from "picocolors";
+import { debug_log } from "./log.ts";
 
-export function read_file(path: string, error_msg?: string) {
-  try {
-    return readFileSync(path, 'utf8');
-  } catch {
-    console.log(picocolors.red(error_msg || `文件无法访问或者不存在: ${path}`));
-    return '';
-  }
+/**
+ * 读取文件内容
+ * @param path 文件绝对路径
+ * @param error_msg 自定义错误消息（可选）
+ * @param throwError 是否抛出错误（默认 false）
+ * @returns 文件内容字符串，如果失败则返回空字符串（除非 throwError 为 true）
+ */
+export function read_file(
+	path: string,
+	error_msg?: string,
+	throwError = false,
+) {
+	try {
+		return readFileSync(path, "utf8");
+	} catch (error) {
+		const msg = error_msg || `文件无法访问或者不存在: ${path}`;
+		debug_log("read_file error", msg, error);
+		if (throwError) {
+			throw new Error(msg);
+		}
+		console.log(picocolors.red(msg));
+		return "";
+	}
 }
 
+/**
+ * 解析路径并读取文件
+ */
 export function resolve_and_read(root: string, name: string) {
-  const fullpath = resolve(root, name);
-  debug_log(`resolve file: ${name}`, 'result is:', fullpath);
-  return read_file(fullpath);
+	const fullpath = resolve(root, name);
+	debug_log(`resolve file: ${name}`, "result is:", fullpath);
+	return read_file(fullpath);
+}
+
+/**
+ * 获取指定目录下的所有子目录名称
+ * @param path 目标目录路径
+ * @returns 子目录名称列表
+ */
+export function get_directories(path: string): string[] {
+	try {
+		if (!existsSync(path)) return [];
+		return readdirSync(path).filter((file) => {
+			const fullPath = join(path, file);
+			return statSync(fullPath).isDirectory();
+		});
+	} catch (error) {
+		debug_log("get_directories error", path, error);
+		return [];
+	}
+}
+
+/**
+ * 在目录中查找入口文件
+ * @param dir 目标目录
+ * @param candidates 候选文件名（不含扩展名）列表，优先级按顺序
+ * @param extensions 支持的扩展名列表，优先级按顺序
+ * @returns 找到的入口文件绝对路径，如果未找到返回 undefined
+ */
+export function find_entry_file(
+	dir: string,
+	candidates: string[],
+	extensions: string[] = [".ts", ".tsx", ".js", ".jsx", ".vue"],
+): string | undefined {
+	for (const name of candidates) {
+		for (const ext of extensions) {
+			const filename = `${name}${ext}`;
+			const filepath = join(dir, filename);
+			if (existsSync(filepath) && statSync(filepath).isFile()) {
+				return filepath;
+			}
+		}
+	}
+	return undefined;
+}
+
+/**
+ * 检查文件是否存在
+ */
+export function exists(path: string): boolean {
+	const isExist = existsSync(path);
+	debug_log(`check exists: ${path}`, isExist);
+	return isExist;
 }

package/src/tools/find-path-root.ts

@@ -1,29 +1,56 @@
-import fs from 'node:fs';
-import path, { dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { debug_log } from './debug-log.ts';
+import fs from "node:fs";
+import path, { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { debug_log } from "./log.ts";
 
-let packageRoot = '';
+let packageRoot = "";
 
 export function get_package_root() {
-  if (!packageRoot) {
-    const __filename = fileURLToPath(import.meta.url); // get the resolved path to the file
-    const __dirname = dirname(__filename); // get the name of the directory
-
-    let currentDir = path.resolve(__dirname);
-    const root = path.parse(currentDir).root;
-
-    while (currentDir !== root) {
-      const potentialPkgJson = path.join(currentDir, 'package.json');
-      if (fs.existsSync(potentialPkgJson)) {
-        break;
-      }
-      currentDir = path.dirname(currentDir);
-    }
-
-    debug_log('packageRoot', currentDir);
-    packageRoot = currentDir;
-  }
-
-  return packageRoot;
+	if (!packageRoot) {
+		const __filename = fileURLToPath(import.meta.url); // get the resolved path to the file
+		const __dirname = dirname(__filename); // get the name of the directory
+
+		let currentDir = path.resolve(__dirname);
+		const root = path.parse(currentDir).root;
+
+		while (currentDir !== root) {
+			const potentialPkgJson = path.join(currentDir, "package.json");
+			if (fs.existsSync(potentialPkgJson)) {
+				break;
+			}
+			currentDir = path.dirname(currentDir);
+		}
+
+		debug_log("packageRoot", currentDir);
+		packageRoot = currentDir;
+	}
+
+	return packageRoot;
+}
+
+export function find_workspace_root(cwd: string) {
+	let currentDir = path.resolve(cwd);
+	const root = path.parse(currentDir).root;
+
+	while (currentDir !== root) {
+		const pnpmWorkspace = path.join(currentDir, "pnpm-workspace.yaml");
+		const packageJsonPath = path.join(currentDir, "package.json");
+
+		if (fs.existsSync(pnpmWorkspace)) {
+			return currentDir;
+		}
+
+		if (fs.existsSync(packageJsonPath)) {
+			try {
+				const pkg = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
+				if (pkg.workspaces) {
+					return currentDir;
+				}
+			} catch {}
+		}
+
+		currentDir = path.dirname(currentDir);
+	}
+
+	return undefined;
 }

package/src/tools/get-framework-name.ts

@@ -2,13 +2,13 @@ import { get_packagejson } from "../config/index.ts";
 import { PANIC_IF } from "./panic.ts";
 
 export function get_framework_name() {
-  const { dependencies } = get_packagejson();
+	const { dependencies } = get_packagejson();
 
-  PANIC_IF(
-    !("vue" in dependencies || "react" in dependencies),
-    "package.json中未识别到支持的ui库信息, 当前只支持vue和react"
-  );
+	PANIC_IF(
+		!("vue" in dependencies || "react" in dependencies),
+		"package.json中未识别到支持的ui库信息, 当前只支持vue和react",
+	);
 
-  // 该项目是vue还是react项目
-  return "vue" in dependencies ? "vue" : "react";
+	// 该项目是vue还是react项目
+	return "vue" in dependencies ? "vue" : "react";
 }

package/src/tools/get-ui-plugin.ts

@@ -1,23 +1,37 @@
 import { type PluginReactOptions, pluginReact } from "@rsbuild/plugin-react";
 import { type PluginVueOptions, pluginVue2 } from "@rsbuild/plugin-vue2";
-import { get_global_config, get_packagejson } from "../config/index.ts";
+import { get_packagejson } from "../config/index.ts";
+import type { GLOBAL_CONFIG } from "../config/type.ts";
 import { get_framework_name } from "./get-framework-name.ts";
 import { PANIC_IF } from "./panic.ts";
 import type { ModuloArgs_Pack } from "../args/index.ts";
+import semver from "semver";
 
 export function framework_plugin(
-  args: ModuloArgs_Pack,
-  options?: PluginVueOptions | PluginReactOptions
+	global_config: GLOBAL_CONFIG,
+	options?: PluginVueOptions | PluginReactOptions,
 ) {
-  const { dependencies } = get_packagejson();
-  const framework_name = get_framework_name();
+	const { dependencies } = get_packagejson();
+	const framework_name = get_framework_name();
 
-  // 必须使用指定版本号的ui库，以优化代码产出
-  const version = dependencies[framework_name];
-  const global_config = get_global_config(args);
-  PANIC_IF(
-    global_config.ui_lib[framework_name] !== version,
-    "package.json中只允许使用固定版本号, 并且只支持vue-2.7.16和react-17.0.2"
-  );
-  return framework_name === "vue" ? pluginVue2(options) : pluginReact(options);
+	// 必须使用指定版本号的ui库，以优化代码产出
+	const version = dependencies[framework_name];
+
+	const allowed_versions = [
+		global_config.ui_lib.vue2,
+		global_config.ui_lib.react19,
+	];
+
+	const is_valid = allowed_versions.some((allowed) => {
+		const min_version = semver.minVersion(version);
+		return min_version && semver.satisfies(min_version, `^${allowed}`);
+	});
+
+	PANIC_IF(
+		!is_valid,
+		`package.json中只允许使用固定版本号, 并且只支持vue-2.7.16, react-19.2.4 (当前版本: ${version})`,
+	);
+	return framework_name === "vue"
+		? pluginVue2(options as any)
+		: pluginReact(options as any);
 }