Skip to content

Commit

Permalink
docs: add get environment context info guide (#2796)
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 4, 2024
1 parent 79e7c74 commit f40f0d1
Show file tree
Hide file tree
Showing 6 changed files with 80 additions and 7 deletions.
35 changes: 35 additions & 0 deletions website/docs/en/guide/advanced/environments.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -132,3 +132,38 @@ const myPlugin = () => ({
},
});
```

## Get environment context

[Environment context](/api/javascript-api/types#environmentcontext) is a read-only object that provides some context infos about the current environment. Rsbuild supports obtaining environment context information in plugin hooks.

For some plugin hooks related to the build environment (such as [modifyBundlerChain](/plugins/dev/hooks#modifybundlerchain) and [modifyRspackConfig](/plugins/dev/hooks#modifyrspackconfig)), Rsbuild supports obtaining the current environment context through the `environment` parameter.

```ts
const myPlugin = () => ({
setup: (api) => {
api.modifyBundlerChain((chain, { environment }) => {
const { name, config, entry } = environment;

if (config.output.minify !== false) {
chain.optimization
.minimizer(CHAIN_ID.MINIMIZER.JS)
.use(SwcJsMinimizerRspackPlugin)
.end();
}
});
},
});
```

For some global plugin hooks (such as [onDevCompileDone](/plugins/dev/hooks#ondevcompiledone), [onBeforeStartDevServer](/plugins/dev/hooks#onbeforestartdevserver), etc.), Rsbuild supports obtaining the context of all environments through the `environments` parameter.

```ts
const myPlugin = () => ({
setup: (api) => {
api.onDevCompileDone(({ environments }) => {
const entries = Object.values(environments).map((e) => e.entry);
});
},
});
```
2 changes: 1 addition & 1 deletion website/docs/en/plugins/dev/core.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ For example, if you register both the Foo and Bar plugins mentioned above, the F

`api.context` is a read-only object that provides some context information.

The content of `api.context` is exactly the same as `rsbuild.context`, please refer to [rsbuild.context](/api/javascript-api/instance#rsbuild-context).
The content of `api.context` is exactly the same as `rsbuild.context`, please refer to [rsbuild.context](/api/javascript-api/instance#rsbuildcontext).

- **Example:**

Expand Down
7 changes: 4 additions & 3 deletions website/docs/en/plugins/dev/hooks.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,6 @@ const myPlugin = () => ({

### modifyEnvironmentConfig


Modify the Rsbuild configuration of a specific environment.

In the callback function, the config object in the parameters has already been merged with the common Rsbuild configuration. You can directly modify this config object, or you can return a new object to replace it.
Expand Down Expand Up @@ -267,6 +266,7 @@ To modify the final Rspack config object, you can directly modify the config obj

```ts
type ModifyRspackConfigUtils = {
environment: EnvironmentContext;
env: NodeEnv;
isDev: boolean;
isProd: boolean;
Expand Down Expand Up @@ -312,6 +312,7 @@ This hook only supports modifying the configuration of the non-differentiated pa

```ts
type ModifyBundlerChainUtils = {
environment: EnvironmentContext;
env: NodeEnv;
isDev: boolean;
isProd: boolean;
Expand Down Expand Up @@ -393,8 +394,8 @@ type Context = {
* @example 'index.html'
*/
filename: string;
/** The name of the environment to which this build belongs. */
environment: string;
/** The environment context for current build. */
environment: EnvironmentContext;
};

function ModifyHTMLTags(
Expand Down
35 changes: 35 additions & 0 deletions website/docs/zh/guide/advanced/environments.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -132,3 +132,38 @@ const myPlugin = () => ({
},
});
```

## 获取 environment 上下文

[Environment context](/api/javascript-api/types#environmentcontext) 是一个只读对象,提供一些和当前环境有关的上下文信息。Rsbuild 支持在 plugin hook 中获取 environment context 信息。

对于一些与构建环境相关的 plugin hooks (如 [modifyBundlerChain](/plugins/dev/hooks#modifybundlerchain)[modifyRspackConfig](/plugins/dev/hooks#modifyrspackconfig) 等), Rsbuild 支持通过 `environment` 参数获取当前 environment 上下文。

```ts
const myPlugin = () => ({
setup: (api) => {
api.modifyBundlerChain((chain, { environment }) => {
const { name, config, entry } = environment;

if (config.output.minify !== false) {
chain.optimization
.minimizer(CHAIN_ID.MINIMIZER.JS)
.use(SwcJsMinimizerRspackPlugin)
.end();
}
});
},
});
```

对于一些全局的 plugin hooks (如 [onDevCompileDone](/plugins/dev/hooks#ondevcompiledone)[onBeforeStartDevServer](/plugins/dev/hooks#onbeforestartdevserver) 等), Rsbuild 支持通过 `environments` 参数获取所有环境的上下文。

```ts
const myPlugin = () => ({
setup: (api) => {
api.onDevCompileDone(({ environments }) => {
const entries = Object.values(environments).map((e) => e.entry);
});
},
});
```
2 changes: 1 addition & 1 deletion website/docs/zh/plugins/dev/core.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ const pluginBar = {

`api.context` 是一个只读对象,提供一些上下文信息。

`api.context` 的内容与 `rsbuild.context` 完全一致,请参考 [rsbuild.context](/api/javascript-api/instance#rsbuild-context)
`api.context` 的内容与 `rsbuild.context` 完全一致,请参考 [rsbuild.context](/api/javascript-api/instance#rsbuildcontext)

- **示例:**

Expand Down
6 changes: 4 additions & 2 deletions website/docs/zh/plugins/dev/hooks.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -265,6 +265,7 @@ const myPlugin = () => ({

```ts
type ModifyRspackConfigUtils = {
environment: EnvironmentContext;
env: NodeEnv;
isDev: boolean;
isProd: boolean;
Expand Down Expand Up @@ -308,6 +309,7 @@ import RspackChain from '@zh/shared/rspackChain.mdx';

```ts
type ModifyBundlerChainUtils = {
environment: EnvironmentContext;
env: NodeEnv;
isDev: boolean;
isProd: boolean;
Expand Down Expand Up @@ -390,9 +392,9 @@ type Context = {
*/
filename: string;
/**
* 本次构建所属的环境名称
* 本次构建的 environment 上下文
*/
environment: string;
environment: EnvironmentContext;
};

function ModifyHTMLTags(
Expand Down

0 comments on commit f40f0d1

Please sign in to comment.