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: correct ES modules and some other spellings #8191

Merged
merged 2 commits into from
Oct 22, 2024
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
2 changes: 1 addition & 1 deletion website/docs/en/blog/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ Rspack 0.5 is out, removing support for some builtin features.

> October 26, 2023

In this article, we will take a closer look at aspects such as the specification, toolchain support, webpack runtime, and profiling of top level await.
In this article, we will take a closer look at aspects such as the specification, toolchain support, webpack runtime, and profiling of Top-level await.

## [Design Trade-offs in Bundler](https://github.com/orgs/web-infra-dev/discussions/1)

Expand Down
8 changes: 4 additions & 4 deletions website/docs/en/config/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,16 @@ module.exports = {
};
```

### Supported configuration file formats
### Configuration file formats

Rspack supports four types of configuration files, `.js`, `.ts`, `.cjs` and `.mjs` formats.

- `rspack.config.js`: defaults to `CommonJS` format, or `ES Module` format if the type of the package.json is module.
- `rspack.config.js`: defaults to `CommonJS` format, or `ES modules` format if the type of the package.json is module.
- `rspack.config.ts`: `TypeScript` format, which is compiled internally to `.js` format using `ts-node`.
- `rspack.config.cjs`: Forced to `CommonJS` format.
- `rspack.config.mjs`: Forced to `ES module` format.
- `rspack.config.mjs`: Forced to `ES modules` format.

See [ES Module](https://nodejs.org/api/esm.html#modules-ecmascript-modules) and [CommonJS](https://nodejs.org/api/modules.html) for the difference between `CommonJS` and `ES Module`
> See [ES modules](https://nodejs.org/api/esm.html#modules-ecmascript-modules) and [CommonJS](https://nodejs.org/api/modules.html) for the difference between `CommonJS` and `ES modules`.

### Type Checking

Expand Down
9 changes: 5 additions & 4 deletions website/docs/en/config/module.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -619,20 +619,21 @@ Customize the format of the local class names generated for CSS modules, besides

This configuration is available for improved ESM-CJS interoperability purposes.

Whether to add `__esModule` to the exports of CSS; if added, it will be treated as an ES Module during esm-cjs interop, otherwise, it will be treated as a CommonJS Module.
Whether to add `__esModule` to the exports of CSS; if added, it will be treated as an ES modules during esm-cjs interop, otherwise, it will be treated as a CommonJS Module.

For example, a common use case, when using the cjs output from a third-party component library, it is sometimes necessary to add this configuration to ensure correct esm-cjs interop, to obtain the correct exports (this can be used in conjunction with [Rule.test](#ruletest) and other matching conditions to add it only for that particular component library).
For example, a common use case, when using the CommonJS output from a third-party component library, it is sometimes necessary to add this configuration to ensure correct esm-cjs interop, to obtain the correct exports (this can be used in conjunction with [Rule.test](#ruletest) and other matching conditions to add it only for that particular component library).

The original source code of the third-party component library:

```js
import style from './style.css';

export function Button() {
return <button className={style.btn}></button>;
}
```

The cjs format output published by the third-party component library:
The CommonJS format output published by the third-party component library:

```js
'use strict';
Expand Down Expand Up @@ -993,7 +994,7 @@ When specified as 'post', the loader will execute after all other loaders.
Used to mark the type of the matching module, which affects how the module is handled by Rspack's built-in processing. For example, when a module is marked as `'typescript'` then the module is processed using the TS parser/generator.

