@modern-js/module-tools-docs 2.2.0-beta.0 → 2.2.1-beta.1

package/doc_build/static/js/async/zh_guide_basic_using-storybook.js

@@ -1187,7 +1187,7 @@ const chCodeConfig = {
   "autoImport": true,
   "showCopyButton": true,
   "skipLanguages": [],
-  "filepath": "/Users/targeral/github/targeral-modern-js/website/module-tools/docs/zh/guide/basic/using-storybook.mdx"
+  "filepath": "/Users/bytedance/github/targeral/modern-dev/website/module-tools/docs/zh/guide/basic/using-storybook.mdx"
 };
 const frontmatter = {
   "sidebar_position": 5
@@ -1214,7 +1214,7 @@ const toc = [{
   "depth": 2
 }];
 const title = `使用 Storybook`;
-const content = "\"---\\nsidebar_position: 5\\n---\\n\\n# 使用 Storybook\\n\\n首先如果没有看过以下内容的话，可以先花几分钟先了解一下：\\n\\n- [使用微生成器开启 Storybook 调试](/guide/basic/use-micro-generator#storybook-调试)\\n- [`modern dev`](/guide/basic/command-preview#modern-dev)\\n\\n[Storybook](https://storybook.js.org/) 是一个专门用于组件调试的工具，围绕着组件开发提供了：\\n\\n- 丰富多样的调试能力\\n- 可与一些测试工具结合使用\\n- 可重复使用的文档内容\\n- 可分享能力\\n- 工作流程自动化\\n\\n因此它是一个复杂且功能强大的工具。\\n\\n模块工程解决方案集成了 Storybook ,因此你几乎可以按照 Storybook 官方文档的内容进行使用。不过依然有一些地方需要注意，接下来讲解一下：\\n\\n## 调试代码\\n\\n在调试代码过程中需要引入组件代码，目前可以通过两种方式引入组件代码：\\n\\n- 引用组件产物\\n- 引用组件源码\\n\\n我们更推荐使用第一种“**引用组件产物**”的方式。因为它几乎接近真实的使用场景，不仅可以对组件功能进行调试，同时也对构建产物的正确性进行了验证。\\n\\n接下来我们分别讲一下这两种方式具体如何使用。\\n\\n### 引用组件产物\\n\\n假如存在 TypeScript 项目 `foo`：\\n\\n<CH.Spotlight>\\n\\n```json package.json\\n{\\n  \\\"name\\\": \\\"foo\\\",\\n  \\\"main\\\": \\\"./dist/index.js\\\",\\n  \\\"types\\\": \\\"./dist/types/index.d.ts\\\"\\n}\\n```\\n\\n---\\n\\n确保 `package.json` 的 `main` 和 `types`\\n的值为真实的路径。\\n\\n```json package.json\\n{\\n  \\\"name\\\": \\\"foo\\\",\\n  \\\"main\\\": \\\"./dist/index.js\\\",\\n  \\\"types\\\": \\\"./dist/types/index.d.ts\\\"\\n}\\n```\\n\\n---\\n\\n`foo` 项目的源码。\\n\\n```typescript src/index.ts\\nexport const content = 'hello world';\\n```\\n\\n---\\n\\n确保在 `stories/tsconfig.json` 中设置了指向项目根目录的 `paths` 配置。\\n`paths` 的 `key` 与项目名称相同。\\n\\n```json stories/tsconfig.json focus=5:7\\n{\\n  \\\"extends\\\": \\\"../tsconfig.json\\\",\\n  \\\"compilerOptions\\\": {\\n    \\\"baseUrl\\\": \\\"../\\\",\\n    \\\"paths\\\": {\\n      \\\"foo\\\": [\\\".\\\"]\\n    }\\n  },\\n  \\\"include\\\": [\\n    \\\"**/*\\\"\\n  ]\\n}\\n```\\n\\n---\\n\\n最后在 Story 代码中直接以项目名称的方式引用。\\n\\n```tsx stories/index.stories.tsx focus=1:1\\nimport { content } from 'foo';\\n\\nconst Component = () => <div>this is a Story Component {content}</div>;\\n\\nexport const YourStory = () => <Component />;\\n\\nexport default {\\n  title: 'Your Stories',\\n};\\n```\\n\\n</CH.Spotlight>\\n\\n如果在开发过程中，遇到无法实时获得类型定义的情况，此时：\\n\\n对于 `pnpm` 的项目，可以按照下面的内容对 `package.json` 进行修改：\\n\\n```ts focus=4:7\\n{\\n    \\\"name\\\": \\\"foo\\\",\\n    \\\"main\\\": \\\"./dist/index.js\\\",\\n    \\\"types\\\": \\\"./src/index.ts\\\",\\n    \\\"publishConfig\\\": {\\n      \\\"types\\\": \\\"./dist/index.d.ts\\\",\\n    }\\n}\\n```\\n\\n> 关于 pnpm 的 `publishConfig` 的使用，可以阅读下面这个[链接](https://pnpm.io/package_json#publishconfig)。\\n\\n而对于 npm 和 Yarn 的项目，则只能通过手动的方式在**开发阶段**和**发布阶段**对 `package.json` 的 `types` 的值进行修改。\\n\\n那么为什么可以直接引用产物呢？\\n\\n1. 在执行 `modern dev storybook` 命令之前，会自动执行 `modern build` 命令，保证项目构建产物的存在。\\n2. 在 Storybook 内部增加了以项目名称作为别名的处理，保证能够**根据 `package.json` 解析出项目的产物路径**。\\n\\n### 引用组件源码\\n\\n引用组件的源码可以通过相对路径的方式：\\n\\n```ts ./stories/index.tsx\\nimport { content } from '../src';\\n\\nconst Component = () => <div>this is a Story Component {content}</div>;\\n\\nexport const YourStory = () => <Component />;\\n\\nexport default {\\n  title: 'Your Stories',\\n};\\n```\\n\\n那么为什么不推荐使用源码的方式呢？\\n\\n不仅仅是因为使用组件源码无法验证组件产物是否正确，**同时模块工程对于构建产物支持的一些配置无法完全转换为 Storybook\\n内部的配置**。如果某些配置无法进行相互转换的话，就会在 Storybook 调试过程中出现不符合预期的结果。\\n\\n## 配置 Storybook\\n\\nStorybook 官方通过一个名为 `.storybook` 的文件夹来进行项目配置，其中包含各种配置文件。**在模块工程方案中，可以在项目的 `config/storybook` 目录下增加 Storybook 配置文件。**\\n\\n关于 Storybook 各种配置文件的使用方式，可以查看下面的链接：\\n\\n- [Configure Storybook](https://storybook.js.org/docs/react/configure/overview)\\n\\n**不过在模块项目里进行 Storybook 存在一些限制**：\\n\\n- 目前不能修改 Story 文件存放的位置，即无法在 `main.js` 文件里修改 `stories` 配置。\\n- 目前不能修改 Webpack 和 Babel 相关的配置，即无法在 `main.js` 文件里修改 `webpackFinal` 和 `babel` 配置。\\n\\n在未来我们会考虑这些配置是否可以允许修改，不过目前为了减少不可预知的问题暂时限制使用这些配置。\\n\\n\\n## 构建 Storybook 产物\\n\\n除了可以对组件或者普通的模块进行 Storybook 调试，还可以通过下面的命令来执行 Storybook 的构建任务。\\n\\n```bash\\nmodern build --platform storybook\\n```\\n\\n关于 `modern build --platform` 命令可以查看：\\n\\n- [`modern build`](/guide/basic/command-preview#modern-build)\\n\\n构建完成后，可以在 `dist/storybook-static` 目录看到构建产物文件。\\n\"";
+const content = "\"---\\nsidebar_position: 5\\n---\\n\\n# 使用 Storybook\\n\\n首先如果没有看过以下内容的话，可以先花几分钟先了解一下：\\n\\n- [使用微生成器开启 Storybook 调试](/guide/basic/use-micro-generator#storybook-调试)\\n- [`modern dev`](/guide/basic/command-preview#modern-dev)\\n\\n[Storybook](https://storybook.js.org/) 是一个专门用于组件调试的工具，围绕着组件开发提供了：\\n\\n- 丰富多样的调试能力\\n- 可与一些测试工具结合使用\\n- 可重复使用的文档内容\\n- 可分享能力\\n- 工作流程自动化\\n\\n因此它是一个复杂且功能强大的工具。\\n\\n模块工程解决方案集成了 Storybook，因此你几乎可以按照 Storybook 官方文档的内容进行使用。不过依然有一些地方需要注意，接下来讲解一下。\\n\\n## 调试代码\\n\\n在调试代码过程中需要引入项目代码，目前可以通过两种方式引入项目代码：\\n\\n- 引用项目产物\\n- 引用项目源码\\n\\n我们更推荐使用第一种“**引用项目产物**”的方式。因为它更接近真实的使用场景，不仅可以对组件功能进行调试，同时也对构建产物的正确性进行了验证。\\n\\n接下来我们分别讲一下这两种方式具体如何使用。\\n\\n### 引用组件产物\\n\\n假如存在 TypeScript 项目 `foo`：\\n\\n<CH.Spotlight>\\n\\n```json package.json\\n{\\n  \\\"name\\\": \\\"foo\\\",\\n  \\\"main\\\": \\\"./dist/index.js\\\",\\n  \\\"types\\\": \\\"./dist/types/index.d.ts\\\"\\n}\\n```\\n\\n---\\n\\n确保 `package.json` 的 `main` 和 `types`\\n的值为正确的产物路径。\\n\\n```json package.json\\n{\\n  \\\"name\\\": \\\"foo\\\",\\n  \\\"main\\\": \\\"./dist/index.js\\\",\\n  \\\"types\\\": \\\"./dist/types/index.d.ts\\\"\\n}\\n```\\n\\n---\\n\\n`foo` 项目的源码。\\n\\n```typescript src/index.ts\\nexport const content = 'hello world';\\n```\\n\\n---\\n\\n确保在 `stories/tsconfig.json` 中设置了指向项目根目录的 `paths` 配置。\\n`paths` 的 `key` 与项目名称相同，这样在编译过程中以及在代码中不会出现问题。\\n\\n```json stories/tsconfig.json focus=5:7\\n{\\n  \\\"extends\\\": \\\"../tsconfig.json\\\",\\n  \\\"compilerOptions\\\": {\\n    \\\"baseUrl\\\": \\\"../\\\",\\n    \\\"paths\\\": {\\n      \\\"foo\\\": [\\\".\\\"],\\n      \\\"foo/*\\\": [\\\"./*\\\"]\\n    }\\n  },\\n  \\\"include\\\": [\\n    \\\"**/*\\\"\\n  ]\\n}\\n```\\n\\n---\\n\\n最后在 Story 代码中直接以项目名称的方式引用。\\n\\n```tsx stories/index.stories.tsx focus=1:1\\nimport { content } from 'foo';\\n\\nconst Component = () => <div>this is a Story Component {content}</div>;\\n\\nexport const YourStory = () => <Component />;\\n\\nexport default {\\n  title: 'Your Stories',\\n};\\n```\\n\\n</CH.Spotlight>\\n\\n:::info\\n在开发过程中，可能会遇到无法实时获得类型定义的情况。因为只有当保存代码后，产物目录下的类型文件才会更新。此时：\\n\\n对于 `pnpm` 的项目，可以按照下面的内容对 `package.json` 进行修改：\\n\\n```ts focus=4:7\\n{\\n    \\\"name\\\": \\\"foo\\\",\\n    \\\"main\\\": \\\"./dist/index.js\\\",\\n    \\\"types\\\": \\\"./src/index.ts\\\",\\n    \\\"publishConfig\\\": {\\n      \\\"types\\\": \\\"./dist/index.d.ts\\\",\\n    }\\n}\\n```\\n\\n> 关于 pnpm 的 `publishConfig` 的使用，可以阅读下面这个[链接](https://pnpm.io/package_json#publishconfig)。\\n\\n而对于 npm 和 Yarn 的项目，则只能通过手动的方式在**开发阶段**和**发布阶段**对 `package.json` 的 `types` 的值进行修改。\\n:::\\n\\n那么为什么可以直接引用产物呢？\\n\\n1. 在执行 `modern dev storybook` 命令之前，会自动执行 `modern build` 命令，保证项目构建产物的存在。\\n2. 在 Storybook 内部增加了针对 `tsconfig.json` 文件或者以项目名称作为别名的处理，保证能够**根据 `package.json` 解析出项目的产物路径**。\\n\\n### 引用组件源码\\n\\n引用组件的源码可以通过相对路径的方式：\\n\\n```ts ./stories/index.tsx\\nimport { content } from '../src';\\n\\nconst Component = () => <div>this is a Story Component {content}</div>;\\n\\nexport const YourStory = () => <Component />;\\n\\nexport default {\\n  title: 'Your Stories',\\n};\\n```\\n\\n那么为什么不推荐使用源码的方式呢？\\n\\n不仅仅是因为使用组件源码无法验证组件产物是否正确，**同时模块工程对于构建产物支持的一些配置无法完全转换为 Storybook\\n内部的配置**。如果某些配置无法进行相互转换的话，就会在 Storybook 调试过程中出现不符合预期的结果。\\n\\n## 配置 Storybook\\n\\nStorybook 官方通过一个名为 `.storybook` 的文件夹来进行项目配置，其中包含各种配置文件。**在模块工程方案中，可以在项目的 `config/storybook` 目录下增加 Storybook 配置文件。**\\n\\n关于 Storybook 各种配置文件的使用方式，可以查看下面的链接：\\n\\n- [Configure Storybook](https://storybook.js.org/docs/react/configure/overview)\\n\\n**不过在模块项目里进行 Storybook 存在一些限制**：\\n\\n- 目前不能修改 Story 文件存放的位置，即无法在 `main.js` 文件里修改 `stories` 配置。\\n- 目前不能修改 Webpack 和 Babel 相关的配置，即无法在 `main.js` 文件里修改 `webpackFinal` 和 `babel` 配置。\\n\\n在未来我们会考虑这些配置是否可以允许修改，不过目前为了减少不可预知的问题暂时限制使用这些配置。\\n\\n\\n## 构建 Storybook 产物\\n\\n除了可以对组件或者普通的模块进行 Storybook 调试，还可以通过下面的命令来执行 Storybook 的构建任务。\\n\\n```bash\\nmodern build --platform storybook\\n```\\n\\n关于 `modern build --platform` 命令可以查看：\\n\\n- [`modern build`](/guide/basic/command-preview#modern-build)\\n\\n构建完成后，可以在 `dist/storybook-static` 目录看到构建产物文件。\\n\"";
 function _createMdxContent(props) {
   const _components = Object.assign({
     h1: "h1",
@@ -1226,13 +1226,14 @@ function _createMdxContent(props) {
     h2: "h2",
     strong: "strong",
     h3: "h3",
+    div: "div",
     blockquote: "blockquote",
     ol: "ol"
   }, props.components);
-  if (!CH) _missingMdxReference("CH", false, "39:1-106:16");
-  if (!CH.Code) _missingMdxReference("CH.Code", true, "112:1-121:4");
+  if (!CH) _missingMdxReference("CH", false, "39:1-107:16");
+  if (!CH.Code) _missingMdxReference("CH.Code", true, "114:1-123:4");
   if (!CH.CodeSlot) _missingMdxReference("CH.CodeSlot", true);
-  if (!CH.Spotlight) _missingMdxReference("CH.Spotlight", true, "39:1-106:16");
+  if (!CH.Spotlight) _missingMdxReference("CH.Spotlight", true, "39:1-107:16");
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
     children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h1, {
       id: "使用-storybook",
@@ -1280,7 +1281,7 @@ function _createMdxContent(props) {
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
       children: "因此它是一个复杂且功能强大的工具。"
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-      children: "模块工程解决方案集成了 Storybook ,因此你几乎可以按照 Storybook 官方文档的内容进行使用。不过依然有一些地方需要注意，接下来讲解一下："
+      children: "模块工程解决方案集成了 Storybook，因此你几乎可以按照 Storybook 官方文档的内容进行使用。不过依然有一些地方需要注意，接下来讲解一下。"
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h2, {
       id: "调试代码",
       children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
@@ -1290,17 +1291,17 @@ function _createMdxContent(props) {
         children: "#"
       }), "调试代码"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-      children: "在调试代码过程中需要引入组件代码，目前可以通过两种方式引入组件代码："
+      children: "在调试代码过程中需要引入项目代码，目前可以通过两种方式引入项目代码："
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.ul, {
       children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
-        children: "引用组件产物"
+        children: "引用项目产物"
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
-        children: "引用组件源码"
+        children: "引用项目源码"
       }), "\n"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["我们更推荐使用第一种“", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.strong, {
-        children: "引用组件产物"
-      }), "”的方式。因为它几乎接近真实的使用场景，不仅可以对组件功能进行调试，同时也对构建产物的正确性进行了验证。"]
+        children: "引用项目产物"
+      }), "”的方式。因为它更接近真实的使用场景，不仅可以对组件功能进行调试，同时也对构建产物的正确性进行了验证。"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
       children: "接下来我们分别讲一下这两种方式具体如何使用。"
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h3, {
@@ -2710,6 +2711,85 @@ function _createMdxContent(props) {
                     "color": "#ECEFF4"
                   }
                 }
+              }, {
+                "content": "],",
+                "props": {
+                  "style": {
+                    "color": "#ECEFF4"
+                  }
+                }
+              }]
+            }, {
+              "tokens": [{
+                "content": "      ",
+                "props": {
+                  "style": {
+                    "color": "#D8DEE9FF"
+                  }
+                }
+              }, {
+                "content": "\"",
+                "props": {
+                  "style": {
+                    "color": "#ECEFF4"
+                  }
+                }
+              }, {
+                "content": "foo/*",
+                "props": {
+                  "style": {
+                    "color": "#8FBCBB"
+                  }
+                }
+              }, {
+                "content": "\"",
+                "props": {
+                  "style": {
+                    "color": "#ECEFF4"
+                  }
+                }
+              }, {
+                "content": ":",
+                "props": {
+                  "style": {
+                    "color": "#ECEFF4"
+                  }
+                }
+              }, {
+                "content": " ",
+                "props": {
+                  "style": {
+                    "color": "#D8DEE9FF"
+                  }
+                }
+              }, {
+                "content": "[",
+                "props": {
+                  "style": {
+                    "color": "#ECEFF4"
+                  }
+                }
+              }, {
+                "content": "\"",
+                "props": {
+                  "style": {
+                    "color": "#ECEFF4"
+                  }
+                }
+              }, {
+                "content": "./*",
+                "props": {
+                  "style": {
+                    "color": "#A3BE8C"
+                  }
+                }
+              }, {
+                "content": "\"",
+                "props": {
+                  "style": {
+                    "color": "#ECEFF4"
+                  }
+                }
               }, {
                 "content": "]",
                 "props": {
@@ -3562,7 +3642,7 @@ function _createMdxContent(props) {
             children: "main"
           }), " 和 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "types"
-          }), "\n的值为真实的路径。"]
+          }), "\n的值为正确的产物路径。"]
         }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(CH.CodeSlot, {})]
       }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
         children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
