@esmx/rspack 3.0.0-rc.18 → 3.0.0-rc.20

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Vanelink
+Copyright (c) 2020 Esmx Team
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,29 +1,50 @@
-# @esmx/rspack
-
-基于 Rspack 提供高性能的构建能力，支持标准应用和 HTML 应用的开发与构建。
-
-## 特性
-
-- 🚀 **高性能构建** - 基于 Rspack 的极速构建，为应用提供卓越的开发体验
-- 💡 **应用支持** - 完整支持标准应用和 HTML 应用的开发与构建
-- 🎨 **资源处理** - 智能处理各类资源，支持 JavaScript、CSS、图片等
-- 🛠️ **SSR 支持** - 内置服务端渲染支持，轻松构建同构应用
-- 🔧 **开发体验** - 支持热更新、智能提示和 TypeScript
-
-## 安装
+<div align="center">
+  <img src="https://www.esmnext.com/logo.svg?t=2025" width="120" alt="Esmx Logo" />
+  <h1>@esmx/rspack</h1>
+  
+  <div>
+    <a href="https://www.npmjs.com/package/@esmx/rspack">
+      <img src="https://img.shields.io/npm/v/@esmx/rspack.svg" alt="npm version" />
+    </a>
+    <a href="https://github.com/esmnext/esmx/actions/workflows/build.yml">
+      <img src="https://github.com/esmnext/esmx/actions/workflows/build.yml/badge.svg" alt="Build" />
+    </a>
+    <a href="https://www.esmnext.com/coverage/">
+      <img src="https://img.shields.io/badge/coverage-live%20report-brightgreen" alt="Coverage Report" />
+    </a>
+    <a href="https://nodejs.org/">
+      <img src="https://img.shields.io/node/v/@esmx/rspack.svg" alt="node version" />
+    </a>
+    <a href="https://bundlephobia.com/package/@esmx/rspack">
+      <img src="https://img.shields.io/bundlephobia/minzip/@esmx/rspack" alt="size" />
+    </a>
+  </div>
+  
+  <p>A high-performance Rspack integration for Esmx microfrontend framework, providing module federation and SSR capabilities</p>
+  
+  <p>
+    English | <a href="https://github.com/esmnext/esmx/blob/master/packages/rspack/README.zh-CN.md">中文</a>
+  </p>
+</div>
+
+## 🚀 Features
+
+- **High-Performance Build** - Ultra-fast building based on Rspack, providing excellent development experience
+- **Application Support** - Complete support for standard applications and HTML applications development and building
+- **Asset Processing** - Smart processing of various assets including JavaScript, CSS, images
+- **SSR Support** - Built-in server-side rendering support for easy isomorphic application building
+- **Developer Experience** - Supports hot reload, intelligent hints, and TypeScript
+
+## 📦 Installation
 
 ```bash
-pnpm add @esmx/rspack -D
-# 或
-yarn add @esmx/rspack -D
-# 或
 npm install @esmx/rspack -D
 ```
 
-## 文档
+## 📚 Documentation
 
