@esmx/rspack 3.0.0-rc.10

package/README.md

@@ -0,0 +1,29 @@
+# @esmx/rspack
+
+基于 Rspack 提供高性能的构建能力，支持标准应用和 HTML 应用的开发与构建。
+
+## 特性
+
+- 🚀 **高性能构建** - 基于 Rspack 的极速构建，为应用提供卓越的开发体验
+- 💡 **应用支持** - 完整支持标准应用和 HTML 应用的开发与构建
+- 🎨 **资源处理** - 智能处理各类资源，支持 JavaScript、CSS、图片等
+- 🛠️ **SSR 支持** - 内置服务端渲染支持，轻松构建同构应用
+- 🔧 **开发体验** - 支持热更新、智能提示和 TypeScript
+
+## 安装
+
+```bash
+pnpm add @esmx/rspack -D
+# 或
+yarn add @esmx/rspack -D
+# 或
+npm install @esmx/rspack -D
+```
+
+## 文档
+
+访问 [@esmx/rspack 官方文档](https://www.esmnext.com/api/app/rspack.html) 获取详细的使用指南和 API 文档。
+
+## 许可证
+
+MIT

package/dist/app.d.ts

@@ -0,0 +1,160 @@
+import { type App, type Esmx } from '@esmx/core';
+import type { RspackOptions } from '@rspack/core';
+import type { BuildTarget } from './build-target';
+/**
+ * Rspack 应用配置上下文接口。
+ *
+ * 该接口提供了在配置钩子函数中可以访问的上下文信息，允许你：
+ * - 访问 Esmx 框架实例
+ * - 获取当前的构建目标（client/server/node）
+ * - 修改 Rspack 配置
+ * - 访问应用选项
+ *
+ * @example
+ * ```ts
+ * // entry.node.ts
+ * export default {
+ *   async devApp(esmx) {
+ *     return import('@esmx/rspack').then((m) =>
+ *       m.createRspackApp(esmx, {
+ *         // 配置钩子函数
+ *         config(context) {
+ *           // 访问构建目标
+ *           if (context.buildTarget === 'client') {
+ *             // 修改客户端构建配置
+ *             context.config.optimization = {
+ *               ...context.config.optimization,
+ *               splitChunks: {
+ *                 chunks: 'all'
+ *               }
+ *             };
+ *           }
+ *         }
+ *       })
+ *     );
+ *   }
+ * };
+ * ```
+ */
+export interface RspackAppConfigContext {
+    /**
+     * Esmx 框架实例。
+     * 可用于访问框架提供的 API 和工具函数。
+     */
+    esmx: Esmx;
+    /**
+     * 当前的构建目标。
+     * - 'client': 客户端构建，生成浏览器可执行的代码
+     * - 'server': 服务端构建，生成 SSR 渲染代码
+     * - 'node': Node.js 构建，生成服务器入口代码
+     */
+    buildTarget: BuildTarget;
+    /**
+     * Rspack 编译配置对象。
+     * 你可以在配置钩子中修改这个对象来自定义构建行为。
+     */
+    config: RspackOptions;
+    /**
+     * 创建应用时传入的选项对象。
+     */
+    options: RspackAppOptions;
+}
+/**
+ * Rspack 应用配置选项接口。
+ *
+ * 该接口提供了创建 Rspack 应用时可以使用的配置选项，包括：
+ * - 代码压缩选项
+ * - Rspack 配置钩子函数
+ *
+ * @example
+ * ```ts
+ * // entry.node.ts
+ * export default {
+ *   async devApp(esmx) {
+ *     return import('@esmx/rspack').then((m) =>
+ *       m.createRspackApp(esmx, {
+ *         // 禁用代码压缩
+ *         minimize: false,
+ *         // 自定义 Rspack 配置
+ *         config(context) {
+ *           if (context.buildTarget === 'client') {
+ *             context.config.optimization.splitChunks = {
+ *               chunks: 'all'
+ *             };
+ *           }
+ *         }
+ *       })
+ *     );
+ *   }
+ * };
+ * ```
+ */
+export interface RspackAppOptions {
+    /**
+     * 是否启用代码压缩。
+     *
+     * - true: 启用代码压缩
+     * - false: 禁用代码压缩
+     * - undefined: 根据环境自动判断（生产环境启用，开发环境禁用）
+     *
+     * @default undefined
+     */
+    minimize?: boolean;
+    /**
+     * Rspack 配置钩子函数。
+     *
+     * 在构建开始前调用，可以通过该函数修改 Rspack 的编译配置。
+     * 支持针对不同的构建目标（client/server/node）进行差异化配置。
+     *
+     * @param context - 配置上下文，包含框架实例、构建目标和配置对象
+     */
+    config?: (context: RspackAppConfigContext) => void;
+}
+/**
+ * 创建 Rspack 应用实例。
+ *
+ * 该函数根据运行环境（开发/生产）创建不同的应用实例：
+ * - 开发环境：配置热更新中间件和实时渲染
+ * - 生产环境：配置构建任务
+ *
+ * @param esmx - Esmx 框架实例
+ * @param options - Rspack 应用配置选项
+ * @returns 返回应用实例
+ *
+ * @example
+ * ```ts
+ * // entry.node.ts
+ * export default {
+ *   async devApp(esmx) {
+ *     return import('@esmx/rspack').then((m) =>
+ *       m.createRspackApp(esmx, {
+ *         config(context) {
+ *           // 配置 loader 处理不同类型的文件
+ *           context.config.module = {
+ *             rules: [
+ *               {
+ *                 test: /\.ts$/,
+ *                 exclude: [/node_modules/],
+ *                 loader: 'builtin:swc-loader',
+ *                 options: {
+ *                   jsc: {
+ *                     parser: {
+ *                       syntax: 'typescript'
+ *                     }
+ *                   }
+ *                 }
+ *               },
+ *               {
+ *                 test: /\.css$/,
+ *                 use: ['style-loader', 'css-loader']
+ *               }
+ *             ]
+ *           };
+ *         }
+ *       })
+ *     );
+ *   }
+ * };
+ * ```
+ */
+export declare function createRspackApp(esmx: Esmx, options?: RspackAppOptions): Promise<App>;

package/dist/app.mjs

@@ -0,0 +1,130 @@
+import fs from "node:fs";
+import { pathToFileURL } from "node:url";
+import { styleText } from "node:util";
+import {
+  PathType,
+  RenderContext,
+  createApp,
+  mergeMiddlewares
+} from "@esmx/core";
+import { createVmImport } from "@esmx/import";
+import hotMiddleware from "webpack-hot-middleware";
+import { createRspackConfig } from "./config.mjs";
+import { pack } from "./pack.mjs";
+import { createRsBuild } from "./utils/index.mjs";
+export async function createRspackApp(esmx, options) {
+  const app = await createApp(esmx, esmx.command);
+  switch (esmx.command) {
+    case esmx.COMMAND.dev:
+      app.middleware = mergeMiddlewares([
+        ...await createMiddleware(esmx, options),
+        app.middleware
+      ]);
+      app.render = rewriteRender(esmx);
+      break;
+    case esmx.COMMAND.build:
+      app.build = rewriteBuild(esmx, options);
+      break;
+  }
+  return app;
+}
+async function createMiddleware(esmx, options = {}) {
+  if (esmx.command !== esmx.COMMAND.dev) {
+    return [];
+  }
+  const rsBuild = createRsBuild([
+    generateBuildConfig(esmx, options, "client"),
+    generateBuildConfig(esmx, options, "server")
+  ]);
+  rsBuild.watch();
+  const hot = hotMiddleware(rsBuild.compilers[0], {
+    path: `${esmx.basePath}hot-middleware`
+  });
+  return [
+    (req, res, next) => {
+      if (req.url?.startsWith(`${esmx.basePath}hot-middleware`)) {
+        return hot(req, res, next);
+      }
+      return next();
+    }
+  ];
+}
+function generateBuildConfig(esmx, options, buildTarget) {
+  const config = createRspackConfig(esmx, buildTarget, options);
+  options.config?.({ esmx, options, buildTarget, config });
+  return config;
+}
+function rewriteRender(esmx) {
+  return async (options) => {
+    const baseURL = pathToFileURL(esmx.root);
+    const importMap = await esmx.getImportMap("server");
+    const vmImport = createVmImport(baseURL, importMap);
+    const rc = new RenderContext(esmx, options);
+    const module = await vmImport(
+      `${esmx.name}/src/entry.server`,
+      import.meta.url,
+      {
+        console,
+        setTimeout,
+        clearTimeout,
+        process,
+        URL,
+        global
+      }
+    );
+    const serverRender = module[rc.entryName];
+    if (typeof serverRender === "function") {
+      await serverRender(rc);
+    }
+    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;
+        }
+      }
+    }
+    await createRsBuild([
+      generateBuildConfig(esmx, options, "client"),
+      generateBuildConfig(esmx, options, "server"),
+      generateBuildConfig(esmx, options, "node")
+    ]).build();
+    esmx.writeSync(
+      esmx.resolvePath("dist/index.js"),
+      `
+async function start() {
+    const options = await import('./node/src/entry.node.js').then(
+        (mod) => mod.default
+    );
+    const { Esmx } = await import('@esmx/core');
+    const esmx = new Esmx(options);
+
+    await esmx.init(esmx.COMMAND.start);
+}
+
+start();
+`.trim()
+    );
+    return pack(esmx);
+  };
+}

