@yannick-z/modulo 0.3.0 → 0.3.1

package/package.json

@@ -2,10 +2,11 @@
 	"name": "@yannick-z/modulo",
 	"description": "",
 	"type": "module",
-	"version": "0.3.0",
+	"version": "0.3.1",
 	"main": "./src/index.ts",
 	"author": "oyangxiao",
 	"scripts": {
+		"build": "直接使用ts执行，所以不需要build",
 		"lint": "biome lint .",
 		"format": "biome format --write .",
 		"check": "biome check --write ."

package/src/config/presets.ts

@@ -10,7 +10,7 @@ export const preset_dev_server_config = {
 	port: 8080, // 开发页面时, dev-server服务器端口
 	proxy: {} as Record<
 		string,
-		string | { target: string; pathRewrite?: Record<string, string> }
+		string | { target: string; pathRewrite?: Record<string, string>; changeOrigin?: boolean; secure?: boolean }
 	>, // dev时的代理配置
 };
 export type DEV_SERVER_CONFIG = typeof preset_dev_server_config;

package/src/index.ts

@@ -90,8 +90,10 @@ cli
 		});
 	});
 
+import packagejson from "../package.json" with { type: "json" };
+
 cli.help();
-cli.version("0.2.0");
+cli.version(packagejson.version);
 
 export function exec() {
 	try {

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

@@ -1,4 +1,6 @@
+import { createRequire } from 'node:module';
 import type { Compiler, Compilation } from "@rspack/core";
+const require = createRequire(import.meta.url);
 import type { ModuloArgs_Pack } from "../args/index.ts";
 import type { GLOBAL_CONFIG } from "../config/type.ts";
 import { getExternalsAndImportMap } from "./get-externals-and-tags.ts";
@@ -29,15 +31,33 @@ export class 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;
+						// @ts-ignore
+						const constructorName = module.constructor.name;
+						// @ts-ignore
+						const request = module.request;
+						// @ts-ignore
+						const userRequest = module.userRequest;
+						// @ts-ignore
+						const resource = module.resource;
+						// @ts-ignore
+						const externalType = module.externalType;
+
+						// 策略 A: 检查 ExternalModule
+						// Rspack 中 ExternalModule 的 userRequest 通常是 import 的路径 (例如 'vue')
+						if (constructorName === 'ExternalModule' || externalType) {
+							const libName = request || userRequest; // 通常 request 是 'vue'
+							if (libName && this.externalLibNames.includes(libName)) {
+								this.usedExternals.add(libName);
+								continue;
+							}
+						}
+
+						// 策略 B: 检查 module.resource 是否包含 node_modules (针对未被 external 但我们想知道是否被引用的情况 - 但这通常意味着它被打包了)
+						// 之前的逻辑保留，作为兜底，或者针对未正确 external 的情况
 						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}\\`)
@@ -45,66 +65,141 @@ export class AutoExternalPlugin {
 									this.usedExternals.add(libName);
 								}
 							}
+						} else if (resource && resource.includes("/node_modules/.pnpm/")) {
+							// 兼容 pnpm
+							for (const libName of this.externalLibNames) {
+								if (
+									resource.includes(`/node_modules/.pnpm/${libName}@`) ||
+									resource.includes(`/node_modules/.pnpm/${libName}+`) ||
+									// 某些情况下 pnpm 可能会直接链接
+									resource.includes(`/node_modules/${libName}/`)
+								) {
+									this.usedExternals.add(libName);
+								}
+							}
 						}
 					}
 				});
 
+				// 尝试通过 compilation.hooks 访问 HtmlWebpackPlugin hooks
+				// Rsbuild 可能通过 mixin 或者其他方式将 hooks 注入到了 compilation 上
+				// 或者我们可以尝试直接使用 tapAsync 到 HtmlWebpackPlugin 的实例上，如果我们能找到它
+
+				// 终极 Hook 调试: 使用 compiler.hooks.emit 来检查 assets，看是否包含 index.html，以及内容
+				compiler.hooks.emit.tapAsync("AutoExternalPlugin", (compilation, cb) => {
+					if (process.env.DEBUG) console.log('[AutoExternalPlugin] emit hook triggered');
+					// 检查 compilation.assets
+					const assetNames = Object.keys(compilation.assets);
+					if (process.env.DEBUG) console.log('[AutoExternalPlugin] Assets:', assetNames);
+					cb();
+				});
+
 				// 2. 注入 HTML
-				const HtmlWebpackPlugin =
-					compiler.webpack.HtmlWebpackPlugin ||
-					compiler.options.plugins.find(
-						(p: any) => p.constructor.name === "HtmlWebpackPlugin",
-					)?.constructor;
+				let HtmlWebpackPlugin: any;
 
-				if (!HtmlWebpackPlugin) return;
+				// 优先从 compiler.options.plugins 中查找实例并获取其构造函数
+				// 这是最稳妥的方式，确保我们获取的是同一个类的构造函数
+				const htmlPluginInstance = compiler.options.plugins.find(
+					(p: any) => p && (p.constructor.name === "HtmlWebpackPlugin" || p.constructor.name === "HtmlRspackPlugin")
+				);
 
-				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,
-								),
-							},
-						];
+				if (htmlPluginInstance) {
+					HtmlWebpackPlugin = htmlPluginInstance.constructor;
+				}
+
+				// Fallback: 如果没找到实例（可能被封装了），尝试从 compiler.webpack 中获取
+				if (!HtmlWebpackPlugin) {
+					HtmlWebpackPlugin =
+						compiler.webpack.HtmlRspackPlugin ||
+						(compiler.webpack as any).HtmlWebpackPlugin;
+				}
+
+				if (!HtmlWebpackPlugin) {
+					// Try to import from @rspack/plugin-html
+					try {
+						HtmlWebpackPlugin = require('@rspack/plugin-html').HtmlRspackPlugin;
+					} catch (e) {
+						// ignore
 					}
+				}
 
-					// 插入到 head 的最前面
-					data.assetTags.scripts.unshift(...tags);
-					return data;
+				if (!HtmlWebpackPlugin) {
+					return;
+				}
+
+				// 确保我们拿到的确实是 HtmlWebpackPlugin 构造函数，并且它有 getHooks 方法
+				if (typeof (HtmlWebpackPlugin as any).getHooks !== 'function') {
+					return;
+				}
+
+				const hooks = (HtmlWebpackPlugin as any).getHooks(compilation);
+
+				hooks.alterAssetTags.tapAsync("AutoExternalPlugin", (data: any, cb: any) => {
+					if (data.assetTags && data.assetTags.scripts) {
+						this.processTags(data, 'assetTags.scripts');
+					}
+					cb(null, data);
 				});
 			},
 		);
 	}
+
+	private processTags(data: any, targetProp: string) {
+		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 的最前面
+		if (targetProp === 'headTags') {
+			data.headTags.unshift(...tags);
+		} else if (targetProp === 'assetTags.scripts') {
+			data.assetTags.scripts.unshift(...tags);
+		} else if (targetProp === 'head') {
+			data.head.unshift(...tags);
+		}
+
+		return data;
+	}
 }

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

@@ -39,17 +39,21 @@ export function getExternalsAndImportMap(
 	return Object.entries(externalLibs).reduce(
 		({ externals, importMap }, [libName, data]) => {
 			// 归一化为GlobalExternal或者ImportExternal
-			const externalData = is_env_external(data) ? data[args.pack.env] : data;
-
+			// 1. data 是 string -> { url: data }
+			// 2. data 是 EnvExternalUrl (dev/prd) -> { url: data }
+			// 3. data 是 ImportExternal -> data
+			
 			let externalLib: ImportExternal;
-
-			if (typeof externalData === "string") {
-				externalLib = { url: externalData };
+			
+			if (is_string(data)) {
+				externalLib = { url: data };
+			} else if (is_env_external(data)) {
+				externalLib = { url: data };
 			} else {
-				// 此时 externalData 已经是 ImportExternal 类型
-				externalLib = externalData as ImportExternal;
+				externalLib = data as ImportExternal;
 			}
-
+			
+			// 解析 url (处理 EnvExternalUrl)
 			const url = getExternalUrl(args, externalLib.url);
 
 			if (externalsType === "script") {

package/src/packer/lib.ts

@@ -1,5 +1,5 @@
 import { pluginLess } from "@rsbuild/plugin-less";
-import { build, defineConfig } from "@rslib/core";
+import * as rslib from "@rslib/core";
 import picocolors from "picocolors";
 import type { ModuloArgs_Pack } from "../args/index.ts";
 import { get_global_config, get_packagejson } from "../config/index.ts";
@@ -23,12 +23,12 @@ export async function lib_pack(args: ModuloArgs_Pack) {
 		return;
 	}
 
-	const rslibConfig = defineConfig({
+	const rslibConfig = rslib.defineConfig({
 		source: {
 			define: config.define,
 			entry: entries,
 		},
-		plugins: [framework_plugin(args, config), pluginLess()],
+		plugins: [framework_plugin(config), pluginLess()],
 		resolve: {
 			alias: config.alias,
 		},
@@ -73,9 +73,9 @@ export async function lib_pack(args: ModuloArgs_Pack) {
 		performance: {
 			bundleAnalyze: config.analyze
 				? {
-						analyzerMode: "disabled",
-						generateStatsFile: true,
-					}
+					analyzerMode: "disabled",
+					generateStatsFile: true,
+				}
 				: undefined,
 			chunkSplit: {
 				strategy: "all-in-one",
@@ -83,7 +83,8 @@ export async function lib_pack(args: ModuloArgs_Pack) {
 		},
 	});
 
-	await build(rslibConfig, { watch: args.cmd === "build" && args.pack.watch });
+	const { build } = await rslib.createRslib({ config: rslibConfig });
+	await build({ watch: args.cmd === "build" && args.pack.watch });
 
 	if (args.cmd === "build") {
 		console.log(picocolors.green("\n**** 构建【module】完成 ****\n"));

package/src/packer/page.ts

@@ -39,14 +39,13 @@ export async function page_pack(args: ModuloArgs_Pack) {
 		tools: {
 			rspack: {
 				experiments: {
-					outputModule: true,
+					outputModule: config.externalsType === "importmap" ? true : undefined,
 				},
 				plugins: [
 					// @ts-ignore Rspack 插件类型兼容问题
 					new AutoExternalPlugin(args, config),
 				],
 			},
-			htmlPlugin: true,
 		},
 		output: {
 			assetPrefix: config.url.cdn || config.url.base,
@@ -61,7 +60,7 @@ export async function page_pack(args: ModuloArgs_Pack) {
 		html: {
 			meta: config.html.meta,
 			mountId: config.html.root,
-			scriptLoading: "module",
+			scriptLoading: config.externalsType === "importmap" ? undefined : "module",
 			tags: config.html.tags,
 			template:
 				config.html.template ||