close
logologo
指南
配置
插件
API
社区
版本
更新日志
Rsbuild 0.x 文档
English
简体中文
指南
配置
插件
API
社区
更新日志
Rsbuild 0.x 文档
English
简体中文
logologo
Overview
root
mode
plugins
logLevel
environments

dev

dev.assetPrefix
dev.browserLogs
dev.cliShortcuts
dev.client
dev.hmr
dev.lazyCompilation
dev.liveReload
dev.progressBar
dev.setupMiddlewares
dev.watchFiles
dev.writeToDisk

resolve

resolve.aliasStrategy
resolve.alias
resolve.conditionNames
resolve.dedupe
resolve.extensions
resolve.mainFields

source

source.assetsInclude
source.decorators
source.define
source.entry
source.exclude
source.include
source.preEntry
source.transformImport
source.tsconfigPath

output

output.assetPrefix
output.charset
output.cleanDistPath
output.copy
output.cssModules
output.dataUriLimit
output.distPath
output.emitAssets
output.emitCss
output.externals
output.filenameHash
output.filename
output.injectStyles
output.inlineScripts
output.inlineStyles
output.legalComments
output.manifest
output.minify
output.module
output.overrideBrowserslist
output.polyfill
output.sourceMap
output.target

html

html.appIcon
html.crossorigin
html.favicon
html.inject
html.meta
html.mountId
html.outputStructure
html.scriptLoading
html.tags
html.templateParameters
html.template
html.title

server

server.base
server.compress
server.cors
server.headers
server.historyApiFallback
server.host
server.htmlFallback
server.https
server.middlewareMode
server.open
server.port
server.printUrls
server.proxy
server.publicDir
server.strictPort

security

security.nonce
security.sri

tools

tools.bundlerChain
tools.cssExtract
tools.cssLoader
tools.htmlPlugin
tools.lightningcssLoader
tools.postcss
tools.rspack
tools.styleLoader
tools.swc

performance

performance.buildCache
performance.bundleAnalyze
performance.chunkSplit
performance.dnsPrefetch
performance.preconnect
performance.prefetch
performance.preload
performance.printFileSize
performance.profile
performance.removeConsole
performance.removeMomentLocale

moduleFederation

moduleFederation.options
📝 在 GitHub 上编辑此页
上一页dev.progressBar
下一页dev.watchFiles

#dev.setupMiddlewares

  • 类型:
type SetupMiddlewaresContext = {
  sockWrite: (
    type: string,
    data?: string | boolean | Record<string, any>,
  ) => void;
  environments: EnvironmentAPI;
};

type SetupMiddlewaresFn = (
  middlewares: {
    unshift: (...handlers: RequestHandler[]) => void;
    push: (...handlers: RequestHandler[]) => void;
  },
  context: SetupMiddlewaresContext,
) => void;

type SetupMiddlewares = SetupMiddlewaresFn | SetupMiddlewaresFn[];
  • 默认值: undefined
  • 版本: >= 1.4.0

用于在开发服务器中添加自定义的中间件。

查看 开发服务器 - 中间件 了解更多。

#基本用法

setupMiddlewares 函数接收一个 middlewares 数组,你可以通过 unshift 和 push 方法来添加自定义的中间件:

  • 使用 unshift 在数组开头添加中间件,早于内置中间件执行。
  • 使用 push 在数组末尾添加中间件,晚于内置中间件执行。
rsbuild.config.ts
export default {
  dev: {
    setupMiddlewares: (middlewares) => {
      middlewares.unshift((req, res, next) => {
        console.log('first');
        next();
      });

      middlewares.push((req, res, next) => {
        console.log('last');
        next();
      });
    },
  },
};

中间件可以是一个异步函数:

rsbuild.config.ts
export default {
  dev: {
    setupMiddlewares: (middlewares) => {
      middlewares.unshift(async (req, res, next) => {
        await someAsyncOperation();
        next();
      });
    },
  },
};

setupMiddlewares 也支持传入一个数组,数组中的每一项都是一个用于配置中间件的函数:

rsbuild.config.ts
export default {
  dev: {
    setupMiddlewares: [
      (middlewares) => {
        // ...
      },
      (middlewares) => {
        // ...
      },
    ],
  },
};
TIP

在 Rsbuild 1.4.0 之前的版本中,setupMiddlewares 必须传入一个数组。

#Context 对象

setupMiddlewares 函数的第二个参数是 context 对象,该对象提供了一些服务器上下文和 API。

#environments

提供 Rsbuild 的 environment API,详见 Dev server API - environments。

rsbuild.config.ts
export default {
  dev: {
    setupMiddlewares: (middlewares, { environments }) => {
      middlewares.unshift(async (req, _res, next) => {
        const webStats = await environments.web.getStats();
        console.log(webStats.toJson({ all: false }));
        next();
      });
    },
  },
};

#sockWrite

向 HMR 客户端传递一些消息,详见 Dev server API - sockWrite。

例如,如果你发送一个 'static-changed' 的消息,页面将会重新加载。

rsbuild.config.ts
export default {
  dev: {
    setupMiddlewares: (middlewares, { sockWrite }) => {
      if (someCondition) {
        sockWrite('static-changed');
      }
    },
  },
};