-访问 [@esmx/rspack 官方文档](https://www.esmnext.com/api/app/rspack.html) 获取详细的使用指南和 API 文档。
+Visit the [official documentation](https://www.esmnext.com/api/app/rspack.html) for detailed usage guides and API reference.
 
-## 许可证
+## 📄 License
 
-MIT
+MIT © [Esmx Team](https://github.com/esmnext/esmx)

package/README.zh-CN.md

@@ -0,0 +1,50 @@
+<div align="center">
+  <img src="https://www.esmnext.com/logo.svg?t=2025" width="120" alt="Esmx Logo" />
+  <h1>@esmx/rspack</h1>
+  
+  <div>
+    <a href="https://www.npmjs.com/package/@esmx/rspack">
+      <img src="https://img.shields.io/npm/v/@esmx/rspack.svg" alt="npm version" />
+    </a>
+    <a href="https://github.com/esmnext/esmx/actions/workflows/build.yml">
+      <img src="https://github.com/esmnext/esmx/actions/workflows/build.yml/badge.svg" alt="Build" />
+    </a>
+    <a href="https://www.esmnext.com/coverage/">
+      <img src="https://img.shields.io/badge/coverage-live%20report-brightgreen" alt="Coverage Report" />
+    </a>
+    <a href="https://nodejs.org/">
+      <img src="https://img.shields.io/node/v/@esmx/rspack.svg" alt="node version" />
+    </a>
+    <a href="https://bundlephobia.com/package/@esmx/rspack">
+      <img src="https://img.shields.io/bundlephobia/minzip/@esmx/rspack" alt="size" />
+    </a>
+  </div>
+  
+  <p>为 Esmx 微前端框架提供的高性能 Rspack 集成，具备模块联邦和 SSR 能力</p>
+  
+  <p>
+    <a href="https://github.com/esmnext/esmx/blob/master/packages/rspack/README.md">English</a> | 中文
+  </p>
+</div>
+
+## 🚀 特性
+
+- **高性能构建** - 基于 Rspack 的极速构建，为应用提供卓越的开发体验
+- **应用支持** - 完整支持标准应用和 HTML 应用的开发与构建
+- **资源处理** - 智能处理各类资源，支持 JavaScript、CSS、图片等
+- **SSR 支持** - 内置服务端渲染支持，轻松构建同构应用
+- **开发体验** - 支持热更新、智能提示和 TypeScript
+
+## 📦 安装
+
+```bash
+npm install @esmx/rspack -D
+```
+
+## 📚 文档
+
+访问[官方文档](https://www.esmnext.com/api/app/rspack.html)获取详细的使用指南和 API 参考。
+
+## 📄 许可证
+
+MIT © [Esmx Team](https://github.com/esmnext/esmx) 

package/dist/app.mjs

@@ -1,8 +1,7 @@
 import fs from "node:fs";
-import { pathToFileURL } from "node:url";
-import { styleText } from "node:util";
+import path from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
 import {
-  PathType,
   RenderContext,
   createApp,
   mergeMiddlewares
@@ -12,6 +11,11 @@ import hotMiddleware from "webpack-hot-middleware";
 import { createRspackConfig } from "./config.mjs";
 import { pack } from "./pack.mjs";
 import { createRsBuild } from "./utils/index.mjs";
+const extension = path.extname(fileURLToPath(import.meta.url));
+const hotFixCode = fs.readFileSync(
+  fileURLToPath(new URL(`./hot-fix${extension}`, import.meta.url)),
+  "utf-8"
+);
 export async function createRspackApp(esmx, options) {
   const app = await createApp(esmx, esmx.command);
   switch (esmx.command) {
@@ -75,35 +79,19 @@ function rewriteRender(esmx) {
     const serverRender = module[rc.entryName];
     if (typeof serverRender === "function") {
       await serverRender(rc);
+      rc.html = rc.html.replace(
+        "</head>",
+        `
+                <script type="module">${hotFixCode}<\/script>
+                </head>
+            `
+      );
     }
     return rc;
   };
 }
 function rewriteBuild(esmx, options = {}) {
   return async () => {
-    for (const item of esmx.moduleConfig.exports) {
-      if (item.type === PathType.root) {
-        const text = fs.readFileSync(
-          esmx.resolvePath("./", item.exportPath),
-          "utf-8"
-        );
-        if (/\bexport\s+\*\s+from\b/.test(text)) {
-          console.log(
-            styleText(
-              "red",
-              `The export * syntax is used in the file '${item.exportPath}', which will cause the packaging to fail.`
-            )
-          );
-          console.log(
-            styleText(
-              "red",
-              `Please use specific export syntax, such as export { a, b } from './a';`
-            )
-          );
-          return false;
-        }
-      }
-    }
     const ok = await createRsBuild([
       generateBuildConfig(esmx, options, "client"),
       generateBuildConfig(esmx, options, "server"),
@@ -113,10 +101,10 @@ function rewriteBuild(esmx, options = {}) {
       return false;
     }
     esmx.writeSync(
-      esmx.resolvePath("dist/index.js"),
+      esmx.resolvePath("dist/index.mjs"),
       `
 async function start() {
-    const options = await import('./node/src/entry.node.js').then(
+    const options = await import('./node/src/entry.node.mjs').then(
         (mod) => mod.default
     );
     const { Esmx } = await import('@esmx/core');

package/dist/config.mjs

@@ -3,52 +3,26 @@ import {
   rspack
 } from "@rspack/core";
 import nodeExternals from "webpack-node-externals";
+import { HMR_DIR, HMR_JSONP } from "./hmr-config.mjs";
 export function createRspackConfig(esmx, buildTarget, options) {
-  const isWebApp = buildTarget === "client" || buildTarget === "server";
   const isHot = buildTarget === "client" && !esmx.isProd;
   return {
     /**
      * 项目根目录，不可修改
      */
     context: esmx.root,
-    entry: (() => {
-      const importPaths = [];
-      switch (buildTarget) {
-        case "client":
-          importPaths.push(esmx.resolvePath("src/entry.client.ts"));
-          isHot && importPaths.push(
-            `${resolve("webpack-hot-middleware/client")}?path=${esmx.basePath}hot-middleware&timeout=5000&overlay=false`
-          );
-          break;
-        case "server":
-          importPaths.push(esmx.resolvePath("src/entry.server.ts"));
-          break;
-        case "node":
-          importPaths.push(esmx.resolvePath("src/entry.node.ts"));
-          break;
-      }
-      return {
-        [`./src/entry.${buildTarget}`]: {
-          import: importPaths
-        }
-      };
-    })(),
     output: {
       clean: esmx.isProd,
-      module: true,
-      chunkFormat: esmx.isProd ? "module" : void 0,
-      chunkLoading: esmx.isProd ? "import" : void 0,
-      chunkFilename: esmx.isProd ? "chunks/[name].[contenthash:8].final.js" : "chunks/[name].js",
-      library: {
-        type: esmx.isProd ? "modern-module" : "module"
-      },
-      filename: buildTarget !== "node" && esmx.isProd ? "[name].[contenthash:8].final.js" : "[name].js",
+      chunkFilename: esmx.isProd ? "[name].[contenthash:8].final.mjs" : "[name].mjs",
+      filename: buildTarget !== "node" && esmx.isProd ? "[name].[contenthash:8].final.mjs" : "[name].mjs",
       cssFilename: esmx.isProd ? "[name].[contenthash:8].final.css" : "[name].css",
-      cssChunkFilename: esmx.isProd ? "chunks/[name].[contenthash:8].final.css" : "chunks/[name].css",
+      cssChunkFilename: esmx.isProd ? "[name].[contenthash:8].final.css" : "[name].css",
       publicPath: buildTarget === "client" ? "auto" : `${esmx.basePathPlaceholder}${esmx.basePath}`,
       uniqueName: esmx.varName,
-      hotUpdateChunkFilename: "__hot__/[id].[fullhash].hot-update.js",
-      hotUpdateMainFilename: "__hot__/[runtime].[fullhash].hot-update.json",
+      hotUpdateGlobal: HMR_JSONP,
+      chunkLoadingGlobal: HMR_JSONP + "_chunk",
+      hotUpdateChunkFilename: `${HMR_DIR}/[id].[fullhash].hot-update.mjs`,
+      hotUpdateMainFilename: `${HMR_DIR}/[runtime].[fullhash].hot-update.json`,
       path: (() => {
         switch (buildTarget) {
           case "client":
@@ -58,33 +32,23 @@ export function createRspackConfig(esmx, buildTarget, options) {
           case "node":
             return esmx.resolvePath("dist/node");
         }
-      })(),
-      environment: {
-        dynamicImport: true,
-        dynamicImportInWorker: true,
-        module: true,
-        nodePrefixForCoreModules: true
-      }
+      })()
     },
-    // 默认插件，不可修改
     plugins: (() => {
       return [
-        // 进度条插件
         new rspack.ProgressPlugin({
           prefix: buildTarget
         }),
-        // 模块链接插件
-        isWebApp ? moduleLinkPlugin(esmx.moduleConfig) : false,
-        // 热更新插件
+        createModuleLinkPlugin(esmx, buildTarget),
         isHot ? new rspack.HotModuleReplacementPlugin() : false
       ];
     })(),
     module: {
       parser: {
         javascript: {
-          url: buildTarget === "client" ? true : "relative",
-          importMeta: false,
-          strictExportPresence: true
+          // DEV hot update fix
+          dynamicImportMode: esmx.isProd ? "lazy" : "eager",
+          url: buildTarget === "client" ? true : "relative"
         }
       },
       generator: {
@@ -104,12 +68,11 @@ export function createRspackConfig(esmx, buildTarget, options) {
     },
     optimization: {
       minimize: options.minimize ?? esmx.isProd,
-      avoidEntryIife: esmx.isProd,
-      concatenateModules: esmx.isProd,
       emitOnErrors: true,
-      splitChunks: {
-        chunks: "async"
-      }
+      // DEV hot update fix
+      splitChunks: esmx.isProd ? void 0 : false,
+      // DEV hot update fix
+      runtimeChunk: esmx.isProd ? void 0 : false
     },
     externalsPresets: {
       web: buildTarget === "client",
@@ -128,18 +91,43 @@ export function createRspackConfig(esmx, buildTarget, options) {
       }
       return [];
     })(),
-    experiments: {
-      outputModule: true,
-      parallelCodeSplitting: true,
-      rspackFuture: {
-        bundlerInfo: { force: false }
-      }
-    },
     target: buildTarget === "client" ? "web" : "node22.6",
     mode: esmx.isProd ? "production" : "development",
     cache: !esmx.isProd
   };
 }
-function resolve(name) {
-  return new URL(import.meta.resolve(name)).pathname;
+function createModuleLinkPlugin(esmx, buildTarget) {
+  if (buildTarget === "node") {
+    return moduleLinkPlugin({
+      name: esmx.name,
+      exports: {
+        "src/entry.node": {
+          rewrite: false,
+          file: "./src/entry.node"
+        }
+      }
+    });
+  }
+  const exports = {};
+  for (const [name, item] of Object.entries(esmx.moduleConfig.exports)) {
+    if (item.inputTarget[buildTarget]) {
+      exports[name] = {
+        rewrite: item.rewrite,
+        file: item.inputTarget[buildTarget]
+      };
+    }
+  }
+  const preEntries = [];
+  if (buildTarget === "client" && !esmx.isProd) {
+    preEntries.push(
+      `webpack-hot-middleware/client?path=/${esmx.name}/hot-middleware`
+    );
+  }
+  return moduleLinkPlugin({
+    name: esmx.name,
+    injectChunkName: buildTarget === "server",
+    imports: esmx.moduleConfig.imports,
+    exports,
+    preEntries
+  });
 }

package/dist/hmr-config.d.ts

@@ -0,0 +1,2 @@
+export declare const HMR_JSONP = "__esmx_rspack_hmr_jsonp__";
+export declare const HMR_DIR = "__hot__";

package/dist/hmr-config.mjs

@@ -0,0 +1,2 @@
+export const HMR_JSONP = "__esmx_rspack_hmr_jsonp__";
+export const HMR_DIR = "__hot__";

package/dist/hot-fix.mjs

@@ -0,0 +1,44 @@
+(() => {
+  const HMR_JSONP = "__esmx_rspack_hmr_jsonp__";
+  const HMR_JSONP_LIST = "__esmx_rspack_hmr_jsonp_list__";
+  const list = window[HMR_JSONP_LIST] = window[HMR_JSONP_LIST] || [];
+  Object.defineProperty(window, HMR_JSONP, {
+    get() {
+      return (...args) => {
+        const hotUrl = getStackUrl(new Error().stack || "", 1);
+        if (hotUrl) {
+          const item = list.find(
+            (item2) => isSameModule(hotUrl, item2.url)
+          );
+          if (item) {
+            return item.jsonp(...args);
+          }
+        }
+        console.log("%chot update not found", "color: red", args);
+      };
+    },
+    set(jsonp) {
+      const url = getStackUrl(new Error().stack || "", 1);
+      if (url) {
+        list.push({ url, jsonp });
+      }
+    }
+  });
+  function isSameModule(hotUrl, originalUrl) {
+    const normalizedHotUrl = hotUrl.replace(/\/__hot__\//, "/").replace(/\.\w+\.hot-update\.mjs$/, ".mjs");
+    const normalizedOriginalUrl = originalUrl;
+    return normalizedHotUrl === normalizedOriginalUrl;
+  }
+  function getStackUrl(stack, index = 0) {
+    const lines = stack.split("\n");
+    const stackLines = lines.filter((line2) => line2.includes("at "));
+    if (index < 0 || index >= stackLines.length) {
+      return null;
+    }
+    const line = stackLines[index];
+    const withoutAt = line.replace(/^\s*at\s+/, "");
+    const urlMatch = withoutAt.match(/\((.*?)\)/);
+    const url = urlMatch ? urlMatch[1] : withoutAt;
+    return url.replace(/:\d+:\d+$/, "");
+  }
+})();

package/dist/html-app.mjs

@@ -10,7 +10,7 @@ export async function createRspackHtmlApp(esmx, options) {
   options = {
     ...options,
     target: {
-      web: ["chrome>=87", "edge>=88", "firefox>=78", "safari>=14"],
+      web: ["chrome>=63", "firefox>=67", "safari>=11.1"],
       node: ["node>=22.6"],
       ...options?.target
     },

package/dist/pack.mjs

@@ -30,8 +30,12 @@ export async function pack(esmx) {
 }
 async function buildPackageJson(esmx) {
   const [clientJson, serverJson, curJson] = await Promise.all([
-    esmx.readJson(esmx.resolvePath("dist/client/manifest.json")),
-    esmx.readJson(esmx.resolvePath("dist/server/manifest.json")),
+    esmx.readJson(
+      esmx.resolvePath("dist/client/manifest.json")
+    ),
+    esmx.readJson(
+      esmx.resolvePath("dist/server/manifest.json")
+    ),
     esmx.readJson(esmx.resolvePath("package.json"))
   ]);
   const exports = {
@@ -47,13 +51,13 @@ async function buildPackageJson(esmx) {
     const exportName = `./${name}`;
     if (client && server) {
       exports[exportName] = {
-        default: `./server/${server}`,
-        browser: `./client/${client}`
+        default: `./server/${server.file}`,
+        browser: `./client/${client.file}`
       };
     } else if (client) {
-      exports[exportName] = `./client/${client}`;
+      exports[exportName] = `./client/${client.file}`;
     } else if (server) {
-      exports[exportName] = `./server/${server}`;
+      exports[exportName] = `./server/${server.file}`;
     }
   });
   const buildJson = {

package/dist/utils/rsbuild.d.ts

@@ -1,12 +1,6 @@
-import { type Compiler, type RspackOptions } from '@rspack/core';
+import { type RspackOptions } from '@rspack/core';
 export declare function createRsBuild(options: RspackOptions[]): {
-    readonly compilers: Compiler[];
+    readonly compilers: import("@rspack/core").Compiler[];
     build(): Promise<boolean>;
     watch(): void;
 };
-export declare class RsBuild {
-    private compiler;
-    constructor(options: RspackOptions);
-    build(): Promise<boolean>;
-    watch(): void;
-}

package/dist/utils/rsbuild.mjs

@@ -1,5 +1,8 @@
 import { styleText } from "node:util";
 import { rspack } from "@rspack/core";
+function showError(message) {
+  console.error(styleText("red", message));
+}
 export function createRsBuild(options) {
   const multiCompiler = rspack(options);
   return {
@@ -10,17 +13,18 @@ export function createRsBuild(options) {
       return new Promise((resolve) => {
         multiCompiler.run((err, stats) => {
           if (err) {
+            showError(err.message);
             return resolve(false);
           }
           if (stats?.hasErrors()) {
             stats.toJson({ errors: true })?.errors?.forEach((err2) => {
-              console.log(styleText("red", err2.message));
+              showError(err2.message);
             });
             return resolve(false);
           }
           multiCompiler.close((err2) => {
             if (err2) {
-              console.log(styleText("red", err2.message));
+              showError(err2.message);
               return resolve(false);
             }
             process.nextTick(() => {
@@ -33,7 +37,7 @@ export function createRsBuild(options) {
     watch() {
       const watching = multiCompiler.watch({}, (err, stats) => {
         if (err) {
-          console.error(err);
+          console.log(styleText("red", err.message));
           return;
         }
         if (stats?.hasErrors()) {
@@ -61,37 +65,3 @@ export function createRsBuild(options) {
     }
   };
 }
-export class RsBuild {
-  compiler;
-  constructor(options) {
-    this.compiler = rspack(options);
-  }
-  async build() {
-    return new Promise((resolve) => {
-      this.compiler.run((err, stats) => {
-        if (err) {
-          return resolve(false);
-        }
-        if (stats?.hasErrors()) {
-          stats.toJson({ errors: true })?.errors?.forEach((err2) => {
-            console.error(err2);
-          });
-          return resolve(false);
-        }
-        this.compiler.close((err2) => {
-          if (err2) {
-            console.error(err2);
-            return resolve(false);
-          }
-          process.nextTick(() => {
-            resolve(true);
-          });
-        });
-      });
-    });
-  }
-  watch() {
-    const watching = this.compiler.watch({}, () => {
-    });
-  }
-}

package/package.json

@@ -63,10 +63,10 @@
         }
     },
     "dependencies": {
-        "@esmx/import": "3.0.0-rc.18",
-        "@esmx/rspack-module-link-plugin": "3.0.0-rc.18",
+        "@esmx/import": "3.0.0-rc.20",
+        "@esmx/rspack-module-link-plugin": "3.0.0-rc.20",
         "@npmcli/arborist": "^9.0.1",
-        "@rspack/core": "1.3.2",
+        "@rspack/core": "1.4.0",
         "css-loader": "^7.1.2",
         "less-loader": "^12.2.0",
         "node-polyfill-webpack-plugin": "^4.1.0",
@@ -79,21 +79,20 @@
     },
     "devDependencies": {
         "@biomejs/biome": "1.9.4",
-        "@esmx/core": "3.0.0-rc.18",
-        "@esmx/lint": "3.0.0-rc.18",
-        "@gez/lint": "3.0.0-rc.9",
-        "@types/node": "22.13.10",
-        "@types/npmcli__arborist": "^5.6.11",
+        "@esmx/core": "3.0.0-rc.20",
+        "@esmx/lint": "3.0.0-rc.20",
+        "@types/node": "22.15.18",
+        "@types/npmcli__arborist": "^6.3.1",
         "@types/pacote": "^11.1.8",
         "@types/webpack-hot-middleware": "^2.25.9",
         "@types/webpack-node-externals": "^3.0.4",
-        "@vitest/coverage-v8": "3.0.8",
-        "stylelint": "16.15.0",
+        "@vitest/coverage-v8": "3.1.3",
+        "stylelint": "16.19.1",
         "typescript": "5.8.2",
-        "unbuild": "2.0.0",
-        "vitest": "3.0.8"
+        "unbuild": "3.5.0",
+        "vitest": "3.1.3"
     },
-    "version": "3.0.0-rc.18",
+    "version": "3.0.0-rc.20",
     "type": "module",
     "private": false,
     "exports": {
@@ -112,5 +111,5 @@
         "template",
         "public"
     ],
-    "gitHead": "79ceb323f985dd88dbd7f1349f61f341b6d522c4"
+    "gitHead": "4c6490c23cbc148cb189b3f2cdae930eed901607"
 }

package/src/app.ts

@@ -1,11 +1,10 @@
 import fs from 'node:fs';
-import { pathToFileURL } from 'node:url';
-import { styleText } from 'node:util';
+import path from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
 import {
     type App,
     type Esmx,
     type Middleware,
-    PathType,
     RenderContext,
     type RenderContextOptions,
     type ServerRenderHandle,
@@ -20,6 +19,12 @@ import { createRspackConfig } from './config';
 import { pack } from './pack';
 import { createRsBuild } from './utils';
 
+const extension = path.extname(fileURLToPath(import.meta.url));
+const hotFixCode = fs.readFileSync(
+    fileURLToPath(new URL(`./hot-fix${extension}`, import.meta.url)),
+    'utf-8'
+);
+
 /**
  * Rspack 应用配置上下文接口。
  *
@@ -263,6 +268,13 @@ function rewriteRender(esmx: Esmx) {
         const serverRender: ServerRenderHandle = module[rc.entryName];
         if (typeof serverRender === 'function') {
             await serverRender(rc);
+            rc.html = rc.html.replace(
+                '</head>',
+                `
+                <script type="module">${hotFixCode}</script>
+                </head>
+            `
+            );
         }
         return rc;
     };
@@ -270,29 +282,6 @@ function rewriteRender(esmx: Esmx) {
 
 function rewriteBuild(esmx: Esmx, options: RspackAppOptions = {}) {
     return async (): Promise<boolean> => {
-        for (const item of esmx.moduleConfig.exports) {
-            if (item.type === PathType.root) {
-                const text = fs.readFileSync(
-                    esmx.resolvePath('./', item.exportPath),
-                    'utf-8'
-                );
-                if (/\bexport\s+\*\s+from\b/.test(text)) {
-                    console.log(
-                        styleText(
-                            'red',
-                            `The export * syntax is used in the file '${item.exportPath}', which will cause the packaging to fail.`
-                        )
-                    );
-                    console.log(
-                        styleText(
-                            'red',
-                            `Please use specific export syntax, such as export { a, b } from './a';`
-                        )
-                    );
-                    return false;
-                }
-            }
-        }
         const ok = await createRsBuild([
             generateBuildConfig(esmx, options, 'client'),
             generateBuildConfig(esmx, options, 'server'),
@@ -302,10 +291,10 @@ function rewriteBuild(esmx: Esmx, options: RspackAppOptions = {}) {
             return false;
         }
         esmx.writeSync(
-            esmx.resolvePath('dist/index.js'),
+            esmx.resolvePath('dist/index.mjs'),
             `
 async function start() {
-    const options = await import('./node/src/entry.node.js').then(
+    const options = await import('./node/src/entry.node.mjs').then(
         (mod) => mod.default
     );
     const { Esmx } = await import('@esmx/core');

package/src/config.ts

@@ -2,6 +2,7 @@ import type { Esmx } from '@esmx/core';
 import { moduleLinkPlugin } from '@esmx/rspack-module-link-plugin';
 import {
     type ExternalItem,
+    type Plugin,
     type Plugins,
     type RspackOptions,
     rspack
@@ -9,6 +10,7 @@ import {
 import nodeExternals from 'webpack-node-externals';
 import type { RspackAppOptions } from './app';
 import type { BuildTarget } from './build-target';
+import { HMR_DIR, HMR_JSONP } from './hmr-config';
 
 /**
  * 构建 Client、Server、Node 的基础配置
@@ -18,65 +20,36 @@ export function createRspackConfig(
     buildTarget: BuildTarget,
     options: RspackAppOptions
 ): RspackOptions {
-    const isWebApp = buildTarget === 'client' || buildTarget === 'server';
     const isHot = buildTarget === 'client' && !esmx.isProd;
     return {
         /**
          * 项目根目录，不可修改
          */
         context: esmx.root,
-        entry: (() => {
-            const importPaths: string[] = [];
-            switch (buildTarget) {
-                case 'client':
-                    importPaths.push(esmx.resolvePath('src/entry.client.ts'));
-                    isHot &&
-                        importPaths.push(
-                            `${resolve('webpack-hot-middleware/client')}?path=${esmx.basePath}hot-middleware&timeout=5000&overlay=false`
-                        );
-                    break;
-                case 'server':
-                    importPaths.push(esmx.resolvePath('src/entry.server.ts'));
-                    break;
-                case 'node':
-                    importPaths.push(esmx.resolvePath('src/entry.node.ts'));
-                    break;
-            }
-            return {
-                [`./src/entry.${buildTarget}`]: {
-                    import: importPaths
-                }
-            };
-        })(),
         output: {
             clean: esmx.isProd,
-            module: true,
-            chunkFormat: esmx.isProd ? 'module' : undefined,
-            chunkLoading: esmx.isProd ? 'import' : undefined,
             chunkFilename: esmx.isProd
-                ? 'chunks/[name].[contenthash:8].final.js'
-                : 'chunks/[name].js',
-            library: {
-                type: esmx.isProd ? 'modern-module' : 'module'
-            },
+                ? '[name].[contenthash:8].final.mjs'
+                : '[name].mjs',
             filename:
                 buildTarget !== 'node' && esmx.isProd
-                    ? '[name].[contenthash:8].final.js'
-                    : '[name].js',
+                    ? '[name].[contenthash:8].final.mjs'
+                    : '[name].mjs',
             cssFilename: esmx.isProd
                 ? '[name].[contenthash:8].final.css'
                 : '[name].css',
             cssChunkFilename: esmx.isProd
-                ? 'chunks/[name].[contenthash:8].final.css'
-                : 'chunks/[name].css',
+                ? '[name].[contenthash:8].final.css'
+                : '[name].css',
             publicPath:
                 buildTarget === 'client'
                     ? 'auto'
                     : `${esmx.basePathPlaceholder}${esmx.basePath}`,
             uniqueName: esmx.varName,
-            hotUpdateChunkFilename: '__hot__/[id].[fullhash].hot-update.js',
-            hotUpdateMainFilename:
-                '__hot__/[runtime].[fullhash].hot-update.json',
+            hotUpdateGlobal: HMR_JSONP,
+            chunkLoadingGlobal: HMR_JSONP + '_chunk',
+            hotUpdateChunkFilename: `${HMR_DIR}/[id].[fullhash].hot-update.mjs`,
+            hotUpdateMainFilename: `${HMR_DIR}/[runtime].[fullhash].hot-update.json`,
             path: ((): string => {
                 switch (buildTarget) {
                     case 'client':
@@ -86,33 +59,23 @@ export function createRspackConfig(
                     case 'node':
                         return esmx.resolvePath('dist/node');
                 }
-            })(),
-            environment: {
-                dynamicImport: true,
-                dynamicImportInWorker: true,
-                module: true,
-                nodePrefixForCoreModules: true
-            }
+            })()
         },
-        // 默认插件，不可修改
         plugins: ((): Plugins => {
             return [
-                // 进度条插件
                 new rspack.ProgressPlugin({
                     prefix: buildTarget
                 }),
-                // 模块链接插件
-                isWebApp ? moduleLinkPlugin(esmx.moduleConfig) : false,
-                // 热更新插件
+                createModuleLinkPlugin(esmx, buildTarget),
                 isHot ? new rspack.HotModuleReplacementPlugin() : false
             ];
         })(),
         module: {
             parser: {
                 javascript: {
-                    url: buildTarget === 'client' ? true : 'relative',
-                    importMeta: false,
-                    strictExportPresence: true
+                    // DEV hot update fix
+                    dynamicImportMode: esmx.isProd ? 'lazy' : 'eager',
+                    url: buildTarget === 'client' ? true : 'relative'
                 }
             },
             generator: {
@@ -132,12 +95,11 @@ export function createRspackConfig(
         },
         optimization: {
             minimize: options.minimize ?? esmx.isProd,
-            avoidEntryIife: esmx.isProd,
-            concatenateModules: esmx.isProd,
             emitOnErrors: true,
-            splitChunks: {
-                chunks: 'async'
-            }
+            // DEV hot update fix
+            splitChunks: esmx.isProd ? undefined : false,
+            // DEV hot update fix
+            runtimeChunk: esmx.isProd ? undefined : false
         },
         externalsPresets: {
             web: buildTarget === 'client',
@@ -156,19 +118,51 @@ export function createRspackConfig(
             }
             return [];
         })(),
-        experiments: {
-            outputModule: true,
-            parallelCodeSplitting: true,
-            rspackFuture: {
-                bundlerInfo: { force: false }
-            }
-        },
         target: buildTarget === 'client' ? 'web' : 'node22.6',
         mode: esmx.isProd ? 'production' : 'development',
         cache: !esmx.isProd
     };
 }
 
-function resolve(name: string) {
-    return new URL(import.meta.resolve(name)).pathname;
+function createModuleLinkPlugin(esmx: Esmx, buildTarget: BuildTarget): Plugin {
+    if (buildTarget === 'node') {
+        return moduleLinkPlugin({
+            name: esmx.name,
+            exports: {
+                'src/entry.node': {
+                    rewrite: false,
+                    file: './src/entry.node'
+                }
+            }
+        });
+    }
+    const exports: Record<
+        string,
+        {
+            rewrite: boolean;
+            file: string;
+        }
+    > = {};
+    for (const [name, item] of Object.entries(esmx.moduleConfig.exports)) {
+        if (item.inputTarget[buildTarget]) {
+            exports[name] = {
+                rewrite: item.rewrite,
+                file: item.inputTarget[buildTarget]
+            };
+        }
+    }
+    const preEntries: string[] = [];
+    if (buildTarget === 'client' && !esmx.isProd) {
+        preEntries.push(
+            `webpack-hot-middleware/client?path=/${esmx.name}/hot-middleware`
+        );
+    }
+
+    return moduleLinkPlugin({
+        name: esmx.name,
+        injectChunkName: buildTarget === 'server',
+        imports: esmx.moduleConfig.imports,
+        exports,
+        preEntries
+    });
 }

package/src/hmr-config.ts

@@ -0,0 +1,2 @@
+export const HMR_JSONP = '__esmx_rspack_hmr_jsonp__';
+export const HMR_DIR = '__hot__';

package/src/hot-fix.ts

@@ -0,0 +1,51 @@
+(() => {
+    const HMR_JSONP = '__esmx_rspack_hmr_jsonp__';
+    const HMR_JSONP_LIST = '__esmx_rspack_hmr_jsonp_list__';
+
+    const list: Array<{ url: string; jsonp: Function }> = (window[
+        HMR_JSONP_LIST
+    ] = window[HMR_JSONP_LIST] || []);
+
+    Object.defineProperty(window, HMR_JSONP, {
+        get() {
+            return (...args: any[]) => {
+                const hotUrl = getStackUrl(new Error().stack || '', 1);
+                if (hotUrl) {
+                    const item = list.find((item) =>
+                        isSameModule(hotUrl, item.url)
+                    );
+                    if (item) {
+                        return item.jsonp(...args);
+                    }
+                }
+                console.log('%chot update not found', 'color: red', args);
+            };
+        },
+        set(jsonp) {
+            const url = getStackUrl(new Error().stack || '', 1);
+            if (url) {
+                list.push({ url, jsonp });
+            }
+        }
+    });
+    function isSameModule(hotUrl: string, originalUrl: string): boolean {
+        const normalizedHotUrl = hotUrl
+            .replace(/\/__hot__\//, '/')
+            .replace(/\.\w+\.hot-update\.mjs$/, '.mjs');
+        const normalizedOriginalUrl = originalUrl;
+        return normalizedHotUrl === normalizedOriginalUrl;
+    }
+
+    function getStackUrl(stack: string, index = 0): string | null {
+        const lines = stack.split('\n');
+        const stackLines = lines.filter((line) => line.includes('at '));
+        if (index < 0 || index >= stackLines.length) {
+            return null;
+        }
+        const line = stackLines[index];
+        const withoutAt = line.replace(/^\s*at\s+/, '');
+        const urlMatch = withoutAt.match(/\((.*?)\)/);
+        const url = urlMatch ? urlMatch[1] : withoutAt;
+        return url.replace(/:\d+:\d+$/, '');
+    }
+})();

package/src/html-app.ts

@@ -326,7 +326,7 @@ export async function createRspackHtmlApp(
     options = {
         ...options,
         target: {
-            web: ['chrome>=87', 'edge>=88', 'firefox>=78', 'safari>=14'],
+            web: ['chrome>=63', 'firefox>=67', 'safari>=11.1'],
             node: ['node>=22.6'],
             ...options?.target
         },

package/src/pack.ts

@@ -1,5 +1,5 @@
 import crypto from 'node:crypto';
-import type { Esmx } from '@esmx/core';
+import type { Esmx, ManifestJson } from '@esmx/core';
 import Arborist from '@npmcli/arborist';
 import pacote from 'pacote';
 
@@ -38,8 +38,12 @@ export async function pack(esmx: Esmx): Promise<boolean> {
 
 async function buildPackageJson(esmx: Esmx): Promise<Record<string, any>> {
     const [clientJson, serverJson, curJson] = await Promise.all([
-        esmx.readJson(esmx.resolvePath('dist/client/manifest.json')),
-        esmx.readJson(esmx.resolvePath('dist/server/manifest.json')),
+        esmx.readJson<ManifestJson>(
+            esmx.resolvePath('dist/client/manifest.json')
+        ),
+        esmx.readJson<ManifestJson>(
+            esmx.resolvePath('dist/server/manifest.json')
+        ),
         esmx.readJson(esmx.resolvePath('package.json'))
     ]);
     const exports: Record<string, any> = {
@@ -55,13 +59,13 @@ async function buildPackageJson(esmx: Esmx): Promise<Record<string, any>> {
         const exportName = `./${name}`;
         if (client && server) {
             exports[exportName] = {
-                default: `./server/${server}`,
-                browser: `./client/${client}`
+                default: `./server/${server.file}`,
+                browser: `./client/${client.file}`
             };
         } else if (client) {
-            exports[exportName] = `./client/${client}`;
+            exports[exportName] = `./client/${client.file}`;
         } else if (server) {
-            exports[exportName] = `./server/${server}`;
+            exports[exportName] = `./server/${server.file}`;
         }
     });
 

package/src/utils/rsbuild.ts

@@ -1,5 +1,9 @@
 import { styleText } from 'node:util';
-import { type Compiler, type RspackOptions, rspack } from '@rspack/core';
+import { type RspackOptions, rspack } from '@rspack/core';
+
+function showError(message: string) {
+    console.error(styleText('red', message));
+}
 
 export function createRsBuild(options: RspackOptions[]) {
     const multiCompiler = rspack(options);
@@ -11,19 +15,20 @@ export function createRsBuild(options: RspackOptions[]) {
             return new Promise<boolean>((resolve) => {
                 multiCompiler.run((err, stats) => {
                     if (err) {
+                        showError(err.message);
                         return resolve(false);
                     }
                     if (stats?.hasErrors()) {
                         stats
                             .toJson({ errors: true })
                             ?.errors?.forEach((err) => {
-                                console.log(styleText('red', err.message));
+                                showError(err.message);
                             });
                         return resolve(false);
                     }
                     multiCompiler.close((err) => {
                         if (err) {
-                            console.log(styleText('red', err.message));
+                            showError(err.message);
                             return resolve(false);
                         }
                         process.nextTick(() => {
@@ -36,7 +41,7 @@ export function createRsBuild(options: RspackOptions[]) {
         watch() {
             const watching = multiCompiler.watch({}, (err, stats) => {
                 if (err) {
-                    console.error(err);
+                    console.log(styleText('red', err.message));
                     return;
                 }
                 if (stats?.hasErrors()) {
@@ -69,37 +74,3 @@ export function createRsBuild(options: RspackOptions[]) {
         }
     };
 }
-
-export class RsBuild {
-    private compiler: Compiler;
-    public constructor(options: RspackOptions) {
-        this.compiler = rspack(options);
-    }
-    public async build() {
-        return new Promise<boolean>((resolve) => {
-            this.compiler.run((err, stats) => {
-                if (err) {
-                    return resolve(false);
-                }
-                if (stats?.hasErrors()) {
-                    stats.toJson({ errors: true })?.errors?.forEach((err) => {
-                        console.error(err);
-                    });
-                    return resolve(false);
-                }
-                this.compiler.close((err) => {
-                    if (err) {
-                        console.error(err);
-                        return resolve(false);
-                    }
-                    process.nextTick(() => {
-                        resolve(true);
-                    });
-                });
-            });
-        });
-    }
-    public watch() {
-        const watching = this.compiler.watch({}, () => {});
-    }
-}