@yannick-z/modulo 0.2.0 → 0.3.1

package/src/cli/pack-code.ts

@@ -3,15 +3,26 @@ import { lib_pack } from "../packer/lib.ts";
 import { page_pack } from "../packer/page.ts";
 
 export async function pack_code(args: ModuloArgs_Pack) {
-  const { target } = args;
+	const { target } = args;
 
-  //先构建页面，防止产物目录被清理掉
-  // target为all的时候不允许watch，只能分别启动两个进程
-  if (target === "page" || target === "all") {
-    await page_pack(args);
-  }
+	if (args.cmd === "preview") {
+		await page_pack(args);
+		return;
+	}
 
-  if (target === "module" || target === "all") {
-    await lib_pack(args);
-  }
+	//先构建页面，防止产物目录被清理掉
+	// target为all的时候不允许watch，只能分别启动两个进程
+	// 针对 dev 模式优化：并行启动 page 和 module
+	if (target === "all" && args.cmd === "dev") {
+		await Promise.all([page_pack(args), lib_pack(args)]);
+		return;
+	}
+
+	if (target === "page" || target === "all") {
+		await page_pack(args);
+	}
+
+	if (target === "module" || target === "all") {
+		await lib_pack(args);
+	}
 }

package/src/config/example/example-config.ts

@@ -1,46 +1,57 @@
 import picocolors from "picocolors";
 import { star_line } from "../../initiator/modify-scripts.ts";
-import { preset_alias } from "../preset/alias.ts";
-import { preset_config } from "../preset/index.ts";
+import { preset_alias, preset_config, preset_ui_libs } from "../presets.ts";
 import type { USER_CONFIG } from "../type.ts";
 import { common_example_externals, presets } from "./example-externals.ts";
 
