@modern-js/module-tools-docs 2.0.0-beta.4
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/LICENSE +144 -0
- package/docs/.island/config.ts +245 -0
- package/docs/.island/dist/404.html +41 -0
- package/docs/.island/dist/assets/before-getting-started.1b82b538.js +87 -0
- package/docs/.island/dist/assets/before-getting-started.582a31cc.js +87 -0
- package/docs/.island/dist/assets/build-config.72eb0918.js +804 -0
- package/docs/.island/dist/assets/build-config.d8bb1658.js +809 -0
- package/docs/.island/dist/assets/build-preset.96805d7d.js +256 -0
- package/docs/.island/dist/assets/build-preset.c20dcd40.js +256 -0
- package/docs/.island/dist/assets/build-your-ui.7f349247.js +2 -0
- package/docs/.island/dist/assets/build-your-ui.a8361604.js +2 -0
- package/docs/.island/dist/assets/command-preview.2d45fc82.js +264 -0
- package/docs/.island/dist/assets/command-preview.dc51b953.js +264 -0
- package/docs/.island/dist/assets/components.esm.03560353.js +9 -0
- package/docs/.island/dist/assets/design-system.86694ff5.js +1254 -0
- package/docs/.island/dist/assets/design-system.c4745cce.js +639 -0
- package/docs/.island/dist/assets/dev.1d326a37.js +37 -0
- package/docs/.island/dist/assets/dev.1fd06000.js +37 -0
- package/docs/.island/dist/assets/down.f35427d3.svg +1 -0
- package/docs/.island/dist/assets/extension.12299fd6.js +2 -0
- package/docs/.island/dist/assets/extension.96dc63a4.js +2 -0
- package/docs/.island/dist/assets/getting-started.40e9218d.js +117 -0
- package/docs/.island/dist/assets/getting-started.b1ed3f10.js +114 -0
- package/docs/.island/dist/assets/github.3bf8ccee.svg +1 -0
- package/docs/.island/dist/assets/index.2b2347ea.js +33 -0
- package/docs/.island/dist/assets/index.6cef6f5f.js +4 -0
- package/docs/.island/dist/assets/index.cb118238.js +36 -0
- package/docs/.island/dist/assets/index.ccb6ce27.js +4 -0
- package/docs/.island/dist/assets/island_inject.11a12ecc.js +1 -0
- package/docs/.island/dist/assets/island_inject.b13deaee.js +1 -0
- package/docs/.island/dist/assets/loading.8c9bb911.svg +1 -0
- package/docs/.island/dist/assets/modify-output-product.7f6bff35.js +100 -0
- package/docs/.island/dist/assets/modify-output-product.b91eff1f.js +100 -0
- package/docs/.island/dist/assets/moon.6b705924.svg +3 -0
- package/docs/.island/dist/assets/plugin.895932d8.js +42 -0
- package/docs/.island/dist/assets/plugin.d2fbc531.js +42 -0
- package/docs/.island/dist/assets/publish-your-project.21b8309f.js +164 -0
- package/docs/.island/dist/assets/publish-your-project.8d398b17.js +166 -0
- package/docs/.island/dist/assets/right.89674cd7.svg +1 -0
- package/docs/.island/dist/assets/search.0aea6901.svg +1 -0
- package/docs/.island/dist/assets/search.1c85d17c.js +3 -0
- package/docs/.island/dist/assets/search.484eca11.js +222 -0
- package/docs/.island/dist/assets/search.54fca8d0.js +3 -0
- package/docs/.island/dist/assets/style.09015a4b.css +1 -0
- package/docs/.island/dist/assets/style.2e5f7bc2.css +1970 -0
- package/docs/.island/dist/assets/sun.841dac10.svg +11 -0
- package/docs/.island/dist/assets/test-your-project.18bd4582.js +190 -0
- package/docs/.island/dist/assets/test-your-project.f53bebf7.js +190 -0
- package/docs/.island/dist/assets/test.0da1f99f.js +67 -0
- package/docs/.island/dist/assets/test.0e81f002.js +66 -0
- package/docs/.island/dist/assets/translator.b1077c44.svg +1 -0
- package/docs/.island/dist/assets/use-micro-generator.7d9e4016.js +60 -0
- package/docs/.island/dist/assets/use-micro-generator.db5520c1.js +60 -0
- package/docs/.island/dist/assets/using-storybook.57ea6b77.js +260 -0
- package/docs/.island/dist/assets/using-storybook.a2212f2e.js +260 -0
- package/docs/.island/dist/assets/welcome.0449a9c8.js +13 -0
- package/docs/.island/dist/assets/welcome.a8448931.js +13 -0
- package/docs/.island/dist/assets/why-module-engineering-solution.6ae8c0e3.js +26 -0
- package/docs/.island/dist/assets/why-module-engineering-solution.c9a45cbd.js +26 -0
- package/docs/.island/dist/chunk-COLCRJ2V.js +1 -0
- package/docs/.island/dist/chunk-K5FMOYDC.js +10 -0
- package/docs/.island/dist/chunk-WE42KMYS.js +26 -0
- package/docs/.island/dist/client-entry.js +3 -0
- package/docs/.island/dist/en/api/build-config.html +344 -0
- package/docs/.island/dist/en/api/build-preset.html +82 -0
- package/docs/.island/dist/en/api/design-system.html +155 -0
- package/docs/.island/dist/en/api/dev.html +45 -0
- package/docs/.island/dist/en/api/index.html +41 -0
- package/docs/.island/dist/en/api/plugin.html +48 -0
- package/docs/.island/dist/en/api/test.html +58 -0
- package/docs/.island/dist/en/guide/before-getting-started.html +127 -0
- package/docs/.island/dist/en/guide/build-your-ui.html +41 -0
- package/docs/.island/dist/en/guide/command-preview.html +100 -0
- package/docs/.island/dist/en/guide/extension.html +41 -0
- package/docs/.island/dist/en/guide/getting-started.html +76 -0
- package/docs/.island/dist/en/guide/modify-output-product.html +140 -0
- package/docs/.island/dist/en/guide/publish-your-project.html +91 -0
- package/docs/.island/dist/en/guide/test-your-project.html +72 -0
- package/docs/.island/dist/en/guide/use-micro-generator.html +65 -0
- package/docs/.island/dist/en/guide/using-storybook.html +113 -0
- package/docs/.island/dist/en/guide/welcome.html +53 -0
- package/docs/.island/dist/en/guide/why-module-engineering-solution.html +49 -0
- package/docs/.island/dist/en/index.html +42 -0
- package/docs/.island/dist/react-dom.js +1 -0
- package/docs/.island/dist/react-dom_client.js +1 -0
- package/docs/.island/dist/react.js +1 -0
- package/docs/.island/dist/react_jsx-runtime.js +10 -0
- package/docs/.island/dist/ssr-manifest.json +57 -0
- package/docs/.island/dist/test-result.png +0 -0
- package/docs/.island/dist/why-module-solution.png +0 -0
- package/docs/.island/dist/zh/api/build-config.html +347 -0
- package/docs/.island/dist/zh/api/build-preset.html +82 -0
- package/docs/.island/dist/zh/api/design-system.html +149 -0
- package/docs/.island/dist/zh/api/dev.html +46 -0
- package/docs/.island/dist/zh/api/index.html +41 -0
- package/docs/.island/dist/zh/api/plugin.html +48 -0
- package/docs/.island/dist/zh/api/test.html +59 -0
- package/docs/.island/dist/zh/guide/before-getting-started.html +127 -0
- package/docs/.island/dist/zh/guide/build-your-ui.html +41 -0
- package/docs/.island/dist/zh/guide/command-preview.html +100 -0
- package/docs/.island/dist/zh/guide/extension.html +41 -0
- package/docs/.island/dist/zh/guide/getting-started.html +79 -0
- package/docs/.island/dist/zh/guide/modify-output-product.html +140 -0
- package/docs/.island/dist/zh/guide/publish-your-project.html +92 -0
- package/docs/.island/dist/zh/guide/test-your-project.html +72 -0
- package/docs/.island/dist/zh/guide/use-micro-generator.html +65 -0
- package/docs/.island/dist/zh/guide/using-storybook.html +114 -0
- package/docs/.island/dist/zh/guide/welcome.html +53 -0
- package/docs/.island/dist/zh/guide/why-module-engineering-solution.html +49 -0
- package/docs/.island/dist/zh/index.html +42 -0
- package/docs/.island/index.html +39 -0
- package/docs/.island/styles/index.css +10 -0
- package/docs/en/api/build-config.md +501 -0
- package/docs/en/api/build-preset.md +214 -0
- package/docs/en/api/design-system.md +524 -0
- package/docs/en/api/dev.md +32 -0
- package/docs/en/api/index.md +3 -0
- package/docs/en/api/plugin.md +34 -0
- package/docs/en/api/test.md +48 -0
- package/docs/en/guide/advance/asset.mdx +132 -0
- package/docs/en/guide/advance/build-umd.mdx +241 -0
- package/docs/en/guide/advance/copy.md +235 -0
- package/docs/en/guide/advance/external-dependency.mdx +125 -0
- package/docs/en/guide/advance/in-depth-about-build.md +266 -0
- package/docs/en/guide/advance/in-depth-about-dev-command.md +22 -0
- package/docs/en/guide/basic/before-getting-started.md +187 -0
- package/docs/en/guide/basic/command-preview.md +204 -0
- package/docs/en/guide/basic/modify-output-product.md +145 -0
- package/docs/en/guide/basic/publish-your-project.md +115 -0
- package/docs/en/guide/basic/test-your-project.mdx +158 -0
- package/docs/en/guide/basic/use-micro-generator.md +35 -0
- package/docs/en/guide/basic/using-storybook.mdx +187 -0
- package/docs/en/guide/intro/getting-started.md +78 -0
- package/docs/en/guide/intro/welcome.md +14 -0
- package/docs/en/guide/intro/why-module-engineering-solution.md +17 -0
- package/docs/en/index.md +35 -0
- package/docs/public/test-result.png +0 -0
- package/docs/public/why-module-solution.png +0 -0
- package/docs/zh/api/build-config.md +570 -0
- package/docs/zh/api/build-preset.md +220 -0
- package/docs/zh/api/design-system.md +1147 -0
- package/docs/zh/api/dev.md +33 -0
- package/docs/zh/api/index.md +3 -0
- package/docs/zh/api/plugins.md +108 -0
- package/docs/zh/api/testing.md +52 -0
- package/docs/zh/guide/advance/asset.mdx +132 -0
- package/docs/zh/guide/advance/build-umd.mdx +232 -0
- package/docs/zh/guide/advance/copy.md +235 -0
- package/docs/zh/guide/advance/external-dependency.mdx +125 -0
- package/docs/zh/guide/advance/in-depth-about-build.md +267 -0
- package/docs/zh/guide/advance/in-depth-about-dev-command.md +26 -0
- package/docs/zh/guide/basic/before-getting-started.md +187 -0
- package/docs/zh/guide/basic/command-preview.md +204 -0
- package/docs/zh/guide/basic/modify-output-product.md +144 -0
- package/docs/zh/guide/basic/publish-your-project.md +112 -0
- package/docs/zh/guide/basic/test-your-project.mdx +158 -0
- package/docs/zh/guide/basic/use-micro-generator.md +35 -0
- package/docs/zh/guide/basic/using-storybook.mdx +186 -0
- package/docs/zh/guide/intro/getting-started.md +78 -0
- package/docs/zh/guide/intro/welcome.md +14 -0
- package/docs/zh/guide/intro/why-module-engineering-solution.md +17 -0
- package/docs/zh/index.md +29 -0
- package/package.json +19 -0
|
@@ -0,0 +1,260 @@
|
|
|
1
|
+
import{jsx as e,jsxs as t,Fragment as s}from"react/jsx-runtime";import{a as l,S as p,b as d,C as u}from"./components.esm.03560353.js";import"react";import"react-dom";const n={annotations:l,Spotlight:p,CodeSlot:d,Code:u},c={staticMediaQuery:"not screen, (max-width: 768px)",theme:{name:"nord",type:"dark",semanticHighlighting:!0,colors:{focusBorder:"#3b4252",foreground:"#d8dee9","activityBar.background":"#2e3440","activityBar.dropBackground":"#3b4252","activityBar.foreground":"#d8dee9","activityBar.activeBorder":"#88c0d0","activityBar.activeBackground":"#3b4252","activityBarBadge.background":"#88c0d0","activityBarBadge.foreground":"#2e3440","badge.foreground":"#2e3440","badge.background":"#88c0d0","button.background":"#88c0d0ee","button.foreground":"#2e3440","button.hoverBackground":"#88c0d0","button.secondaryBackground":"#434c5e","button.secondaryForeground":"#d8dee9","button.secondaryHoverBackground":"#4c566a","charts.red":"#bf616a","charts.blue":"#81a1c1","charts.yellow":"#ebcb8b","charts.orange":"#d08770","charts.green":"#a3be8c","charts.purple":"#b48ead","charts.foreground":"#d8dee9","charts.lines":"#88c0d0","debugConsole.infoForeground":"#88c0d0","debugConsole.warningForeground":"#ebcb8b","debugConsole.errorForeground":"#bf616a","debugConsole.sourceForeground":"#616e88","debugConsoleInputIcon.foreground":"#81a1c1","debugExceptionWidget.background":"#4c566a","debugExceptionWidget.border":"#2e3440","debugToolBar.background":"#3b4252",descriptionForeground:"#d8dee9e6","diffEditor.insertedTextBackground":"#81a1c133","diffEditor.removedTextBackground":"#bf616a4d","dropdown.background":"#3b4252","dropdown.border":"#3b4252","dropdown.foreground":"#d8dee9","editorActiveLineNumber.foreground":"#d8dee9cc","editorCursor.foreground":"#d8dee9","editorHint.border":"#ebcb8b00","editorHint.foreground":"#ebcb8b","editorIndentGuide.background":"#434c5eb3","editorIndentGuide.activeBackground":"#4c566a","editorInlayHint.background":"#434c5e","editorInlayHint.foreground":"#d8dee9","editorLineNumber.foreground":"#4c566a","editorLineNumber.activeForeground":"#d8dee9","editorWhitespace.foreground":"#4c566ab3","editorWidget.background":"#2e3440","editorWidget.border":"#3b4252","editor.background":"#2e3440","editor.foreground":"#d8dee9","editor.hoverHighlightBackground":"#3b4252","editor.findMatchBackground":"#88c0d066","editor.findMatchHighlightBackground":"#88c0d033","editor.findRangeHighlightBackground":"#88c0d033","editor.lineHighlightBackground":"#3b4252","editor.lineHighlightBorder":"#3b4252","editor.inactiveSelectionBackground":"#434c5ecc","editor.inlineValuesBackground":"#4c566a","editor.inlineValuesForeground":"#eceff4","editor.selectionBackground":"#434c5ecc","editor.selectionHighlightBackground":"#434c5ecc","editor.rangeHighlightBackground":"#434c5e52","editor.wordHighlightBackground":"#81a1c166","editor.wordHighlightStrongBackground":"#81a1c199","editor.stackFrameHighlightBackground":"#5e81ac","editor.focusedStackFrameHighlightBackground":"#5e81ac","editorError.foreground":"#bf616a","editorError.border":"#bf616a00","editorWarning.foreground":"#ebcb8b","editorWarning.border":"#ebcb8b00","editorBracketMatch.background":"#2e344000","editorBracketMatch.border":"#88c0d0","editorBracketHighlight.foreground1":"#8fbcbb","editorBracketHighlight.foreground2":"#88c0d0","editorBracketHighlight.foreground3":"#81a1c1","editorBracketHighlight.foreground4":"#5e81ac","editorBracketHighlight.foreground5":"#8fbcbb","editorBracketHighlight.foreground6":"#88c0d0","editorBracketHighlight.unexpectedBracket.foreground":"#bf616a","editorCodeLens.foreground":"#4c566a","editorGroup.background":"#2e3440","editorGroup.border":"#3b425201","editorGroup.dropBackground":"#3b425299","editorGroupHeader.border":"#3b425200","editorGroupHeader.noTabsBackground":"#2e3440","editorGroupHeader.tabsBackground":"#2e3440","editorGroupHeader.tabsBorder":"#3b425200","editorGutter.background":"#2e3440","editorGutter.modifiedBackground":"#ebcb8b","editorGutter.addedBackground":"#a3be8c","editorGutter.deletedBackground":"#bf616a","editorHoverWidget.background":"#3b4252","editorHoverWidget.border":"#3b4252","editorLink.activeForeground":"#88c0d0","editorMarkerNavigation.background":"#5e81acc0","editorMarkerNavigationError.background":"#bf616ac0","editorMarkerNavigationWarning.background":"#ebcb8bc0","editorOverviewRuler.border":"#3b4252","editorOverviewRuler.currentContentForeground":"#3b4252","editorOverviewRuler.incomingContentForeground":"#3b4252","editorOverviewRuler.findMatchForeground":"#88c0d066","editorOverviewRuler.rangeHighlightForeground":"#88c0d066","editorOverviewRuler.selectionHighlightForeground":"#88c0d066","editorOverviewRuler.wordHighlightForeground":"#88c0d066","editorOverviewRuler.wordHighlightStrongForeground":"#88c0d066","editorOverviewRuler.modifiedForeground":"#ebcb8b","editorOverviewRuler.addedForeground":"#a3be8c","editorOverviewRuler.deletedForeground":"#bf616a","editorOverviewRuler.errorForeground":"#bf616a","editorOverviewRuler.warningForeground":"#ebcb8b","editorOverviewRuler.infoForeground":"#81a1c1","editorRuler.foreground":"#434c5e","editorSuggestWidget.background":"#2e3440","editorSuggestWidget.border":"#3b4252","editorSuggestWidget.foreground":"#d8dee9","editorSuggestWidget.focusHighlightForeground":"#88c0d0","editorSuggestWidget.highlightForeground":"#88c0d0","editorSuggestWidget.selectedBackground":"#434c5e","editorSuggestWidget.selectedForeground":"#d8dee9","extensionButton.prominentForeground":"#d8dee9","extensionButton.prominentBackground":"#434c5e","extensionButton.prominentHoverBackground":"#4c566a",errorForeground:"#bf616a","gitDecoration.modifiedResourceForeground":"#ebcb8b","gitDecoration.deletedResourceForeground":"#bf616a","gitDecoration.untrackedResourceForeground":"#a3be8c","gitDecoration.ignoredResourceForeground":"#d8dee966","gitDecoration.conflictingResourceForeground":"#5e81ac","gitDecoration.submoduleResourceForeground":"#8fbcbb","gitDecoration.stageDeletedResourceForeground":"#bf616a","gitDecoration.stageModifiedResourceForeground":"#ebcb8b","input.background":"#3b4252","input.foreground":"#d8dee9","input.placeholderForeground":"#d8dee999","input.border":"#3b4252","inputOption.activeBackground":"#5e81ac","inputOption.activeBorder":"#5e81ac","inputOption.activeForeground":"#eceff4","inputValidation.errorBackground":"#bf616a","inputValidation.errorBorder":"#bf616a","inputValidation.infoBackground":"#81a1c1","inputValidation.infoBorder":"#81a1c1","inputValidation.warningBackground":"#d08770","inputValidation.warningBorder":"#d08770","keybindingLabel.background":"#4c566a","keybindingLabel.border":"#4c566a","keybindingLabel.bottomBorder":"#4c566a","keybindingLabel.foreground":"#d8dee9","list.activeSelectionBackground":"#88c0d0","list.activeSelectionForeground":"#2e3440","list.inactiveSelectionBackground":"#434c5e","list.inactiveSelectionForeground":"#d8dee9","list.inactiveFocusBackground":"#434c5ecc","list.hoverForeground":"#eceff4","list.focusForeground":"#d8dee9","list.focusBackground":"#88c0d099","list.focusHighlightForeground":"#eceff4","list.hoverBackground":"#3b4252","list.dropBackground":"#88c0d099","list.highlightForeground":"#88c0d0","list.errorForeground":"#bf616a","list.warningForeground":"#ebcb8b","merge.currentHeaderBackground":"#81a1c166","merge.currentContentBackground":"#81a1c14d","merge.incomingHeaderBackground":"#8fbcbb66","merge.incomingContentBackground":"#8fbcbb4d","merge.border":"#3b425200","minimap.background":"#2e3440","minimap.errorHighlight":"#bf616acc","minimap.findMatchHighlight":"#88c0d0","minimap.selectionHighlight":"#88c0d0cc","minimap.warningHighlight":"#ebcb8bcc","minimapGutter.addedBackground":"#a3be8c","minimapGutter.deletedBackground":"#bf616a","minimapGutter.modifiedBackground":"#ebcb8b","minimapSlider.activeBackground":"#434c5eaa","minimapSlider.background":"#434c5e99","minimapSlider.hoverBackground":"#434c5eaa","notification.background":"#3b4252","notification.buttonBackground":"#434c5e","notification.buttonForeground":"#d8dee9","notification.buttonHoverBackground":"#4c566a","notification.errorBackground":"#bf616a","notification.errorForeground":"#2e3440","notification.foreground":"#d8dee9","notification.infoBackground":"#88c0d0","notification.infoForeground":"#2e3440","notification.warningBackground":"#ebcb8b","notification.warningForeground":"#2e3440","notificationCenter.border":"#3b425200","notificationCenterHeader.background":"#2e3440","notificationCenterHeader.foreground":"#88c0d0","notificationLink.foreground":"#88c0d0","notifications.background":"#3b4252","notifications.border":"#2e3440","notifications.foreground":"#d8dee9","notificationToast.border":"#3b425200","panel.background":"#2e3440","panel.border":"#3b4252","panelTitle.activeBorder":"#88c0d000","panelTitle.activeForeground":"#88c0d0","panelTitle.inactiveForeground":"#d8dee9","peekView.border":"#4c566a","peekViewEditor.background":"#2e3440","peekViewEditorGutter.background":"#2e3440","peekViewEditor.matchHighlightBackground":"#88c0d04d","peekViewResult.background":"#2e3440","peekViewResult.fileForeground":"#88c0d0","peekViewResult.lineForeground":"#d8dee966","peekViewResult.matchHighlightBackground":"#88c0d0cc","peekViewResult.selectionBackground":"#434c5e","peekViewResult.selectionForeground":"#d8dee9","peekViewTitle.background":"#3b4252","peekViewTitleDescription.foreground":"#d8dee9","peekViewTitleLabel.foreground":"#88c0d0","pickerGroup.border":"#3b4252","pickerGroup.foreground":"#88c0d0","progressBar.background":"#88c0d0","quickInputList.focusBackground":"#88c0d0","quickInputList.focusForeground":"#2e3440","sash.hoverBorder":"#88c0d0","scrollbar.shadow":"#00000066","scrollbarSlider.activeBackground":"#434c5eaa","scrollbarSlider.background":"#434c5e99","scrollbarSlider.hoverBackground":"#434c5eaa","selection.background":"#88c0d099","sideBar.background":"#2e3440","sideBar.foreground":"#d8dee9","sideBar.border":"#3b4252","sideBarSectionHeader.background":"#3b4252","sideBarSectionHeader.foreground":"#d8dee9","sideBarTitle.foreground":"#d8dee9","statusBar.background":"#3b4252","statusBar.debuggingBackground":"#5e81ac","statusBar.debuggingForeground":"#d8dee9","statusBar.noFolderForeground":"#d8dee9","statusBar.noFolderBackground":"#3b4252","statusBar.foreground":"#d8dee9","statusBarItem.activeBackground":"#4c566a","statusBarItem.hoverBackground":"#434c5e","statusBarItem.prominentBackground":"#3b4252","statusBarItem.prominentHoverBackground":"#434c5e","statusBarItem.errorBackground":"#3b4252","statusBarItem.errorForeground":"#bf616a","statusBarItem.warningBackground":"#ebcb8b","statusBarItem.warningForeground":"#2e3440","statusBar.border":"#3b425200","tab.activeBackground":"#3b4252","tab.activeForeground":"#d8dee9","tab.border":"#3b425200","tab.activeBorder":"#88c0d000","tab.unfocusedActiveBorder":"#88c0d000","tab.inactiveBackground":"#2e3440","tab.inactiveForeground":"#d8dee966","tab.unfocusedActiveForeground":"#d8dee999","tab.unfocusedInactiveForeground":"#d8dee966","tab.hoverBackground":"#3b4252cc","tab.unfocusedHoverBackground":"#3b4252b3","tab.hoverBorder":"#88c0d000","tab.unfocusedHoverBorder":"#88c0d000","tab.activeBorderTop":"#88c0d000","tab.unfocusedActiveBorderTop":"#88c0d000","tab.lastPinnedBorder":"#4c566a","terminal.background":"#2e3440","terminal.foreground":"#d8dee9","terminal.ansiBlack":"#3b4252","terminal.ansiRed":"#bf616a","terminal.ansiGreen":"#a3be8c","terminal.ansiYellow":"#ebcb8b","terminal.ansiBlue":"#81a1c1","terminal.ansiMagenta":"#b48ead","terminal.ansiCyan":"#88c0d0","terminal.ansiWhite":"#e5e9f0","terminal.ansiBrightBlack":"#4c566a","terminal.ansiBrightRed":"#bf616a","terminal.ansiBrightGreen":"#a3be8c","terminal.ansiBrightYellow":"#ebcb8b","terminal.ansiBrightBlue":"#81a1c1","terminal.ansiBrightMagenta":"#b48ead","terminal.ansiBrightCyan":"#8fbcbb","terminal.ansiBrightWhite":"#eceff4","terminal.tab.activeBorder":"#88c0d0","textBlockQuote.background":"#3b4252","textBlockQuote.border":"#81a1c1","textCodeBlock.background":"#4c566a","textLink.activeForeground":"#88c0d0","textLink.foreground":"#88c0d0","textPreformat.foreground":"#8fbcbb","textSeparator.foreground":"#eceff4","titleBar.activeBackground":"#2e3440","titleBar.activeForeground":"#d8dee9","titleBar.border":"#2e344000","titleBar.inactiveBackground":"#2e3440","titleBar.inactiveForeground":"#d8dee966","tree.indentGuidesStroke":"#616e88","walkThrough.embeddedEditorBackground":"#2e3440","welcomePage.buttonBackground":"#434c5e","welcomePage.buttonHoverBackground":"#4c566a","widget.shadow":"#00000066"},tokenColors:[{settings:{foreground:"#d8dee9ff",background:"#2e3440ff"}},{scope:"emphasis",settings:{fontStyle:"italic"}},{scope:"strong",settings:{fontStyle:"bold"}},{name:"Comment",scope:"comment",settings:{foreground:"#616E88"}},{name:"Constant Character",scope:"constant.character",settings:{foreground:"#EBCB8B"}},{name:"Constant Character Escape",scope:"constant.character.escape",settings:{foreground:"#EBCB8B"}},{name:"Constant Language",scope:"constant.language",settings:{foreground:"#81A1C1"}},{name:"Constant Numeric",scope:"constant.numeric",settings:{foreground:"#B48EAD"}},{name:"Constant Regexp",scope:"constant.regexp",settings:{foreground:"#EBCB8B"}},{name:"Entity Name Class/Type",scope:["entity.name.class","entity.name.type.class"],settings:{foreground:"#8FBCBB"}},{name:"Entity Name Function",scope:"entity.name.function",settings:{foreground:"#88C0D0"}},{name:"Entity Name Tag",scope:"entity.name.tag",settings:{foreground:"#81A1C1"}},{name:"Entity Other Attribute Name",scope:"entity.other.attribute-name",settings:{foreground:"#8FBCBB"}},{name:"Entity Other Inherited Class",scope:"entity.other.inherited-class",settings:{fontStyle:"bold",foreground:"#8FBCBB"}},{name:"Invalid Deprecated",scope:"invalid.deprecated",settings:{foreground:"#D8DEE9",background:"#EBCB8B"}},{name:"Invalid Illegal",scope:"invalid.illegal",settings:{foreground:"#D8DEE9",background:"#BF616A"}},{name:"Keyword",scope:"keyword",settings:{foreground:"#81A1C1"}},{name:"Keyword Operator",scope:"keyword.operator",settings:{foreground:"#81A1C1"}},{name:"Keyword Other New",scope:"keyword.other.new",settings:{foreground:"#81A1C1"}},{name:"Markup Bold",scope:"markup.bold",settings:{fontStyle:"bold"}},{name:"Markup Changed",scope:"markup.changed",settings:{foreground:"#EBCB8B"}},{name:"Markup Deleted",scope:"markup.deleted",settings:{foreground:"#BF616A"}},{name:"Markup Inserted",scope:"markup.inserted",settings:{foreground:"#A3BE8C"}},{name:"Meta Preprocessor",scope:"meta.preprocessor",settings:{foreground:"#5E81AC"}},{name:"Punctuation",scope:"punctuation",settings:{foreground:"#ECEFF4"}},{name:"Punctuation Definition Parameters",scope:["punctuation.definition.method-parameters","punctuation.definition.function-parameters","punctuation.definition.parameters"],settings:{foreground:"#ECEFF4"}},{name:"Punctuation Definition Tag",scope:"punctuation.definition.tag",settings:{foreground:"#81A1C1"}},{name:"Punctuation Definition Comment",scope:["punctuation.definition.comment","punctuation.end.definition.comment","punctuation.start.definition.comment"],settings:{foreground:"#616E88"}},{name:"Punctuation Section",scope:"punctuation.section",settings:{foreground:"#ECEFF4"}},{name:"Punctuation Section Embedded",scope:["punctuation.section.embedded.begin","punctuation.section.embedded.end"],settings:{foreground:"#81A1C1"}},{name:"Punctuation Terminator",scope:"punctuation.terminator",settings:{foreground:"#81A1C1"}},{name:"Punctuation Variable",scope:"punctuation.definition.variable",settings:{foreground:"#81A1C1"}},{name:"Storage",scope:"storage",settings:{foreground:"#81A1C1"}},{name:"String",scope:"string",settings:{foreground:"#A3BE8C"}},{name:"String Regexp",scope:"string.regexp",settings:{foreground:"#EBCB8B"}},{name:"Support Class",scope:"support.class",settings:{foreground:"#8FBCBB"}},{name:"Support Constant",scope:"support.constant",settings:{foreground:"#81A1C1"}},{name:"Support Function",scope:"support.function",settings:{foreground:"#88C0D0"}},{name:"Support Function Construct",scope:"support.function.construct",settings:{foreground:"#81A1C1"}},{name:"Support Type",scope:"support.type",settings:{foreground:"#8FBCBB"}},{name:"Support Type Exception",scope:"support.type.exception",settings:{foreground:"#8FBCBB"}},{name:"Token Debug",scope:"token.debug-token",settings:{foreground:"#b48ead"}},{name:"Token Error",scope:"token.error-token",settings:{foreground:"#bf616a"}},{name:"Token Info",scope:"token.info-token",settings:{foreground:"#88c0d0"}},{name:"Token Warning",scope:"token.warn-token",settings:{foreground:"#ebcb8b"}},{name:"Variable",scope:"variable.other",settings:{foreground:"#D8DEE9"}},{name:"Variable Language",scope:"variable.language",settings:{foreground:"#81A1C1"}},{name:"Variable Parameter",scope:"variable.parameter",settings:{foreground:"#D8DEE9"}},{name:"[C/CPP] Punctuation Separator Pointer-Access",scope:"punctuation.separator.pointer-access.c",settings:{foreground:"#81A1C1"}},{name:"[C/CPP] Meta Preprocessor Include",scope:["source.c meta.preprocessor.include","source.c string.quoted.other.lt-gt.include"],settings:{foreground:"#8FBCBB"}},{name:"[C/CPP] Conditional Directive",scope:["source.cpp keyword.control.directive.conditional","source.cpp punctuation.definition.directive","source.c keyword.control.directive.conditional","source.c punctuation.definition.directive"],settings:{foreground:"#5E81AC",fontStyle:"bold"}},{name:"[CSS] Constant Other Color RGB Value",scope:"source.css constant.other.color.rgb-value",settings:{foreground:"#B48EAD"}},{name:"[CSS](Function) Meta Property-Value",scope:"source.css meta.property-value",settings:{foreground:"#88C0D0"}},{name:"[CSS] Media Queries",scope:["source.css keyword.control.at-rule.media","source.css keyword.control.at-rule.media punctuation.definition.keyword"],settings:{foreground:"#D08770"}},{name:"[CSS] Punctuation Definition Keyword",scope:"source.css punctuation.definition.keyword",settings:{foreground:"#81A1C1"}},{name:"[CSS] Support Type Property Name",scope:"source.css support.type.property-name",settings:{foreground:"#D8DEE9"}},{name:"[diff] Meta Range Context",scope:"source.diff meta.diff.range.context",settings:{foreground:"#8FBCBB"}},{name:"[diff] Meta Header From-File",scope:"source.diff meta.diff.header.from-file",settings:{foreground:"#8FBCBB"}},{name:"[diff] Punctuation Definition From-File",scope:"source.diff punctuation.definition.from-file",settings:{foreground:"#8FBCBB"}},{name:"[diff] Punctuation Definition Range",scope:"source.diff punctuation.definition.range",settings:{foreground:"#8FBCBB"}},{name:"[diff] Punctuation Definition Separator",scope:"source.diff punctuation.definition.separator",settings:{foreground:"#81A1C1"}},{name:"[Elixir](JakeBecker.elixir-ls) module names",scope:"entity.name.type.module.elixir",settings:{foreground:"#8FBCBB"}},{name:"[Elixir](JakeBecker.elixir-ls) module attributes",scope:"variable.other.readwrite.module.elixir",settings:{foreground:"#D8DEE9",fontStyle:"bold"}},{name:"[Elixir](JakeBecker.elixir-ls) atoms",scope:"constant.other.symbol.elixir",settings:{foreground:"#D8DEE9",fontStyle:"bold"}},{name:"[Elixir](JakeBecker.elixir-ls) modules",scope:"variable.other.constant.elixir",settings:{foreground:"#8FBCBB"}},{name:"[Go] String Format Placeholder",scope:"source.go constant.other.placeholder.go",settings:{foreground:"#EBCB8B"}},{name:"[Java](JavaDoc) Comment Block Documentation HTML Entities",scope:"source.java comment.block.documentation.javadoc punctuation.definition.entity.html",settings:{foreground:"#81A1C1"}},{name:"[Java](JavaDoc) Constant Other",scope:"source.java constant.other",settings:{foreground:"#D8DEE9"}},{name:"[Java](JavaDoc) Keyword Other Documentation",scope:"source.java keyword.other.documentation",settings:{foreground:"#8FBCBB"}},{name:"[Java](JavaDoc) Keyword Other Documentation Author",scope:"source.java keyword.other.documentation.author.javadoc",settings:{foreground:"#8FBCBB"}},{name:"[Java](JavaDoc) Keyword Other Documentation Directive/Custom",scope:["source.java keyword.other.documentation.directive","source.java keyword.other.documentation.custom"],settings:{foreground:"#8FBCBB"}},{name:"[Java](JavaDoc) Keyword Other Documentation See",scope:"source.java keyword.other.documentation.see.javadoc",settings:{foreground:"#8FBCBB"}},{name:"[Java] Meta Method-Call",scope:"source.java meta.method-call meta.method",settings:{foreground:"#88C0D0"}},{name:"[Java](JavaDoc) Meta Tag Template Link",scope:["source.java meta.tag.template.link.javadoc","source.java string.other.link.title.javadoc"],settings:{foreground:"#8FBCBB"}},{name:"[Java](JavaDoc) Meta Tag Template Value",scope:"source.java meta.tag.template.value.javadoc",settings:{foreground:"#88C0D0"}},{name:"[Java](JavaDoc) Punctuation Definition Keyword",scope:"source.java punctuation.definition.keyword.javadoc",settings:{foreground:"#8FBCBB"}},{name:"[Java](JavaDoc) Punctuation Definition Tag",scope:["source.java punctuation.definition.tag.begin.javadoc","source.java punctuation.definition.tag.end.javadoc"],settings:{foreground:"#616E88"}},{name:"[Java] Storage Modifier Import",scope:"source.java storage.modifier.import",settings:{foreground:"#8FBCBB"}},{name:"[Java] Storage Modifier Package",scope:"source.java storage.modifier.package",settings:{foreground:"#8FBCBB"}},{name:"[Java] Storage Type",scope:"source.java storage.type",settings:{foreground:"#8FBCBB"}},{name:"[Java] Storage Type Annotation",scope:"source.java storage.type.annotation",settings:{foreground:"#D08770"}},{name:"[Java] Storage Type Generic",scope:"source.java storage.type.generic",settings:{foreground:"#8FBCBB"}},{name:"[Java] Storage Type Primitive",scope:"source.java storage.type.primitive",settings:{foreground:"#81A1C1"}},{name:"[JavaScript] Decorator",scope:["source.js punctuation.decorator","source.js meta.decorator variable.other.readwrite","source.js meta.decorator entity.name.function"],settings:{foreground:"#D08770"}},{name:"[JavaScript] Meta Object-Literal Key",scope:"source.js meta.object-literal.key",settings:{foreground:"#88C0D0"}},{name:"[JavaScript](JSDoc) Storage Type Class",scope:"source.js storage.type.class.jsdoc",settings:{foreground:"#8FBCBB"}},{name:"[JavaScript] String Template Literals Punctuation",scope:["source.js string.quoted.template punctuation.quasi.element.begin","source.js string.quoted.template punctuation.quasi.element.end","source.js string.template punctuation.definition.template-expression"],settings:{foreground:"#81A1C1"}},{name:"[JavaScript] Interpolated String Template Punctuation Functions",scope:"source.js string.quoted.template meta.method-call.with-arguments",settings:{foreground:"#ECEFF4"}},{name:"[JavaScript] String Template Literal Variable",scope:["source.js string.template meta.template.expression support.variable.property","source.js string.template meta.template.expression variable.other.object"],settings:{foreground:"#D8DEE9"}},{name:"[JavaScript] Support Type Primitive",scope:"source.js support.type.primitive",settings:{foreground:"#81A1C1"}},{name:"[JavaScript] Variable Other Object",scope:"source.js variable.other.object",settings:{foreground:"#D8DEE9"}},{name:"[JavaScript] Variable Other Read-Write Alias",scope:"source.js variable.other.readwrite.alias",settings:{foreground:"#8FBCBB"}},{name:"[JavaScript] Parentheses in Template Strings",scope:["source.js meta.embedded.line meta.brace.square","source.js meta.embedded.line meta.brace.round","source.js string.quoted.template meta.brace.square","source.js string.quoted.template meta.brace.round"],settings:{foreground:"#ECEFF4"}},{name:"[HTML] Constant Character Entity",scope:"text.html.basic constant.character.entity.html",settings:{foreground:"#EBCB8B"}},{name:"[HTML] Constant Other Inline-Data",scope:"text.html.basic constant.other.inline-data",settings:{foreground:"#D08770",fontStyle:"italic"}},{name:"[HTML] Meta Tag SGML Doctype",scope:"text.html.basic meta.tag.sgml.doctype",settings:{foreground:"#5E81AC"}},{name:"[HTML] Punctuation Definition Entity",scope:"text.html.basic punctuation.definition.entity",settings:{foreground:"#81A1C1"}},{name:"[INI] Entity Name Section Group-Title",scope:"source.properties entity.name.section.group-title.ini",settings:{foreground:"#88C0D0"}},{name:"[INI] Punctuation Separator Key-Value",scope:"source.properties punctuation.separator.key-value.ini",settings:{foreground:"#81A1C1"}},{name:"[Markdown] Markup Fenced Code Block",scope:["text.html.markdown markup.fenced_code.block","text.html.markdown markup.fenced_code.block punctuation.definition"],settings:{foreground:"#8FBCBB"}},{name:"[Markdown] Markup Heading",scope:"markup.heading",settings:{foreground:"#88C0D0"}},{name:"[Markdown] Markup Inline",scope:["text.html.markdown markup.inline.raw","text.html.markdown markup.inline.raw punctuation.definition.raw"],settings:{foreground:"#8FBCBB"}},{name:"[Markdown] Markup Italic",scope:"text.html.markdown markup.italic",settings:{fontStyle:"italic"}},{name:"[Markdown] Markup Link",scope:"text.html.markdown markup.underline.link",settings:{fontStyle:"underline"}},{name:"[Markdown] Markup List Numbered/Unnumbered",scope:"text.html.markdown beginning.punctuation.definition.list",settings:{foreground:"#81A1C1"}},{name:"[Markdown] Markup Quote Punctuation Definition",scope:"text.html.markdown beginning.punctuation.definition.quote",settings:{foreground:"#8FBCBB"}},{name:"[Markdown] Markup Quote Punctuation Definition",scope:"text.html.markdown markup.quote",settings:{foreground:"#616E88"}},{name:"[Markdown] Markup Math Constant",scope:"text.html.markdown constant.character.math.tex",settings:{foreground:"#81A1C1"}},{name:"[Markdown] Markup Math Definition Marker",scope:["text.html.markdown punctuation.definition.math.begin","text.html.markdown punctuation.definition.math.end"],settings:{foreground:"#5E81AC"}},{name:"[Markdown] Markup Math Function Definition Marker",scope:"text.html.markdown punctuation.definition.function.math.tex",settings:{foreground:"#88C0D0"}},{name:"[Markdown] Markup Math Operator",scope:"text.html.markdown punctuation.math.operator.latex",settings:{foreground:"#81A1C1"}},{name:"[Markdown] Punctuation Definition Heading",scope:"text.html.markdown punctuation.definition.heading",settings:{foreground:"#81A1C1"}},{name:"[Markdown] Punctuation Definition Constant/String",scope:["text.html.markdown punctuation.definition.constant","text.html.markdown punctuation.definition.string"],settings:{foreground:"#81A1C1"}},{name:"[Markdown] String Other Link Description/Title",scope:["text.html.markdown constant.other.reference.link","text.html.markdown string.other.link.description","text.html.markdown string.other.link.title"],settings:{foreground:"#88C0D0"}},{name:"[Perl] Perl Sigils",scope:"source.perl punctuation.definition.variable",settings:{foreground:"#D8DEE9"}},{name:"[PHP] Meta Function-Call Object",scope:["source.php meta.function-call","source.php meta.function-call.object"],settings:{foreground:"#88C0D0"}},{name:"[Python] Decorator",scope:["source.python entity.name.function.decorator","source.python meta.function.decorator support.type"],settings:{foreground:"#D08770"}},{name:"[Python] Function Call",scope:"source.python meta.function-call.generic",settings:{foreground:"#88C0D0"}},{name:"[Python] Support Type",scope:"source.python support.type",settings:{foreground:"#88C0D0"}},{name:"[Python] Function Parameter",scope:["source.python variable.parameter.function.language"],settings:{foreground:"#D8DEE9"}},{name:"[Python] Function Parameter Special",scope:["source.python meta.function.parameters variable.parameter.function.language.special.self"],settings:{foreground:"#81A1C1"}},{name:"[Rust] Entity types",scope:"source.rust entity.name.type",settings:{foreground:"#8FBCBB"}},{name:"[Rust] Macro",scope:"source.rust meta.macro entity.name.function",settings:{fontStyle:"bold",foreground:"#88C0D0"}},{name:"[Rust] Attributes",scope:["source.rust meta.attribute","source.rust meta.attribute punctuation","source.rust meta.attribute keyword.operator"],settings:{foreground:"#5E81AC"}},{name:"[Rust] Traits",scope:"source.rust entity.name.type.trait",settings:{fontStyle:"bold"}},{name:"[Rust] Interpolation Bracket Curly",scope:"source.rust punctuation.definition.interpolation",settings:{foreground:"#EBCB8B"}},{name:"[SCSS] Punctuation Definition Interpolation Bracket Curly",scope:["source.css.scss punctuation.definition.interpolation.begin.bracket.curly","source.css.scss punctuation.definition.interpolation.end.bracket.curly"],settings:{foreground:"#81A1C1"}},{name:"[SCSS] Variable Interpolation",scope:"source.css.scss variable.interpolation",settings:{foreground:"#D8DEE9",fontStyle:"italic"}},{name:"[TypeScript] Decorators",scope:["source.ts punctuation.decorator","source.ts meta.decorator variable.other.readwrite","source.ts meta.decorator entity.name.function","source.tsx punctuation.decorator","source.tsx meta.decorator variable.other.readwrite","source.tsx meta.decorator entity.name.function"],settings:{foreground:"#D08770"}},{name:"[TypeScript] Object-literal keys",scope:["source.ts meta.object-literal.key","source.tsx meta.object-literal.key"],settings:{foreground:"#D8DEE9"}},{name:"[TypeScript] Object-literal functions",scope:["source.ts meta.object-literal.key entity.name.function","source.tsx meta.object-literal.key entity.name.function"],settings:{foreground:"#88C0D0"}},{name:"[TypeScript] Type/Class",scope:["source.ts support.class","source.ts support.type","source.ts entity.name.type","source.ts entity.name.class","source.tsx support.class","source.tsx support.type","source.tsx entity.name.type","source.tsx entity.name.class"],settings:{foreground:"#8FBCBB"}},{name:"[TypeScript] Static Class Support",scope:["source.ts support.constant.math","source.ts support.constant.dom","source.ts support.constant.json","source.tsx support.constant.math","source.tsx support.constant.dom","source.tsx support.constant.json"],settings:{foreground:"#8FBCBB"}},{name:"[TypeScript] Variables",scope:["source.ts support.variable","source.tsx support.variable"],settings:{foreground:"#D8DEE9"}},{name:"[TypeScript] Parentheses in Template Strings",scope:["source.ts meta.embedded.line meta.brace.square","source.ts meta.embedded.line meta.brace.round","source.tsx meta.embedded.line meta.brace.square","source.tsx meta.embedded.line meta.brace.round"],settings:{foreground:"#ECEFF4"}},{name:"[XML] Entity Name Tag Namespace",scope:"text.xml entity.name.tag.namespace",settings:{foreground:"#8FBCBB"}},{name:"[XML] Keyword Other Doctype",scope:"text.xml keyword.other.doctype",settings:{foreground:"#5E81AC"}},{name:"[XML] Meta Tag Preprocessor",scope:"text.xml meta.tag.preprocessor entity.name.tag",settings:{foreground:"#5E81AC"}},{name:"[XML] Entity Name Tag Namespace",scope:["text.xml string.unquoted.cdata","text.xml string.unquoted.cdata punctuation.definition.string"],settings:{foreground:"#D08770",fontStyle:"italic"}},{name:"[YAML] Entity Name Tag",scope:"source.yaml entity.name.tag",settings:{foreground:"#8FBCBB"}}]},autoImport:!0,showCopyButton:!0,enableSpa:!0,skipLanguages:[],filepath:"/Users/bytedance/modern.js/website/module-tools/docs/zh/guide/using-storybook.mdx"},m=void 0,f=[{id:"\u8C03\u8BD5\u4EE3\u7801",text:"\u8C03\u8BD5\u4EE3\u7801",depth:2},{id:"\u5F15\u7528\u7EC4\u4EF6\u4EA7\u7269",text:"\u5F15\u7528\u7EC4\u4EF6\u4EA7\u7269",depth:3},{id:"\u5F15\u7528\u7EC4\u4EF6\u6E90\u7801",text:"\u5F15\u7528\u7EC4\u4EF6\u6E90\u7801",depth:3},{id:"\u914D\u7F6E-storybook",text:"\u914D\u7F6E Storybook",depth:2},{id:"\u914D\u7F6E\u6587\u4EF6",text:"\u914D\u7F6E\u6587\u4EF6",depth:3},{id:"devstorybook",text:"dev.storybook",depth:3},{id:"\u6784\u5EFA-storybook-\u4EA7\u7269",text:"\u6784\u5EFA Storybook \u4EA7\u7269",depth:3}],b="\u4F7F\u7528 Storybook";function a(r){const o=Object.assign({h1:"h1",a:"a",p:"p",ul:"ul",li:"li",code:"code",h2:"h2",strong:"strong",h3:"h3",blockquote:"blockquote",ol:"ol"},r.components);return n||i("CH",!1),n.Code||i("CH.Code",!0),n.CodeSlot||i("CH.CodeSlot",!0),n.Spotlight||i("CH.Spotlight",!0),t(s,{children:[t(o.h1,{id:"\u4F7F\u7528-storybook",children:[e(o.a,{className:"header-anchor","aria-hidden":"true",href:"#\u4F7F\u7528-storybook",children:"#"}),"\u4F7F\u7528 Storybook"]}),`
|
|
2
|
+
`,e(o.p,{children:"\u9996\u5148\u5982\u679C\u6CA1\u6709\u770B\u8FC7\u4EE5\u4E0B\u5185\u5BB9\u7684\u8BDD\uFF0C\u53EF\u4EE5\u5148\u82B1\u51E0\u5206\u949F\u5148\u4E86\u89E3\u4E00\u4E0B\uFF1A"}),`
|
|
3
|
+
`,t(o.ul,{children:[`
|
|
4
|
+
`,e(o.li,{children:e(o.a,{href:"/zh/guide/use-micro-generator.html#storybook-%E8%B0%83%E8%AF%95",children:"\u4F7F\u7528\u5FAE\u751F\u6210\u5668\u5F00\u542F Storybook \u8C03\u8BD5"})}),`
|
|
5
|
+
`,e(o.li,{children:e(o.a,{href:"/zh/guide/command-preview.html#modern-dev",children:e(o.code,{children:"modern dev"})})}),`
|
|
6
|
+
`]}),`
|
|
7
|
+
`,t(o.p,{children:[e(o.a,{href:"https://storybook.js.org/",target:"_blank",rel:"nofollow",children:"Storybook"})," \u662F\u4E00\u4E2A\u4E13\u95E8\u7528\u4E8E\u7EC4\u4EF6\u8C03\u8BD5\u7684\u5DE5\u5177\uFF0C\u56F4\u7ED5\u7740\u7EC4\u4EF6\u5F00\u53D1\u63D0\u4F9B\u4E86\uFF1A"]}),`
|
|
8
|
+
`,t(o.ul,{children:[`
|
|
9
|
+
`,e(o.li,{children:"\u4E30\u5BCC\u591A\u6837\u7684\u8C03\u8BD5\u80FD\u529B"}),`
|
|
10
|
+
`,e(o.li,{children:"\u53EF\u4E0E\u4E00\u4E9B\u6D4B\u8BD5\u5DE5\u5177\u7ED3\u5408\u4F7F\u7528"}),`
|
|
11
|
+
`,e(o.li,{children:"\u53EF\u91CD\u590D\u4F7F\u7528\u7684\u6587\u6863\u5185\u5BB9"}),`
|
|
12
|
+
`,e(o.li,{children:"\u53EF\u5206\u4EAB\u80FD\u529B"}),`
|
|
13
|
+
`,e(o.li,{children:"\u5DE5\u4F5C\u6D41\u7A0B\u81EA\u52A8\u5316"}),`
|
|
14
|
+
`]}),`
|
|
15
|
+
`,e(o.p,{children:"\u56E0\u6B64\u5B83\u662F\u4E00\u4E2A\u590D\u6742\u4E14\u529F\u80FD\u5F3A\u5927\u7684\u5DE5\u5177\u3002"}),`
|
|
16
|
+
`,e(o.p,{children:"\u6A21\u5757\u5DE5\u7A0B\u89E3\u51B3\u65B9\u6848\u96C6\u6210\u4E86 Storybook\uFF0C\u56E0\u6B64\u4F60\u51E0\u4E4E\u53EF\u4EE5\u6309\u7167 Storybook \u5B98\u65B9\u6587\u6863\u7684\u5185\u5BB9\u8FDB\u884C\u4F7F\u7528\u3002\u4E0D\u8FC7\u4F9D\u7136\u6709\u4E00\u4E9B\u5730\u65B9\u9700\u8981\u6CE8\u610F\uFF0C\u63A5\u4E0B\u6765\u8BB2\u89E3\u4E00\u4E0B\uFF1A"}),`
|
|
17
|
+
`,t(o.h2,{id:"\u8C03\u8BD5\u4EE3\u7801",children:[e(o.a,{className:"header-anchor","aria-hidden":"true",href:"#\u8C03\u8BD5\u4EE3\u7801",children:"#"}),"\u8C03\u8BD5\u4EE3\u7801"]}),`
|
|
18
|
+
`,e(o.p,{children:"\u5728\u8C03\u8BD5\u4EE3\u7801\u8FC7\u7A0B\u4E2D\u9700\u8981\u5F15\u5165\u7EC4\u4EF6\u4EE3\u7801\uFF0C\u76EE\u524D\u53EF\u4EE5\u901A\u8FC7\u4E24\u79CD\u65B9\u5F0F\u5F15\u5165\u7EC4\u4EF6\u4EE3\u7801\uFF1A"}),`
|
|
19
|
+
`,t(o.ul,{children:[`
|
|
20
|
+
`,e(o.li,{children:"\u5F15\u7528\u7EC4\u4EF6\u4EA7\u7269"}),`
|
|
21
|
+
`,e(o.li,{children:"\u5F15\u7528\u7EC4\u4EF6\u6E90\u7801"}),`
|
|
22
|
+
`]}),`
|
|
23
|
+
`,t(o.p,{children:["\u6211\u4EEC\u66F4\u63A8\u8350\u4F7F\u7528\u7B2C\u4E00\u79CD\u201C",e(o.strong,{children:"\u5F15\u7528\u7EC4\u4EF6\u4EA7\u7269"}),"\u201D\u7684\u65B9\u5F0F\u3002\u56E0\u4E3A\u5B83\u51E0\u4E4E\u63A5\u8FD1\u771F\u5B9E\u7684\u4F7F\u7528\u573A\u666F\uFF0C\u4E0D\u4EC5\u53EF\u4EE5\u5BF9\u7EC4\u4EF6\u529F\u80FD\u8FDB\u884C\u8C03\u8BD5\uFF0C\u540C\u65F6\u4E5F\u5BF9\u6784\u5EFA\u4EA7\u7269\u7684\u6B63\u786E\u6027\u8FDB\u884C\u4E86\u9A8C\u8BC1\u3002"]}),`
|
|
24
|
+
`,e(o.p,{children:"\u63A5\u4E0B\u6765\u6211\u4EEC\u5206\u522B\u8BB2\u4E00\u4E0B\u8FD9\u4E24\u79CD\u65B9\u5F0F\u5177\u4F53\u5982\u4F55\u4F7F\u7528\u3002"}),`
|
|
25
|
+
`,t(o.h3,{id:"\u5F15\u7528\u7EC4\u4EF6\u4EA7\u7269",children:[e(o.a,{className:"header-anchor","aria-hidden":"true",href:"#\u5F15\u7528\u7EC4\u4EF6\u4EA7\u7269",children:"#"}),"\u5F15\u7528\u7EC4\u4EF6\u4EA7\u7269"]}),`
|
|
26
|
+
`,t(o.p,{children:["\u5047\u5982\u5B58\u5728 TypeScript \u9879\u76EE ",e(o.code,{children:"foo"}),"\uFF1A"]}),`
|
|
27
|
+
`,t(n.Spotlight,{codeConfig:c,editorSteps:[{northPanel:{tabs:["package.json"],active:"package.json",heightRatio:1},files:[{name:"package.json",focus:"",code:{lines:[{tokens:[{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"name",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:"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:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{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:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"./dist/types/index.d.ts",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"json"},annotations:[]}]},{northPanel:{tabs:["package.json"],active:"package.json",heightRatio:1},files:[{name:"package.json",focus:"",code:{lines:[{tokens:[{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"name",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:"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:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{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:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"./dist/types/index.d.ts",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"json"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:["package.json","src/index.ts"],active:"src/index.ts",heightRatio:1},files:[{name:"package.json",focus:"",code:{lines:[{tokens:[{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"name",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:"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:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{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:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"./dist/types/index.d.ts",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"json"},annotations:[]},{name:"src/index.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"const",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"content",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"hello world",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"typescript"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:["package.json","stories/tsconfig.json"],active:"stories/tsconfig.json",heightRatio:1},files:[{name:"package.json",focus:"",code:{lines:[{tokens:[{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"name",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:"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:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{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:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"./dist/types/index.d.ts",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"json"},annotations:[]},{name:"stories/tsconfig.json",focus:"7:9",code:{lines:[{tokens:[{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"extends",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:"../tsconfig.json",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:"include",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:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"compilerOptions",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{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:"jsx",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:"preserve",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:"baseUrl",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:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"paths",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{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:"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:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"json"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:["package.json","stories/index.stories.tsx"],active:"stories/index.stories.tsx",heightRatio:1},files:[{name:"package.json",focus:"",code:{lines:[{tokens:[{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"name",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:"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:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{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:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"./dist/types/index.d.ts",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"json"},annotations:[]},{name:"stories/index.stories.tsx",focus:"1:1",code:{lines:[{tokens:[{content:"import",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"content",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"from",props:{style:{color:"#81A1C1"}}},{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:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"const",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"Component",props:{style:{color:"#88C0D0"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"<div>",props:{style:{color:"#81A1C1"}}},{content:"this is a Story Component ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#81A1C1"}}},{content:"content",props:{style:{color:"#D8DEE9"}}},{content:"}</div>;",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"const",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"YourStory",props:{style:{color:"#88C0D0"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"<",props:{style:{color:"#81A1C1"}}},{content:"Component",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"/>;",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"title",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"Your Stories",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}],southPanel:void 0}],children:[e(s,{children:e(n.CodeSlot,{})}),t(s,{children:[t(o.p,{children:["\u786E\u4FDD ",e(o.code,{children:"package.json"})," \u7684 ",e(o.code,{children:"main"})," \u548C ",e(o.code,{children:"types"}),`
|
|
28
|
+
\u7684\u503C\u4E3A\u771F\u5B9E\u7684\u8DEF\u5F84\u3002`]}),e(n.CodeSlot,{})]}),t(s,{children:[t(o.p,{children:[e(o.code,{children:"foo"})," \u9879\u76EE\u7684\u6E90\u7801\u3002"]}),e(n.CodeSlot,{})]}),t(s,{children:[t(o.p,{children:["\u786E\u4FDD\u5728 ",e(o.code,{children:"stories/tsconfig.json"})," \u4E2D\u8BBE\u7F6E\u4E86\u6307\u5411\u9879\u76EE\u6839\u76EE\u5F55\u7684 ",e(o.code,{children:"paths"}),` \u914D\u7F6E\u3002
|
|
29
|
+
`,e(o.code,{children:"paths"})," \u7684 ",e(o.code,{children:"key"})," \u4E0E\u9879\u76EE\u540D\u79F0\u76F8\u540C\u3002"]}),e(n.CodeSlot,{})]}),t(s,{children:[e(o.p,{children:"\u6700\u540E\u5728 Story \u4EE3\u7801\u4E2D\u76F4\u63A5\u4EE5\u9879\u76EE\u540D\u79F0\u7684\u65B9\u5F0F\u5F15\u7528\u3002"}),e(n.CodeSlot,{})]})]}),`
|
|
30
|
+
`,e(o.p,{children:"\u5982\u679C\u5728\u5F00\u53D1\u8FC7\u7A0B\u4E2D\uFF0C\u9047\u5230\u65E0\u6CD5\u5B9E\u65F6\u83B7\u5F97\u7C7B\u578B\u5B9A\u4E49\u7684\u60C5\u51B5\uFF0C\u6B64\u65F6\uFF1A"}),`
|
|
31
|
+
`,t(o.p,{children:["\u5BF9\u4E8E ",e(o.code,{children:"pnpm"})," \u7684\u9879\u76EE\uFF0C\u53EF\u4EE5\u6309\u7167\u4E0B\u9762\u7684\u5185\u5BB9\u5BF9 ",e(o.code,{children:"package.json"})," \u8FDB\u884C\u4FEE\u6539\uFF1A"]}),`
|
|
32
|
+
`,e(n.Code,{codeConfig:c,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:[]}]}),`
|
|
33
|
+
`,t(o.blockquote,{children:[`
|
|
34
|
+
`,t(o.p,{children:["\u5173\u4E8E pnpm \u7684 ",e(o.code,{children:"publishConfig"})," \u7684\u4F7F\u7528\uFF0C\u53EF\u4EE5\u9605\u8BFB\u4E0B\u9762\u8FD9\u4E2A",e(o.a,{href:"https://pnpm.io/package_json#publishconfig",target:"_blank",rel:"nofollow",children:"\u94FE\u63A5"}),"\u3002"]}),`
|
|
35
|
+
`]}),`
|
|
36
|
+
`,t(o.p,{children:["\u800C\u5BF9\u4E8E npm \u548C Yarn \u7684\u9879\u76EE\uFF0C\u5219\u53EA\u80FD\u901A\u8FC7\u624B\u52A8\u7684\u65B9\u5F0F\u5728",e(o.strong,{children:"\u5F00\u53D1\u9636\u6BB5"}),"\u548C",e(o.strong,{children:"\u53D1\u5E03\u9636\u6BB5"}),"\u5BF9 ",e(o.code,{children:"package.json"})," \u7684 ",e(o.code,{children:"types"})," \u7684\u503C\u8FDB\u884C\u4FEE\u6539\u3002"]}),`
|
|
37
|
+
`,e(o.p,{children:"\u90A3\u4E48\u4E3A\u4EC0\u4E48\u53EF\u4EE5\u76F4\u63A5\u5F15\u7528\u4EA7\u7269\u5462\uFF1F"}),`
|
|
38
|
+
`,t(o.ol,{children:[`
|
|
39
|
+
`,t(o.li,{children:["\u5728\u6267\u884C ",e(o.code,{children:"modern dev storybook"})," \u547D\u4EE4\u4E4B\u524D\uFF0C\u4F1A\u81EA\u52A8\u6267\u884C ",e(o.code,{children:"modern build"})," \u547D\u4EE4\uFF0C\u4FDD\u8BC1\u9879\u76EE\u6784\u5EFA\u4EA7\u7269\u7684\u5B58\u5728\u3002"]}),`
|
|
40
|
+
`,t(o.li,{children:["\u5728 Storybook \u5185\u90E8\u589E\u52A0\u4E86\u4EE5\u9879\u76EE\u540D\u79F0\u4F5C\u4E3A\u522B\u540D\u7684\u5904\u7406\uFF0C\u4FDD\u8BC1\u80FD\u591F",t(o.strong,{children:["\u6839\u636E ",e(o.code,{children:"package.json"})," \u89E3\u6790\u51FA\u9879\u76EE\u7684\u4EA7\u7269\u8DEF\u5F84"]}),"\u3002"]}),`
|
|
41
|
+
`]}),`
|
|
42
|
+
`,t(o.h3,{id:"\u5F15\u7528\u7EC4\u4EF6\u6E90\u7801",children:[e(o.a,{className:"header-anchor","aria-hidden":"true",href:"#\u5F15\u7528\u7EC4\u4EF6\u6E90\u7801",children:"#"}),"\u5F15\u7528\u7EC4\u4EF6\u6E90\u7801"]}),`
|
|
43
|
+
`,e(o.p,{children:"\u5F15\u7528\u7EC4\u4EF6\u7684\u6E90\u7801\u53EF\u4EE5\u901A\u8FC7\u76F8\u5BF9\u8DEF\u5F84\u7684\u65B9\u5F0F\uFF1A"}),`
|
|
44
|
+
`,e(n.Code,{codeConfig:c,northPanel:{tabs:["./stories/index.tsx"],active:"./stories/index.tsx",heightRatio:1},files:[{name:"./stories/index.tsx",focus:"",code:{lines:[{tokens:[{content:"import",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"content",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"from",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"../src",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"const",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"Component",props:{style:{color:"#88C0D0"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" <",props:{style:{color:"#D8DEE9FF"}}},{content:"div",props:{style:{color:"#8FBCBB"}}},{content:">",props:{style:{color:"#D8DEE9FF"}}},{content:"this",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"is",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"a",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"Story",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"Component",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}},{content:"content",props:{style:{color:"#D8DEE9"}}},{content:"}",props:{style:{color:"#ECEFF4"}}},{content:"</",props:{style:{color:"#81A1C1"}}},{content:"div",props:{style:{color:"#D8DEE9"}}},{content:">;",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"const",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"YourStory",props:{style:{color:"#88C0D0"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" <",props:{style:{color:"#D8DEE9FF"}}},{content:"Component",props:{style:{color:"#8FBCBB"}}},{content:" />",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"title",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"Your Stories",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"ts"},annotations:[]}]}),`
|
|
45
|
+
`,e(o.p,{children:"\u90A3\u4E48\u4E3A\u4EC0\u4E48\u4E0D\u63A8\u8350\u4F7F\u7528\u6E90\u7801\u7684\u65B9\u5F0F\u5462\uFF1F"}),`
|
|
46
|
+
`,t(o.p,{children:["\u4E0D\u4EC5\u4EC5\u662F\u56E0\u4E3A\u4F7F\u7528\u7EC4\u4EF6\u6E90\u7801\u65E0\u6CD5\u9A8C\u8BC1\u7EC4\u4EF6\u4EA7\u7269\u662F\u5426\u6B63\u786E\uFF0C",e(o.strong,{children:`\u540C\u65F6\u6A21\u5757\u5DE5\u7A0B\u5BF9\u4E8E\u6784\u5EFA\u4EA7\u7269\u652F\u6301\u7684\u4E00\u4E9B\u914D\u7F6E\u65E0\u6CD5\u5B8C\u5168\u8F6C\u6362\u4E3A Storybook
|
|
47
|
+
\u5185\u90E8\u7684\u914D\u7F6E`}),"\u3002\u5982\u679C\u67D0\u4E9B\u914D\u7F6E\u65E0\u6CD5\u8FDB\u884C\u76F8\u4E92\u8F6C\u6362\u7684\u8BDD\uFF0C\u5C31\u4F1A\u5728 Storybook \u8C03\u8BD5\u8FC7\u7A0B\u4E2D\u51FA\u73B0\u4E0D\u7B26\u5408\u9884\u671F\u7684\u7ED3\u679C\u3002"]}),`
|
|
48
|
+
`,t(o.h2,{id:"\u914D\u7F6E-storybook",children:[e(o.a,{className:"header-anchor","aria-hidden":"true",href:"#\u914D\u7F6E-storybook",children:"#"}),"\u914D\u7F6E Storybook"]}),`
|
|
49
|
+
`,t(o.h3,{id:"\u914D\u7F6E\u6587\u4EF6",children:[e(o.a,{className:"header-anchor","aria-hidden":"true",href:"#\u914D\u7F6E\u6587\u4EF6",children:"#"}),"\u914D\u7F6E\u6587\u4EF6"]}),`
|
|
50
|
+
`,t(o.p,{children:["Storybook \u5B98\u65B9\u901A\u8FC7\u4E00\u4E2A\u540D\u4E3A ",e(o.code,{children:".storybook"})," \u7684\u6587\u4EF6\u5939\u6765\u8FDB\u884C\u9879\u76EE\u914D\u7F6E\uFF0C\u5176\u4E2D\u5305\u542B\u5404\u79CD\u914D\u7F6E\u6587\u4EF6\u3002",t(o.strong,{children:["\u5728\u6A21\u5757\u5DE5\u7A0B\u65B9\u6848\u4E2D\uFF0C\u53EF\u4EE5\u5728\u9879\u76EE\u7684 ",e(o.code,{children:"config/storybook"})," \u76EE\u5F55\u4E0B\u589E\u52A0 Storybook \u914D\u7F6E\u6587\u4EF6\u3002"]})]}),`
|
|
51
|
+
`,e(o.p,{children:"\u5173\u4E8E Storybook \u5404\u79CD\u914D\u7F6E\u6587\u4EF6\u7684\u4F7F\u7528\u65B9\u5F0F\uFF0C\u53EF\u4EE5\u67E5\u770B\u4E0B\u9762\u7684\u94FE\u63A5\uFF1A"}),`
|
|
52
|
+
`,t(o.ul,{children:[`
|
|
53
|
+
`,e(o.li,{children:e(o.a,{href:"https://storybook.js.org/docs/react/configure/overview",target:"_blank",rel:"nofollow",children:"Configure Storybook"})}),`
|
|
54
|
+
`]}),`
|
|
55
|
+
`,t(o.p,{children:[e(o.strong,{children:"\u4E0D\u8FC7\u5728\u6A21\u5757\u9879\u76EE\u91CC\u8FDB\u884C Storybook \u5B58\u5728\u4E00\u4E9B\u9650\u5236"}),"\uFF1A"]}),`
|
|
56
|
+
`,t(o.ul,{children:[`
|
|
57
|
+
`,t(o.li,{children:["\u76EE\u524D\u4E0D\u80FD\u4FEE\u6539 Story \u6587\u4EF6\u5B58\u653E\u7684\u4F4D\u7F6E\uFF0C\u5373\u65E0\u6CD5\u5728 ",e(o.code,{children:"main.js"})," \u6587\u4EF6\u91CC\u4FEE\u6539 ",e(o.code,{children:"stories"})," \u914D\u7F6E\u3002"]}),`
|
|
58
|
+
`,t(o.li,{children:["\u76EE\u524D\u4E0D\u80FD\u4FEE\u6539 Webpack \u548C Babel \u76F8\u5173\u7684\u914D\u7F6E\uFF0C\u5373\u65E0\u6CD5\u5728 ",e(o.code,{children:"main.js"})," \u6587\u4EF6\u91CC\u4FEE\u6539 ",e(o.code,{children:"webpackFinal"})," \u548C ",e(o.code,{children:"babel"})," \u914D\u7F6E\u3002"]}),`
|
|
59
|
+
`]}),`
|
|
60
|
+
`,e(o.p,{children:"\u5728\u672A\u6765\u6211\u4EEC\u4F1A\u8003\u8651\u8FD9\u4E9B\u914D\u7F6E\u662F\u5426\u53EF\u4EE5\u5141\u8BB8\u4FEE\u6539\uFF0C\u4E0D\u8FC7\u76EE\u524D\u4E3A\u4E86\u51CF\u5C11\u4E0D\u53EF\u9884\u77E5\u7684\u95EE\u9898\u6682\u65F6\u9650\u5236\u4F7F\u7528\u8FD9\u4E9B\u914D\u7F6E\u3002"}),`
|
|
61
|
+
`,t(o.h3,{id:"devstorybook",children:[e(o.a,{className:"header-anchor","aria-hidden":"true",href:"#devstorybook",children:"#"}),e(o.code,{children:"dev.storybook"})]}),`
|
|
62
|
+
`,t(o.p,{children:["\u9664\u4E86\u914D\u7F6E\u6587\u4EF6\u4EE5\u5916\uFF0C\u6A21\u5757\u5DE5\u7A0B\u65B9\u6848\u8FD8\u5728 ",e(o.code,{children:"modern.config.(j|t)s"})," \u9879\u76EE\u914D\u7F6E\u6587\u4EF6\u91CC\u63D0\u4F9B\u4E86 ",e(o.code,{children:"dev.storybook"})," \u914D\u7F6E\u9879\u3002"]}),`
|
|
63
|
+
`,e(o.p,{children:"\u76EE\u524D\u53EF\u4EE5\u901A\u8FC7\u8BE5\u914D\u7F6E\u5BF9 Storybook \u7684 webpack \u914D\u7F6E\u8FDB\u884C\u4FEE\u6539\u3002"}),`
|
|
64
|
+
`,t(o.ul,{children:[`
|
|
65
|
+
`,e(o.li,{children:e(o.a,{href:"/xxx.html",children:e(o.code,{children:"dev.storybook.webpack"})})}),`
|
|
66
|
+
`]}),`
|
|
67
|
+
`,t(o.h3,{id:"\u6784\u5EFA-storybook-\u4EA7\u7269",children:[e(o.a,{className:"header-anchor","aria-hidden":"true",href:"#\u6784\u5EFA-storybook-\u4EA7\u7269",children:"#"}),"\u6784\u5EFA Storybook \u4EA7\u7269"]}),`
|
|
68
|
+
`,e(o.p,{children:"\u9664\u4E86\u53EF\u4EE5\u5BF9\u7EC4\u4EF6\u6216\u8005\u666E\u901A\u7684\u6A21\u5757\u8FDB\u884C Storybook \u8C03\u8BD5\uFF0C\u8FD8\u53EF\u4EE5\u901A\u8FC7\u4E0B\u9762\u7684\u547D\u4EE4\u6765\u6267\u884C Storybook \u7684\u6784\u5EFA\u4EFB\u52A1\u3002"}),`
|
|
69
|
+
`,e(n.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"modern build --platform storybook",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"bash"},annotations:[]}]}),`
|
|
70
|
+
`,t(o.p,{children:["\u5173\u4E8E ",e(o.code,{children:"modern build --platform"})," \u547D\u4EE4\u53EF\u4EE5\u67E5\u770B\uFF1A"]}),`
|
|
71
|
+
`,t(o.ul,{children:[`
|
|
72
|
+
`,e(o.li,{children:e(o.a,{href:"/zh/guide/command-preview.html#modern-build",children:e(o.code,{children:"modern build"})})}),`
|
|
73
|
+
`]}),`
|
|
74
|
+
`,t(o.p,{children:["\u6784\u5EFA\u5B8C\u6210\u540E\uFF0C\u53EF\u4EE5\u5728 ",e(o.code,{children:"dist/storybook-static"})," \u76EE\u5F55\u770B\u5230\u6784\u5EFA\u4EA7\u7269\u6587\u4EF6\u3002"]})]})}function C(r={}){const{wrapper:o}=r.components||{};return o?e(o,Object.assign({},r,{children:e(a,r)})):a(r)}function i(r,o){throw new Error("Expected "+(o?"component":"object")+" `"+r+"` to be defined: you likely forgot to import, pass, or provide it.")}const h="2022/12/5 16:29:55",k=`# \u4F7F\u7528 Storybook
|
|
75
|
+
|
|
76
|
+
\u9996\u5148\u5982\u679C\u6CA1\u6709\u770B\u8FC7\u4EE5\u4E0B\u5185\u5BB9\u7684\u8BDD\uFF0C\u53EF\u4EE5\u5148\u82B1\u51E0\u5206\u949F\u5148\u4E86\u89E3\u4E00\u4E0B\uFF1A
|
|
77
|
+
|
|
78
|
+
* [\u4F7F\u7528\u5FAE\u751F\u6210\u5668\u5F00\u542F Storybook \u8C03\u8BD5](/zh/guide/use-micro-generator#storybook-\u8C03\u8BD5)
|
|
79
|
+
* [\`modern dev\`](/zh/guide/command-preview#modern-dev)
|
|
80
|
+
|
|
81
|
+
[Storybook](https://storybook.js.org/) \u662F\u4E00\u4E2A\u4E13\u95E8\u7528\u4E8E\u7EC4\u4EF6\u8C03\u8BD5\u7684\u5DE5\u5177\uFF0C\u56F4\u7ED5\u7740\u7EC4\u4EF6\u5F00\u53D1\u63D0\u4F9B\u4E86\uFF1A
|
|
82
|
+
|
|
83
|
+
* \u4E30\u5BCC\u591A\u6837\u7684\u8C03\u8BD5\u80FD\u529B
|
|
84
|
+
* \u53EF\u4E0E\u4E00\u4E9B\u6D4B\u8BD5\u5DE5\u5177\u7ED3\u5408\u4F7F\u7528
|
|
85
|
+
* \u53EF\u91CD\u590D\u4F7F\u7528\u7684\u6587\u6863\u5185\u5BB9
|
|
86
|
+
* \u53EF\u5206\u4EAB\u80FD\u529B
|
|
87
|
+
* \u5DE5\u4F5C\u6D41\u7A0B\u81EA\u52A8\u5316
|
|
88
|
+
|
|
89
|
+
\u56E0\u6B64\u5B83\u662F\u4E00\u4E2A\u590D\u6742\u4E14\u529F\u80FD\u5F3A\u5927\u7684\u5DE5\u5177\u3002
|
|
90
|
+
|
|
91
|
+
\u6A21\u5757\u5DE5\u7A0B\u89E3\u51B3\u65B9\u6848\u96C6\u6210\u4E86 Storybook\uFF0C\u56E0\u6B64\u4F60\u51E0\u4E4E\u53EF\u4EE5\u6309\u7167 Storybook \u5B98\u65B9\u6587\u6863\u7684\u5185\u5BB9\u8FDB\u884C\u4F7F\u7528\u3002\u4E0D\u8FC7\u4F9D\u7136\u6709\u4E00\u4E9B\u5730\u65B9\u9700\u8981\u6CE8\u610F\uFF0C\u63A5\u4E0B\u6765\u8BB2\u89E3\u4E00\u4E0B\uFF1A
|
|
92
|
+
|
|
93
|
+
## \u8C03\u8BD5\u4EE3\u7801
|
|
94
|
+
|
|
95
|
+
\u5728\u8C03\u8BD5\u4EE3\u7801\u8FC7\u7A0B\u4E2D\u9700\u8981\u5F15\u5165\u7EC4\u4EF6\u4EE3\u7801\uFF0C\u76EE\u524D\u53EF\u4EE5\u901A\u8FC7\u4E24\u79CD\u65B9\u5F0F\u5F15\u5165\u7EC4\u4EF6\u4EE3\u7801\uFF1A
|
|
96
|
+
|
|
97
|
+
* \u5F15\u7528\u7EC4\u4EF6\u4EA7\u7269
|
|
98
|
+
* \u5F15\u7528\u7EC4\u4EF6\u6E90\u7801
|
|
99
|
+
|
|
100
|
+
\u6211\u4EEC\u66F4\u63A8\u8350\u4F7F\u7528\u7B2C\u4E00\u79CD\u201C**\u5F15\u7528\u7EC4\u4EF6\u4EA7\u7269**\u201D\u7684\u65B9\u5F0F\u3002\u56E0\u4E3A\u5B83\u51E0\u4E4E\u63A5\u8FD1\u771F\u5B9E\u7684\u4F7F\u7528\u573A\u666F\uFF0C\u4E0D\u4EC5\u53EF\u4EE5\u5BF9\u7EC4\u4EF6\u529F\u80FD\u8FDB\u884C\u8C03\u8BD5\uFF0C\u540C\u65F6\u4E5F\u5BF9\u6784\u5EFA\u4EA7\u7269\u7684\u6B63\u786E\u6027\u8FDB\u884C\u4E86\u9A8C\u8BC1\u3002
|
|
101
|
+
|
|
102
|
+
\u63A5\u4E0B\u6765\u6211\u4EEC\u5206\u522B\u8BB2\u4E00\u4E0B\u8FD9\u4E24\u79CD\u65B9\u5F0F\u5177\u4F53\u5982\u4F55\u4F7F\u7528\u3002
|
|
103
|
+
|
|
104
|
+
### \u5F15\u7528\u7EC4\u4EF6\u4EA7\u7269
|
|
105
|
+
|
|
106
|
+
\u5047\u5982\u5B58\u5728 TypeScript \u9879\u76EE \`foo\`\uFF1A
|
|
107
|
+
|
|
108
|
+
<CH.Spotlight>
|
|
109
|
+
|
|
110
|
+
\`\`\`json package.json
|
|
111
|
+
{
|
|
112
|
+
"name": "foo",
|
|
113
|
+
"main": "./dist/index.js",
|
|
114
|
+
"types": "./dist/types/index.d.ts"
|
|
115
|
+
}
|
|
116
|
+
\`\`\`
|
|
117
|
+
|
|
118
|
+
---
|
|
119
|
+
|
|
120
|
+
\u786E\u4FDD \`package.json\` \u7684 \`main\` \u548C \`types\`
|
|
121
|
+
\u7684\u503C\u4E3A\u771F\u5B9E\u7684\u8DEF\u5F84\u3002
|
|
122
|
+
|
|
123
|
+
\`\`\`json package.json
|
|
124
|
+
{
|
|
125
|
+
"name": "foo",
|
|
126
|
+
"main": "./dist/index.js",
|
|
127
|
+
"types": "./dist/types/index.d.ts"
|
|
128
|
+
}
|
|
129
|
+
\`\`\`
|
|
130
|
+
|
|
131
|
+
---
|
|
132
|
+
|
|
133
|
+
\`foo\` \u9879\u76EE\u7684\u6E90\u7801\u3002
|
|
134
|
+
|
|
135
|
+
\`\`\`typescript src/index.ts
|
|
136
|
+
export const content = 'hello world';
|
|
137
|
+
\`\`\`
|
|
138
|
+
|
|
139
|
+
---
|
|
140
|
+
|
|
141
|
+
\u786E\u4FDD\u5728 \`stories/tsconfig.json\` \u4E2D\u8BBE\u7F6E\u4E86\u6307\u5411\u9879\u76EE\u6839\u76EE\u5F55\u7684 \`paths\` \u914D\u7F6E\u3002
|
|
142
|
+
\`paths\` \u7684 \`key\` \u4E0E\u9879\u76EE\u540D\u79F0\u76F8\u540C\u3002
|
|
143
|
+
|
|
144
|
+
\`\`\`json stories/tsconfig.json focus=7:9
|
|
145
|
+
{
|
|
146
|
+
"extends": "../tsconfig.json",
|
|
147
|
+
"include": ["./"],
|
|
148
|
+
"compilerOptions": {
|
|
149
|
+
"jsx": "preserve",
|
|
150
|
+
"baseUrl": ".",
|
|
151
|
+
"paths": {
|
|
152
|
+
"foo": ["../"]
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
\`\`\`
|
|
157
|
+
|
|
158
|
+
---
|
|
159
|
+
|
|
160
|
+
\u6700\u540E\u5728 Story \u4EE3\u7801\u4E2D\u76F4\u63A5\u4EE5\u9879\u76EE\u540D\u79F0\u7684\u65B9\u5F0F\u5F15\u7528\u3002
|
|
161
|
+
|
|
162
|
+
\`\`\`tsx stories/index.stories.tsx focus=1:1
|
|
163
|
+
import { content } from 'foo';
|
|
164
|
+
|
|
165
|
+
const Component = () => <div>this is a Story Component {content}</div>;
|
|
166
|
+
|
|
167
|
+
export const YourStory = () => <Component />;
|
|
168
|
+
|
|
169
|
+
export default {
|
|
170
|
+
title: 'Your Stories',
|
|
171
|
+
};
|
|
172
|
+
\`\`\`
|
|
173
|
+
|
|
174
|
+
</CH.Spotlight>
|
|
175
|
+
|
|
176
|
+
\u5982\u679C\u5728\u5F00\u53D1\u8FC7\u7A0B\u4E2D\uFF0C\u9047\u5230\u65E0\u6CD5\u5B9E\u65F6\u83B7\u5F97\u7C7B\u578B\u5B9A\u4E49\u7684\u60C5\u51B5\uFF0C\u6B64\u65F6\uFF1A
|
|
177
|
+
|
|
178
|
+
\u5BF9\u4E8E \`pnpm\` \u7684\u9879\u76EE\uFF0C\u53EF\u4EE5\u6309\u7167\u4E0B\u9762\u7684\u5185\u5BB9\u5BF9 \`package.json\` \u8FDB\u884C\u4FEE\u6539\uFF1A
|
|
179
|
+
|
|
180
|
+
\`\`\` ts focus=4:7
|
|
181
|
+
{
|
|
182
|
+
"name": "foo",
|
|
183
|
+
"main": "./dist/index.js",
|
|
184
|
+
"types": "./src/index.ts",
|
|
185
|
+
"publishConfig": {
|
|
186
|
+
"types": "./dist/index.d.ts",
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
\`\`\`
|
|
190
|
+
> \u5173\u4E8E pnpm \u7684 \`publishConfig\` \u7684\u4F7F\u7528\uFF0C\u53EF\u4EE5\u9605\u8BFB\u4E0B\u9762\u8FD9\u4E2A[\u94FE\u63A5](https://pnpm.io/package_json#publishconfig)\u3002
|
|
191
|
+
|
|
192
|
+
\u800C\u5BF9\u4E8E npm \u548C Yarn \u7684\u9879\u76EE\uFF0C\u5219\u53EA\u80FD\u901A\u8FC7\u624B\u52A8\u7684\u65B9\u5F0F\u5728**\u5F00\u53D1\u9636\u6BB5**\u548C**\u53D1\u5E03\u9636\u6BB5**\u5BF9 \`package.json\` \u7684 \`types\` \u7684\u503C\u8FDB\u884C\u4FEE\u6539\u3002
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
\u90A3\u4E48\u4E3A\u4EC0\u4E48\u53EF\u4EE5\u76F4\u63A5\u5F15\u7528\u4EA7\u7269\u5462\uFF1F
|
|
196
|
+
|
|
197
|
+
1. \u5728\u6267\u884C \`modern dev storybook\` \u547D\u4EE4\u4E4B\u524D\uFF0C\u4F1A\u81EA\u52A8\u6267\u884C \`modern build\` \u547D\u4EE4\uFF0C\u4FDD\u8BC1\u9879\u76EE\u6784\u5EFA\u4EA7\u7269\u7684\u5B58\u5728\u3002
|
|
198
|
+
2. \u5728 Storybook \u5185\u90E8\u589E\u52A0\u4E86\u4EE5\u9879\u76EE\u540D\u79F0\u4F5C\u4E3A\u522B\u540D\u7684\u5904\u7406\uFF0C\u4FDD\u8BC1\u80FD\u591F**\u6839\u636E \`package.json\` \u89E3\u6790\u51FA\u9879\u76EE\u7684\u4EA7\u7269\u8DEF\u5F84**\u3002
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
### \u5F15\u7528\u7EC4\u4EF6\u6E90\u7801
|
|
202
|
+
|
|
203
|
+
\u5F15\u7528\u7EC4\u4EF6\u7684\u6E90\u7801\u53EF\u4EE5\u901A\u8FC7\u76F8\u5BF9\u8DEF\u5F84\u7684\u65B9\u5F0F\uFF1A
|
|
204
|
+
|
|
205
|
+
\`\`\`ts ./stories/index.tsx
|
|
206
|
+
import { content } from '../src';
|
|
207
|
+
|
|
208
|
+
const Component = () => <div>this is a Story Component {content}</div>;
|
|
209
|
+
|
|
210
|
+
export const YourStory = () => <Component />;
|
|
211
|
+
|
|
212
|
+
export default {
|
|
213
|
+
title: 'Your Stories',
|
|
214
|
+
};
|
|
215
|
+
\`\`\`
|
|
216
|
+
|
|
217
|
+
\u90A3\u4E48\u4E3A\u4EC0\u4E48\u4E0D\u63A8\u8350\u4F7F\u7528\u6E90\u7801\u7684\u65B9\u5F0F\u5462\uFF1F
|
|
218
|
+
|
|
219
|
+
\u4E0D\u4EC5\u4EC5\u662F\u56E0\u4E3A\u4F7F\u7528\u7EC4\u4EF6\u6E90\u7801\u65E0\u6CD5\u9A8C\u8BC1\u7EC4\u4EF6\u4EA7\u7269\u662F\u5426\u6B63\u786E\uFF0C**\u540C\u65F6\u6A21\u5757\u5DE5\u7A0B\u5BF9\u4E8E\u6784\u5EFA\u4EA7\u7269\u652F\u6301\u7684\u4E00\u4E9B\u914D\u7F6E\u65E0\u6CD5\u5B8C\u5168\u8F6C\u6362\u4E3A Storybook
|
|
220
|
+
\u5185\u90E8\u7684\u914D\u7F6E**\u3002\u5982\u679C\u67D0\u4E9B\u914D\u7F6E\u65E0\u6CD5\u8FDB\u884C\u76F8\u4E92\u8F6C\u6362\u7684\u8BDD\uFF0C\u5C31\u4F1A\u5728 Storybook \u8C03\u8BD5\u8FC7\u7A0B\u4E2D\u51FA\u73B0\u4E0D\u7B26\u5408\u9884\u671F\u7684\u7ED3\u679C\u3002
|
|
221
|
+
|
|
222
|
+
## \u914D\u7F6E Storybook
|
|
223
|
+
|
|
224
|
+
### \u914D\u7F6E\u6587\u4EF6
|
|
225
|
+
|
|
226
|
+
Storybook \u5B98\u65B9\u901A\u8FC7\u4E00\u4E2A\u540D\u4E3A \`.storybook\` \u7684\u6587\u4EF6\u5939\u6765\u8FDB\u884C\u9879\u76EE\u914D\u7F6E\uFF0C\u5176\u4E2D\u5305\u542B\u5404\u79CD\u914D\u7F6E\u6587\u4EF6\u3002**\u5728\u6A21\u5757\u5DE5\u7A0B\u65B9\u6848\u4E2D\uFF0C\u53EF\u4EE5\u5728\u9879\u76EE\u7684 \`config/storybook\` \u76EE\u5F55\u4E0B\u589E\u52A0 Storybook \u914D\u7F6E\u6587\u4EF6\u3002**
|
|
227
|
+
|
|
228
|
+
\u5173\u4E8E Storybook \u5404\u79CD\u914D\u7F6E\u6587\u4EF6\u7684\u4F7F\u7528\u65B9\u5F0F\uFF0C\u53EF\u4EE5\u67E5\u770B\u4E0B\u9762\u7684\u94FE\u63A5\uFF1A
|
|
229
|
+
|
|
230
|
+
* [Configure Storybook](https://storybook.js.org/docs/react/configure/overview)
|
|
231
|
+
|
|
232
|
+
**\u4E0D\u8FC7\u5728\u6A21\u5757\u9879\u76EE\u91CC\u8FDB\u884C Storybook \u5B58\u5728\u4E00\u4E9B\u9650\u5236**\uFF1A
|
|
233
|
+
|
|
234
|
+
* \u76EE\u524D\u4E0D\u80FD\u4FEE\u6539 Story \u6587\u4EF6\u5B58\u653E\u7684\u4F4D\u7F6E\uFF0C\u5373\u65E0\u6CD5\u5728 \`main.js\` \u6587\u4EF6\u91CC\u4FEE\u6539 \`stories\` \u914D\u7F6E\u3002
|
|
235
|
+
* \u76EE\u524D\u4E0D\u80FD\u4FEE\u6539 Webpack \u548C Babel \u76F8\u5173\u7684\u914D\u7F6E\uFF0C\u5373\u65E0\u6CD5\u5728 \`main.js\` \u6587\u4EF6\u91CC\u4FEE\u6539 \`webpackFinal\` \u548C \`babel\` \u914D\u7F6E\u3002
|
|
236
|
+
|
|
237
|
+
\u5728\u672A\u6765\u6211\u4EEC\u4F1A\u8003\u8651\u8FD9\u4E9B\u914D\u7F6E\u662F\u5426\u53EF\u4EE5\u5141\u8BB8\u4FEE\u6539\uFF0C\u4E0D\u8FC7\u76EE\u524D\u4E3A\u4E86\u51CF\u5C11\u4E0D\u53EF\u9884\u77E5\u7684\u95EE\u9898\u6682\u65F6\u9650\u5236\u4F7F\u7528\u8FD9\u4E9B\u914D\u7F6E\u3002
|
|
238
|
+
|
|
239
|
+
### \`dev.storybook\`
|
|
240
|
+
|
|
241
|
+
\u9664\u4E86\u914D\u7F6E\u6587\u4EF6\u4EE5\u5916\uFF0C\u6A21\u5757\u5DE5\u7A0B\u65B9\u6848\u8FD8\u5728 \`modern.config.(j|t)s\` \u9879\u76EE\u914D\u7F6E\u6587\u4EF6\u91CC\u63D0\u4F9B\u4E86 \`dev.storybook\` \u914D\u7F6E\u9879\u3002
|
|
242
|
+
|
|
243
|
+
\u76EE\u524D\u53EF\u4EE5\u901A\u8FC7\u8BE5\u914D\u7F6E\u5BF9 Storybook \u7684 webpack \u914D\u7F6E\u8FDB\u884C\u4FEE\u6539\u3002
|
|
244
|
+
|
|
245
|
+
* [\`dev.storybook.webpack\`](xxx)
|
|
246
|
+
|
|
247
|
+
### \u6784\u5EFA Storybook \u4EA7\u7269
|
|
248
|
+
|
|
249
|
+
\u9664\u4E86\u53EF\u4EE5\u5BF9\u7EC4\u4EF6\u6216\u8005\u666E\u901A\u7684\u6A21\u5757\u8FDB\u884C Storybook \u8C03\u8BD5\uFF0C\u8FD8\u53EF\u4EE5\u901A\u8FC7\u4E0B\u9762\u7684\u547D\u4EE4\u6765\u6267\u884C Storybook \u7684\u6784\u5EFA\u4EFB\u52A1\u3002
|
|
250
|
+
|
|
251
|
+
\`\`\` bash
|
|
252
|
+
modern build --platform storybook
|
|
253
|
+
\`\`\`
|
|
254
|
+
|
|
255
|
+
\u5173\u4E8E \`modern build --platform\` \u547D\u4EE4\u53EF\u4EE5\u67E5\u770B\uFF1A
|
|
256
|
+
|
|
257
|
+
* [\`modern build\`](/zh/guide/command-preview#modern-build)
|
|
258
|
+
|
|
259
|
+
\u6784\u5EFA\u5B8C\u6210\u540E\uFF0C\u53EF\u4EE5\u5728 \`dist/storybook-static\` \u76EE\u5F55\u770B\u5230\u6784\u5EFA\u4EA7\u7269\u6587\u4EF6\u3002
|
|
260
|
+
`;export{n as CH,c as chCodeConfig,k as content,C as default,m as frontmatter,h as lastUpdatedTime,b as title,f as toc};
|