For AI agents: the complete documentation index is available at /zh/llms.txt, the full documentation bundle is available at /zh/llms-full.txt, and this page is available as Markdown at /zh/config/output/target.md.
close
  • 简体中文
  • output.target

    • 类型:
    type RsbuildTarget = 'web' | 'node' | 'web-worker';
    • 默认值: 'web'

    用于设置 Rsbuild 的构建产物类型。

    Rsbuild 支持多种构建产物类型,分别适用于不同的目标运行环境。在设置产物类型后,Rsbuild 的默认配置会有所变化。

    默认产物

    默认情况下,target 会被设置为 'web',并构建出运行在浏览器里的产物。

    Rsbuild 会读取项目中的 Browserslist 配置,以确定需要兼容的浏览器范围。

    可选值

    除了 'web' 外,target 还可以设置为以下值:

    • 'node':构建出运行在 Node.js 环境的产物,通常用于 SSR 等场景。
    • 'web-worker':构建出运行在 Web Workers 里的产物。

    比如构建出适用于 Node.js 环境的产物:

    rsbuild.config.ts
    export default {
      output: {
        target: 'node',
      },
    };

    并行构建

    你可以使用 environments 来并行构建多种 targets。

    比如同时构建 web 产物和 node 产物:

    rsbuild.config.ts
    export default {
      environments: {
        web: {
          output: {
            target: 'web',
            distPath: {
              root: 'dist/client',
            },
          },
        },
        node: {
          output: {
            target: 'node',
            distPath: {
              root: 'dist/server',
            },
          },
        },
      },
    };

    Node 产物

    指运行在 Node.js 环境的产物,通常用于 SSR 等场景。

    当 target 设置为 'node' 时,Rsbuild 会进行以下处理:

    • 将 Rspack 的 target 设置为 'node'。
    • 不会生成 HTML 文件,与 HTML 相关的逻辑也不会执行,因为 Node.js 环境不需要 HTML。
    • 不会开启默认的拆包策略,但 dynamic import 依然可以生效。
    • 不会开启热更新相关的能力。
    • 将 Browserslist 的默认值设置为 ['node >= 20']。
    • 将 output.emitCss 的默认值设置为 false。这意味着 CSS 代码不会被抽取为单独的文件,但产物中会包含 CSS Modules 的 id 信息。

    Node addons

    当 target 为 'node' 时,Rsbuild 允许你在 JavaScript 文件中引入 Node.js Addons。

    例如:

    src/index.js
    import addon from './addon.node';
    
    addon.doSomething();

    被引用的 addons 文件会被输出到 dist 目录下:

    dist/index.js
    dist/addon.node

    Web Workers 产物

    指运行在 Web Worker 环境的产物。

    当 target 设置为 'web-worker' 时,Rsbuild 会进行以下处理:

    • 将 Rspack 的 target 设置为 'webworker'。
    • 不会生成 HTML 文件,与 HTML 相关的逻辑也不会执行,因为 Web Worker 环境不需要 HTML。
    • 默认关闭拆包。通过 import() 引用的模块也会打包到产物中,不会单独生成异步 chunk。
    • 将 output.emitCss 的默认值设置为 false。这意味着 CSS 代码不会被抽取为单独的文件,但产物中会包含 CSS Modules 的 id 信息。
    • 不会开启热更新相关的能力。

    更多信息可参考 Web Workers。

    其他 target

    对于其他运行环境,可以选择最接近的内置 target,再通过额外配置或插件适配。

    Electron

    Rspack 支持的 target 类型更为丰富,比如 electron-main 和 electron-renderer 等。

    目前 Rsbuild 暂未支持这些 target,你可以通过 tools.rspack 来配置这些 target。

    例如设置 target 为 'electron-main',这会覆盖 Rsbuild 默认设置的 'web'。

    rsbuild.config.ts
    export default {
      tools: {
        rspack: {
          target: 'electron-main',
        },
      },
    };

    Cloudflare Workers

    Cloudflare Workers 使用默认导出提供事件处理函数,并通过具名导出提供 Durable Objects 等类。要构建这种 Worker,需要启用 output.module 来生成 ES 模块格式的产物,并配置 Rspack 的 output.library.type 来保留入口导出。

    以下配置使用默认的拆包设置,构建 ES 模块 Worker:

    rsbuild.config.ts
    export default {
      output: {
        target: 'web-worker',
        module: true,
      },
      tools: {
        rspack: {
          output: {
            library: { type: 'module' },
          },
        },
      },
    };

    这段配置用于打包产物。本地开发和部署需要配合 Wrangler 或平台插件,详见 部署到 Cloudflare Workers。

    内置模块

    cloudflare:workers、cloudflare:sockets 等内置模块由 Cloudflare Workers 运行时提供。导入这些模块时,需要通过 output.externals 将它们排除在打包之外,保留为运行时加载的 ES 模块导入:

    rsbuild.config.ts
    export default {
      output: {
        externals: [/^cloudflare:/],
      },
    };

    如果代码或依赖还使用了 Node.js 内置模块,可以添加 /^node:/,将 node:buffer 等导入排除在打包之外:

    rsbuild.config.ts
    export default {
      output: {
        externals: [/^cloudflare:/, /^node:/],
      },
    };

    请确保所用的 Node.js API 已在 Worker 中启用并受支持。配置 externals 不会提供 polyfill,详见 Cloudflare 的 Node.js 兼容说明。

    /^node:/ 不会匹配不带 node: 前缀的导入。例如,导入 buffer 时,可以在 externals 数组中添加 { buffer: 'node:buffer' },将其映射到 node:buffer。

    条件导出

    部分依赖(如 postgres)通过 workerd 导出条件提供 Cloudflare Workers 专用入口。在 resolve.conditionNames 中添加 workerd,即可让 Rsbuild 使用这些入口:

    rsbuild.config.ts
    export default {
      resolve: {
        conditionNames: ['workerd', '...'],
      },
    };

    其中,'...' 表示保留默认的导出条件。