@modern-js/module-tools-docs 2.67.7 → 2.67.8
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/CHANGELOG.md +2 -0
- package/docs/en/guide/basic/command-preview.md +2 -2
- package/docs/en/guide/basic/use-module-doc.mdx +11 -11
- package/docs/en/guide/basic/using-storybook.mdx +1 -1
- package/docs/en/guide/faq/storybook.mdx +31 -27
- package/docs/en/guide/intro/getting-started.mdx +1 -1
- package/docs/zh/guide/basic/command-preview.md +2 -2
- package/docs/zh/guide/basic/use-module-doc.mdx +11 -11
- package/docs/zh/guide/basic/using-storybook.mdx +1 -1
- package/docs/zh/guide/faq/storybook.mdx +31 -27
- package/docs/zh/guide/intro/getting-started.mdx +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -24,7 +24,7 @@ Options:
|
|
|
24
24
|
-h, --help Show information about the current command
|
|
25
25
|
```
|
|
26
26
|
|
|
27
|
-
Modern.js Module supports the `platform` build mode, which can be used to execute build tasks of other tools. Currently, the official support includes [Rspress](https://rspress.
|
|
27
|
+
Modern.js Module supports the `platform` build mode, which can be used to execute build tasks of other tools. Currently, the official support includes [Rspress](https://rspress.rs/). For example, you can start the doc build task to generate doc products by executing the `modern build --platform` commands.
|
|
28
28
|
|
|
29
29
|
## `modern new`
|
|
30
30
|
|
|
@@ -66,7 +66,7 @@ Commands:
|
|
|
66
66
|
|
|
67
67
|
The Modern.js Module provides the ability to use debugging tools, which can be started with the `modern dev` command. Note, however, that no debugging-related plugins are provided by default, so executing `modern dev` will prompt: _"No dev tools found available "_.
|
|
68
68
|
|
|
69
|
-
The officially supported debugging tool is [Rspress](https://rspress.
|
|
69
|
+
The officially supported debugging tool is [Rspress](https://rspress.rs/), so you can run `modern dev` or `modern dev doc` to execute it after you run `modern new` to enable it.
|
|
70
70
|
|
|
71
71
|
## `modern change`
|
|
72
72
|
|
|
@@ -17,7 +17,7 @@ This chapter describes how to quickly build a static documentation site for a mo
|
|
|
17
17
|
### Preliminary preparation
|
|
18
18
|
|
|
19
19
|
1. Enable the documentation feature via [micro-generator](/guide/basic/use-micro-generator).
|
|
20
|
-
2. Read [Introduction to Rspress](https://rspress.
|
|
20
|
+
2. Read [Introduction to Rspress](https://rspress.rs/guide/start/introduction.html).
|
|
21
21
|
|
|
22
22
|
After finishing the preparation work, we will build a documentation site for the module project based on Rspress.
|
|
23
23
|
|
|
@@ -25,7 +25,7 @@ After finishing the preparation work, we will build a documentation site for the
|
|
|
25
25
|
|
|
26
26
|
The overall layout of the site consists of three parts: the navigation bar, the sidebar and the body part, which also includes the TOC (Table of contents found at the beginning of a book or document).
|
|
27
27
|
|
|
28
|
-
The Rspress uses [File System Routing](https://rspress.
|
|
28
|
+
The Rspress uses [File System Routing](https://rspress.rs/guide/basic/conventional-route.html), on which the module documentation is based, to automate the generation of the sidebar.
|
|
29
29
|
For example, if you have the following file structure:
|
|
30
30
|
|
|
31
31
|
```bash
|
|
@@ -56,7 +56,7 @@ The sidebars corresponding in turn to the above file paths and routing paths are
|
|
|
56
56
|
### Configure sidebar
|
|
57
57
|
|
|
58
58
|
As shown in the figure above, the module documentation has automatically generated sidebars for file system routing, where the text of each column of the sidebar is determined by the file's first level title or directory name.
|
|
59
|
-
If you need to customize the sidebar, please use [\_meta.json](https://rspress.
|
|
59
|
+
If you need to customize the sidebar, please use [\_meta.json](https://rspress.rs/guide/basic/auto-nav-sidebar.html) or configure [sidebar](https://rspress.rs/api/config/config-theme.html#sidebar) directly.
|
|
60
60
|
|
|
61
61
|
:::info
|
|
62
62
|
If your document directory structure complies with internationalization, for example:
|
|
@@ -71,7 +71,7 @@ docs
|
|
|
71
71
|
├── index.mdx
|
|
72
72
|
```
|
|
73
73
|
|
|
74
|
-
You need to follow [internationalization](https://rspress.
|
|
74
|
+
You need to follow [internationalization](https://rspress.rs/guide/default-theme/i18n.html) guide and configure `lang` 和 `locales`,
|
|
75
75
|
otherwise, the automatically generated sidebar of the module will not handle the `zh` and `en` directories.
|
|
76
76
|
:::
|
|
77
77
|
|
|
@@ -79,8 +79,8 @@ otherwise, the automatically generated sidebar of the module will not handle the
|
|
|
79
79
|
|
|
80
80
|
Next, we can focus on writing the content of the document. In addition to the basic Markdown syntax, you may also need to understand the following advanced topics:
|
|
81
81
|
|
|
82
|
-
- [Using MDX](https://rspress.
|
|
83
|
-
- [Using Assets](https://rspress.
|
|
82
|
+
- [Using MDX](https://rspress.rs/guide/basic/use-mdx.html)
|
|
83
|
+
- [Using Assets](https://rspress.rs/guide/basic/static-assets.html)
|
|
84
84
|
|
|
85
85
|
## Component preview
|
|
86
86
|
|
|
@@ -357,7 +357,7 @@ API parse tool.
|
|
|
357
357
|
|
|
358
358
|
### doc
|
|
359
359
|
|
|
360
|
-
[Config](https://rspress.
|
|
360
|
+
[Config](https://rspress.rs/api/index.html).
|
|
361
361
|
|
|
362
362
|
### entries
|
|
363
363
|
|
|
@@ -431,14 +431,14 @@ In case of `internal`, the component will be rendered directly in the page, othe
|
|
|
431
431
|
### deprecated: languages
|
|
432
432
|
|
|
433
433
|
:::warning
|
|
434
|
-
Starting from version MAJOR_VERSION.44.0, please refer to the [Internationalization](https://rspress.
|
|
434
|
+
Starting from version MAJOR_VERSION.44.0, please refer to the [Internationalization](https://rspress.rs/guide/default-theme/i18n.html) section to implement multiple languages.
|
|
435
435
|
:::
|
|
436
436
|
|
|
437
437
|
### deprecated: useModuleSidebar
|
|
438
438
|
|
|
439
439
|
:::warning
|
|
440
|
-
Starting from version MAJOR_VERSION.44.0, a sniffing mechanism has been implemented internally, so please directly use [\_meta.json](https://rspress.
|
|
441
|
-
or directly configure [sidebar](https://rspress.
|
|
440
|
+
Starting from version MAJOR_VERSION.44.0, a sniffing mechanism has been implemented internally, so please directly use [\_meta.json](https://rspress.rs/guide/basic/auto-nav-sidebar.html)
|
|
441
|
+
or directly configure [sidebar](https://rspress.rs/api/config/config-theme.html#sidebar) to implement a custom sidebar.
|
|
442
442
|
:::
|
|
443
443
|
|
|
444
444
|
## Scripts
|
|
@@ -448,7 +448,7 @@ or directly configure [sidebar](https://rspress.dev/api/config/config-theme.html
|
|
|
448
448
|
|
|
449
449
|
## Advanced guide
|
|
450
450
|
|
|
451
|
-
The above has covered the basics of developing module documentation, but this is not enough for developing a complete documentation station. Check out the [Rspress](https://rspress.
|
|
451
|
+
The above has covered the basics of developing module documentation, but this is not enough for developing a complete documentation station. Check out the [Rspress](https://rspress.rs) for an in-depth look at our documentation framework.
|
|
452
452
|
You can modify the documentation framework configuration via the `doc` configuration.
|
|
453
453
|
|
|
454
454
|
```ts title="modern.config.ts"
|
|
@@ -131,7 +131,7 @@ export default config;
|
|
|
131
131
|
- **Type**: `BuilderConfig`
|
|
132
132
|
- **Default**: `undefined`
|
|
133
133
|
|
|
134
|
-
The Storybook build capability of Modern.js is provided by [Rsbuild](https://rsbuild.
|
|
134
|
+
The Storybook build capability of Modern.js is provided by [Rsbuild](https://rsbuild.rs/), and the Rsbuild configuration can be modified through builderConfig.
|
|
135
135
|
|
|
136
136
|
```javascript filename='.storybook/main.js'
|
|
137
137
|
const config = {
|
|
@@ -27,11 +27,11 @@ ERR! Error: Cannot find module 'react-dom/package.json'
|
|
|
27
27
|
|
|
28
28
|
You can install the react-dom dependency in the project.
|
|
29
29
|
|
|
30
|
-
```
|
|
30
|
+
```json
|
|
31
31
|
{
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
32
|
+
"devDependencies": {
|
|
33
|
+
"react-dom": "^17"
|
|
34
|
+
}
|
|
35
35
|
}
|
|
36
36
|
```
|
|
37
37
|
|
|
@@ -43,18 +43,19 @@ Solutions:
|
|
|
43
43
|
2. Find this code: `var _await$Promise$all = await Promise.all([preview, manager,`.
|
|
44
44
|
3. Modify it:
|
|
45
45
|
|
|
46
|
-
```
|
|
46
|
+
```js
|
|
47
47
|
var _await$Promise$all = await Promise.all([
|
|
48
48
|
preview.catch(e => console.info(e)),
|
|
49
49
|
manager // TODO #13083 Restore this when compiling the preview is fast enough
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
50
|
+
// .then((result) => {
|
|
51
|
+
// if (!options.ci && !options.smokeTest) openInBrowser(address);
|
|
52
|
+
// return result;
|
|
53
|
+
// })
|
|
54
|
+
.catch(previewBuilder.bail),
|
|
55
|
+
]),
|
|
56
|
+
_await$Promise$all2 = _slicedToArray(_await$Promise$all, 2),
|
|
57
|
+
previewResult = _await$Promise$all2[0],
|
|
58
|
+
managerResult = _await$Promise$all2[1]; // TODO #13083 Remove this when compiling the preview is fast enough
|
|
58
59
|
```
|
|
59
60
|
|
|
60
61
|
## Can`t find any stories is your Storybook
|
|
@@ -69,36 +70,39 @@ Storybook does not provide a solution for this, but there is one in the Storyboo
|
|
|
69
70
|
|
|
70
71
|
1. Add the `.storybook/middleware.js` file and initialize the following:
|
|
71
72
|
|
|
72
|
-
```
|
|
73
|
+
```js
|
|
73
74
|
/* eslint-disable filenames/match-exported */
|
|
74
75
|
module.exports = function expressMiddleware(router) {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
76
|
+
// router is express router
|
|
77
|
+
// import { Router } from 'express'
|
|
78
|
+
// router = new Router();
|
|
78
79
|
};
|
|
79
80
|
```
|
|
80
81
|
|
|
81
82
|
2. add `http-proxy-middleware` dependency
|
|
82
83
|
3. Add proxy routing-related configuration
|
|
83
84
|
|
|
84
|
-
```
|
|
85
|
+
```js
|
|
85
86
|
/* eslint-disable filenames/match-exported */
|
|
86
|
-
const { createProxyMiddleware } = require(
|
|
87
|
+
const { createProxyMiddleware } = require('http-proxy-middleware');
|
|
87
88
|
|
|
88
|
-
module.exports = function expressMiddleware
|
|
89
|
-
router.use(
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
89
|
+
module.exports = function expressMiddleware(router) {
|
|
90
|
+
router.use(
|
|
91
|
+
'/api',
|
|
92
|
+
createProxyMiddleware({
|
|
93
|
+
target: 'http://localhost:8000',
|
|
94
|
+
changeOrigin: true,
|
|
95
|
+
}),
|
|
96
|
+
);
|
|
97
|
+
};
|
|
94
98
|
```
|
|
95
99
|
|
|
96
100
|
Link:https://github.com/storybookjs/storybook/issues/11551
|
|
97
101
|
|
|
98
102
|
## Tailwind CSS doesn't work in Storybook
|
|
99
103
|
|
|
100
|
-
The Storybook build capability of the Modern.js Module is provided by [Rsbuild](https://rsbuild.
|
|
104
|
+
The Storybook build capability of the Modern.js Module is provided by [Rsbuild](https://rsbuild.rs/). Since the underlying implementation of Rsbuild is not integrated with Modern.js Module, the Modern.js Module plugins do not work in Storybook (Rsbuild).
|
|
101
105
|
|
|
102
106
|
Solution: Register the tailwindcss PostCSS plugin in storybook.
|
|
103
107
|
|
|
104
|
-
Reference link: [Rsbuild - tailwindcss](https://rsbuild.
|
|
108
|
+
Reference link: [Rsbuild - tailwindcss](https://rsbuild.rs/guide/basic/tailwindcss#configuring-postcss).
|
|
@@ -8,7 +8,7 @@ sidebar_position: 3
|
|
|
8
8
|
|
|
9
9
|
We no longer recommend creating new Modern.js Module projects, as we have developed Rslib based on Rsbuild, which is the next-generation Library development tool that will provide better build performance and plugin ecosystem. You can refer to the [Rslib repository](https://github.com/web-infra-dev/rslib) for more information.
|
|
10
10
|
|
|
11
|
-
Modern.js will focus on building a first-class full-stack React framework, and Modern.js Module will be gradually deprecated. We have provided a [migration guide](https://
|
|
11
|
+
Modern.js will focus on building a first-class full-stack React framework, and Modern.js Module will be gradually deprecated. We have provided a [migration guide](https://rslib.rs/guide/migration/modernjs-module) for Modern.js Module projects, which you can follow to migrate your Modern.js Module project to Rslib.
|
|
12
12
|
|
|
13
13
|
The npm packages and documentation for Modern.js Module will remain available. We will no longer add new features to Modern.js Module but will provide necessary bug fixes.
|
|
14
14
|
|
|
@@ -24,7 +24,7 @@ Options:
|
|
|
24
24
|
-h, --help 展示当前命令的信息
|
|
25
25
|
```
|
|
26
26
|
|
|
27
|
-
Modern.js Module 支持 `platform` 构建模式,可以用于执行其他工具的构建任务,目前官方支持的有 [Rspress](https://rspress.
|
|
27
|
+
Modern.js Module 支持 `platform` 构建模式,可以用于执行其他工具的构建任务,目前官方支持的有 [Rspress](https://rspress.rs/)。例如,可以通过执行 `modern build --platform` 命令启动 doc 构建任务生成 doc 产物。
|
|
28
28
|
|
|
29
29
|
## `modern new`
|
|
30
30
|
|
|
@@ -66,7 +66,7 @@ Commands:
|
|
|
66
66
|
|
|
67
67
|
Modern.js Module 提供了使用调试工具的能力,可以通过 `modern dev` 命令来启动。不过要注意的是,默认情况下是没有提供调试相关的插件,因此此时执行 `modern dev` 会提示: _"No dev tools found available"_。
|
|
68
68
|
|
|
69
|
-
目前官方支持的调试工具有 [Rspress](https://rspress.
|
|
69
|
+
目前官方支持的调试工具有 [Rspress](https://rspress.rs/),因此在你执行 `modern new` 命令开启它后,就可以执行 `modern dev` 或者 `modern dev doc` 执行它。
|
|
70
70
|
|
|
71
71
|
## `modern change`
|
|
72
72
|
|
|
@@ -17,7 +17,7 @@ sidebar_position: 5
|
|
|
17
17
|
### 前置准备
|
|
18
18
|
|
|
19
19
|
1. 通过[微生成器](/guide/basic/use-micro-generator)开启文档功能。
|
|
20
|
-
2. 阅读[Rspress 介绍](https://rspress.
|
|
20
|
+
2. 阅读[Rspress 介绍](https://rspress.rs/zh/guide/start/introduction.html)。
|
|
21
21
|
|
|
22
22
|
完成准备工作之后,接下来我们会基于 Rspress 为模块项目搭建一个文档站点。
|
|
23
23
|
|
|
@@ -25,7 +25,7 @@ sidebar_position: 5
|
|
|
25
25
|
|
|
26
26
|
站点整体布局由三部分组成:导航栏、侧边栏以及正文部分,其中正文还包括了 TOC(Table of contents found at the beginning of a book or document)。
|
|
27
27
|
|
|
28
|
-
Rspress 使用的是[文件系统路由](https://rspress.
|
|
28
|
+
Rspress 使用的是[文件系统路由](https://rspress.rs/zh/guide/basic/conventional-route.html),模块文档基于此实现了侧边栏的自动生成。
|
|
29
29
|
例如,如果你有以下的文件结构:
|
|
30
30
|
|
|
31
31
|
```bash
|
|
@@ -55,7 +55,7 @@ docs
|
|
|
55
55
|
### 配置侧边栏
|
|
56
56
|
|
|
57
57
|
如上图所示,模块文档已经为文件系统路由自动生成了侧边栏,其中侧边栏每一栏的文本是由文件的一级标题或者目录名决定。
|
|
58
|
-
如果你需要自定义侧边栏,请使用 [\_meta.json](https://rspress.
|
|
58
|
+
如果你需要自定义侧边栏,请使用 [\_meta.json](https://rspress.rs/zh/guide/basic/auto-nav-sidebar.html) 或者直接配置 [sidebar](https://rspress.rs/zh/api/config/config-theme.html#sidebar)。
|
|
59
59
|
|
|
60
60
|
:::info
|
|
61
61
|
如果你的文档目录结构是符合国际化的,例如:
|
|
@@ -70,15 +70,15 @@ docs
|
|
|
70
70
|
├── index.mdx
|
|
71
71
|
```
|
|
72
72
|
|
|
73
|
-
你需要按照[国际化](https://rspress.
|
|
73
|
+
你需要按照[国际化](https://rspress.rs/zh/guide/default-theme/i18n.html)章节,同时配置 `lang` 和 `locales`,否则模块自动生成的侧边栏不会处理 `zh` 和 `en` 这两个目录。
|
|
74
74
|
:::
|
|
75
75
|
|
|
76
76
|
## 编写文档
|
|
77
77
|
|
|
78
78
|
接下来我们可以专注于文档内容的编写了。除了最基本的编写 markdown 以外,你可能还需要了解以下进阶内容:
|
|
79
79
|
|
|
80
|
-
- [使用 MDX](https://rspress.
|
|
81
|
-
- [使用静态资源](https://rspress.
|
|
80
|
+
- [使用 MDX](https://rspress.rs/zh/guide/basic/use-mdx.html)
|
|
81
|
+
- [使用静态资源](https://rspress.rs/zh/guide/basic/static-assets.html)
|
|
82
82
|
|
|
83
83
|
## 组件预览
|
|
84
84
|
|
|
@@ -351,7 +351,7 @@ API 解析工具
|
|
|
351
351
|
|
|
352
352
|
### doc
|
|
353
353
|
|
|
354
|
-
[文档框架配置](https://rspress.
|
|
354
|
+
[文档框架配置](https://rspress.rs/zh/api/index.html)
|
|
355
355
|
|
|
356
356
|
### entries
|
|
357
357
|
|
|
@@ -429,14 +429,14 @@ type ParseToolOptions = {
|
|
|
429
429
|
### deprecated: languages
|
|
430
430
|
|
|
431
431
|
:::warning
|
|
432
|
-
从 MAJOR_VERSION.44.0 版本开始,请参考 [国际化](https://rspress.
|
|
432
|
+
从 MAJOR_VERSION.44.0 版本开始,请参考 [国际化](https://rspress.rs/zh/guide/default-theme/i18n.html) 章节来实现多语言。
|
|
433
433
|
:::
|
|
434
434
|
|
|
435
435
|
### deprecated: useModuleSidebar
|
|
436
436
|
|
|
437
437
|
:::warning
|
|
438
|
-
从 MAJOR_VERSION.44.0 版本开始,内部实现了嗅探机制,请直接使用 [\_meta.json](https://rspress.
|
|
439
|
-
或者直接配置 [sidebar](https://rspress.
|
|
438
|
+
从 MAJOR_VERSION.44.0 版本开始,内部实现了嗅探机制,请直接使用 [\_meta.json](https://rspress.rs/zh/guide/basic/auto-nav-sidebar.html)
|
|
439
|
+
或者直接配置 [sidebar](https://rspress.rs/zh/api/config/config-theme.html#sidebar) 来实现自定义侧边栏。
|
|
440
440
|
:::
|
|
441
441
|
|
|
442
442
|
## 命令行
|
|
@@ -446,7 +446,7 @@ type ParseToolOptions = {
|
|
|
446
446
|
|
|
447
447
|
## 进阶指南
|
|
448
448
|
|
|
449
|
-
以上已经介绍完了开发模块文档的基本内容,但是这对于开发一个完整的文档站是不够的。查看[Rspress](https://rspress.
|
|
449
|
+
以上已经介绍完了开发模块文档的基本内容,但是这对于开发一个完整的文档站是不够的。查看[Rspress](https://rspress.rs)以深入了解我们的文档框架。
|
|
450
450
|
你可以通过 `doc` 配置来修改文档框架配置。
|
|
451
451
|
|
|
452
452
|
```ts title="modern.config.ts"
|
|
@@ -130,7 +130,7 @@ export default config;
|
|
|
130
130
|
- **类型**: `BuilderConfig`
|
|
131
131
|
- **默认值**: `undefined`
|
|
132
132
|
|
|
133
|
-
Modern.js 的 Storybook 构建能力由 [Rsbuild](https://rsbuild.
|
|
133
|
+
Modern.js 的 Storybook 构建能力由 [Rsbuild](https://rsbuild.rs/) 提供,可通过 builderConfig 修改 Rsbuild 构建配置。
|
|
134
134
|
|
|
135
135
|
```javascript filename='.storybook/main.js'
|
|
136
136
|
const config = {
|
|
@@ -27,11 +27,11 @@ ERR! Error: Cannot find module 'react-dom/package.json'
|
|
|
27
27
|
|
|
28
28
|
解决办法:在项目中安装 `react-dom` 依赖。
|
|
29
29
|
|
|
30
|
-
```
|
|
30
|
+
```json
|
|
31
31
|
{
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
32
|
+
"devDependencies": {
|
|
33
|
+
"react-dom": "^17"
|
|
34
|
+
}
|
|
35
35
|
}
|
|
36
36
|
```
|
|
37
37
|
|
|
@@ -43,18 +43,19 @@ ERR! Error: Cannot find module 'react-dom/package.json'
|
|
|
43
43
|
2. 找到 `var _await$Promise$all = await Promise.all([preview, manager` 这附近的代码。
|
|
44
44
|
3. 修改成:
|
|
45
45
|
|
|
46
|
-
```
|
|
46
|
+
```js
|
|
47
47
|
var _await$Promise$all = await Promise.all([
|
|
48
48
|
preview.catch(e => console.info(e)),
|
|
49
49
|
manager // TODO #13083 Restore this when compiling the preview is fast enough
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
50
|
+
// .then((result) => {
|
|
51
|
+
// if (!options.ci && !options.smokeTest) openInBrowser(address);
|
|
52
|
+
// return result;
|
|
53
|
+
// })
|
|
54
|
+
.catch(previewBuilder.bail),
|
|
55
|
+
]),
|
|
56
|
+
_await$Promise$all2 = _slicedToArray(_await$Promise$all, 2),
|
|
57
|
+
previewResult = _await$Promise$all2[0],
|
|
58
|
+
managerResult = _await$Promise$all2[1]; // TODO #13083 Remove this when compiling the preview is fast enough
|
|
58
59
|
```
|
|
59
60
|
|
|
60
61
|
## Couldn't find any stories is your Storybook
|
|
@@ -69,36 +70,39 @@ Storybook 没有提供相关方案,不过 Storybook Issue 中有找到相关
|
|
|
69
70
|
|
|
70
71
|
1. 添加 `.storybook/middleware.js` 文件,并初始化下面的内容:
|
|
71
72
|
|
|
72
|
-
```
|
|
73
|
+
```js
|
|
73
74
|
/* eslint-disable filenames/match-exported */
|
|
74
75
|
module.exports = function expressMiddleware(router) {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
76
|
+
// router is express router
|
|
77
|
+
// import { Router } from 'express'
|
|
78
|
+
// router = new Router();
|
|
78
79
|
};
|
|
79
80
|
```
|
|
80
81
|
|
|
81
82
|
2. 添加 http-proxy-middleware 依赖
|
|
82
83
|
3. 添加代理路由相关配置
|
|
83
84
|
|
|
84
|
-
```
|
|
85
|
+
```js
|
|
85
86
|
/* eslint-disable filenames/match-exported */
|
|
86
|
-
const { createProxyMiddleware } = require(
|
|
87
|
+
const { createProxyMiddleware } = require('http-proxy-middleware');
|
|
87
88
|
|
|
88
|
-
module.exports = function expressMiddleware
|
|
89
|
-
router.use(
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
89
|
+
module.exports = function expressMiddleware(router) {
|
|
90
|
+
router.use(
|
|
91
|
+
'/api',
|
|
92
|
+
createProxyMiddleware({
|
|
93
|
+
target: 'http://localhost:8000',
|
|
94
|
+
changeOrigin: true,
|
|
95
|
+
}),
|
|
96
|
+
);
|
|
97
|
+
};
|
|
94
98
|
```
|
|
95
99
|
|
|
96
100
|
相关 issue 链接:[#11551](https://github.com/storybookjs/storybook/issues/11551)。
|
|
97
101
|
|
|
98
102
|
## Tailwind CSS 在 Storybook 中不生效
|
|
99
103
|
|
|
100
|
-
Modern.js Module 的 Storybook 构建能力由 [Rsbuild](https://rsbuild.
|
|
104
|
+
Modern.js Module 的 Storybook 构建能力由 [Rsbuild](https://rsbuild.rs/) 提供,由于 Rsbuild 的底层实现与 Modern.js Module 并未打通,因此, Modern.js Module 插件无法在 Storybook (Rsbuild) 中生效。
|
|
101
105
|
|
|
102
106
|
解决办法:需要在 storybook 中单独注册 tailwindcss 的 PostCSS 插件。
|
|
103
107
|
|
|
104
|
-
参考链接:[Rsbuild - tailwindcss](https://rsbuild.
|
|
108
|
+
参考链接:[Rsbuild - tailwindcss](https://rsbuild.rs/zh/guide/basic/tailwindcss#%E9%85%8D%E7%BD%AE-postcss)。
|
|
@@ -8,7 +8,7 @@ sidebar_position: 3
|
|
|
8
8
|
|
|
9
9
|
我们不再推荐创建新的 Modern.js Module 项目,因为我们已经基于 Rsbuild 开发了 Rslib,它是下一代的 Library 开发工具,将提供更好的构建性能和插件生态,你可以参考 [Rslib 仓库](https://github.com/web-infra-dev/rslib) 了解更多信息。
|
|
10
10
|
|
|
11
|
-
Modern.js 后续将专注于构建一流的全栈 React 框架,Modern.js Module 会被逐渐废弃。我们已经为 Modern.js Module 项目提供了 [迁移指南](https://
|
|
11
|
+
Modern.js 后续将专注于构建一流的全栈 React 框架,Modern.js Module 会被逐渐废弃。我们已经为 Modern.js Module 项目提供了 [迁移指南](https://rslib.rs/guide/migration/modernjs-module),你可以参考该指南将 Modern.js Module 项目迁移到 Rslib。
|
|
12
12
|
|
|
13
13
|
Modern.js Module 的 npm 包和文档将继续保持可用,我们不再向 Modern.js Module 添加新功能,但会提供必要的 bug fixes。
|
|
14
14
|
|