package/dist/build-target.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 构建目标环境类型
+ * @description 定义了应用程序的构建目标环境，用于配置构建过程中的特定优化和功能
+ * - node: 构建为 Node.js 环境运行的代码
+ * - client: 构建为浏览器环境运行的代码
+ * - server: 构建为服务端环境运行的代码
+ */
+export type BuildTarget = 'node' | 'client' | 'server';

package/dist/config.d.ts

@@ -0,0 +1,8 @@
+import type { Esmx } from '@esmx/core';
+import { type RspackOptions } from '@rspack/core';
+import type { RspackAppOptions } from './app';
+import type { BuildTarget } from './build-target';
+/**
+ * 构建 Client、Server、Node 的基础配置
+ */
+export declare function createRspackConfig(esmx: Esmx, buildTarget: BuildTarget, options: RspackAppOptions): RspackOptions;

package/dist/config.mjs

@@ -0,0 +1,142 @@
+import { moduleLinkPlugin } from "@esmx/rspack-module-link-plugin";
+import {
+  rspack
+} from "@rspack/core";
+import nodeExternals from "webpack-node-externals";
+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",
+      cssFilename: esmx.isProd ? "[name].[contenthash:8].final.css" : "[name].css",
+      cssChunkFilename: esmx.isProd ? "chunks/[name].[contenthash:8].final.css" : "chunks/[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",
+      path: (() => {
+        switch (buildTarget) {
+          case "client":
+            return esmx.resolvePath("dist/client");
+          case "server":
+            return esmx.resolvePath("dist/server");
+          case "node":
+            return esmx.resolvePath("dist/node");
+        }
+      })(),
+      environment: {
+        nodePrefixForCoreModules: true
+      }
+    },
+    // 默认插件，不可修改
+    plugins: (() => {
+      return [
+        // 进度条插件
+        new rspack.ProgressPlugin({
+          prefix: buildTarget
+        }),
+        // 模块链接插件
+        isWebApp ? moduleLinkPlugin(esmx.moduleConfig) : false,
+        // 热更新插件
+        isHot ? new rspack.HotModuleReplacementPlugin() : false
+      ];
+    })(),
+    module: {
+      parser: {
+        javascript: {
+          url: buildTarget === "client" ? true : "relative",
+          importMeta: false,
+          strictExportPresence: true
+        }
+      },
+      generator: {
+        asset: {
+          emit: buildTarget === "client"
+        },
+        "asset/resource": {
+          emit: buildTarget === "client"
+        }
+      },
+      rules: []
+    },
+    resolve: {
+      alias: {
+        [esmx.name]: esmx.root
+      }
+    },
+    optimization: {
+      minimize: options.minimize ?? esmx.isProd,
+      avoidEntryIife: esmx.isProd,
+      concatenateModules: esmx.isProd,
+      emitOnErrors: true,
+      splitChunks: {
+        chunks: "async"
+      }
+    },
+    externalsPresets: {
+      web: buildTarget === "client",
+      node: buildTarget === "server" || buildTarget === "node"
+    },
+    externalsType: "module-import",
+    externals: (() => {
+      if (buildTarget === "node") {
+        return [
+          // @ts-ignore
+          nodeExternals({
+            // @ts-ignore
+            importType: "module-import"
+          })
+        ];
+      }
+      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;
+}