Skip to content

Commit

Permalink
docs: what is environment (#3080)
Browse files Browse the repository at this point in the history
Co-authored-by: neverland <[email protected]>
  • Loading branch information
9aoy and chenjiahan authored Jul 31, 2024
1 parent ce108ee commit 07e3b0c
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 0 deletions.
15 changes: 15 additions & 0 deletions website/docs/en/guide/advanced/environments.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,21 @@

Rsbuild supports building outputs for multiple environments at the same time. You can use [environments](/config/environments) to build multiple environments in parallel and set a different Rsbuild config for each environment.

## What is environment

The `environment` refers to the runtime environment for build output. Common environments include browsers, Node.js, and Workers. Rsbuild allows you to define any environment names and set build options for each environment individually.

A typical scenario is server-side rendering (SSR). You can define two environments, `web` and `node`, where the build targets ([output.target](/config/output/target)) are `web` and `node`. These are used for client-side rendering (CSR) and server-side rendering (SSR) scenarios.

You can also define different environments for the same build target, for example:

- Define `rsc` and `ssr` environments, both targeting `node`, used separately for React Server Components and SSR.
- Define `desktop` and `mobile` environments, both targeting `web`, used separately for desktop and mobile browsers.

Without the `environments` configuration, you would need to define multiple configurations for these scenarios and run multiple independent Rsbuild builds. Now, with the `environments` configuration, you can complete the build for multiple outputs in a single Rsbuild run (Rsbuild achieves this using Rspack's `MultiCompiler`).

In Rsbuild, each `environment` is associated with an Rsbuild configuration, an Rspack configuration, and a set of build outputs. Rsbuild plugin developers can customize the build process for a specified environment based on the `environment` name, such as modifying Rsbuild or Rspack configurations, registering or removing plugins, adjusting Rspack rules, and viewing assets information.

## Environment configs

Rsbuild supports defining different Rsbuild configs for each environment through [environments](/config/environments).
Expand Down
15 changes: 15 additions & 0 deletions website/docs/zh/guide/advanced/environments.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,21 @@

Rsbuild 支持同时为多个环境构建产物。你可以使用 [environments](/config/environments) 来并行构建多个环境,并为每个环境设置不同的 Rsbuild 配置。

## 什么是 environment

environment 指的是构建产物的运行环境,常见的运行环境有浏览器、Node.js 和 Workers。Rsbuild 允许你定义任意的 environment 名称,并为这些 environment 分别设置构建选项。

一个典型的场景是服务器端渲染(SSR),你可以定义 `web``node` 两个 environments,它们的构建目标([output.target](/config/output/target))分别是 `web``node`,并用于客户端渲染(CSR)和服务器端渲染(SSR)场景。

此外,你还可以为同一个构建目标定义不同的 environment,例如:

- 定义 `rsc``ssr` 两个环境,它们的构建目标都是 `node`,分别用于 React Server Components 和 SSR。
- 定义 `desktop``mobile` 两个环境,它们的构建目标都是 ` web`,分别用于桌面端浏览器和移动端浏览器。

如果没有 `environments` 配置,你需要为这些场景定义多份配置,并执行多次独立的 Rsbuild 构建。现在通过 `environments` 配置,你可以在一次 Rsbuild 构建中完成多种产物的构建(Rsbuild 基于 Rspack 的 `MultiCompiler` 来实现这一点)。

Rsbuild 中的每个 `environment` 关联一份 Rsbuild 配置、一份 Rspack 配置和一份构建产物。Rsbuild 插件的开发者可以基于 `environment` 名称,对指定环境的构建流程进行定制,如修改 Rsbuild 或 Rspack 配置、注册或移除插件、调整 Rspack 规则和查看静态资源信息等。

## 多环境配置

Rsbuild 支持通过 [environments](/config/environments) 为每个环境定义不同的 Rsbuild 配置。
Expand Down

0 comments on commit 07e3b0c

Please sign in to comment.