@@ -3580,403 +3660,412 @@ function _createMdxContent(props) {
             children: "paths"
           }), " 的 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "key"
-          }), " 与项目名称相同。"]
+          }), " 与项目名称相同，这样在编译过程中以及在代码中不会出现问题。"]
         }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(CH.CodeSlot, {})]
       }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
         children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
           children: "最后在 Story 代码中直接以项目名称的方式引用。"
         }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(CH.CodeSlot, {})]
       })]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-      children: "如果在开发过程中，遇到无法实时获得类型定义的情况，此时："
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
-      children: ["对于 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-        children: "pnpm"
-      }), " 的项目，可以按照下面的内容对 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-        children: "package.json"
-      }), " 进行修改："]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(CH.Code, {
-      codeConfig: chCodeConfig,
-      northPanel: {
-        "tabs": [""],
-        "active": "",
-        "heightRatio": 1
-      },
-      files: [{
-        "name": "",
-        "focus": "4:7",
-        "code": {
-          "lines": [{
-            "tokens": [{
-              "content": "{",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }]
-          }, {
-            "tokens": [{
-              "content": "    ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "\"",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": "name",
-              "props": {
-                "style": {
-                  "color": "#A3BE8C"
-                }
-              }
-            }, {
-              "content": "\"",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": ": ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "\"",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": "foo",
-              "props": {
-                "style": {
-                  "color": "#A3BE8C"
-                }
-              }
-            }, {
-              "content": "\"",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": ",",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }]
-          }, {
-            "tokens": [{
-              "content": "    ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "\"",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": "main",
-              "props": {
-                "style": {
-                  "color": "#A3BE8C"
-                }
-              }
-            }, {
-              "content": "\"",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": ": ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "\"",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": "./dist/index.js",
-              "props": {
-                "style": {
-                  "color": "#A3BE8C"
-                }
-              }
-            }, {
-              "content": "\"",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": ",",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }]
-          }, {
-            "tokens": [{
-              "content": "    ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "\"",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": "types",
-              "props": {
-                "style": {
-                  "color": "#A3BE8C"
-                }
-              }
-            }, {
-              "content": "\"",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": ": ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "\"",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": "./src/index.ts",
-              "props": {
-                "style": {
-                  "color": "#A3BE8C"
-                }
-              }
-            }, {
-              "content": "\"",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": ",",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }]
-          }, {
-            "tokens": [{
-              "content": "    ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "\"",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": "publishConfig",
-              "props": {
-                "style": {
-                  "color": "#A3BE8C"
-                }
-              }
-            }, {
-              "content": "\"",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": ": ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "{",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }]
-          }, {
-            "tokens": [{
-              "content": "      ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "\"",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": "types",
-              "props": {
-                "style": {
-                  "color": "#A3BE8C"
-                }
-              }
-            }, {
-              "content": "\"",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": ":",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": " ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "\"",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": "./dist/index.d.ts",
-              "props": {
-                "style": {
-                  "color": "#A3BE8C"
-                }
-              }
-            }, {
-              "content": "\"",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }, {
-              "content": ",",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }]
-          }, {
-            "tokens": [{
-              "content": "    ",
-              "props": {
-                "style": {
-                  "color": "#D8DEE9FF"
-                }
-              }
-            }, {
-              "content": "}",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }]
-          }, {
-            "tokens": [{
-              "content": "}",
-              "props": {
-                "style": {
-                  "color": "#ECEFF4"
-                }
-              }
-            }]
-          }],
-          "lang": "ts"
-        },
-        "annotations": []
-      }]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.blockquote, {
-      children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
-        children: ["关于 pnpm 的 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-          children: "publishConfig"
-        }), " 的使用，可以阅读下面这个", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "https://pnpm.io/package_json#publishconfig",
-          target: "_blank",
-          rel: "nofollow",
-          children: "链接"
-        }), "。"]
-      }), "\n"]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
-      children: ["而对于 npm 和 Yarn 的项目，则只能通过手动的方式在", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.strong, {
-        children: "开发阶段"
-      }), "和", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.strong, {
-        children: "发布阶段"
-      }), "对 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-        children: "package.json"
-      }), " 的 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-        children: "types"
-      }), " 的值进行修改。"]
+    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.div, {
+      className: "modern-directive info",
+      children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
+        className: "modern-directive-title",
+        children: "INFO"
+      }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.div, {
+        className: "modern-directive-content",
+        children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
+          children: "\n在开发过程中，可能会遇到无法实时获得类型定义的情况。因为只有当保存代码后，产物目录下的类型文件才会更新。此时："
+        }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
+          children: ["对于 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+            children: "pnpm"
+          }), " 的项目，可以按照下面的内容对 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+            children: "package.json"
+          }), " 进行修改："]
+        }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(CH.Code, {
+          codeConfig: chCodeConfig,
+          northPanel: {
+            "tabs": [""],
+            "active": "",
+            "heightRatio": 1
+          },
+          files: [{
+            "name": "",
+            "focus": "4:7",
+            "code": {
+              "lines": [{
+                "tokens": [{
+                  "content": "{",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }]
+              }, {
+                "tokens": [{
+                  "content": "    ",
+                  "props": {
+                    "style": {
+                      "color": "#D8DEE9FF"
+                    }
+                  }
+                }, {
+                  "content": "\"",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }, {
+                  "content": "name",
+                  "props": {
+                    "style": {
+                      "color": "#A3BE8C"
+                    }
+                  }
+                }, {
+                  "content": "\"",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }, {
+                  "content": ": ",
+                  "props": {
+                    "style": {
+                      "color": "#D8DEE9FF"
+                    }
+                  }
+                }, {
+                  "content": "\"",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }, {
+                  "content": "foo",
+                  "props": {
+                    "style": {
+                      "color": "#A3BE8C"
+                    }
+                  }
+                }, {
+                  "content": "\"",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }, {
+                  "content": ",",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }]
+              }, {
+                "tokens": [{
+                  "content": "    ",
+                  "props": {
+                    "style": {
+                      "color": "#D8DEE9FF"
+                    }
+                  }
+                }, {
+                  "content": "\"",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }, {
+                  "content": "main",
+                  "props": {
+                    "style": {
+                      "color": "#A3BE8C"
+                    }
+                  }
+                }, {
+                  "content": "\"",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }, {
+                  "content": ": ",
+                  "props": {
+                    "style": {
+                      "color": "#D8DEE9FF"
+                    }
+                  }
+                }, {
+                  "content": "\"",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }, {
+                  "content": "./dist/index.js",
+                  "props": {
+                    "style": {
+                      "color": "#A3BE8C"
+                    }
+                  }
+                }, {
+                  "content": "\"",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }, {
+                  "content": ",",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }]
+              }, {
+                "tokens": [{
+                  "content": "    ",
+                  "props": {
+                    "style": {
+                      "color": "#D8DEE9FF"
+                    }
+                  }
+                }, {
+                  "content": "\"",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }, {
+                  "content": "types",
+                  "props": {
+                    "style": {
+                      "color": "#A3BE8C"
+                    }
+                  }
+                }, {
+                  "content": "\"",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }, {
+                  "content": ": ",
+                  "props": {
+                    "style": {
+                      "color": "#D8DEE9FF"
+                    }
+                  }
+                }, {
+                  "content": "\"",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }, {
+                  "content": "./src/index.ts",
+                  "props": {
+                    "style": {
+                      "color": "#A3BE8C"
+                    }
+                  }
+                }, {
+                  "content": "\"",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }, {
+                  "content": ",",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }]
+              }, {
+                "tokens": [{
+                  "content": "    ",
+                  "props": {
+                    "style": {
+                      "color": "#D8DEE9FF"
+                    }
+                  }
+                }, {
+                  "content": "\"",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }, {
+                  "content": "publishConfig",
+                  "props": {
+                    "style": {
+                      "color": "#A3BE8C"
+                    }
+                  }
+                }, {
+                  "content": "\"",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }, {
+                  "content": ": ",
+                  "props": {
+                    "style": {
+                      "color": "#D8DEE9FF"
+                    }
+                  }
+                }, {
+                  "content": "{",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }]
+              }, {
+                "tokens": [{
+                  "content": "      ",
+                  "props": {
+                    "style": {
+                      "color": "#D8DEE9FF"
+                    }
+                  }
+                }, {
+                  "content": "\"",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }, {
+                  "content": "types",
+                  "props": {
+                    "style": {
+                      "color": "#A3BE8C"
+                    }
+                  }
+                }, {
+                  "content": "\"",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }, {
+                  "content": ":",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }, {
+                  "content": " ",
+                  "props": {
+                    "style": {
+                      "color": "#D8DEE9FF"
+                    }
+                  }
+                }, {
+                  "content": "\"",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }, {
+                  "content": "./dist/index.d.ts",
+                  "props": {
+                    "style": {
+                      "color": "#A3BE8C"
+                    }
+                  }
+                }, {
+                  "content": "\"",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }, {
+                  "content": ",",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }]
+              }, {
+                "tokens": [{
+                  "content": "    ",
+                  "props": {
+                    "style": {
+                      "color": "#D8DEE9FF"
+                    }
+                  }
+                }, {
+                  "content": "}",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }]
+              }, {
+                "tokens": [{
+                  "content": "}",
+                  "props": {
+                    "style": {
+                      "color": "#ECEFF4"
+                    }
+                  }
+                }]
+              }],
+              "lang": "ts"
+            },
+            "annotations": []
+          }]
+        }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.blockquote, {
+          children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
+            children: ["关于 pnpm 的 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+              children: "publishConfig"
+            }), " 的使用，可以阅读下面这个", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
+              href: "https://pnpm.io/package_json#publishconfig",
+              target: "_blank",
+              rel: "nofollow",
+              children: "链接"
+            }), "。"]
+          }), "\n"]
+        }), "而对于 npm 和 Yarn 的项目，则只能通过手动的方式在", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.strong, {
+          children: "开发阶段"
+        }), "和", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.strong, {
+          children: "发布阶段"
+        }), "对 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+          children: "package.json"
+        }), " 的 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+          children: "types"
+        }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
+          children: "的值进行修改。"
+        })]
+      })]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
       children: "那么为什么可以直接引用产物呢？"
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.ol, {
@@ -3987,7 +4076,9 @@ function _createMdxContent(props) {
           children: "modern build"
         }), " 命令，保证项目构建产物的存在。"]
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
-        children: ["在 Storybook 内部增加了以项目名称作为别名的处理，保证能够", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.strong, {
+        children: ["在 Storybook 内部增加了针对 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+          children: "tsconfig.json"
+        }), " 文件或者以项目名称作为别名的处理，保证能够", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.strong, {
           children: ["根据 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "package.json"
           }), " 解析出项目的产物路径"]
@@ -4659,7 +4750,7 @@ function MDXContent(props = {}) {
 }
 /* harmony default export */ __webpack_exports__["default"] = (MDXContent);
 function _missingMdxReference(id, component, place) {
-  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it." + (place ? "\nIt’s referenced in your code at `" + place + "` in `/Users/targeral/github/targeral-modern-js/website/module-tools/docs/zh/guide/basic/using-storybook.mdx`" : ""));
+  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it." + (place ? "\nIt’s referenced in your code at `" + place + "` in `/Users/bytedance/github/targeral/modern-dev/website/module-tools/docs/zh/guide/basic/using-storybook.mdx`" : ""));
 }