Skip to content

Commit

Permalink
chore: update
Browse files Browse the repository at this point in the history
  • Loading branch information
Timeless0911 committed Feb 17, 2025
1 parent db463a7 commit 0b89e80
Show file tree
Hide file tree
Showing 7 changed files with 65 additions and 66 deletions.
4 changes: 3 additions & 1 deletion website/docs/en/config/rsbuild/output.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Options for build outputs.

Use this option to set the URL prefix for static assets, such as setting it to a CDN URL.

In cases where the [format](/config/lib/format) is set to `cjs` or `esm`, Rslib sets `output.assetPrefix` to `"auto"`.
When [format](/config/lib/format) is set to `cjs` or `esm`, Rslib defaults to setting `output.assetPrefix` to `"auto"`.

## output.charset <RsbuildDocBadge path="/config/output/charset" text="output.charset" />

Expand All @@ -30,6 +30,8 @@ For custom CSS Modules configuration.

Set the size threshold to inline static assets such as images and fonts.

When [format](/config/lib/format) is set to `cjs` or `esm`, Rslib defaults to setting `output.dataUriLimit` to `0`, without inlining any static assets, so that build tools on the application side can handle and optimize them.

## output.distPath <RsbuildDocBadge path="/config/output/dist-path" text="output.distPath" />

Set the directory of the dist files. Rsbuild will output files to the corresponding subdirectory according to the file type.
Expand Down
29 changes: 15 additions & 14 deletions website/docs/en/guide/advanced/json-files.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,15 @@ Rslib supports import JSON files in code.

## JSON file

You can directly reference JSON files in JavaScript files.
You can directly import JSON files in JavaScript files.

:::warning

In bundle mode, JSON files support both default and named import.

In bundleless mode, JSON files only support named import.

:::

### Default import

Expand All @@ -22,16 +30,9 @@ console.log(example.name); // 'foo';
console.log(example.items); // [1, 2];
```

:::warning

In Bundle mode, JSON files support both default and named imports.
In Bundleless mode, JSON files only support named imports.

:::

### Named import

Rslib also supports referencing JSON files through named imports:
Rslib also supports importing JSON files through named import.

Here is an example, assuming the source code is as follows:

Expand Down Expand Up @@ -59,25 +60,25 @@ console.log(name); // 'foo';
</Tab>
</Tabs>

Based on the configuration in the [output structure](/guide/basic/output-structure) specified in the configuration file, the following outputs will be packaged:
Based on the configuration in the [output structure](/guide/basic/output-structure) specified in the configuration file, the following outputs will be emitted:

<Tabs>
<Tab label="Bundle">
<Tab label="bundle">
<Tabs>
<Tab label="dist/index.js">

```tsx
var example_namespaceObject = {
name: 'foo',
u: 'foo',
};
console.log(example_namespaceObject.name);
console.log(example_namespaceObject.u);
```

</Tab>
</Tabs>
</Tab>

<Tab label="Bundleless">
<Tab label="bundleless">

<Tabs>
<Tab label="dist/index.js">
Expand Down
28 changes: 13 additions & 15 deletions website/docs/en/guide/advanced/static-assets.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ To import assets in other formats, refer to [Extend Asset Types](#extend-asset-t

## Import assets in JS file

In JS files, you can directly refer to static assets with relative paths through `import`:
In JS files, you can directly import static assets with relative paths through `import`:

```tsx
// Import the logo.png image in the 'src/assets' directory
Expand All @@ -36,7 +36,7 @@ console.log(logo); // "/static/logo.[hash].png"
export default = () => <img src={logo} />;
```

When the [format](/config/lib/format) is set to `cjs` or `esm`, Rslib treats the output as an mid-level artifact that will be consumed by other build tools again. During the code transformation, Rslib transforms the source file into a JS file and a static asset file that is output according to [output.distPath](/config/rsbuild/output#outputdistpath), which is used to preserve the `import` statements for static assets.
When the [format](/config/lib/format) is set to `cjs` or `esm`, Rslib treats the output as an mid-level artifact that will be consumed by other build tools again and transforms the source file into a JS file and a static asset file that is emitted according to [output.distPath](/config/rsbuild/output#outputdistpath) by default, which is used to preserve the `import` statements for static assets.

The following is an example of usage, assuming the source code is as follows:

Expand All @@ -57,10 +57,10 @@ console.log(logo);
</Tab>
</Tabs>

Based on the configuration in the [output structure](/guide/basic/output-structure) in the configuration file, the following outputs will be packaged:
Based on the configuration in the [output structure](/guide/basic/output-structure) in the configuration file, the following outputs will be emitted:

<Tabs>
<Tab label="Bundle">
<Tab label="bundle">
<Tabs>
<Tab label="dist/index.mjs">

Expand All @@ -77,7 +77,7 @@ console.log(logo_rslib_entry_namespaceObject);
</Tabs>
</Tab>

<Tab label="Bundleless">
<Tab label="bundleless">

<Tabs>
<Tab label="dist/index.mjs">
Expand Down Expand Up @@ -123,7 +123,7 @@ Import with **alias** are also supported:
}
```

