@modern-js/module-tools-docs 2.0.0-beta.4 → 2.0.1

package/docs/zh/guide/basic/command-preview.md

@@ -1,10 +1,14 @@
+---
+sidebar_position: 2
+---
+
 # 命令预览
 
 模块工程项目可以使用的命令：
 
 ## `modern build`
 
-``` bash
+```bash
 Usage: modern build [options]
 
 构建模块命令
@@ -34,7 +38,7 @@ Options:
 
 ## `modern new`
 
-``` bash
+```bash
 Usage: modern new [options]
 
 模块化工程方案中执行生成器
@@ -59,7 +63,7 @@ Options:
 
 ## `modern dev`
 
-``` bash
+```bash
 Usage: modern dev [options]
 
 本地开发命令
@@ -71,24 +75,24 @@ Commands:
 [dev-tools-subCommand]
 ```
 
-模块工程解决方案提供了使用调试工具的能力，可以通过 `modern dev` 命令来启动。不过要注意的是，默认情况下是没有提供调试相关的插件，因此此时执行 `modern dev` 会提示： *"No dev tools found available"*。
+模块工程解决方案提供了使用调试工具的能力，可以通过 `modern dev` 命令来启动。不过要注意的是，默认情况下是没有提供调试相关的插件，因此此时执行 `modern dev` 会提示： _"No dev tools found available"_。
 
 目前官方支持的调试工具有 [Storybook](https://storybook.js.org/)，因此在你执行 `modern new` 命令开启它后，就可以执行 `modern dev` 或者 `modern dev storybook` 执行它。
 
 ## `modern test`
 
-``` bash
+```bash
 Usage: modern test [options]
 
 Options:
   -h, --help  display help for command
 ```
-`modern test` 命令会自动将 `src/tests/*.test.(js|ts|jsx|tsx)` 文件当做测试用例运行。
 
+`modern test` 命令会自动将 `src/tests/*.test.(js|ts|jsx|tsx)` 文件当做测试用例运行。
 
 ## `modern lint`
 
-``` bash
+```bash
 Usage: modern lint [options] [...files]
 
 lint and fix source files
@@ -104,7 +108,7 @@ Options:
 
 ## `modern change`
 
-``` bash
+```bash
 Usage: modern change [options]
 
 创建变更集
@@ -119,7 +123,7 @@ Options:
 
 ## `modern pre`
 
-``` bash
+```bash
 Usage: modern pre [options] <enter|exit> [tag]
 
 进入和退出预发布模式
@@ -132,7 +136,7 @@ Options:
 
 ## `modern bump`
 
-``` bash
+```bash
 Usage: modern bump [options]
 
 使用变更集自动更新发布版本和变更日志
@@ -148,7 +152,7 @@ Options:
 
 ## `modern release`
 
-``` bash
+```bash
 Usage: modern release [options]
 
 发布 npm 包
@@ -166,7 +170,7 @@ Options:
 
 ## `modern gen-release-note`
 
-``` bash
+```bash
 Usage: modern gen-release-note [options]
 
 根据当前仓库 changeset 信息生成 Release Note
@@ -185,7 +189,7 @@ Options:
 
 ## `modern upgrade`
 
-``` bash
+```bash
 Usage: modern upgrade [options]
 
 升级 Modern.js 到最新版本

package/docs/zh/guide/basic/modify-output-product.md

@@ -1,10 +1,14 @@
+---
+sidebar_position: 3
+---
+
 # 修改输出产物
 
 ## 默认输出产物
 
 当在初始化的项目里使用 `modern build` 命令的时候，会根据 Module Tools 默认支持的配置生成相应的产物。默认支持的配置具体如下：
 