-export function get_example_config(preset?: "react" | "vue" | undefined) {
-  console.log(
-    picocolors.magenta(
-      `\n${star_line}\n默认配置文件中的externals内容为推荐内容\n请注意手动替换配置文件中externals的url，以保证符合项目需求\n如果不需要externals部分依赖，也可以将他们从列表中删除\n${star_line}\n`
-    )
-  );
-  return {
-    // 提供一些常用的配置
-    input: preset_config.input,
-    output: {
-      filenameHash: true,
-    },
-    url: {
-      base: "/",
-    },
-    alias: preset_alias,
-    html: {
-      root: "app",
-      title: "Modulo Page",
-      meta: {},
-      tags: [
-        {
-          tag: "script",
-          attrs: {
-            src: "/packages/webhost/dist/webhost.system.js",
-          },
-          append: false,
-          publicPath: false,
-        },
-      ],
-    },
-    dev_server: {
-      proxy: preset_config.dev_server.proxy,
-    },
-    externals: preset ? presets[preset] : common_example_externals,
-  } as USER_CONFIG;
+export function get_example_config(
+	preset?: keyof typeof preset_ui_libs | undefined,
+) {
+	console.log(
+		picocolors.magenta(
+			`\n${star_line}\n默认配置文件中的externals内容为推荐内容\n请注意手动替换配置文件中externals的url，以保证符合项目需求\n如果不需要externals部分依赖，也可以将他们从列表中删除\n${star_line}\n`,
+		),
+	);
+
+	let externals = common_example_externals;
+	if (preset) {
+		if (preset === "react19") {
+			externals = presets.react19;
+		} else if (preset === "vue2" || preset === "vue2") {
+			externals = presets.vue2;
+		}
+	}
+
+	return {
+		// 提供一些常用的配置
+		input: preset_config.input,
+		output: {
+			filenameHash: true,
+		},
+		url: {
+			base: "/",
+		},
+		alias: preset_alias,
+		html: {
+			root: "app",
+			title: "Modulo Page",
+			meta: {},
+			tags: [
+				{
+					tag: "script",
+					attrs: {
+						src: "/packages/webhost/dist/webhost.system.js",
+					},
+					append: false,
+					publicPath: false,
+				},
+			],
+		},
+		dev_server: {
+			proxy: preset_config.dev_server.proxy,
+		},
+		externals,
+	} as USER_CONFIG;
 }
 
-export const default_config_file_name = "modulo.config.json";
+export const default_config_file_name = "modulo.config.ts";

package/src/config/example/example-externals.ts

@@ -1,47 +1,31 @@
-import type { ExternalLibs } from "../externals.ts";
+import type { ExternalLibs } from "../type.ts";
 
 // 构建会将以下依赖排除在外，不打包进产物，也可配置更多的依赖
 export const vue2_example_externals: ExternalLibs = {
-  vue: {
-    // 支持多个importName，以避免import Vue from 'Vue'这种不正规的写法
-    importName: ["vue", "Vue"],
-    // preset代表初始化配置的时候能够减少无用配置，比如vue的preset会自动过滤只配置vue的externals
-    // url可以直接写字符串，则无论哪种打包模式，都使用这个url
-    // 也可以分别提供umd和esm的url，则会根据打包模式自动切换
-    // 另外还支持dev和prd模式分别提供不同的url
-    url: {
-      umd: "https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js",
-      esm: "https://cdn.jsdelivr.net/npm/vue@2.7.16/+esm",
-    },
-  },
+	vue: {
+		// 支持多个importName，以避免import Vue from 'Vue'这种不正规的写法
+		importName: ["vue", "Vue"],
+		// preset代表初始化配置的时候能够减少无用配置，比如vue的preset会自动过滤只配置vue的externals
+		// url可以直接写字符串，则无论哪种打包模式，都使用这个url
+		// 也可以分别提供umd和esm的url，则会根据打包模式自动切换
+		// 另外还支持dev和prd模式分别提供不同的url
+		url: "https://cdn.jsdelivr.net/npm/vue@2.7.16/+esm",
+	},
 };
-export const react17_example_externals: ExternalLibs = {
-  react: {
-    importName: ["react", "React"],
-    url: {
-      umd: "https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js",
-      esm: "https://cdn.jsdelivr.net/npm/react@17.0.2/+esm",
-    },
-  },
-  // 不写importName，则默认使用libName作为importName
-  "react-dom": {
-    umd: "/packages/common/js/react-17.0.2/umd/react-dom.production.min.js",
-    esm: "https://cdn.jsdelivr.net/npm/react-dom@17.0.2/+esm",
-  },
-  "react/jsx-runtime": {
-    umd: "/packages/common/js/react-17.0.2/umd/react-jsx-runtime.js",
-    esm: "/packages/common/js/react-17.0.2/esm/react-jsx-runtime.js",
-  },
+export const react19_example_externals: ExternalLibs = {
+	react: {
+		importName: ["react", "React"],
+		url: "https://esm.sh/react@19.2.4",
+	},
+	"react-dom": "https://esm.sh/react-dom@19.2.4",
+	"react/jsx-runtime": "https://esm.sh/react@19.2.4/jsx-runtime",
 };
 export const common_example_externals: ExternalLibs = {
-  jquery: "https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js",
-  rxjs: {
-    umd: "https://cdn.jsdelivr.net/npm/rxjs@7.8.2/dist/bundles/rxjs.umd.min.js",
-    esm: "https://cdn.jsdelivr.net/npm/rxjs@7.8.2/+esm",
-  },
+	jquery: "https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js",
+	rxjs: "https://cdn.jsdelivr.net/npm/rxjs@7.8.2/+esm",
 };
 
 export const presets = {
-  vue2: { ...vue2_example_externals, ...common_example_externals },
-  react17: { ...react17_example_externals, ...common_example_externals },
+	vue2: { ...vue2_example_externals, ...common_example_externals },
+	react19: { ...react19_example_externals, ...common_example_externals },
 };

package/src/config/index.ts

@@ -1,27 +1,197 @@
+import { resolve } from "node:path";
+import { cwd } from "node:process";
+import { existsSync } from "node:fs";
+import { pathToFileURL } from "node:url";
+import type { ModuloArgs_Pack } from "../args/index.ts";
+import { debug_log } from "../tools/log.ts";
 import { resolve_and_read } from "../tools/file.ts";
 import { jsonparse } from "../tools/json.ts";
+import { merge_user_config } from "../tools/merge-user-config.ts";
 import { PANIC_IF } from "../tools/panic.ts";
-import { root } from "./generate_config.ts";
+import { preset_config, preset_minify_config } from "./presets.ts";
+import type { GLOBAL_CONFIG, USER_CONFIG } from "./type.ts";
+
+/**
+ * 命令启动时候的目录作为根目录
+ */
+export const root = cwd();
 
 interface PackageJson {
-  name: string;
-  dependencies: Record<string, string>;
-  scripts: undefined | Record<string, string>;
+	name: string;
+	dependencies: Record<string, string>;
+	scripts: undefined | Record<string, string>;
 }
 /**
- * 读取package.json
+ * 读取并缓存 package.json 内容
+ * @returns package.json 的对象
+ * @throws 当文件不存在或缺少 name 字段时抛出异常
  */
 let packagejson = null as PackageJson | null;
-export function get_packagejson() {
-  if (!packagejson) {
-    // biome-ignore lint/style/noNonNullAssertion: <panic if content nullable>
-    packagejson = jsonparse<PackageJson>(
-      resolve_and_read(root, "package.json")
-    )!;
-    PANIC_IF(!packagejson, "根目录下没有package.json");
-    PANIC_IF(!packagejson.name, "package.json缺少name字段");
-  }
-  return packagejson;
+export function get_packagejson(customRoot: string = root) {
+	if (!packagejson) {
+		// biome-ignore lint/style/noNonNullAssertion: <panic if content nullable>
+		packagejson = jsonparse<PackageJson>(
+			resolve_and_read(customRoot, "package.json"),
+		)!;
+		PANIC_IF(!packagejson, "根目录下没有package.json");
+		PANIC_IF(!packagejson.name, "package.json缺少name字段");
+	} else if (customRoot !== root) {
+		// 如果传入了自定义 root，强制重新读取，不使用缓存
+		const newPackageJson = jsonparse<PackageJson>(
+			resolve_and_read(customRoot, "package.json"),
+		)!;
+		PANIC_IF(!newPackageJson, "根目录下没有package.json");
+		PANIC_IF(!newPackageJson.name, "package.json缺少name字段");
+		return newPackageJson;
+	}
+	return packagejson;
 }
 
-export { get_global_config } from "./generate_config.ts";
+let global_config: GLOBAL_CONFIG;
+
+/**
+ * 获取全局配置（单例模式）
+ *
+ * 1. 读取用户配置文件
+ * 2. 处理 extends 继承逻辑
+ * 3. 与默认配置进行合并
+ * 4. 处理路径别名、环境变量、目录解析等
+ *
+ * @param args CLI 参数
+ * @returns 合并后的全局配置对象
+ */
+export async function get_global_config(
+	args: ModuloArgs_Pack,
+): Promise<GLOBAL_CONFIG> {
+	if (!global_config) {
+		/**
+		 * 读取配置文件
+		 */
+		let configPath = args.pack.config;
+
+		// Find config file if not specified
+		if (!configPath) {
+			const candidates = [
+				"modulo.config.ts",
+				"modulo.config.js",
+				"modulo.config.json",
+			];
+			for (const f of candidates) {
+				const p = resolve(root, f);
+				if (existsSync(p)) {
+					configPath = p;
+					break;
+				}
+			}
+		}
+
+		if (!configPath) {
+			throw new Error("根目录下没有配置文件 (modulo.config.ts/js/json)");
+		}
+
+		const resolvedConfigPath = resolve(root, configPath);
+
+		// Load config using native import()
+		// Support .ts files via Node.js native support (requires Node.js v24+ or experimental flags)
+		let user_config: USER_CONFIG;
+		try {
+			const fileUrl = pathToFileURL(resolvedConfigPath).href;
+			const mod = await import(fileUrl);
+			user_config = mod.default || mod;
+		} catch (e) {
+			console.error(`无法加载配置文件: ${resolvedConfigPath}`);
+			throw e;
+		}
+
+		PANIC_IF(!user_config, "根目录下没有配置文件");
+		debug_log("input user config", user_config);
+
+		if (user_config.extends) {
+			const extend_config_path = resolve(root, user_config.extends);
+			try {
+				const extend_fileUrl = pathToFileURL(extend_config_path).href;
+				const extend_mod = await import(extend_fileUrl);
+				const extend_config = extend_mod.default || extend_mod;
+				debug_log("extend config", extend_config);
+				merge_user_config(preset_config, extend_config);
+			} catch (e) {
+				console.error(`无法加载继承的配置文件: ${extend_config_path}`);
+				throw e;
+			}
+		}
+
+		/**
+		 * 将配置文件和默认配置合并
+		 */
+		merge_user_config(preset_config, user_config);
+		const _config: GLOBAL_CONFIG = preset_config;
+
+		/**
+		 * src目录
+		 */
+		const src = resolve(root, _config.input.src);
+		const input = {
+			modules: resolve(src, _config.input.modules),
+			pages: resolve(src, _config.input.pages),
+			src: src,
+		};
+
+		/**
+		 * dist目录
+		 */
+		const dist = resolve(root, _config.output.dist);
+		const output = {
+			..._config.output,
+			dist: dist,
+			modules: resolve(dist, _config.output.modules),
+			pages: resolve(dist, _config.output.pages),
+		};
+
+		/**
+		 * 允许定制template
+		 */
+		const html = _config.html?.template
+			? { ..._config.html, template: resolve(root, _config.html.template) }
+			: _config.html;
+
+		/**
+		 * 所有define的值都序列化以正确传入
+		 */
+		// process.env.NODE_ENV 由构建工具自动注入，不需要手动注入，否则会产生冲突警告
+		const define = Object.fromEntries(
+			Object.entries({
+				..._config.define,
+				"import.meta.env.MOUNT_ID": _config.html.root,
+			}).map(([k, v]) => [k, JSON.stringify(v)]),
+		);
+		debug_log("当前模式", process.env.NODE_ENV);
+
+		/**
+		 * minify代码的开关
+		 */
+		const minify =
+			_config.minify === true ? preset_minify_config : _config.minify;
+
+		/**
+		 * alias 允许使用{src}作为占位符，取值来自input.src
+		 */
+		const alias = Object.fromEntries(
+			Object.entries(_config.alias).map(([k, v]) => [
+				k,
+				v.replace("{input.src}", input.src),
+			]),
+		);
+
+		global_config = {
+			..._config,
+			define,
+			html,
+			input,
+			minify,
+			output,
+			alias,
+		};
+		debug_log("global config", global_config);
+	}
+	return global_config;
+}

package/src/config/presets.ts

@@ -0,0 +1,100 @@
+import type { OutputConfig } from "@rsbuild/core";
+import type { ExternalLibs } from "./type.ts";
+
+export const preset_alias: Record<string, string> = {
+	"@": "{input.src}",
+};
+
+export const preset_dev_server_config = {
+	open: false as false | string[], // dev时是否自动打开指定页面
+	port: 8080, // 开发页面时, dev-server服务器端口
+	proxy: {} as Record<
+		string,
+		string | { target: string; pathRewrite?: Record<string, string>; changeOrigin?: boolean; secure?: boolean }
+	>, // dev时的代理配置
+};
+export type DEV_SERVER_CONFIG = typeof preset_dev_server_config;
+
+export const preset_input_dirs = {
+	src: "src", // 源码目录
+	pages: "pages", // 页面目录
+	modules: "modules", // 组件目录
+};
+
+export const preset_output_dirs = {
+	dist: "dist", // 源码目录
+	pages: "", // 页面目录输出目录，默认使用dist/..
+	modules: "modules", // 组件输出目录，默认使用dist/modules/..
+	filenameHash: true,
+};
+
+export interface Tag {
+	append?: boolean;
+	attrs?: Record<string, string>;
+	children?: string;
+	hash?: boolean | string;
+	head?: boolean;
+	publicPath?: string | boolean;
+	tag: string;
+}
+
+export const default_html_config = {
+	meta: {} as Record<string, string>,
+	root: "", // html挂载点id, 只允许id
+	tags: [] as Tag[],
+	template: "", // html模板的路径
+	title: "", // html标题
+};
+
+export type HTML_CONFIG = typeof default_html_config;
+
+export const preset_ui_libs = {
+	// 对ui库做严格的版本限制，以提高统一程度
+	react19: "19.2.4",
+	vue2: "2.7.16",
+};
+
+export const preset_minify_config: OutputConfig["minify"] = {
+	js: true,
+	jsOptions: {
+		minimizerOptions: {
+			compress: {
+				dead_code: true,
+				defaults: false,
+				toplevel: true,
+				unused: true,
+			},
+			format: {
+				comments: "some",
+				ecma: 2015,
+				preserve_annotations: true,
+				safari10: true,
+				semicolons: false,
+			},
+			mangle: true,
+			minify: true,
+		},
+	},
+};
+
+export const preset_url_config = {
+	base: "/", // 前缀路径
+	cdn: "", // 可以将除了html资源以外的资源都部署到cdn上，比如https://cdn.host.com/，或者https://cdn.host.com/cdn-path/
+};
+
+export const preset_config = {
+	analyze: false, // 是否执行bundleAnalyze
+	define: {} as Record<string, string | boolean | number>, // 配置全局变量，用于打包时替换代码中的全局变量
+	dev_server: preset_dev_server_config,
+	externals: {} as ExternalLibs,
+	html: default_html_config,
+	input: preset_input_dirs,
+	minify: preset_minify_config as OutputConfig["minify"], // 是否压缩产物，同时进行mangle
+	output: preset_output_dirs,
+	ui_lib: preset_ui_libs,
+	url: preset_url_config,
+	alias: preset_alias,
+	webhost: true as boolean | "auto",
+	autoExternal: true, // 是否自动external
+	externalsType: "importmap" as "importmap" | "script", // external的类型
+};

package/src/config/type.ts

@@ -1,17 +1,39 @@
-import type { preset_config } from "./preset/index.ts";
+import type { preset_config } from "./presets.ts";
 
 export type GLOBAL_CONFIG = typeof preset_config;
 
+export interface EnvExternalUrl {
+	dev: string;
+	prd: string;
+}
+
+export type ConfigExternalUrl = EnvExternalUrl | string;
+
+export interface ImportExternal {
+	url: ConfigExternalUrl;
+	importName?: string | string[];
+	global?: string; // script注入时使用的全局变量名
+	preset?: string;
+}
+
+export type ExternalLibs = {
+	[name: string]: ImportExternal | EnvExternalUrl | string;
+};
+
 export interface USER_CONFIG {
-  analyze?: boolean;
-  define?: GLOBAL_CONFIG["define"];
-  dev_server?: Partial<GLOBAL_CONFIG["dev_server"]>;
-  externals?: GLOBAL_CONFIG["externals"];
-  html?: Partial<GLOBAL_CONFIG["html"]>;
-  input?: Partial<GLOBAL_CONFIG["input"]>;
-  minify?: Partial<GLOBAL_CONFIG["minify"]> | boolean;
-  output?: Partial<GLOBAL_CONFIG["output"]>;
-  ui_lib?: Partial<GLOBAL_CONFIG["ui_lib"]>;
-  alias?: GLOBAL_CONFIG["alias"];
-  url?: Partial<GLOBAL_CONFIG["url"]>;
+	extends?: string;
+	analyze?: boolean;
+	define?: GLOBAL_CONFIG["define"];
+	dev_server?: Partial<GLOBAL_CONFIG["dev_server"]>;
+	externals?: GLOBAL_CONFIG["externals"];
+	html?: Partial<GLOBAL_CONFIG["html"]>;
+	input?: Partial<GLOBAL_CONFIG["input"]>;
+	minify?: Partial<GLOBAL_CONFIG["minify"]> | boolean;
+	output?: Partial<GLOBAL_CONFIG["output"]>;
+	ui_lib?: Partial<GLOBAL_CONFIG["ui_lib"]>;
+	alias?: GLOBAL_CONFIG["alias"];
+	url?: Partial<GLOBAL_CONFIG["url"]>;
+	webhost?: GLOBAL_CONFIG["webhost"];
+	autoExternal?: boolean;
+	externalsType?: "importmap" | "script";
 }