When the [format](/config/lib/format) is `cjs` or `esm`, Rslib treats the output as an intermediate product that will be consumed again by other packaging tools. Rslib preserves relative reference paths in CSS outputs by setting [output.assetPrefix](/config/rsbuild/output#outputassetprefix) to `"auto"`.
When the [format](/config/lib/format) is set to `cjs` or `esm`, Rslib treats the output as an mid-level artifact that will be consumed by other build tools again and preserves relative reference paths in CSS outputs by default via setting [output.assetPrefix](/config/rsbuild/output#outputassetprefix) to `"auto"`.

The following is an example of usage, assuming the source code is as follows:

Expand All @@ -147,7 +147,7 @@ The following is an example of usage, assuming the source code is as follows:
</Tab>
</Tabs>

The following output will be packaged:
The following output will be emitted:

<Tabs>

Expand Down Expand Up @@ -185,7 +185,7 @@ If you need to import a static asset with an absolute path in a CSS file:
}
```

By default, the built-in `css-loader` in Rslib will resolve absolute paths in `url()` and look for the specified modules. If you want to skip resolving absolute paths, you can configure [`tools.cssLoader`](/config/rsbuild/tools#toolscssloader) to filter out the specified paths. The filtered paths are left as they are in the code.
By default, the built-in `css-loader` in Rslib will resolve absolute paths in `url()` and look for the specified modules. If you want to skip resolving absolute paths, you can configure [`tools.cssLoader`](/config/rsbuild/tools#toolscssloader) to filter out the specified paths. The filtered paths are preserved as they are in the code.

```ts
export default {
Expand All @@ -206,16 +206,14 @@ export default {

## Inline static assets

When developing libraries that will be consumed again by other build tools as intermediate products, static assets are typically not inlined, leaving the handling and optimization to the build tools on the application side.

The automatic inlining size threshold can be modified via the [output.dataUriLimit](/config/rsbuild/output#outputdataurilimit) configuration option. When the [format](/config/lib/format) is `cjs` or `esm`, Rslib defaults the `output.dataUriLimit` to `0`, not inlining any static assets.
When the [format](/config/lib/format) is set to `cjs` or `esm`, Rslib treats the output as an mid-level artifact that will be consumed by other build tools again and sets [output.dataUriLimit](/config/rsbuild/output#outputdataurilimit) to `0` by default to not inline any static assets.

## Build output directory

Once static assets are referenced, they will automatically be output to the build output directory. You can:
Once static assets are imported, they will automatically be output to the build output directory. You can:

- Modify the filename of the output through [output.filename](/config/rsbuild/output#outputfilename).
- Change the output path of the product through [output.distPath](/config/rsbuild/output#outputdistpath).
- Modify the filename of the outputs through [output.filename](/config/rsbuild/output#outputfilename).
- Change the output path of the outputs through [output.distPath](/config/rsbuild/output#outputdistpath).

## Type declaration

Expand Down Expand Up @@ -282,7 +280,7 @@ export default {
addRules([
{
test: /\.pdf$/,
// 将资源转换为单独的文件,并且保留 import 语句
// Convert assets to separate files and keep import statements
type: 'asset/resource',
generator: {
importMode: 'preserve',
Expand Down
18 changes: 9 additions & 9 deletions website/docs/en/guide/advanced/svgr-files.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

By default, Rslib treats SVG images as static assets.

By adding the [@rsbuild/plugin-svgr](https://rsbuild.dev/plugins/list/plugin-svgr) plugin, Rslib supports invoking [SVGR](https://react-svgr.com/) to convert SVG images into React components for use.
By adding the [@rsbuild/plugin-svgr](https://rsbuild.dev/plugins/list/plugin-svgr) plugin, Rslib supports transforming SVG to React components via [SVGR](https://react-svgr.com/).

## Quick start

Expand Down Expand Up @@ -30,7 +30,7 @@ export default {

### Bundle mode

In Bundle mode, all usages supported by the [Rsbuild SVGR plugin](https://rsbuild.dev/plugins/list/plugin-svgr) are available. The only difference is that when using an SVG file in URL form, Rslib will retain the `import` statement for the static asset in the output according to [Referencing Static Assets](/guide/advanced/static-assets).
In bundle mode, all usages supported by [@rsbuild/plugin-svgr](https://rsbuild.dev/plugins/list/plugin-svgr) are available in Rslib. The only difference is that when using an SVG file in URL form, Rslib will retain the `import` statement for the static asset in the output according to [Import static assets](/guide/advanced/static-assets).

Here is an example of usage:

Expand All @@ -50,14 +50,14 @@ import logoURL from './static/logo.svg';
console.log(logoURL);
```

`@rsbuild/plugin-svgr` also supports default imports and mixed imports:
`@rsbuild/plugin-svgr` also supports default import and mixed import:

- Enable default imports by setting [svgrOptions.exportType](https://rsbuild.dev/plugins/list/plugin-svgr#svgroptionsexporttype) to `'default'`.
- Enable mixed imports through the [mixedImport](https://rsbuild.dev/plugins/list/plugin-svgr#mixedimport) option to use both default and named imports.
- Enable default import by setting [svgrOptions.exportType](https://rsbuild.dev/plugins/list/plugin-svgr#svgroptionsexporttype) to `'default'`.
- Enable mixed import through the [mixedImport](https://rsbuild.dev/plugins/list/plugin-svgr#mixedimport) option to use both default and named import.

### Bundleless mode

In Bundleless mode, since each file undergoes code transformation independently, the import ways of `?react` and `?url` are not supported. However, the following two usage forms are supported:
In bundleless mode, since each file undergoes code transformation independently, the import ways of `?react` and `?url` are not supported. However, the following two usage forms are supported:

#### Named import

Expand All @@ -77,14 +77,14 @@ import { ReactComponent as Logo } from './logo.svg';
export const App = () => <Logo />;
```

All `.svg` files will be converted into React components. At this time, you can:
All `.svg` files will be transformed into React components. At this time, you can:

- Exclude files that do not need to be converted by setting [exclude](https://rsbuild.dev/plugins/list/plugin-svgr#exclude).
- Exclude files that do not need to be transformed by setting [exclude](https://rsbuild.dev/plugins/list/plugin-svgr#exclude).
- Change to default export by setting [svgrOptions.exportType](https://rsbuild.dev/plugins/list/plugin-svgr#svgroptionsexporttype) to `'default'`.

#### Mixed import

If your library has both URL and React component import forms for SVG files, you can also use mixed imports.
If your library has both URL and React component import forms for SVG files, you can also use mixed import.

```ts
pluginSvgr({
Expand Down
28 changes: 14 additions & 14 deletions website/docs/zh/guide/advanced/json-files.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,14 @@ Rslib 支持在代码中引用 JSON 文件。

你可以直接在 JavaScript 文件中引用 JSON 文件。

:::warning

在 bundle 模式下,JSON 文件支持默认引用和具名引用。

在 bundleless 模式下,JSON 文件仅支持具名引用。

:::

### 默认引用

```json title="example.json"
Expand All @@ -22,17 +30,9 @@ console.log(example.name); // 'foo';
console.log(example.items); // [1, 2];
```

:::warning

在 Bundle 模式下,JSON 文件支持默认引用和具名引用。

在 Bundleless 模式下,JSON 文件仅支持具名引用。

:::

### 具名引用

Rslib 同样支持通过 named import 来引用 JSON 文件
Rslib 同样支持通过 named import 来引用 JSON 文件

下面是一个使用示例,假设源码如下:

Expand Down Expand Up @@ -60,24 +60,24 @@ console.log(name); // 'foo';
</Tab>
</Tabs>

会根据配置文件中的 [产物结构](/guide/basic/output-structure) 配置,打包出如下产物
会根据配置文件中的 [产物结构](/guide/basic/output-structure) 配置,输出如下产物

<Tabs>
<Tab label="Bundle">
<Tab label="bundle">
<Tabs>
<Tab label="dist/index.js">
```tsx
var example_namespaceObject = {
"name": "foo"
u: 'foo',
};
console.log(example_namespaceObject.name);
console.log(example_namespaceObject.u);
```

</Tab>
</Tabs>
</Tab>

<Tab label="Bundleless">
<Tab label="bundleless">

<Tabs>
<Tab label="dist/index.js">
Expand Down
18 changes: 8 additions & 10 deletions website/docs/zh/guide/advanced/static-assets.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ console.log(logo); // "/static/logo.[hash].png"
export default = () => <img src={logo} />;
```

[format](/config/lib/format)`cjs``esm` 时,Rslib 将产物视为会被其他打包工具再次消费的中间产物。Rslib 会在代码转换时将源文件转化为一个 JS 文件和一个根据 [output.distPath](/config/rsbuild/output#outputdistpath) 输出的静态资源文件,用于保留对静态资源的 `import` 语句。
[format](/config/lib/format)`cjs``esm` 时,Rslib 将产物视为会被其他打包工具再次消费的中间产物,默认会在代码转换时将源文件转化为一个 JS 文件和一个根据 [output.distPath](/config/rsbuild/output#outputdistpath) 输出的静态资源文件,从而保留引用静态资源的 `import` 语句。

下面是一个使用示例,假设源码如下:

Expand All @@ -57,10 +57,10 @@ console.log(logo);
</Tab>
</Tabs>

会根据配置文件中的 [产物结构](/guide/basic/output-structure) 配置,打包出如下产物
会根据配置文件中的 [产物结构](/guide/basic/output-structure) 配置,输出如下产物

<Tabs>
<Tab label="Bundle">
<Tab label="bundle">
<Tabs>
<Tab label="dist/index.mjs">

Expand All @@ -77,7 +77,7 @@ console.log(logo_rslib_entry_namespaceObject);
</Tabs>
</Tab>

<Tab label="Bundleless">
<Tab label="bundleless">

<Tabs>
<Tab label="dist/index.mjs">
Expand Down Expand Up @@ -123,7 +123,7 @@ export { logo_rslib_entry_namespaceObject as default };
}
```

[format](/config/lib/format)`cjs``esm` 时,Rslib 将产物视为会被其他打包工具再次消费的中间产物。Rslib 会通过设置 [output.assetPrefix](/config/rsbuild/output#outputassetprefix) `"auto"` 来使 CSS 产物中保留相对引用路径。
[format](/config/lib/format)`cjs``esm` 时,Rslib 将产物视为会被其他打包工具再次消费的中间产物,默认会将 [output.assetPrefix](/config/rsbuild/output#outputassetprefix) 设置为 `"auto"` 来使 CSS 产物中保留相对引用路径。

下面是一个使用示例,假设源码如下:

Expand All @@ -147,7 +147,7 @@ export { logo_rslib_entry_namespaceObject as default };
</Tab>
</Tabs>

会打包出如下产物
会输出如下产物

<Tabs>

Expand Down Expand Up @@ -206,9 +206,7 @@ export default {

## 静态资源内联

在开发组件库这种会被其他打包工具再次消费的中间产物时,一般不会内联静态资源,交给应用侧的构建工具处理和优化。

自动内联的体积阈值可以通过 [output.dataUriLimit](/config/rsbuild/output#outputdataurilimit) 配置项修改,在 [format](/config/lib/format)`cjs``esm` 时,Rslib 默认会将 `output.dataUriLimit` 设置为 `0`,不内联任何静态资源。
[format](/config/lib/format)`cjs``esm` 时,Rslib 将产物视为会被其他打包工具再次消费的中间产物,默认会将 [output.dataUriLimit](/config/rsbuild/output#outputdataurilimit) 设置为 `0` 以不内联任何静态资源。

## 构建产物目录

Expand Down Expand Up @@ -294,4 +292,4 @@ export default {
};
```

关于 asset modules 的更多介绍,请参考 [Rspack - Asset modules](https://rspack.dev/guide/features/asset-module)
关于资源模块的更多介绍,请参考 [Rspack - 资源模块](https://rspack.dev/zh/guide/features/asset-module)
6 changes: 3 additions & 3 deletions website/docs/zh/guide/advanced/svgr-files.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default {

### Bundle 模式

Bundle 模式下,支持 [Rsbuild SVGR 插件](https://rsbuild.dev/zh/plugins/list/plugin-svgr) 下的所有用法,唯一的区别是当以 URL 形式使用 SVG 文件时,Rslib 会按照 [引用静态资源](/zh/guide/advanced/static-assets) 在产物中对应保留静态资源的 `import` 语句。
bundle 模式下,Rslib 支持 [@rsbuild/plugin-svgr](https://rsbuild.dev/zh/plugins/list/plugin-svgr) 下的所有用法,唯一的区别是当以 URL 形式使用 SVG 文件时,Rslib 会按照 [引用静态资源](/guide/advanced/static-assets) 在产物中对应保留静态资源的 `import` 语句。

下面是一个使用示例:

Expand All @@ -40,7 +40,7 @@ import Logo from './logo.svg?react';
export const App = () => <Logo />;
```

如果导入的路径不包含 `?react` 后缀,那么 SVG 会被当做普通的静态资源来处理,保留对静态资源的 `import` 语句。
如果导入的路径不包含 `?react` 后缀,那么 SVG 会被当做普通的静态资源来处理,即保留对静态资源的 `import` 语句。

```js
import logoURL from './static/logo.svg';
Expand All @@ -55,7 +55,7 @@ console.log(logoURL);

### Bundleless 模式

Bundleless 模式下,由于每个文件都是独立经过代码转换,因此不支持 `?react``?url` 的引用形式,但支持下面两种使用形式:
bundleless 模式下,由于每个文件都是独立经过代码转换,因此不支持 `?react``?url` 的引用形式,但支持下面两种使用形式:

#### 具名导入

Expand Down

0 comments on commit 0b89e80

Please sign in to comment.