@bleedingdev/modern-js-main-doc 3.9.0-ultramodern.9 → 3.9.3-ultramodern.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/en/components/deploy-command.mdx +1 -0
- package/docs/en/components/prerequisites.mdx +1 -1
- package/docs/en/configure/app/bff/effect.mdx +5 -12
- package/docs/en/configure/app/output/disable-svgr.mdx +4 -0
- package/docs/en/configure/app/output/svg-default-export.mdx +4 -0
- package/docs/en/configure/app/source/react-compiler.mdx +2 -0
- package/docs/en/configure/app/tools/less.mdx +95 -19
- package/docs/en/configure/app/tools/sass.mdx +88 -18
- package/docs/en/configure/app/tools/svgr.mdx +93 -0
- package/docs/en/configure/app/tools/ts-checker.mdx +3 -17
- package/docs/en/guides/basic-features/render/ssr-cache.mdx +14 -1
- package/docs/en/guides/basic-features/static-assets/svg-assets.mdx +29 -17
- package/docs/en/guides/get-started/ultramodern.mdx +45 -14
- package/docs/en/plugin/introduction.mdx +1 -1
- package/docs/en/plugin/server-plugins/api.mdx +1 -0
- package/docs/zh/components/deploy-command.mdx +1 -0
- package/docs/zh/components/prerequisites.mdx +1 -1
- package/docs/zh/configure/app/bff/effect.mdx +4 -11
- package/docs/zh/configure/app/output/disable-svgr.mdx +4 -0
- package/docs/zh/configure/app/output/svg-default-export.mdx +4 -0
- package/docs/zh/configure/app/source/react-compiler.mdx +2 -0
- package/docs/zh/configure/app/tools/less.mdx +94 -19
- package/docs/zh/configure/app/tools/sass.mdx +88 -16
- package/docs/zh/configure/app/tools/svgr.mdx +93 -0
- package/docs/zh/configure/app/tools/ts-checker.mdx +3 -17
- package/docs/zh/guides/basic-features/render/ssr-cache.mdx +14 -1
- package/docs/zh/guides/basic-features/static-assets/svg-assets.mdx +29 -17
- package/docs/zh/guides/get-started/ultramodern.mdx +42 -14
- package/docs/zh/plugin/introduction.mdx +1 -1
- package/docs/zh/plugin/server-plugins/api.mdx +1 -0
- package/package.json +19 -17
- package/ultramodern-preset/package.json +3 -3
|
@@ -51,13 +51,46 @@ UltraModern.js uses Effect HttpApi, TanStack Router, SSR, and independently depl
|
|
|
51
51
|
## Create and Validate a Workspace
|
|
52
52
|
|
|
53
53
|
```bash
|
|
54
|
-
pnpm dlx @bleedingdev/modern-js-ultramodern-create
|
|
54
|
+
pnpm dlx @bleedingdev/modern-js-ultramodern-create@<V> my-workspace --renderer react
|
|
55
|
+
cd my-workspace
|
|
55
56
|
mise install
|
|
56
57
|
mise exec -- pnpm install
|
|
57
58
|
mise exec -- pnpm check
|
|
58
59
|
mise exec -- pnpm build
|
|
59
60
|
```
|
|
60
61
|
|
|
62
|
+
Replace `<V>` with the published framework version. Omit `--renderer` to use
|
|
63
|
+
React, or select `solid` or `octane` during initial generation. Add commands
|
|
64
|
+
read the application's `modern.config.ts` instead of accepting `--renderer`.
|
|
65
|
+
|
|
66
|
+
### Select the application renderer
|
|
67
|
+
|
|
68
|
+
Use the fork's config entrypoint; it owns the selected plugin composition:
|
|
69
|
+
|
|
70
|
+
```ts title="modern.config.ts"
|
|
71
|
+
import { defineConfig } from '@modern-js/ultramodern-app-tools';
|
|
72
|
+
|
|
73
|
+
export default defineConfig({
|
|
74
|
+
renderer: 'solid', // 'react' or 'octane'; omitted means 'react'
|
|
75
|
+
server: { ssr: true },
|
|
76
|
+
});
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
Solid 2.0.0-rc.13 and Octane are Node previews for CSR, native streaming SSR,
|
|
80
|
+
hydration and managed filesystem routes. Use Node 26.7.0 or newer. Author
|
|
81
|
+
components with `solid-js` / `@solidjs/web` or `octane`, and import native router
|
|
82
|
+
primitives from `@modern-js/renderer-solid/router` or
|
|
83
|
+
`@modern-js/renderer-octane/router`. Generated entries own mounting and hydration.
|
|
84
|
+
Changing the selector requires matching native source and dependencies, a
|
|
85
|
+
dev-server restart and a document reload.
|
|
86
|
+
|
|
87
|
+
Native previews reject workers, Module Federation, RSC, SSG, React i18n
|
|
88
|
+
integration, SVG component imports and CSS declaration emission beside authored
|
|
89
|
+
source. SVG URLs remain supported. The
|
|
90
|
+
[application tools README](https://github.com/BleedingDev/ultramodern.js/tree/main/packages/solutions/ultramodern-app-tools#readme)
|
|
91
|
+
defines the current preview profile and pinned dependencies. The federation,
|
|
92
|
+
i18n and Cloudflare examples below describe the React profile.
|
|
93
|
+
|
|
61
94
|
Localized Cloudflare SSR workspaces redirect `/` on the server to the negotiated locale. For example, `Accept-Language: cs-CZ` returns `302` with `Location: /cs`, `Cache-Control: private, no-store`, and `Vary` covering locale detection headers. Validate the deployed Worker with:
|
|
62
95
|
|
|
63
96
|
```bash
|
|
@@ -65,26 +98,24 @@ curl -I -H 'Accept-Language: cs-CZ,cs;q=0.9,en;q=0.1' https://<worker-host>/
|
|
|
65
98
|
```
|
|
66
99
|
|
|
67
100
|
Generated strict Effect workspaces pin the compatible Effect cohort with pnpm
|
|
68
|
-
overrides: `effect@4.0.0-rc.
|
|
69
|
-
and `@effect/vitest@4.0.0-rc.
|
|
101
|
+
overrides: `effect@4.0.0-rc.117`, `@effect/opentelemetry@4.0.0-rc.117`,
|
|
102
|
+
and `@effect/vitest@4.0.0-rc.117`. Do not add app-local direct Effect
|
|
70
103
|
versions that disagree with those overrides. The strict 24-hour release-age
|
|
71
104
|
gate applies to installed packages; this cohort carries no Effect age
|
|
72
105
|
exemption, and override-only `@effect/vitest` is not an installed approval
|
|
73
|
-
target.
|
|
74
|
-
and `@effect/opentelemetry` cover their trusted-publisher to provenance
|
|
75
|
-
metadata transition; they are not release-age approvals.
|
|
106
|
+
target.
|
|
76
107
|
|
|
77
108
|
### Current generated dependency baseline
|
|
78
109
|
|
|
79
110
|
| Surface | Pin |
|
|
80
111
|
| --- | --- |
|
|
81
|
-
| Effect runtime and test cohort | `effect`, `@effect/opentelemetry`, and `@effect/vitest`: `4.0.0-rc.
|
|
82
|
-
| Effect compiler | `@effect/tsgo@0.
|
|
83
|
-
| Oxc and Ultracite | `oxlint@1.
|
|
84
|
-
| TanStack Router | `@tanstack/react-router@1.170.
|
|
85
|
-
| Module Federation | `bridge-react`, `manifest`, `modern-js-v3`, and `rspack`: `2.9.
|
|
112
|
+
| Effect runtime and test cohort | `effect`, `@effect/opentelemetry`, and `@effect/vitest`: `4.0.0-rc.117` |
|
|
113
|
+
| Effect compiler | `@effect/tsgo@0.45.0` |
|
|
114
|
+
| Oxc and Ultracite | `oxlint@1.85.0`, `oxfmt@0.70.0`, `ultracite@7.12.0` |
|
|
115
|
+
| TanStack Router | `@tanstack/react-router@1.170.41`, `@tanstack/router-core@1.171.34`, `@tanstack/history@1.162.4` |
|
|
116
|
+
| Module Federation | `bridge-react`, `manifest`, `modern-js-v3`, and `rspack`: `2.9.2`; `@module-federation/node@2.7.52` |
|
|
86
117
|
| Tailwind CSS | `tailwindcss@4.3.3` |
|
|
87
|
-
| Node and package tooling | Node `26.7.0`, `@types/node@^26.
|
|
118
|
+
| Node and package tooling | Node `26.7.0`, `@types/node@^26.6.2`, pnpm `11.27.1` |
|
|
88
119
|
|
|
89
120
|
Generated workspaces default to Module Federation bridge-react's router-free
|
|
90
121
|
base entry (`bridge.enableBridgeRouter: false`), with TanStack Router as the
|
|
@@ -178,11 +209,11 @@ compilers do not share mutable build state.
|
|
|
178
209
|
|
|
179
210
|
## Configure the public preset
|
|
180
211
|
|
|
181
|
-
Use `presetUltramodern(appConfig, presetOptions)` inside the
|
|
212
|
+
Use `presetUltramodern(appConfig, presetOptions)` inside the UltraModern
|
|
182
213
|
`defineConfig` call:
|
|
183
214
|
|
|
184
215
|
```ts title="modern.config.ts"
|
|
185
|
-
import { defineConfig, presetUltramodern } from '@modern-js/app-tools';
|
|
216
|
+
import { defineConfig, presetUltramodern } from '@modern-js/ultramodern-app-tools';
|
|
186
217
|
|
|
187
218
|
export default defineConfig(
|
|
188
219
|
presetUltramodern(
|
|
@@ -129,7 +129,7 @@ The following are official Rsbuild plugins that are already built into Modern.js
|
|
|
129
129
|
| Plugin | Description | Modern.js Link |
|
|
130
130
|
| -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
|
|
131
131
|
| [React Plugin](https://v2.rsbuild.rs/plugins/list/plugin-react) | Provides support for React | - |
|
|
132
|
-
| [SVGR Plugin](https://v2.rsbuild.rs/plugins/list/plugin-svgr) | Supports converting SVG images into React components | [
|
|
132
|
+
| [SVGR Plugin](https://v2.rsbuild.rs/plugins/list/plugin-svgr) | Supports converting SVG images into React components | [tools.svgr](/configure/app/tools/svgr) |
|
|
133
133
|
| [Assets Retry Plugin](https://github.com/rstackjs/rsbuild-plugin-assets-retry) | Automatically retries requests when static asset loading fails | [output.assetsRetry](/configure/app/output/assets-retry.html) |
|
|
134
134
|
| [Type Check Plugin](https://github.com/rstackjs/rsbuild-plugin-type-check) | Runs TypeScript type checking in a separate process | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
|
|
135
135
|
| [Source Build Plugin](https://github.com/rstackjs/rsbuild-plugin-source-build) | For monorepo scenarios, supports referencing source code from other subdirectories and completing builds and hot updates | [experiments.sourceBuild](/configure/app/experiments/source-build.html) |
|
|
@@ -191,6 +191,7 @@ Adds additional logic when the server resets.
|
|
|
191
191
|
- `'file-change'`: File change event
|
|
192
192
|
- `event.payload`: When `type` is `'file-change'`, contains an array of file change information.
|
|
193
193
|
- **Execution Phase:** When files change or repack is needed.
|
|
194
|
+
- **Repack Order:** On `'repack'` the dev server awaits the handlers in registration order before it purges the previous server bundle from the require cache. A rejecting handler skips the handlers after it. New requests wait until the handlers settle; requests already running keep the modules they loaded. A repack handler must not await a request to the dev server, because that request waits for the handler.
|
|
194
195
|
- **Example:**
|
|
195
196
|
|
|
196
197
|
```typescript
|
|
@@ -52,7 +52,7 @@ import EnableBFFCaution from "@site-docs/components/enable-bff-caution";
|
|
|
52
52
|
`/effect-client` 之前,请安装精确版本的依赖组:
|
|
53
53
|
|
|
54
54
|
```bash
|
|
55
|
-
pnpm add effect@4.0.0-rc.
|
|
55
|
+
pnpm add effect@4.0.0-rc.117 @effect/opentelemetry@4.0.0-rc.117
|
|
56
56
|
```
|
|
57
57
|
|
|
58
58
|
采用精确版本是因为 UltraModern 以锁步依赖组的方式发布 Effect。只使用
|
|
@@ -221,23 +221,16 @@ UltraModern 生成的 workspace 会通过 `pnpm-workspace.yaml` overrides 锁定
|
|
|
221
221
|
Effect 版本组。当前 UltraModern 版本组使用:
|
|
222
222
|
|
|
223
223
|
```yaml
|
|
224
|
-
trustPolicyExclude:
|
|
225
|
-
- 'effect@4.0.0-rc.112'
|
|
226
|
-
- '@effect/opentelemetry@4.0.0-rc.112'
|
|
227
|
-
|
|
228
224
|
overrides:
|
|
229
|
-
'@effect/opentelemetry': 4.0.0-rc.
|
|
230
|
-
'@effect/vitest': 4.0.0-rc.
|
|
231
|
-
effect: 4.0.0-rc.
|
|
225
|
+
'@effect/opentelemetry': 4.0.0-rc.117
|
|
226
|
+
'@effect/vitest': 4.0.0-rc.117
|
|
227
|
+
effect: 4.0.0-rc.117
|
|
232
228
|
```
|
|
233
229
|
|
|
234
230
|
不要在应用包里添加不同版本的直接 `effect` 依赖。Effect 预发布版本不一致时,Layer 或 HTTP
|
|
235
231
|
middleware 构建可能因为运行时 service 来自不同包实例而失败。严格的 24 小时发布年龄
|
|
236
232
|
门禁适用于实际安装的包;当前版本组没有 Effect 年龄豁免,且仅用于 override 的
|
|
237
233
|
`@effect/vitest` 不是已安装的审批目标。
|
|
238
|
-
`trustPolicyExclude` 是另一项独立策略:其中精确的 `effect` 与
|
|
239
|
-
`@effect/opentelemetry` 例外用于处理 trusted-publisher metadata 向 provenance
|
|
240
|
-
attestation 的迁移,并不等同于 release-age 审批。
|
|
241
234
|
|
|
242
235
|
## 契约测试
|
|
243
236
|
|
|
@@ -7,6 +7,10 @@ title: disableSvgr
|
|
|
7
7
|
- **类型:** `boolean`
|
|
8
8
|
- **默认值:** `false`
|
|
9
9
|
|
|
10
|
+
:::warning 已废弃
|
|
11
|
+
`output.disableSvgr` 已废弃,并将在下一个大版本中移除。`output.disableSvgr: true` 请改为 [tools.svgr](/configure/app/tools/svgr) 设置为 `false`;`output.disableSvgr: false` 是默认行为,直接删除即可。两者同时设置时,以 `tools.svgr` 为准。
|
|
12
|
+
:::
|
|
13
|
+
|
|
10
14
|
是否调用 SVGR 将 SVG 转化为 React 组件。如果设置为 true,将把所有的.svg 文件视为资源处理。
|
|
11
15
|
|
|
12
16
|
默认情况下,在 JS 文件中引用 SVG 资源时,Modern.js 会调用 SVGR,将 SVG 图片转换为一个 React 组件。
|
|
@@ -7,6 +7,10 @@ title: svgDefaultExport
|
|
|
7
7
|
- **类型:** `'url' | 'component'`
|
|
8
8
|
- **默认值:** `'url'`
|
|
9
9
|
|
|
10
|
+
:::warning 已废弃
|
|
11
|
+
`output.svgDefaultExport` 已废弃,并将在下一个大版本中移除,请改用 [tools.svgr](/configure/app/tools/svgr) 的 `svgrOptions.exportType`:`'component'` 对应 `exportType: 'default'`,`'url'` 对应 `exportType: 'named'`。两者同时设置时,以 `tools.svgr` 为准。
|
|
12
|
+
:::
|
|
13
|
+
|
|
10
14
|
`output.svgDefaultExport` 可以用来配置 SVG 文件的默认导出。
|
|
11
15
|
|
|
12
16
|
当 `output.svgDefaultExport` 配置为 `url` 时,SVG 文件的默认导出是文件的 URL。例如:
|
|
@@ -11,6 +11,8 @@ title: reactCompiler
|
|
|
11
11
|
|
|
12
12
|
Modern.js 基于 Rspack `builtin:swc-loader` 内置的 Rust 版 React Compiler 实现该能力(等价于设置 SWC 的 `jsc.transform.reactCompiler`),复用 Rspack 内置的 SWC 转换链,无需额外引入 Babel。
|
|
13
13
|
|
|
14
|
+
该编译仅作用于浏览器环境(`output.target: 'web'`)。服务端环境(`node`、`web-worker` SSR Worker 以及 BFF 代码)每次请求只渲染一次,无法从自动记忆化中获益,因此不会被编译。
|
|
15
|
+
|
|
14
16
|
:::tip
|
|
15
17
|
该配置默认关闭,任何 React 版本下都需要显式开启,包括 React 19。
|
|
16
18
|
:::
|
|
@@ -9,49 +9,78 @@ title: less
|
|
|
9
9
|
|
|
10
10
|
```js
|
|
11
11
|
const defaultOptions = {
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
lessLoaderOptions: {
|
|
13
|
+
lessOptions: {
|
|
14
|
+
javascriptEnabled: true,
|
|
15
|
+
},
|
|
16
|
+
// 默认在开发环境下启用 CSS 的 Source Map
|
|
17
|
+
sourceMap: isDev,
|
|
14
18
|
},
|
|
15
|
-
// 默认在开发环境下启用 CSS 的 Source Map
|
|
16
|
-
sourceMap: isDev,
|
|
17
19
|
};
|
|
18
20
|
```
|
|
19
21
|
|
|
20
|
-
|
|
22
|
+
`tools.less` 用于修改 [@rsbuild/plugin-less](https://rsbuild.rs/plugins/list/plugin-less) 的选项,取值为该插件的完整选项:
|
|
23
|
+
|
|
24
|
+
| 选项 | 说明 |
|
|
25
|
+
| -------------------- | ---------------------------------------------------------------------------------- |
|
|
26
|
+
| `lessLoaderOptions` | 传给 [less-loader](https://github.com/webpack-contrib/less-loader) 的选项,支持对象或函数 |
|
|
27
|
+
| `include` | 指定哪些文件交给 less-loader 处理,默认 `/\.less$/` |
|
|
28
|
+
| `exclude` | 指定哪些文件不交给 less-loader 处理 |
|
|
29
|
+
| `parallel` | 是否使用 worker 线程并行编译 Less,默认 `false` |
|
|
30
|
+
|
|
31
|
+
### 修改 less-loader 选项
|
|
21
32
|
|
|
22
|
-
|
|
33
|
+
`lessLoaderOptions` 为 `Object` 类型时,会与默认配置通过 Object.assign 进行浅层合并,值得注意的是,`lessOptions` 会通过 deepMerge 进行深层合并。
|
|
34
|
+
|
|
35
|
+
```js
|
|
36
|
+
export default {
|
|
37
|
+
tools: {
|
|
38
|
+
less: {
|
|
39
|
+
lessLoaderOptions: {
|
|
40
|
+
lessOptions: {
|
|
41
|
+
javascriptEnabled: false,
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
};
|
|
47
|
+
```
|
|
23
48
|
|
|
24
|
-
|
|
49
|
+
`lessLoaderOptions` 为 `Function` 类型时,默认配置作为第一个参数传入,可以直接修改配置对象,也可以返回一个值作为最终结果,第二个参数提供了一些可以直接调用的工具函数:
|
|
25
50
|
|
|
26
51
|
```js
|
|
27
52
|
export default {
|
|
28
53
|
tools: {
|
|
29
54
|
less: {
|
|
30
|
-
|
|
31
|
-
|
|
55
|
+
lessLoaderOptions(config) {
|
|
56
|
+
// 修改 lessOptions 配置
|
|
57
|
+
config.lessOptions = {
|
|
58
|
+
javascriptEnabled: false,
|
|
59
|
+
};
|
|
32
60
|
},
|
|
33
61
|
},
|
|
34
62
|
},
|
|
35
63
|
};
|
|
36
64
|
```
|
|
37
65
|
|
|
38
|
-
###
|
|
66
|
+
### 并行编译
|
|
39
67
|
|
|
40
|
-
|
|
68
|
+
Less 编译是纯 JavaScript 计算,默认只占用 Node.js 主线程。开启 `parallel` 后,Less 模块会分发到 worker 线程池中编译,项目里 Less 文件较多时可以缩短构建时间。
|
|
41
69
|
|
|
42
70
|
```js
|
|
43
71
|
export default {
|
|
44
72
|
tools: {
|
|
45
|
-
less
|
|
46
|
-
|
|
47
|
-
config.lessOptions = {
|
|
48
|
-
javascriptEnabled: false,
|
|
49
|
-
};
|
|
73
|
+
less: {
|
|
74
|
+
parallel: true,
|
|
50
75
|
},
|
|
51
76
|
},
|
|
52
77
|
};
|
|
53
78
|
```
|
|
54
79
|
|
|
80
|
+
:::tip
|
|
81
|
+
传给 worker 线程的选项需要满足[结构化克隆算法](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)的要求,因此开启 `parallel` 后,`lessLoaderOptions` 中不能包含函数,例如 `additionalData` 函数或自定义的 `implementation`。
|
|
82
|
+
:::
|
|
83
|
+
|
|
55
84
|
### 修改 Less 版本
|
|
56
85
|
|
|
57
86
|
在某些场景下,如果你需要使用特定的 Less 版本,而不是使用 Modern.js 内置的 Less v4,可以在项目中安装需要使用的 Less 版本,并通过 `less-loader` 的 `implementation` 选项设置。
|
|
@@ -60,7 +89,9 @@ export default {
|
|
|
60
89
|
export default {
|
|
61
90
|
tools: {
|
|
62
91
|
less: {
|
|
63
|
-
|
|
92
|
+
lessLoaderOptions: {
|
|
93
|
+
implementation: require('less'),
|
|
94
|
+
},
|
|
64
95
|
},
|
|
65
96
|
},
|
|
66
97
|
};
|
|
@@ -77,10 +108,54 @@ export default {
|
|
|
77
108
|
```js
|
|
78
109
|
export default {
|
|
79
110
|
tools: {
|
|
80
|
-
less
|
|
81
|
-
addExcludes
|
|
111
|
+
less: {
|
|
112
|
+
lessLoaderOptions(config, { addExcludes }) {
|
|
113
|
+
addExcludes(/node_modules/);
|
|
114
|
+
},
|
|
115
|
+
},
|
|
116
|
+
},
|
|
117
|
+
};
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
推荐直接使用插件的 `exclude` 选项,效果相同:
|
|
121
|
+
|
|
122
|
+
```js
|
|
123
|
+
export default {
|
|
124
|
+
tools: {
|
|
125
|
+
less: {
|
|
126
|
+
exclude: /node_modules/,
|
|
82
127
|
},
|
|
83
128
|
},
|
|
84
129
|
};
|
|
85
130
|
```
|
|
86
131
|
|
|
132
|
+
### 兼容旧写法
|
|
133
|
+
|
|
134
|
+
:::warning 不要混写两种层级
|
|
135
|
+
同一个对象里只要出现插件顶层键(`lessLoaderOptions`、`include`、`exclude` 等),整个对象就会按插件选项解析,其中的 loader 选项不会生效。例如 `tools.less: { parallel: true, lessOptions: { ... } }` 里的 `lessOptions` 会被忽略,必须移到 `lessLoaderOptions` 下;开发环境下会打印一条提示。
|
|
136
|
+
:::
|
|
137
|
+
|
|
138
|
+
|
|
139
|
+
在之前的版本中,`tools.less` 的取值直接是 less-loader 的选项,例如 `tools.less: { lessOptions: {} }` 或 `tools.less(config, { addExcludes }) {}`。这种写法目前仍然生效,Modern.js 会自动把它包装为 `lessLoaderOptions`,产出的配置与之前完全一致;在开发环境下会打印一条迁移提示,并将在下一个大版本中移除。
|
|
140
|
+
|
|
141
|
+
```js
|
|
142
|
+
// 旧写法
|
|
143
|
+
export default {
|
|
144
|
+
tools: {
|
|
145
|
+
less: {
|
|
146
|
+
lessOptions: { javascriptEnabled: false },
|
|
147
|
+
},
|
|
148
|
+
},
|
|
149
|
+
};
|
|
150
|
+
|
|
151
|
+
// 新写法
|
|
152
|
+
export default {
|
|
153
|
+
tools: {
|
|
154
|
+
less: {
|
|
155
|
+
lessLoaderOptions: {
|
|
156
|
+
lessOptions: { javascriptEnabled: false },
|
|
157
|
+
},
|
|
158
|
+
},
|
|
159
|
+
},
|
|
160
|
+
};
|
|
161
|
+
```
|
|
@@ -9,39 +9,64 @@ title: sass
|
|
|
9
9
|
|
|
10
10
|
```js
|
|
11
11
|
const defaultOptions = {
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
sassLoaderOptions: {
|
|
13
|
+
// 默认在开发环境下启用 CSS 的 Source Map
|
|
14
|
+
sourceMap: isDev,
|
|
15
|
+
},
|
|
14
16
|
};
|
|
15
17
|
```
|
|
16
18
|
|
|
17
|
-
|
|
19
|
+
`tools.sass` 用于修改 [@rsbuild/plugin-sass](https://rsbuild.rs/plugins/list/plugin-sass) 的选项,取值为该插件的完整选项:
|
|
20
|
+
|
|
21
|
+
| 选项 | 说明 |
|
|
22
|
+
| -------------------- | ---------------------------------------------------------------------------------- |
|
|
23
|
+
| `sassLoaderOptions` | 传给 [sass-loader](https://github.com/webpack-contrib/sass-loader) 的选项,支持对象或函数 |
|
|
24
|
+
| `include` | 指定哪些文件交给 sass-loader 处理,默认 `/\.s(?:a|c)ss$/` |
|
|
25
|
+
| `exclude` | 指定哪些文件不交给 sass-loader 处理 |
|
|
26
|
+
| `rewriteUrls` | 是否使用 resolve-url-loader 重写 Sass 文件中的相对 URL,默认 `true` |
|
|
18
27
|
|
|
19
|
-
###
|
|
28
|
+
### 修改 sass-loader 选项
|
|
20
29
|
|
|
21
|
-
|
|
30
|
+
`sassLoaderOptions` 为 `Object` 类型时,会与默认配置通过 Object.assign 进行浅层合并,值得注意的是,`sassOptions` 会通过 deepMerge 进行深层合并。
|
|
22
31
|
|
|
23
32
|
```js
|
|
24
33
|
export default {
|
|
25
34
|
tools: {
|
|
26
35
|
sass: {
|
|
27
|
-
|
|
36
|
+
sassLoaderOptions: {
|
|
37
|
+
sourceMap: true,
|
|
38
|
+
},
|
|
28
39
|
},
|
|
29
40
|
},
|
|
30
41
|
};
|
|
31
42
|
```
|
|
32
43
|
|
|
33
|
-
|
|
44
|
+
`sassLoaderOptions` 为 `Function` 类型时,默认配置作为第一个参数传入,可以直接修改配置对象,也可以返回一个值作为最终结果,第二个参数提供了一些可以直接调用的工具函数:
|
|
45
|
+
|
|
46
|
+
```js
|
|
47
|
+
export default {
|
|
48
|
+
tools: {
|
|
49
|
+
sass: {
|
|
50
|
+
sassLoaderOptions(config) {
|
|
51
|
+
// 修改 additionalData 配置
|
|
52
|
+
config.additionalData = async (content, loaderContext) => {
|
|
53
|
+
// ...
|
|
54
|
+
};
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
},
|
|
58
|
+
};
|
|
59
|
+
```
|
|
34
60
|
|
|
35
|
-
|
|
61
|
+
### 关闭 URL 重写
|
|
62
|
+
|
|
63
|
+
默认情况下,Sass 文件里的相对 URL 会经过 resolve-url-loader 重写为相对于源文件的路径。如果项目不依赖这一行为,可以关闭它来减少一个 loader:
|
|
36
64
|
|
|
37
65
|
```js
|
|
38
66
|
export default {
|
|
39
67
|
tools: {
|
|
40
|
-
sass
|
|
41
|
-
|
|
42
|
-
config.additionalData = async (content, loaderContext) => {
|
|
43
|
-
// ...
|
|
44
|
-
};
|
|
68
|
+
sass: {
|
|
69
|
+
rewriteUrls: false,
|
|
45
70
|
},
|
|
46
71
|
},
|
|
47
72
|
};
|
|
@@ -55,7 +80,9 @@ export default {
|
|
|
55
80
|
export default {
|
|
56
81
|
tools: {
|
|
57
82
|
sass: {
|
|
58
|
-
|
|
83
|
+
sassLoaderOptions: {
|
|
84
|
+
implementation: require('sass'),
|
|
85
|
+
},
|
|
59
86
|
},
|
|
60
87
|
},
|
|
61
88
|
};
|
|
@@ -72,8 +99,53 @@ export default {
|
|
|
72
99
|
```js
|
|
73
100
|
export default {
|
|
74
101
|
tools: {
|
|
75
|
-
sass
|
|
76
|
-
addExcludes
|
|
102
|
+
sass: {
|
|
103
|
+
sassLoaderOptions(config, { addExcludes }) {
|
|
104
|
+
addExcludes(/node_modules/);
|
|
105
|
+
},
|
|
106
|
+
},
|
|
107
|
+
},
|
|
108
|
+
};
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
推荐直接使用插件的 `exclude` 选项,效果相同:
|
|
112
|
+
|
|
113
|
+
```js
|
|
114
|
+
export default {
|
|
115
|
+
tools: {
|
|
116
|
+
sass: {
|
|
117
|
+
exclude: /node_modules/,
|
|
118
|
+
},
|
|
119
|
+
},
|
|
120
|
+
};
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
### 兼容旧写法
|
|
124
|
+
|
|
125
|
+
:::warning 不要混写两种层级
|
|
126
|
+
同一个对象里只要出现插件顶层键(`sassLoaderOptions`、`include`、`exclude` 等),整个对象就会按插件选项解析,其中的 loader 选项不会生效。例如 `tools.sass: { rewriteUrls: false, sassOptions: { ... } }` 里的 `sassOptions` 会被忽略,必须移到 `sassLoaderOptions` 下;开发环境下会打印一条提示。
|
|
127
|
+
:::
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
在之前的版本中,`tools.sass` 的取值直接是 sass-loader 的选项,例如 `tools.sass: { sassOptions: {} }` 或 `tools.sass(config, { addExcludes }) {}`。这种写法目前仍然生效,Modern.js 会自动把它包装为 `sassLoaderOptions`,产出的配置与之前完全一致;在开发环境下会打印一条迁移提示,并将在下一个大版本中移除。
|
|
131
|
+
|
|
132
|
+
```js
|
|
133
|
+
// 旧写法
|
|
134
|
+
export default {
|
|
135
|
+
tools: {
|
|
136
|
+
sass: {
|
|
137
|
+
sourceMap: true,
|
|
138
|
+
},
|
|
139
|
+
},
|
|
140
|
+
};
|
|
141
|
+
|
|
142
|
+
// 新写法
|
|
143
|
+
export default {
|
|
144
|
+
tools: {
|
|
145
|
+
sass: {
|
|
146
|
+
sassLoaderOptions: {
|
|
147
|
+
sourceMap: true,
|
|
148
|
+
},
|
|
77
149
|
},
|
|
78
150
|
},
|
|
79
151
|
};
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: svgr
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# tools.svgr
|
|
6
|
+
|
|
7
|
+
- **类型:** `Object | Function | false`
|
|
8
|
+
- **默认值:**
|
|
9
|
+
|
|
10
|
+
```js
|
|
11
|
+
const defaultOptions = {
|
|
12
|
+
mixedImport: true,
|
|
13
|
+
svgrOptions: {
|
|
14
|
+
exportType: 'named',
|
|
15
|
+
},
|
|
16
|
+
};
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
`tools.svgr` 用于修改 [@rsbuild/plugin-svgr](https://rsbuild.rs/plugins/list/plugin-svgr) 的选项,取值为该插件的完整选项。设置为 `false` 时不再注册 SVGR 插件,所有 `.svg` 文件按静态资源处理。
|
|
20
|
+
|
|
21
|
+
| 选项 | 说明 |
|
|
22
|
+
| ----------------- | --------------------------------------------------------------------------------------------- |
|
|
23
|
+
| `svgrOptions` | 传给 [SVGR](https://react-svgr.com/docs/options/) 的参数,例如 `exportType`、`icon`、`svgoConfig` |
|
|
24
|
+
| `parallel` | 是否使用 worker 线程并行转换 SVG,默认 `false` |
|
|
25
|
+
| `exclude` | 指定哪些 SVG 文件不交给 SVGR 处理 |
|
|
26
|
+
| `excludeImporter` | 指定从哪些文件导入 SVG 时不交给 SVGR 处理 |
|
|
27
|
+
| `query` | 指定触发 SVGR 转换的 query,默认 `/react/` |
|
|
28
|
+
| `mixedImport` | 是否允许在同一个模块中同时导入 URL 与 React 组件,默认 `true` |
|
|
29
|
+
|
|
30
|
+
### 合并规则
|
|
31
|
+
|
|
32
|
+
`tools.svgr` 为 `Object` 类型时,顶层字段与默认配置通过 Object.assign 进行浅层合并,`svgrOptions` 会再合并一层,因此只设置 `svgrOptions.icon` 不会丢掉默认的 `exportType`。
|
|
33
|
+
|
|
34
|
+
`tools.svgr` 为 `Function` 类型时,默认配置作为第一个参数传入,可以直接修改配置对象,也可以返回一个值作为最终结果。也支持传入由对象和函数组成的数组,按顺序依次应用。
|
|
35
|
+
|
|
36
|
+
### 并行转换
|
|
37
|
+
|
|
38
|
+
SVGR 转换是纯 JavaScript 计算,默认只占用 Node.js 主线程。项目里 SVG 文件较多时,开启 `parallel` 可以把转换分发到 worker 线程池:
|
|
39
|
+
|
|
40
|
+
```js
|
|
41
|
+
export default {
|
|
42
|
+
tools: {
|
|
43
|
+
svgr: {
|
|
44
|
+
parallel: true,
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
};
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
:::tip
|
|
51
|
+
传给 worker 线程的选项需要满足[结构化克隆算法](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)的要求,因此开启 `parallel` 后,`svgrOptions` 中不能包含函数。
|
|
52
|
+
:::
|
|
53
|
+
|
|
54
|
+
### 修改默认导出
|
|
55
|
+
|
|
56
|
+
`svgrOptions.exportType` 决定 SVG 文件默认导出的内容:`'named'` 表示默认导出是文件 URL,React 组件通过 `ReactComponent` 具名导出;`'default'` 表示默认导出就是 React 组件。
|
|
57
|
+
|
|
58
|
+
```js
|
|
59
|
+
export default {
|
|
60
|
+
tools: {
|
|
61
|
+
svgr: {
|
|
62
|
+
svgrOptions: {
|
|
63
|
+
exportType: 'default',
|
|
64
|
+
},
|
|
65
|
+
},
|
|
66
|
+
},
|
|
67
|
+
};
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### 关闭 SVGR
|
|
71
|
+
|
|
72
|
+
如果你确定项目内的所有 SVG 资源都没有当成 React 组件使用,可以关闭 SVGR 以提升构建性能:
|
|
73
|
+
|
|
74
|
+
```js
|
|
75
|
+
export default {
|
|
76
|
+
tools: {
|
|
77
|
+
svgr: false,
|
|
78
|
+
},
|
|
79
|
+
};
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
### 与旧配置的关系
|
|
83
|
+
|
|
84
|
+
`tools.svgr` 取代了下面两个已废弃的配置项,二者目前仍然生效,并将在下一个大版本中移除:
|
|
85
|
+
|
|
86
|
+
| 旧配置 | 新配置 |
|
|
87
|
+
| ------------------------------------- | ------------------------------------------------- |
|
|
88
|
+
| `output.svgDefaultExport: 'component'` | `tools.svgr: { svgrOptions: { exportType: 'default' } }` |
|
|
89
|
+
| `output.svgDefaultExport: 'url'` | `tools.svgr: { svgrOptions: { exportType: 'named' } }` |
|
|
90
|
+
| `output.disableSvgr: true` | `tools.svgr: false` |
|
|
91
|
+
| `output.disableSvgr: false` | 默认行为,直接删除即可 |
|
|
92
|
+
|
|
93
|
+
同时设置时以 `tools.svgr` 为准:显式设置了 `tools.svgr` 后,`output.disableSvgr` 不再生效;`tools.svgr.svgrOptions.exportType` 会覆盖 `output.svgDefaultExport` 派生的值。
|
|
@@ -80,24 +80,10 @@ export default {
|
|
|
80
80
|
|
|
81
81
|
类型检查默认使用 [TypeScript Go](https://github.com/microsoft/typescript-go)(`tsgo`)。该能力由 [`@rsbuild/plugin-type-check`](https://github.com/rstackjs/rsbuild-plugin-type-check) 底层集成的 [`ts-checker-rspack-plugin`](https://github.com/rstackjs/ts-checker-rspack-plugin) 提供,可以将类型检查耗时减少约 5-10 倍。
|
|
82
82
|
|
|
83
|
-
Modern.js
|
|
83
|
+
Modern.js 使用稳定版 `typescript@7.0.2` 提供的原生 Go 编译器,先解析项目内的包,再解析构建器声明的依赖,并拒绝不兼容的版本。可在项目中安装受支持的编译器:
|
|
84
84
|
|
|
85
|
-
<PackageManagerTabs command="install typescript -D" />
|
|
85
|
+
<PackageManagerTabs command="install typescript@7.0.2 -D" />
|
|
86
86
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
如需回退到经典 TypeScript 检查器,请将 `typescript.tsgo` 设置为 `false`,并确保项目中安装了 `typescript`:
|
|
90
|
-
|
|
91
|
-
```ts
|
|
92
|
-
export default {
|
|
93
|
-
tools: {
|
|
94
|
-
tsChecker: {
|
|
95
|
-
typescript: {
|
|
96
|
-
tsgo: false,
|
|
97
|
-
},
|
|
98
|
-
},
|
|
99
|
-
},
|
|
100
|
-
};
|
|
101
|
-
```
|
|
87
|
+
默认的 `typescript.typescriptPath` 会解析为该稳定版编译器的 `typescript/package.json` 绝对路径。
|
|
102
88
|
|
|
103
89
|
关于 `tsgo` 模式下生效的配置项和相关限制,请参考 [ts-checker-rspack-plugin - TypeScript Go support](https://github.com/rstackjs/ts-checker-rspack-plugin#typescript-go-support)。
|