@yannick-z/modulo 0.2.0 → 0.3.0

package/src/index.ts

@@ -1,13 +1,105 @@
-import { get_args } from "./args/index.ts";
-import { init_tool } from "./cli/init.ts";
-import { pack_code } from "./cli/pack-code.ts";
+import { cac } from "cac";
+import { logger } from "./tools/log.ts";
+export type { USER_CONFIG as UserConfig } from "./config/type.ts";
 
-export function exec() {
-  const args = get_args();
+// Create CLI instance
+const cli = cac("modulo");
+
+// Define 'init' command
+cli
+	.command("init <target>", "Initialize modulo configuration or scripts")
+	.option("-f, --force", "Force overwrite existing files")
+	.option("--path <path>", "Specify the path to initialize")
+	.option("--preset <preset>", "Specify the preset to use")
+	.action((target, options) => {
+		// We will dynamically import the action handler to keep startup fast
+		import("./cli/init.ts").then(({ init_tool }) => {
+			init_tool({
+				cmd: "init",
+				target: target as any,
+				init: {
+					path: options.path,
+					force: options.force,
+					preset: options.preset,
+				},
+			});
+		});
+	});
+
+// Define 'build' command
+cli
+	.command("build <target>", "Build the project for production")
+	.option("-c, --config <file>", "Use specified config file")
+	.option("-w, --watch", "Watch for changes")
+	.option("--env <env>", "Specify the environment (dev/prd)")
+	.action((target, options) => {
+		import("./cli/pack-code.ts").then(({ pack_code }) => {
+			pack_code({
+				cmd: "build",
+				target: target as any,
+				pack: {
+					config: options.config,
+					env: options.env || "prd",
+					watch: options.watch,
+					esm: true,
+				},
+			});
+		});
+	});
+
+// Define 'dev' command
+cli
+	.command("dev <target>", "Start development server")
+	.option("-c, --config <file>", "Use specified config file")
+	.option("--env <env>", "Specify the environment (dev/prd)")
+	.option("--debug", "Enable debug mode")
+	.action((target, options) => {
+		if (options.debug) {
+			process.env.DEBUG = "true";
+		}
+		import("./cli/pack-code.ts").then(({ pack_code }) => {
+			pack_code({
+				cmd: "dev",
+				target: target as any,
+				pack: {
+					config: options.config,
+					env: options.env || "dev",
+					watch: true, // dev always watches
+					esm: true,
+				},
+			});
+		});
+	});
 
-  if (args.cmd === "init") {
-    init_tool(args);
-  } else if (args.cmd === "build" || args.cmd === "dev") {
-    pack_code(args);
-  }
+// Define 'preview' command
+cli
+	.command("preview <target>", "Preview the production build")
+	.option("-c, --config <file>", "Use specified config file")
+	.action((target, options) => {
+		import("./cli/pack-code.ts").then(({ pack_code }) => {
+			pack_code({
+				cmd: "preview",
+				target: target as any,
+				pack: {
+					config: options.config,
+					env: "prd",
+					watch: false,
+					esm: true,
+				},
+			});
+		});
+	});
+
+cli.help();
+cli.version("0.2.0");
+
+export function exec() {
+	try {
+		// Parse arguments
+		cli.parse();
+	} catch (error) {
+		logger.error(`Error: ${(error as Error).message}`);
+		cli.outputHelp();
+		process.exit(1);
+	}
 }

package/src/initiator/create-config-file.ts

@@ -1,46 +1,62 @@
 // 在当前目录创建一份json配置文件
 import { existsSync, writeFileSync } from "node:fs";
-import { resolve } from "node:path";
+import { resolve, extname } from "node:path";
 import readline from "node:readline";
 import picocolors from "picocolors";
 import type { ModuloArgs_Init } from "../args/index.ts";
 import {
-  default_config_file_name,
-  get_example_config,
+	default_config_file_name,
+	get_example_config,
 } from "../config/example/example-config.ts";
 
 export async function create_config_file(args: ModuloArgs_Init) {
-  const path = args.init.path || default_config_file_name;
-  console.log(picocolors.blue("即将创建配置文件"), path);
-
-  const filepath = resolve(process.cwd(), path);
-
-  if (existsSync(filepath)) {
-    if (args.init.force) {
-      console.log(picocolors.bgRed(picocolors.white("配置文件已存在，将覆盖")));
-    } else {
-      console.log(picocolors.red("配置文件已存在，是否覆盖？"));
-      const rl = readline.createInterface({
-        input: process.stdin,
-        output: process.stdout,
-      });
-      const answer = await new Promise<string>((resolve) => {
-        rl.question("\n请输入(Y/N) ", (answer) => {
-          rl.close();
-          resolve(answer);
-        });
-      });
-      if (answer.toLowerCase() !== "y") {
-        console.log("取消创建");
-        return;
-      }
-    }
-  }
-
-  writeFileSync(
-    filepath,
-    JSON.stringify(get_example_config(args.init.preset), null, 2)
-  );
-
-  console.log(picocolors.green("创建成功"), filepath);
+	const path = args.init.path || default_config_file_name;
+	console.log(picocolors.blue("即将创建配置文件"), path);
+
+	const filepath = resolve(process.cwd(), path);
+
+	if (existsSync(filepath)) {
+		if (args.init.force) {
+			console.log(picocolors.bgRed(picocolors.white("配置文件已存在，将覆盖")));
+		} else {
+			console.log(picocolors.red("配置文件已存在，是否覆盖？"));
+			const rl = readline.createInterface({
+				input: process.stdin,
+				output: process.stdout,
+			});
+			const answer = await new Promise<string>((resolve) => {
+				rl.question("\n请输入(Y/N) ", (answer) => {
+					rl.close();
+					resolve(answer);
+				});
+			});
+			if (answer.toLowerCase() !== "y") {
+				console.log("取消创建");
+				return;
+			}
+		}
+	}
+
+	const config = get_example_config(args.init.preset);
+	const ext = extname(path);
+	let content = "";
+
+	if (ext === ".ts") {
+		content = `import type { UserConfig } from "@yannick-z/modulo";
+
+const config: UserConfig = ${JSON.stringify(config, null, 2)};
+
+export default config;
+`;
+	} else if (ext === ".js") {
+		content = `/** @type {import('@yannick-z/modulo').UserConfig} */
+export default ${JSON.stringify(config, null, 2)};
+`;
+	} else {
+		content = JSON.stringify(config, null, 2);
+	}
+
+	writeFileSync(filepath, content);
+
+	console.log(picocolors.green("创建成功"), filepath);
 }

package/src/initiator/create-project.ts

@@ -0,0 +1,249 @@
+import { existsSync, mkdirSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+import picocolors from "picocolors";
+import type { ModuloArgs_Init } from "../args/index.ts";
+import { create_config_file } from "./create-config-file.ts";
+import { modify_scripts } from "./modify-scripts.ts";
+import { get_packagejson } from "../config/index.ts";
+
+export async function create_project(args: ModuloArgs_Init) {
+	const { path, preset } = args.init;
+
+	if (!path) {
+		console.error(
+			picocolors.red(
+				"请指定项目路径: modulo init project --path <project-path>",
+			),
+		);
+		process.exit(1);
+	}
+
+	const projectRoot = resolve(process.cwd(), path);
+
+	if (existsSync(projectRoot)) {
+		if (!args.init.force) {
+			console.error(
+				picocolors.red(
+					`目录 ${path} 已存在，请使用 --force 覆盖或选择其他路径`,
+				),
+			);
+			process.exit(1);
+		}
+	} else {
+		mkdirSync(projectRoot, { recursive: true });
+	}
+
+	console.log(picocolors.blue(`正在初始化项目到: ${projectRoot}`));
+
+	// 切换工作目录到新项目目录，以便复用现有的 config 和 script 生成逻辑
+	const originalCwd = process.cwd();
+	process.chdir(projectRoot);
+
+	try {
+		// 1. 创建 package.json
+		const packageJson = {
+			name: path.split("/").pop() || "modulo-project",
+			version: "0.0.0",
+			type: "module",
+			scripts: {
+				lint: "biome lint .",
+				format: "biome format --write .",
+				check: "biome check --write .",
+			},
+			dependencies: {},
+			devDependencies: {
+				"@yannick-z/modulo": "^0.2.0",
+				typescript: "^5.0.0",
+				"@biomejs/biome": "2.4.4",
+			},
+		};
+
+		// 添加依赖
+		if (preset === "vue2") {
+			packageJson.dependencies = {
+				vue: "2.7.16",
+			};
+		} else if (preset === "react19") {
+			packageJson.dependencies = {
+				react: "19.2.4",
+				"react-dom": "19.2.4",
+			};
+		}
+
+		writeFileSync(
+			resolve(projectRoot, "package.json"),
+			JSON.stringify(packageJson, null, 2),
+		);
+		console.log(picocolors.green("创建 package.json 成功"));
+
+		// 手动触发一次 get_packagejson 以缓存新创建的 package.json
+		get_packagejson(projectRoot);
+
+		// 2. 创建 tsconfig.json
+		const tsConfig = {
+			compilerOptions: {
+				target: "ESNext",
+				module: "ESNext",
+				moduleResolution: "bundler",
+				strict: true,
+				jsx: preset === "react19" ? "react-jsx" : "preserve",
+				esModuleInterop: true,
+				skipLibCheck: true,
+				forceConsistentCasingInFileNames: true,
+				baseUrl: ".",
+				paths: {
+					"@/*": ["src/*"],
+				},
+			},
+			include: ["src/**/*", "modulo.config.ts"],
+		};
+		writeFileSync(
+			resolve(projectRoot, "tsconfig.json"),
+			JSON.stringify(tsConfig, null, 2),
+		);
+		console.log(picocolors.green("创建 tsconfig.json 成功"));
+
+		// 3. 创建目录结构
+		mkdirSync(resolve(projectRoot, "src/pages/index"), { recursive: true });
+
+		// 4. 创建示例代码
+		if (preset === "vue2") {
+			const vueContent = `<template>
+  <div id="app">
+    <h1>Hello Modulo + Vue 2</h1>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+  name: 'App'
+});
+</script>
+
+<style scoped>
+h1 {
+  color: #42b983;
+}
+</style>
+`;
+			writeFileSync(
+				resolve(projectRoot, "src/pages/index/App.vue"),
+				vueContent,
+			);
+
+			const indexContent = `import Vue from 'vue';
+import App from './App.vue';
+
+new Vue({
+  render: h => h(App)
+}).$mount('#app');
+`;
+			writeFileSync(
+				resolve(projectRoot, "src/pages/index/index.ts"),
+				indexContent,
+			);
+
+			// 创建 shim-vue.d.ts
+			const shimContent = `declare module '*.vue' {
+  import Vue from 'vue';
+  export default Vue;
+}
+`;
+			writeFileSync(resolve(projectRoot, "src/shim-vue.d.ts"), shimContent);
+		} else if (preset === "react19") {
+			const appContent = `import { useState } from 'react';
+
+export function App() {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <h1>Hello Modulo + React 19</h1>
+      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
+    </div>
+  );
+}
+`;
+			writeFileSync(
+				resolve(projectRoot, "src/pages/index/App.tsx"),
+				appContent,
+			);
+
+			const indexContent = `import { createRoot } from 'react-dom/client';
+import { App } from './App';
+
+const root = createRoot(document.getElementById('app')!);
+root.render(<App />);
+`;
+			writeFileSync(
+				resolve(projectRoot, "src/pages/index/index.tsx"),
+				indexContent,
+			);
+		}
+
+		// 5. 生成配置文件
+		// 将 path 重置为 undefined，否则 create_config_file 会使用项目路径作为配置文件名
+		const configArgs = { ...args, init: { ...args.init, path: "" } };
+		await create_config_file(configArgs);
+
+		// 6. 添加 scripts
+		modify_scripts();
+
+		// 7. 生成 biome.json
+		const biomeConfig = {
+			$schema: "https://biomejs.dev/schemas/1.9.4/schema.json",
+			vcs: {
+				enabled: false,
+				clientKind: "git",
+				useIgnoreFile: false,
+			},
+			files: {
+				ignoreUnknown: false,
+				ignore: [],
+			},
+			formatter: {
+				enabled: true,
+				indentStyle: "tab",
+			},
+			organizeImports: {
+				enabled: true,
+			},
+			linter: {
+				enabled: true,
+				rules: {
+					recommended: true,
+				},
+			},
+			javascript: {
+				formatter: {
+					quoteStyle: "double",
+				},
+			},
+		};
+		writeFileSync(
+			resolve(projectRoot, "biome.json"),
+			JSON.stringify(biomeConfig, null, 2),
+		);
+		console.log(picocolors.green("创建 biome.json 成功"));
+
+		// 8. 创建 .vscode/extensions.json
+		const vscodeExtensions = {
+			recommendations: ["biomejs.biome"],
+		};
+		mkdirSync(resolve(projectRoot, ".vscode"), { recursive: true });
+		writeFileSync(
+			resolve(projectRoot, ".vscode/extensions.json"),
+			JSON.stringify(vscodeExtensions, null, 2),
+		);
+		console.log(picocolors.green("创建 .vscode/extensions.json 成功"));
+
+		console.log(picocolors.green("\n项目初始化完成！\n"));
+		console.log(picocolors.cyan(`  cd ${path}`));
+		console.log(picocolors.cyan("  npm install"));
+		console.log(picocolors.cyan("  npm run dev page\n"));
+	} catch (error) {
+		console.error(picocolors.red("项目初始化失败:"), error);
+	} finally {
+		process.chdir(originalCwd);
+	}
+}

package/src/initiator/modify-scripts.ts

@@ -1,52 +1,52 @@
-import { writeFileSync } from "node:fs";
 import { resolve } from "node:path";
-import readline from "node:readline";
 import picocolors from "picocolors";
 import { get_packagejson } from "../config/index.ts";
+import { confirm } from "../tools/cli.ts";
+import { update_json_file } from "../tools/json.ts";
 
 export const star_line = "**********************";
 
 export async function modify_scripts() {
-  const packagejson = get_packagejson();
-  const new_scripts = {
-    ...(packagejson.scripts || {}),
-    "build:page": "modulo build page",
-    "build:module": "modulo build module",
-    "build:all": "modulo build all",
-    build: "modulo build all",
-    "dev:page": "modulo dev page",
-    "dev:module": "modulo dev module",
-    "watch:page": "modulo build page --watch=true",
-    "watch:module": "modulo build module --watch=true",
-  };
-  console.log(
-    picocolors.magentaBright(
-      `\n${star_line}修改package.json中的scripts\n新的内容修改后如下:\n${JSON.stringify(
-        new_scripts,
-        null,
-        2
-      )}\n${star_line}`
-    )
-  );
+	const packagejson = get_packagejson();
+	const new_scripts = {
+		...(packagejson.scripts || {}),
+		"build:page": "modulo build page",
+		"build:module": "modulo build module",
+		"build:all": "modulo build all",
+		build: "modulo build all",
+		"dev:page": "modulo dev page",
+		"dev:module": "modulo dev module",
+		"watch:page": "modulo build page --watch=true",
+		"watch:module": "modulo build module --watch=true",
+	};
+	console.log(
+		picocolors.magentaBright(
+			`\n${star_line}\n修改package.json中的scripts\n新的内容修改后如下:\n${JSON.stringify(
+				new_scripts,
+				null,
+				2,
+			)}\n${star_line}`,
+		),
+	);
 
-  // 确定是否修改package.json
-  const rl = readline.createInterface({
-    input: process.stdin,
-    output: process.stdout,
-  });
-  const answer = await new Promise<string>((resolve) => {
-    rl.question("\n确定修改吗？请输入(Y/N) ", (answer) => {
-      rl.close();
-      resolve(answer);
-    });
-  });
-  if (answer.toLowerCase() !== "y") {
-    console.log("取消修改");
-    return;
-  }
+	// 确定是否修改package.json
+	const confirmed = await confirm("\n确定修改吗？");
+	if (!confirmed) {
+		console.log("取消修改");
+		return;
+	}
 
-  packagejson.scripts = new_scripts;
-  const new_packagejson = JSON.stringify(packagejson, null, 2);
-  writeFileSync(resolve(process.cwd(), "package.json"), new_packagejson);
-  console.log(picocolors.green(`\npackage.json修改成功`));
+	const success = update_json_file(
+		resolve(process.cwd(), "package.json"),
+		(data: any) => {
+			data.scripts = new_scripts;
+			return data;
+		},
+	);
+
+	if (success) {
+		console.log(picocolors.green(`\npackage.json修改成功`));
+	} else {
+		console.log(picocolors.red(`\npackage.json修改失败`));
+	}
 }

package/src/packer/auto-external-plugin.ts

@@ -0,0 +1,110 @@
+import type { Compiler, Compilation } from "@rspack/core";
+import type { ModuloArgs_Pack } from "../args/index.ts";
+import type { GLOBAL_CONFIG } from "../config/type.ts";
+import { getExternalsAndImportMap } from "./get-externals-and-tags.ts";
+
+/**
+ * 自动 External 插件
+ *
+ * 1. 扫描编译过程中使用到的 node_modules 依赖
+ * 2. 如果这些依赖在 config.externals 中定义了，则标记为已使用
+ * 3. 在 HTML 生成阶段，仅注入已使用的依赖的 importmap 或 script 标签
+ */
+export class AutoExternalPlugin {
+	private externalLibNames: string[];
+	private usedExternals: Set<string>;
+	private args: ModuloArgs_Pack;
+	private config: GLOBAL_CONFIG;
+
+	constructor(args: ModuloArgs_Pack, config: GLOBAL_CONFIG) {
+		this.args = args;
+		this.config = config;
+		this.externalLibNames = Object.keys(config.externals);
+		this.usedExternals = new Set<string>();
+	}
+
+	apply(compiler: Compiler) {
+		compiler.hooks.compilation.tap(
+			"AutoExternalPlugin",
+			(compilation: Compilation) => {
+				// 1. 扫描模块依赖
+				compilation.hooks.finishModules.tap("AutoExternalPlugin", (modules) => {
+					for (const module of modules) {
+						// 检查 module.resource 是否包含 node_modules
+						// 并且属于我们在 config.externals 中定义的包
+						const resource = (module as any).resource;
+						if (resource && resource.includes("node_modules")) {
+							for (const libName of this.externalLibNames) {
+								// 简单的包含匹配，更严谨的可以使用路径解析
+								// 例如: /node_modules/vue/
+								// 这里简化处理，匹配 /node_modules/<libName>/
+								if (
+									resource.includes(`/node_modules/${libName}/`) ||
+									resource.includes(`\\node_modules\\${libName}\\`)
+								) {
+									this.usedExternals.add(libName);
+								}
+							}
+						}
+					}
+				});
+
+				// 2. 注入 HTML
+				const HtmlWebpackPlugin =
+					compiler.webpack.HtmlWebpackPlugin ||
+					compiler.options.plugins.find(
+						(p: any) => p.constructor.name === "HtmlWebpackPlugin",
+					)?.constructor;
+
+				if (!HtmlWebpackPlugin) return;
+
+				const hooks = (HtmlWebpackPlugin as any).getHooks(compilation);
+				hooks.alterAssetTags.tap("AutoExternalPlugin", (data: any) => {
+					if (!this.config.autoExternal) return data;
+
+					// 重新计算 importmaps
+					const { importMap } = getExternalsAndImportMap(
+						this.args,
+						this.config.externals,
+						this.config.externalsType,
+					);
+
+					// 过滤未使用的依赖
+					const filteredImportMap = Object.fromEntries(
+						Object.entries(importMap).filter(([key]) =>
+							this.usedExternals.has(key),
+						),
+					);
+
+					if (Object.keys(filteredImportMap).length === 0) return data;
+
+					let tags: any[] = [];
+					if (this.config.externalsType === "script") {
+						tags = Object.values(filteredImportMap).map((url) => ({
+							tagName: "script",
+							voidTag: false,
+							attributes: { src: url },
+						}));
+					} else {
+						tags = [
+							{
+								tagName: "script",
+								voidTag: false,
+								attributes: { type: "importmap" },
+								innerHTML: JSON.stringify(
+									{ imports: filteredImportMap },
+									null,
+									2,
+								),
+							},
+						];
+					}
+
+					// 插入到 head 的最前面
+					data.assetTags.scripts.unshift(...tags);
+					return data;
+				});
+			},
+		);
+	}
+}