Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions packages/core/src/plugins/esm.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,6 @@ export const pluginEsm = (): RsbuildPlugin => ({
}

if (target === 'web') {
api.logger.warn(
'[rsbuild:config] `output.module` for web target is experimental and may not work as expected.',
);

// Temporary solution to fix the issue of runtime chunk not loaded as expected.
chain.optimization.runtimeChunk(true);
}
Expand Down
33 changes: 26 additions & 7 deletions website/docs/en/config/output/module.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,32 @@ Whether to output JavaScript files in ES modules format.

:::tip

- This feature is currently experimental and only available when [output.target](/config/output/target) is `'node'`.
- This feature is currently experimental and only available when [output.target](/config/output/target) is `'web'` or `'node'`.
- If you need to build JavaScript libraries in ESM format, we recommend using [Rslib](https://rslib.rs), which is an out-of-the-box library development tool built on top of Rsbuild.

:::

## Example
## Web applications

When building Node.js bundles, Rsbuild outputs CommonJS format by default. You can set `output.module` to `true` to output ES modules format:
When building a web application, Rsbuild generates the output in the IIFE format by default.

If you want to output ES Modules instead, set `output.module` to `true`:

```ts title="rsbuild.config.ts"
export default {
output: {
module: true,
},
};
```

:::tip
When `output.module` is enabled, Rsbuild automatically adds `type="module"` to the generated `<script>` tags, meaning [html.scriptLoading](/config/html/script-loading) is set to `module`.
:::

## Node.js applications

When building Node.js applications, Rsbuild outputs CommonJS format by default. You can set `output.module` to `true` to output ES modules format:

```ts title="rsbuild.config.ts"
export default {
Expand All @@ -25,7 +43,7 @@ export default {
};
```

## Running ESM bundles
### Running ESM bundles

To properly run ESM bundles in Node.js, you can choose either of the following approaches:

Expand All @@ -51,6 +69,7 @@ export default {

## Version history

| Version | Changes |
| ------- | ----------------- |
| v1.5.0 | Added this option |
| Version | Changes |
| ------- | --------------------------- |
| v1.5.0 | Added this option |
| v1.6.0 | Support for `target: 'web'` |
33 changes: 26 additions & 7 deletions website/docs/zh/config/output/module.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,32 @@

:::tip

- 此功能目前为实验性功能,仅在 [output.target](/config/output/target) 为 `'node'` 时可用。
- 此功能目前为实验性功能,仅在 [output.target](/config/output/target) 为 `'web'` 或 `'node'` 时可用。
- 如果你需要构建 ESM 格式的 JavaScript 库,推荐使用 [Rslib](https://rslib.rs),它是一个开箱即用的库开发工具,基于 Rsbuild 实现。

:::

## 示例
## Web 应用

在构建 Node.js bundles 时,Rsbuild 默认输出 CommonJS 格式的产物,你可以将 `output.module` 设置为 `true` 来输出 ES modules 格式:
在构建 Web 应用时,Rsbuild 默认会生成 IIFE 格式的产物。

如果你希望输出 ES Modules 格式,可以将 `output.module` 设置为 `true`:

```ts title="rsbuild.config.ts"
export default {
output: {
module: true,
},
};
```

:::tip
开启 `output.module` 后,Rsbuild 生成的 `<script>` 标签会自动添加 `type="module"` 属性,即 [html.scriptLoading](/config/html/script-loading) 为 `'module'`。
:::

## Node.js 应用

在构建 Node.js 应用时,Rsbuild 默认输出 CommonJS 格式的产物,你可以将 `output.module` 设置为 `true` 来输出 ES modules 格式:

```ts title="rsbuild.config.ts"
export default {
Expand All @@ -25,7 +43,7 @@ export default {
};
```

## 运行 ESM 产物
### 运行 ESM 产物

为了在 Node.js 中正确运行 ESM 产物,你可以选择以下任一方式:

Expand All @@ -51,6 +69,7 @@ export default {

## 版本历史

| 版本 | 变更内容 |
| ------ | ---------- |
| v1.5.0 | 新增该选项 |
| 版本 | 变更内容 |
| ------ | ----------------------------- |
| v1.5.0 | 新增该选项 |
| v1.6.0 | 支持在 `target: 'web'` 时使用 |
Loading