- `'javascript/auto'`: JavaScript modules, supported module systems: CommonJS, ESM, no plans for AMD module support at this time.
- `'javascript/esm'`:JavaScript modules, treated as ES Module.
- `'javascript/esm'`:JavaScript modules, treated as ES modules.
- `'javascript/dynamic'`:JavaScript modules, treated as Script.
- `'css'`: CSS module
- `'css/module'`: CSS Modules module
Expand Down
4 changes: 2 additions & 2 deletions website/docs/en/config/output.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -326,7 +326,7 @@ module.exports = {
- **Type:** `('fetch-streaming' | 'fetch' | 'async-node' | string | false)[]`
- **Default:** Determined by [`output.wasmLoading`](#outputwasmloading) and [`output.workerWasmLoading`](#workerWasmLoading)

List of wasm loading types enabled for use by entry points.
List of Wasm loading types enabled for use by entry points.

```js title="rspack.config.js"
module.exports = {
Expand Down Expand Up @@ -1059,7 +1059,7 @@ module.exports = {
};
```

Output ES Module.
Output ES modules.

However this feature is still experimental and not fully supported yet, so make sure to enable [`experiments.outputModule`](/config/experiments#experimentsoutputmodule) beforehand. In addition, you can track the development progress in [this thread](https://github.com/webpack/webpack/issues/2933#issuecomment-774253975).

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ interface LoaderOptions {
type: '`boolean`',
default: 'true',
description:
'whether to use ES module syntax for CSS Modules class name exports in the generated JavaScript module',
'whether to use ES modules syntax for CSS Modules class name exports in the generated JavaScript module',
},
]}
/>
Expand Down
2 changes: 1 addition & 1 deletion website/docs/zh/blog/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ Rspack 0.4 版本发布,移除对一些内置功能的支持。

> 2023 年 10 月 26 日

在本文中,我们将对 top level await 的 specification、toolchain support、webpack runtime、profiling 等方面进行深入的分析。
在本文中,我们将对 Top-level await 的 specification、toolchain support、webpack runtime、profiling 等方面进行深入的分析。

## [Bundler 的设计取舍](https://github.com/orgs/web-infra-dev/discussions/4)

Expand Down
8 changes: 4 additions & 4 deletions website/docs/zh/config/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,16 @@ module.exports = {
};
```

### 支持的配置文件格式
### 配置文件格式

Rspack 支持四种配置文件,支持`.js`,`.ts`,`.cjs` 和 `.mjs` 格式:

- `rspack.config.js`: 默认为 `CommonJS` 格式,如果所在 package.json 的 type 为 module 则变成 `ES Module` 格式。
- `rspack.config.js`: 默认为 `CommonJS` 格式,如果所在 package.json 的 type 为 module 则变成 `ES modules` 格式。
- `rspack.config.ts`: `TypeScript`格式,内部会使用 `ts-node` 将其编译为 `.js` 格式。
- `rspack.config.cjs`: 强制为 `CommonJS` 格式。
- `rspack.config.mjs`: 强制为 `ES module` 格式。
- `rspack.config.mjs`: 强制为 `ES modules` 格式。

`CommonJS` 和 `ES Module`的区别请参考 [ES Module](https://nodejs.org/api/esm.html#modules-ecmascript-modules) 和 [CommonJS](https://nodejs.org/api/modules.html)
> `CommonJS` 和 `ES modules`的区别请参考 [ES modules](https://nodejs.org/api/esm.html#modules-ecmascript-modules) 和 [CommonJS](https://nodejs.org/api/modules.html)

### 配置类型检查

Expand Down
9 changes: 5 additions & 4 deletions website/docs/zh/config/module.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -617,20 +617,21 @@ module.exports = {
- **类型:** `boolean`
- **默认值:** `true`

是否为 CSS 的导出添加 `__esModule`,如果添加则会在 esm-cjs interop 时当作 ES Module,否则当作 CommonJS Module
是否为 CSS 的导出添加 `__esModule`,如果添加则会在 esm-cjs interop 时当作 ES modules,否则当作 CommonJS modules

比如在使用第三方组件库的 cjs 产物时,有时需要添加该配置确保 esm-cjs interop 正确,以拿到正确的导出(可配合 [Rule.test](#ruletest) 等匹配条件只为该组件库添加)。
比如在使用第三方组件库的 CommonJS 产物时,有时需要添加该配置确保 esm-cjs interop 正确,以拿到正确的导出(可配合 [Rule.test](#ruletest) 等匹配条件只为该组件库添加)。

组件库源码:

```js
import style from './style.css';

export function Button() {
return <button className={style.btn}></button>;
}
```

组件库发布的 cjs 产物:
组件库发布的 CommonJS 产物:

```js
'use strict';
Expand Down Expand Up @@ -992,7 +993,7 @@ module.exports = {
用于标记匹配的模块的类型,这会影响 Rspack 内置对于该模块的处理方式。例如:当模块被标记为 `'typescript'` 则会使用 TS parser/generator 对模块进行处理。

- `'javascript/auto'`:JavaScript 模块,支持的模块系统:CommonJS、ESM,暂没有对 AMD 模块支持的计划。
- `'javascript/esm'`:JavaScript 模块,当作严格 ES Module 处理。
- `'javascript/esm'`:JavaScript 模块,当作严格 ES modules 处理。
- `'javascript/dynamic'`:JavaScript 模块,当作 Script 处理。
- `'css'`:CSS 模块。
- `'css/module'`:CSS Modules 模块。
Expand Down
2 changes: 1 addition & 1 deletion website/docs/zh/config/output.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -1636,7 +1636,7 @@ module.exports = {
- **类型:** `boolean`
- **默认值:** `false`

按照 ES Module 规范处理 module 加载时的错误,会有性能损失。
按照 ES modules 规范处理 module 加载时的错误,会有性能损失。

```js title="rspack.config.js"
module.exports = {
Expand Down
2 changes: 1 addition & 1 deletion website/docs/zh/guide/features/web-workers.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ new Worker(new URL('./worker.js', import.meta.url), {
- [examples/monaco-editor-ts-react](https://github.com/rspack-contrib/rspack-examples/tree/main/rspack/monaco-editor-ts-react)

:::info
选择该语法是因为该语法在不使用打包工具时也能运行代码,它可以直接运行在支持 ESModule 的浏览器上运行,是符合标准的 ECMAScript 语法。
选择该语法是因为该语法在不使用打包工具时也能运行代码,它可以直接运行在支持 ES modules 的浏览器上运行,是符合标准的 ECMAScript 语法。
:::

:::warning
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ new rspack.HotModuleReplacementPlugin({

### strictModuleErrorHandling

按照 ES Module 规范处理 module 加载时的错误,会有性能损失。
按照 ES modules 规范处理 module 加载时的错误,会有性能损失。

- **类型:** `boolean`
- **默认值:** `false`
Loading