From f0a0e788b99959a748ab06ff9b9f21e522b5d8d5 Mon Sep 17 00:00:00 2001 From: Fy <1114550440@qq.com> Date: Tue, 31 Oct 2023 15:57:55 +0800 Subject: [PATCH] chore(doc:storybook): improve documents (#4885) --- .../docs/en/guide/advanced/storybook.md | 53 +++++++++++++------ .../docs/zh/guide/advanced/storybook.md | 44 ++++++++++----- 2 files changed, 69 insertions(+), 28 deletions(-) diff --git a/packages/document/builder-doc/docs/en/guide/advanced/storybook.md b/packages/document/builder-doc/docs/en/guide/advanced/storybook.md index 4252e425d94e..086c291ec19d 100644 --- a/packages/document/builder-doc/docs/en/guide/advanced/storybook.md +++ b/packages/document/builder-doc/docs/en/guide/advanced/storybook.md @@ -12,11 +12,11 @@ Before when using Storybook, there are various problems related to configuration You can switch between Webpack and Rspack smoothly in Modern.js builder, for those who already use Modern.js builder or Modern.js framework, you can start using Storybook with the same configurations. -## Enable Storybook +## Quick Start -### Use in Modern.js projects +### Using in Modern.js projects -#### Haven't used legacy Storybook plugin(@modern-js/plugin-storybook) +#### Not using legacy Storybook plugin(@modern-js/plugin-storybook) If your current project is already a Modern.js project and you haven't used any old version Storybook plugins, you can directly enable the Storybook feature by using the following command: @@ -36,13 +36,15 @@ This command will create a template for Storybook, including: If you are using an older version of the Storybook plugin, you can still run the command above to create templates and modify the package.json. You can also upgrade manually. -If you have made some custom configurations to Storybook in the older version, you need to move the configuration files from `root/config/storybook/` to the `root/.storybook/ directory`. +If you have made some custom configurations to Storybook in the older version, you need to move the configuration files from `root/config/storybook/` to the `root/.storybook/` directory. Specify framework as `@modern-js/storybook` in `root/.storybook/main.(j|t)s`. ```diff const config = { -+ framework: '@modern-js/storybook' ++ framework: { ++ name: '@modern-js/storybook' ++ } }; export default config; @@ -56,21 +58,27 @@ Finally, follow the official Storybook documentation to make the necessary updat Modern.js Builder only support Storybook 7, so you need to upgrade from Storybook version 6 to version 7, please follow the steps outlined in the official Storybook documentation at [storybook migrate doc](https://storybook.js.org/docs/react/migration-guide). -To install @modern-js/storybook as the framework for Storybook, if you have interest in Rspack, install `@modern-js/builder-provider-rspack`, otherwise you should install `@modern-js/builder-provider-webpack`. Rspack is super fast compared to Webpack. - ```diff filename='.storybook/main.js' const config = { - framework: '@storybook/react-webapck5', -+ framework: '@modern-js/storybook', ++ framework: { ++ name: '@modern-js/storybook' ++ }, }; export default config; ``` -The default config file is `modern.config.(j|t)s`, for the detail config, see [builder config](https://modernjs.dev/builder/guide/basic/builder-config.html). +The default config file path is `modern.config.(j|t)s`, for the detail config, see [builder config](https://modernjs.dev/builder/guide/basic/builder-config.html). If the original project includes configurations for Babel, they need to be written in the modern configuration. Most Babel configurations have already been included in Modern.js. +## Using Webpack or Rspack + +Currently, Storybook supports building with either Webpack or Rspack as the underlying bundler. Depending on your needs, install @modern-js/builder-webpack-provider or @modern-js/builder-rspack-provider. + +After installation, proceed with the corresponding [configuration](/guide/advanced/storybook#bundler). + ## Enable Rspack build Rspack is known for its fast build speed. To use Rspack as a build tool in Modern.js, you only need to configure it as follows: @@ -83,10 +91,10 @@ const config = { - bundler: 'webpack' + bundler: 'rspack' }, - typescript: { -- reactDocgen: 'react-docgen-typescript' -+ reactDocgen: 'react-docgen' - } + }, + typescript: { +- reactDocgen: 'react-docgen-typescript' ++ reactDocgen: 'react-docgen' } }; @@ -123,7 +131,7 @@ const config = { export default config; ``` -#### bundler +### bundler - **Type**: `'webpack' | 'rspack'` - **Default**: `webpack` @@ -145,7 +153,7 @@ const config = { export default config; ``` -#### builderConfig +### builderConfig - **Type**: `BuilderConfig` - **Default**: `undefined` @@ -172,7 +180,20 @@ const config = { export default config; ``` -#### ConfigFile + +## Command Line Interface + +@modern-js/storybook proxies some of the storybook cli commands. + +### storybook dev + +Start Storybook, more details at https://storybook.js.org/docs/react/api/cli-options#dev. + +### storybook build + +Build Storybook for production, more details at https://storybook.js.org/docs/react/api/cli-options#build. + +## ConfigFile The configuration file includes an additional field: `builderPlugins`, in addition to the Modern.js builder configuration. This field is used to enable builder plugins, such as enabling SWC compilation. diff --git a/packages/document/builder-doc/docs/zh/guide/advanced/storybook.md b/packages/document/builder-doc/docs/zh/guide/advanced/storybook.md index fdb12b979cfa..88269f377b0b 100644 --- a/packages/document/builder-doc/docs/zh/guide/advanced/storybook.md +++ b/packages/document/builder-doc/docs/zh/guide/advanced/storybook.md @@ -12,7 +12,7 @@ 使用 Modern.js builder 还可以一键在 Webpack 和 Rspack 之间进行切换。对于使用 Modern.js builder 开发应用的用户，也可以很方便的直接使用现有的 Modern.js 配置用 Storybook 进行组件的测试。 -## 开启 Storybook +## 快速开始 ### 在 Modern.js 项目中使用 @@ -42,7 +42,9 @@ $ npx modern new ```diff const config = { -+ framework: '@modern-js/storybook' ++ framework: { ++ name: '@modern-js/storybook' ++ }, }; export default config; @@ -56,12 +58,12 @@ export default config; 若当前 Storybook 版本还是 6，需要先按照 Storybook 官网文档升级到版本 7 ，参考[storybook 迁移文档](https://storybook.js.org/docs/react/migration-guide)。 -安装 @modern-js/storybook，作为 storybook 的 framework。若想要使用 Rspack 作为构建工具，安装 @modern-js/builder-provider-rspack，若要使用 Webpack 作为构建工具，则安装 @modern-js/builder-provider-webpack。 - ```diff filename='.storybook/main.js' const config = { - framework: '@storybook/react-webapck5', -+ framework: '@modern-js/storybook', ++ framework: { ++ name: '@modern-js/storybook' ++ }, }; export default config; @@ -71,6 +73,12 @@ Modern.js 的配置文件默认为 `modern.config.(j|t)s`，配置请查看 [bui 若原来项目中包含了 Babel 等配置，需要对应的写在 modern 配置中，大部分 Babel 配置已经包含进了 Modern.js。 +## 使用 Webpack 或 Rspack + +当前 Storybook 支持底层使用 Webpack 或是 Rspack 进行构建，根据你的需求安装 @modern-js/builder-webpack-provider 或 @modern-js/builder-rspack-provider。 + +安装完成后进行相应的[配置](/guide/advanced/storybook#bundler)。 + ## 开启 Rspack 构建 Rspack 构建速度非常快，在 Modern.js 中只需要如下配置即可使用 Rspack 作为构建工具。 @@ -83,10 +91,10 @@ const config = { - bundler: 'webpack' + bundler: 'rspack' }, - typescript: { -- reactDocgen: 'react-docgen-typescript' -+ reactDocgen: 'react-docgen' - } + }, + typescript: { +- reactDocgen: 'react-docgen-typescript' ++ reactDocgen: 'react-docgen' } }; @@ -121,7 +129,7 @@ const config = { export default config; ``` -#### bundler +### bundler - **类型**: `'webpack' | 'rspack'` - **默认值**: `webpack` @@ -142,7 +150,7 @@ const config = { export default config; ``` -#### builderConfig +### builderConfig - **类型**: `BuilderConfig` - **默认值**: `undefined` @@ -168,7 +176,19 @@ const config = { export default config; ``` -#### 配置文件 +## 命令行 + +@modern-js/storybook 代理了部分 storybook cli 的命令。 + +### storybook dev + +启动 Storybook，详情请看 https://storybook.js.org/docs/react/api/cli-options#dev。 + +### storybook build + +对 Storybook 进行生产环境构建，详情请看 https://storybook.js.org/docs/react/api/cli-options#build。 + +## 配置文件 配置文件中除了 Modern.js builder 配置还包含一个额外的字段，builderPlugins，方便使用 builder 插件，例如启用 SWC 编译。