-``` typescript
+```typescript
 import { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
@@ -20,8 +24,9 @@ export default defineConfig({
 - 产物输出根目录为项目下的 `dist` 目录，类型文件输出的目录为 `dist/types`。
 
 :::tip
+
 1. 所谓“代码语法支持到 ES6”的意思是指：产物代码所支持的语法不会超过 `ES6`。如果源码中使用语法是 `ES6` 以上的语法（例如 `ES2017`），则会被进行转换。
-:::
+   :::
 
 看到这里你可能会有以下疑问：
 
@@ -56,8 +61,8 @@ export default defineConfig({
 
 例如，如果使用预设函数的形式达到预设字符串 `"npm-library-es2017"` 同样的效果，可以按照如下的方式：
 
-``` typescript
-import { defineConfig } from "@modern-js/module-tools";
+```typescript
+import { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
   buildPreset({ preset }) {
@@ -69,6 +74,7 @@ export default defineConfig({
 ```
 
 在上面的代码实现中，`preset.NPM_LIBRARY` 与预设字符串 `"npm-library"` 是相对应的，它代表着 `"npm-library"` 等价的多组构建相关的配置。我们通过 `map` 方法遍历了 `NPM_LIBRARY` 这个数组，在这个数组中包含了多个 `buildConfig` 对象。我们将原本的 `buildConfig` 对象进行了浅拷贝并修改了浅拷贝后得到 `buildConfig.target`，将它指定为 `es2017`。
+
 > 关于 `preset.NPM_LIBRARY` 具体对应的值，可以通过 [BuildPreset API](/zh/api/build-config) 查看。在 `preset` 对象下不仅包含了 `NPM_LIBRARY`，还包含了其他类似的常量。
 
 那么这里的 `buildConfig` 对象是什么呢？之前提到的构建产物特点又是根据什么呢？
@@ -77,7 +83,7 @@ export default defineConfig({
 
 ## 构建配置（对象）
 
-**`buildConfig` 是一个用来描述如何编译、生成构建产物的配置对象**。在最开始提到的关于“*构建产物的特点*”，其实都是 `buildConfig` 所支持的属性。目前所支持的属性覆盖了大部分模块类型项目在构建产物时的需求，`buildConfig` 不仅包含一些产物所具备的属性，也包含了构建产物所需要的一些特性功能。接下来从分类的角度简单罗列一下：
+**`buildConfig` 是一个用来描述如何编译、生成构建产物的配置对象**。在最开始提到的关于“_构建产物的特点_”，其实都是 `buildConfig` 所支持的属性。目前所支持的属性覆盖了大部分模块类型项目在构建产物时的需求，`buildConfig` 不仅包含一些产物所具备的属性，也包含了构建产物所需要的一些特性功能。接下来从分类的角度简单罗列一下：
 
 **构建产物的基本属性包括：**
 
@@ -87,7 +93,7 @@ export default defineConfig({
 - 产物类型文件如何处理，对应的 API 是 [`buildConfig.dts`](/zh/api/build-config#dts)。
 - 产物的 sourceMap 如何处理：对应的 API 是 [`buildConfig.sourceMap`](/zh/api/build-config#sourcemap)。
 - 产物对应的输入（或者是源文件）：对应的 API 是 [`buildConfig.input`](/zh/api/build-config#input)。
-- 产物输出的目录：对应的 API 是 [`buildConfig.outdir`](/zh/api/build-config#outdir)。
+- 产物输出的目录：对应的 API 是 [`buildConfig.outDir`](/zh/api/build-config#outDir)。
 - 构建的源码目录：对应的 API 是 [`buildConfig.sourceDir`](/zh/api/build-config#sourcedir)。
 
 **构建产物所需的常用功能包括：**
@@ -95,8 +101,8 @@ export default defineConfig({
 - 别名：对应的 API 是 [`buildConfig.alias`](/zh/api/build-config#alias)。
 - 静态资源处理：对应的 API 是 [`buildConfig.asset`](/zh/api/build-config#asset)。
 - 第三方依赖处理：对应的 API 有：
-  * [`buildConfig.autoExternal`](/zh/api/build-config#autoexternal)。
-  * [`buildConfig.externals`](/zh/api/build-config#externals)。
+  - [`buildConfig.autoExternal`](/zh/api/build-config#autoexternal)。
+  - [`buildConfig.externals`](/zh/api/build-config#externals)。
 - 拷贝：对应的 API 是 [`buildConfig.copy`](/zh/api/build-config#copy)。
 - 全局变量替换：对应的 API 是 [`buildConfig.define`](/zh/api/build-config#define)。
 - 指定 [JSX](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) 编译方式，对应的 API 是 [`buildConfig.jsx`](/zh/api/build-config#jsx)。
@@ -107,24 +113,25 @@ export default defineConfig({
 - 代码分割：[`buildConfig.spitting`](/zh/api/build-config#splitting)
 - 指定构建产物用于 NodeJS 环境还是浏览器环境：对应的 API 是 [`buildConfig.platform`](/zh/api/build-config#platform)。
 - umd 产物相关：
-  * 指定 umd 产物外部导入的全局变量：对应的 API 是 [`buildConfig.umdGlobals`](/zh/api/build-config#umdglobals)。
-  * 指定 umd 产物的模块名：对应的 API 是 [`buildConfig.umdModuleName`](/zh/api/build-config#umdmodulename)。
+  - 指定 umd 产物外部导入的全局变量：对应的 API 是 [`buildConfig.umdGlobals`](/zh/api/build-config#umdglobals)。
+  - 指定 umd 产物的模块名：对应的 API 是 [`buildConfig.umdModuleName`](/zh/api/build-config#umdmodulename)。
 
 除了以上分类以外，关于这些 API 的常见问题和最佳实践可以通过下面的链接来了解，敬请期待。
-* [什么是 `bundle` 和 `bundleless`?](/zh/guide/advance/in-depth-about-build#bundle-和-bundleless)
-* [`input` 与 `sourceDir` 的关系](/zh/guide/advance/in-depth-about-build#input-与-sourcedir-的关系)。
-* [产物中类型文件的多种生成方式](/zh/guide/advance/in-depth-about-build#类型文件)。
-* [`buildConfig.define` 不同场景的使用方式。](/zh/guide/advance/in-depth-about-build#buildconfigdefine-不同场景的使用方式)
-* [如何处理第三方依赖？](/zh/guide/advance/external-dependency)
-* [如何使用拷贝？](/zh/guide/advance/copy)
-* [如何构建 umd 产物？](/zh/guide/advance/build-umd#设置项目的全局变量名称)
-* [静态资源目前所支持的能力。](/zh/guide/advance/asset)
+
+- [什么是 `bundle` 和 `bundleless`?](/zh/guide/advance/in-depth-about-build#bundle-和-bundleless)
+- [`input` 与 `sourceDir` 的关系](/zh/guide/advance/in-depth-about-build#input-与-sourcedir-的关系)。
+- [产物中类型文件的多种生成方式](/zh/guide/advance/in-depth-about-build#类型文件)。
+- [`buildConfig.define` 不同场景的使用方式。](/zh/guide/advance/in-depth-about-build#buildconfigdefine-不同场景的使用方式)
+- [如何处理第三方依赖？](/zh/guide/advance/external-dependency)
+- [如何使用拷贝？](/zh/guide/advance/copy)
+- [如何构建 umd 产物？](/zh/guide/advance/build-umd#设置项目的全局变量名称)
+- [静态资源目前所支持的能力。](/zh/guide/advance/asset)
 
 ## 什么时候使用 `buildConfig`
 
 `buildConfig` 是用于修改产物的方式之一，**当与 `buildPreset` 配置同时存在的时候，只有 `buildConfig` 才会生效**。因此如果按照如下方式配置：
 
-``` typescript
+```typescript
 import { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
@@ -135,10 +142,10 @@ export default defineConfig({
 
 那么此时就会看到如下提示：
 
-``` bash
+```bash
 因为同时出现 'buildConfig' 和 'buildPreset' 配置，因此仅 'buildConfig' 配置生效
 ```
 
 `buildPreset` 代表的一组或者多组构建相关的配置都是由 `buildConfig` 组成，**当使用 `buildPreset` 无法满足当前项目需求的时候，就可以使用 `buildConfig` 来自定义输出产物**。
 
-在使用 `buildConfig` 的过程，就是对“*获得怎样的构建产物*”的思考过程。
+在使用 `buildConfig` 的过程，就是对“_获得怎样的构建产物_”的思考过程。

package/docs/zh/guide/basic/publish-your-project.md

@@ -1,26 +1,30 @@
+---
+sidebar_position: 7
+---
+
 # 版本管理与发布
 
 一个 npm 类型的模块项目发布流程包含了两个阶段：
 
-* 第一阶段是在开发期间，开发者需要提供一个变更文件来记录需要发布的变动；
-* 第二阶段是在发布期间，Module Tools 可以收集所有的变更文件来更新版本、更新发布日志，并发布新的包到 [npm Registry](https://www.npmjs.com/) 上。
+- 第一阶段是在开发期间，开发者需要提供一个变更文件来记录需要发布的变动；
+- 第二阶段是在发布期间，Module Tools 可以收集所有的变更文件来更新版本、更新发布日志，并发布新的包到 [npm Registry](https://www.npmjs.com/) 上。
 
 ## 跟踪变更
 
 **当项目发生变化的时候需要将变化的内容记录下来**。项目发生的变化一般是指：
 
-* 新功能
-* 修复问题
-* 配置文件修改
-* ...
+- 新功能
+- 修复问题
+- 配置文件修改
+- ...
 
 当这些变化一旦完成后，需要通过以下命令来对当前的变化进行记录：
 
-* [`modern change`](/zh/guide/command-preview#modern-change)
+- [`modern change`](/zh/guide/command-preview#modern-change)
 
 执行 `modern change` 命令后会向开发者提出几个问题，并根据开发者的回答生成变更记录。变更记录文件包含了版本变化的类型和其描述，该文件会被提交到 git 仓库中。
 
-``` bash
+```bash
 $ npx modern change
 🦋  What kind of change is this for module-example? (current version is 0.1.0) · patch
 🦋  Please enter a summary for this change (this will be in the changelogs). Submit empty line to open external editor
@@ -37,9 +41,9 @@ $ npx modern change
 
 当执行成功后，生成的包含变更记录的 Markdown 文件会保存在项目的 `.changeset` 目录下面。其内容类似下面这样：
 
-``` markdown .changeset/brave-dryers-agree.md
+```markdown .changeset/brave-dryers-agree.md
 ---
-"module-example": patch
+'module-example': patch
 ---
 
 publish test
@@ -49,14 +53,15 @@ publish test
 
 当需要更新项目版本的时候，执行以下命令：
 
-* [`modern bump`](/zh/guide/command-preview#modern-bump)
+- [`modern bump`](/zh/guide/command-preview#modern-bump)
 
 执行 `modern bump` 将会基于 `.changeset/` 目录下记录了变更的 Markdown 文件内容来修改 `package.json` 中的版本号，同时生成 `CHANGELOG.md` 文件。**而当版本更新完成后，这些记录变更的 Markdown 文件也会被删除，也可说这些 Markdown 文件被“消耗”掉了**。
 
-``` markdown CHANGELOG.md
+```markdown CHANGELOG.md
 # module
 
 ## 0.1.1
+
 ### Patch Changes
 
 - publish test
@@ -66,13 +71,13 @@ publish test
 
 发布项目可以执行以下命令：
 
-* [`modern publish`](/zh/guide/command-preview#modern-release)
+- [`modern publish`](/zh/guide/command-preview#modern-release)
 
 `modern release` 命令可以将项目发布到 npm Registry。
 
 此时发布的是 `latest` 版本，也可以说是正式版本。如果想要修改 `dist-tag`，可以通过 `modern release --tag` 命令来指定。例如：
 
-``` bash
+```bash
 modern release --tag beta
 ```
 
@@ -84,11 +89,11 @@ modern release --tag beta
 
 当需要在正式发布之前进行预发布，则需要执行以下命令：
 
-* [`modern pre`](/zh/guide/command-preview#modern-pre)
+- [`modern pre`](/zh/guide/command-preview#modern-pre)
 
 首先 `modern pre enter <tag>` 进入预发布模式，`<tag>` 可以与发布项目的时候使用 `modern release --tag` 命令指定的 `tag` 一致。
 
-``` bash
+```bash
 $ npx modern pre enter next
 🦋  success Entered pre mode with tag next
 🦋  info Run `changeset version` to version packages with prerelease versions
@@ -97,7 +102,7 @@ $ npx modern pre enter next
 
 接着可以使用 `modern bump` 命令更新具体的版本号，**此时不会真正的“消耗”记录变更的 Markdown 文件**：
 
-``` bash
+```bash
 $ npx modern bump
 🦋  warn ===============================IMPORTANT!===============================
 🦋  warn You are in prerelease mode

package/docs/zh/guide/basic/test-your-project.mdx

@@ -1,3 +1,7 @@
+---
+sidebar_position: 6
+---
+
 # 测试项目
 
 本章将要介绍如何测试可复用模块。
@@ -6,20 +10,19 @@
 
 想要使用项目的测试功能，需要确保项目中包含以下依赖：
 
-* `"@modern-js/plugin-testing"`
+- `"@modern-js/plugin-testing"`
 
 在模块工程方案中，对于测试用例或者说编写测试的文件有如下约定：
 
-* 项目目录下的 `tests` 目录为测试用例和测试文件的目录，**不支持更改运行测试用例的目录**。
-* 默认会自动将后缀为 `.test.[tj]sx?` 的文件识别为测试文件。
-* 其他的 `.[tj]sx?` 后缀的文件被识别为普通的文件，可以用于测试的 `utils` 文件或者其他用途。
-
+- 项目目录下的 `tests` 目录为测试用例和测试文件的目录，**不支持更改运行测试用例的目录**。
+- 默认会自动将后缀为 `.test.[tj]sx?` 的文件识别为测试文件。
+- 其他的 `.[tj]sx?` 后缀的文件被识别为普通的文件，可以用于测试的 `utils` 文件或者其他用途。
 
 ## 运行测试
 
 当准备好了依赖以及了解了测试用例在哪里编写后，我们可以通过以下命令来执行测试：
 
-``` bash
+```bash
 modern test
 
 // 更新 snapshot
@@ -28,13 +31,14 @@ modern test --updateSnapshot
 
 执行之后，会看到测试的结果：
 
-![test-result](/test-result.png)
+![test-result](https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/test-result.png)
 
 ## 使用配置
 
+/obj/eden-cn/uhbfnupenuhf/test-result.png
 模块工程方案对测试提供了以下配置：
 
-* [`testing`](/zh/api/config-test)
+- [`testing`](/zh/api/config-test)
 
 可以在 `modern.config.(j|t)s` 中增加它。
 
@@ -46,7 +50,7 @@ modern test --updateSnapshot
 
 <CH.Spotlight>
 
-``` typescript ./src/index.ts
+```typescript ./src/index.ts
 export default function () {
   return 'hello world';
 }
@@ -56,7 +60,7 @@ export default function () {
 
 首先是模块的代码。
 
-``` typescript ./src/index.ts
+```typescript ./src/index.ts
 export default function () {
   return 'hello world';
 }
@@ -68,7 +72,7 @@ export default function () {
 
 其中 `@` 指向了源码目录，在初始化项目的 `tests/tsconfig.json` 中定义了。
 
-``` typescript ./tests/index.test.ts
+```typescript ./tests/index.test.ts
 import main from '@/index';
 
 describe('默认值 cases', () => {
@@ -84,7 +88,7 @@ describe('默认值 cases', () => {
 
 最后我们可以执行 `modern test`。
 
-``` bash
+```bash
 pnpm test
 ## or
 yarn test
@@ -104,7 +108,7 @@ npm run test
 
 <CH.Spotlight>
 
-``` tsx ./src/index.tsx
+```tsx ./src/index.tsx
 export const default () {
   return (
     <div>This is a UI Component</div>
@@ -116,7 +120,7 @@ export const default () {
 
 首先是组件的代码。
 
-``` tsx ./src/index.tsx
+```tsx ./src/index.tsx
 export const default () {
   return (
     <div>This is a UI Component</div>
@@ -130,7 +134,7 @@ export const default () {
 
 其中 `@` 指向了源码目录，在初始化项目的 `tests/tsconfig.json` 中定义了。
 
-``` tsx ./tests/index.test.tsx
+```tsx ./tests/index.test.tsx
 import { render, screen } from '@modern-js/runtime/testing';
 
 import Component from '@/index';
@@ -147,7 +151,7 @@ describe('默认值 cases', () => {
 
 最后我们可以执行 `modern test`。
 
-``` bash
+```bash
 pnpm test
 ## or
 yarn test

package/docs/zh/guide/basic/use-micro-generator.md

@@ -1,10 +1,14 @@
+---
+sidebar_position: 4
+---
+
 # 使用微生成器
 
 模块工程解决方案提供了微生成器工具，它可以为当前项目：
 
-* 新增目录和文件
-* 修改 `package.json` 文件内容
-* 执行命令
+- 新增目录和文件
+- 修改 `package.json` 文件内容
+- 执行命令
 
 因此通过这些能力，**微生成器可以为项目开启额外的特性功能**。
 
@@ -16,8 +20,8 @@
 
 关于如何启动 Storybook 以及如何使用 Storybook，可以查看下面的链接：
 
-* [`modern dev`](/zh/guide/command-preview#modern-dev)
-* [使用 Storybook](/zh/guide/using-storybook)
+- [`modern dev`](/zh/guide/command-preview#modern-dev)
+- [使用 Storybook](/zh/guide/using-storybook)
 
 ## Tailwind CSS 支持
 
@@ -25,8 +29,7 @@
 
 关于如何在模块工程里使用 Tailwind CSS，可以查看：
 
-* [使用 Tailwind CSS](xxx)
-
+- [使用 Tailwind CSS](xxx)
 
 ## 启动 Modern.js Runtime API
 

package/docs/zh/guide/basic/using-storybook.mdx

@@ -1,17 +1,21 @@
+---
+sidebar_position: 5
+---
+
 # 使用 Storybook
 
 首先如果没有看过以下内容的话，可以先花几分钟先了解一下：
 
-* [使用微生成器开启 Storybook 调试](/zh/guide/use-micro-generator#storybook-调试)
-* [`modern dev`](/zh/guide/command-preview#modern-dev)
+- [使用微生成器开启 Storybook 调试](/zh/guide/use-micro-generator#storybook-调试)
+- [`modern dev`](/zh/guide/command-preview#modern-dev)
 
 [Storybook](https://storybook.js.org/) 是一个专门用于组件调试的工具，围绕着组件开发提供了：
 
-* 丰富多样的调试能力
-* 可与一些测试工具结合使用
-* 可重复使用的文档内容
-* 可分享能力
-* 工作流程自动化
+- 丰富多样的调试能力
+- 可与一些测试工具结合使用
+- 可重复使用的文档内容
+- 可分享能力
+- 工作流程自动化
 
 因此它是一个复杂且功能强大的工具。
 
@@ -21,8 +25,8 @@
 
 在调试代码过程中需要引入组件代码，目前可以通过两种方式引入组件代码：
 
-* 引用组件产物
-* 引用组件源码
+- 引用组件产物
+- 引用组件源码
 
 我们更推荐使用第一种“**引用组件产物**”的方式。因为它几乎接近真实的使用场景，不仅可以对组件功能进行调试，同时也对构建产物的正确性进行了验证。
 
@@ -36,9 +40,9 @@
 
 ```json package.json
 {
-    "name": "foo",
-    "main": "./dist/index.js",
-    "types": "./dist/types/index.d.ts"
+  "name": "foo",
+  "main": "./dist/index.js",
+  "types": "./dist/types/index.d.ts"
 }
 ```
 
@@ -49,9 +53,9 @@
 
 ```json package.json
 {
-    "name": "foo",
-    "main": "./dist/index.js",
-    "types": "./dist/types/index.d.ts"
+  "name": "foo",
+  "main": "./dist/index.js",
+  "types": "./dist/types/index.d.ts"
 }
 ```
 
@@ -104,7 +108,7 @@ export default {
 
 对于 `pnpm` 的项目，可以按照下面的内容对 `package.json` 进行修改：
 
-``` ts focus=4:7
+```ts focus=4:7
 {
     "name": "foo",
     "main": "./dist/index.js",
@@ -114,17 +118,16 @@ export default {
     }
 }
 ```
+
 > 关于 pnpm 的 `publishConfig` 的使用，可以阅读下面这个[链接](https://pnpm.io/package_json#publishconfig)。
 
 而对于 npm 和 Yarn 的项目，则只能通过手动的方式在**开发阶段**和**发布阶段**对 `package.json` 的 `types` 的值进行修改。
 
-
 那么为什么可以直接引用产物呢？
 
 1. 在执行 `modern dev storybook` 命令之前，会自动执行 `modern build` 命令，保证项目构建产物的存在。
 2. 在 Storybook 内部增加了以项目名称作为别名的处理，保证能够**根据 `package.json` 解析出项目的产物路径**。
 
-
 ### 引用组件源码
 
 引用组件的源码可以通过相对路径的方式：
@@ -154,12 +157,12 @@ Storybook 官方通过一个名为 `.storybook` 的文件夹来进行项目配
 
 关于 Storybook 各种配置文件的使用方式，可以查看下面的链接：
 
-* [Configure Storybook](https://storybook.js.org/docs/react/configure/overview)
+- [Configure Storybook](https://storybook.js.org/docs/react/configure/overview)
 
 **不过在模块项目里进行 Storybook 存在一些限制**：
 
-* 目前不能修改 Story 文件存放的位置，即无法在 `main.js` 文件里修改 `stories` 配置。
-* 目前不能修改 Webpack 和 Babel 相关的配置，即无法在 `main.js` 文件里修改 `webpackFinal` 和 `babel` 配置。
+- 目前不能修改 Story 文件存放的位置，即无法在 `main.js` 文件里修改 `stories` 配置。
+- 目前不能修改 Webpack 和 Babel 相关的配置，即无法在 `main.js` 文件里修改 `webpackFinal` 和 `babel` 配置。
 
 在未来我们会考虑这些配置是否可以允许修改，不过目前为了减少不可预知的问题暂时限制使用这些配置。
 
@@ -169,18 +172,18 @@ Storybook 官方通过一个名为 `.storybook` 的文件夹来进行项目配
 
 目前可以通过该配置对 Storybook 的 webpack 配置进行修改。
 
-* [`dev.storybook.webpack`](xxx)
+- [`dev.storybook.webpack`](xxx)
 
 ### 构建 Storybook 产物
 
 除了可以对组件或者普通的模块进行 Storybook 调试，还可以通过下面的命令来执行 Storybook 的构建任务。
 
-``` bash
+```bash
 modern build --platform storybook
 ```
 
 关于 `modern build --platform` 命令可以查看：
 
-* [`modern build`](/zh/guide/command-preview#modern-build)
+- [`modern build`](/zh/guide/command-preview#modern-build)
 
 构建完成后，可以在 `dist/storybook-static` 目录看到构建产物文件。

package/docs/zh/guide/best-practices/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "最佳实践",
+  "sidebar_position": 4
+}