Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add get environment context info guide #2796

Merged
merged 12 commits into from
Jul 4, 2024
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 info
9aoy marked this conversation as resolved.
Show resolved Hide resolved

[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 hook.
9aoy marked this conversation as resolved.
Show resolved Hide resolved

In some plugin hooks related to the current build environment (such as [modifyBundlerChain](/plugins/dev/hooks#modifybundlerchain), [modifyRspackConfig](/plugins/dev/hooks#modifyrspackconfig), etc.), Rsbuild supports obtaining the current environment information through parameters.
9aoy marked this conversation as resolved.
Show resolved Hide resolved

```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();
}
});
},
});
```

In some global plugin hooks (such as [onDevCompileDone](/plugins/dev/hooks#ondevcompiledone), [onBeforeStartDevServer](/plugins/dev/hooks#onbeforestartdevserver), etc.), Rsbuild supports obtaining all environment information through parameters.
9aoy marked this conversation as resolved.
Show resolved Hide resolved

```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 related environment context. */
9aoy marked this conversation as resolved.
Show resolved Hide resolved
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 信息
9aoy marked this conversation as resolved.
Show resolved Hide resolved

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

在一些和当前构建环境相关的 plugin hook 中 (如 [modifyBundlerChain](/plugins/dev/hooks#modifybundlerchain)、[modifyRspackConfig](/plugins/dev/hooks#modifyrspackconfig) 等), Rsbuild 支持通过参数形式获取当前 environment 信息。
9aoy marked this conversation as resolved.
Show resolved Hide resolved

```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 hook 中 (如 [onDevCompileDone](/plugins/dev/hooks#ondevcompiledone)、[onBeforeStartDevServer](/plugins/dev/hooks#onbeforestartdevserver) 等), Rsbuild 支持通过参数形式获取所有 environment 信息。
9aoy marked this conversation as resolved.
Show resolved Hide resolved

```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;
/**
* 本次构建所属的环境名称
* 本次构建关联的环境信息
9aoy marked this conversation as resolved.
Show resolved Hide resolved
*/
environment: string;
environment: EnvironmentContext;
};

function ModifyHTMLTags(
Expand Down
Loading