dev.setupMiddlewares

  • 类型:
type SetupMiddlewaresServer = {
  sockWrite: (
    type: string,
    data?: string | boolean | Record<string, any>,
  ) => void;
  environments: {
    [name: string]: {
      /**
       * 获取当前环境的构建信息
       */
      getStats: () => Promise<Stats>;

      /**
       * 在服务端加载并执行构建产物
       *
       * @param entryName - 入口名称,和 Rsbuild source.entry 的某一个 key 值对应
       * @returns 入口模块的返回值
       */
      loadBundle: <T = unknown>(entryName: string) => Promise<T>;

      /**
       * 获取编译后的 HTML 模版内容
       */
      getTransformedHtml: (entryName: string) => Promise<string>;
    };
  };
};

type SetupMiddlewares = Array<
  (
    middlewares: {
      unshift: (...handlers: RequestHandler[]) => void;
      push: (...handlers: RequestHandler[]) => void;
    },
    server: SetupMiddlewaresServer,
  ) => void
>;
  • 默认值: undefined

提供执行自定义函数和应用自定义中间件的能力。

中间件的执行顺序是: unshift => 内置中间件 => push

export default {
  dev: {
    setupMiddlewares: [
      (middlewares, server) => {
        middlewares.unshift((req, res, next) => {
          next();
        });

        middlewares.push((req, res, next) => {
          next();
        });
      },
    ],
  },
};

一些特殊场景需求可能需要使用服务器 API:

  • sockWrite。允许向 HMR 客户端传递一些消息,HMR 客户端将根据接收到的消息类型进行不同的处理。如果你发送一个 "content-changed " 的消息,页面将会重新加载。
export default {
  dev: {
    setupMiddlewares: [
      (middlewares, server) => {
        // 添加自定义 watcher 并在文件更新时触发页面刷新
        watcher.on('change', (changed) => {
          server.sockWrite('content-changed');
        });
      },
    ],
  },
};
  • environments。允许对指定的 environment 产物进行操作。
export default {
  dev: {
    setupMiddlewares: [
      (middlewares, server) => {
        middlewares.unshift(async (req, _res, next) => {
          const webStats = await server.environments.web.getStats();

          console.log(webStats.toJson({ all: false }));

          next();
        });
      },
    ],
  },
};