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

package/docs/.island/dist/assets/using-storybook.b8e7dd04.js

@@ -0,0 +1,260 @@
+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/targeral/github/targeral-modern-js/website/module-tools/docs/zh/guide/basic/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"]}),`
+`,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"}),`
+`,t(o.ul,{children:[`
+`,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"})}),`
+`,e(o.li,{children:e(o.a,{href:"/zh/guide/command-preview.html#modern-dev",children:e(o.code,{children:"modern dev"})})}),`
+`]}),`
+`,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"]}),`
+`,t(o.ul,{children:[`
+`,e(o.li,{children:"\u4E30\u5BCC\u591A\u6837\u7684\u8C03\u8BD5\u80FD\u529B"}),`
+`,e(o.li,{children:"\u53EF\u4E0E\u4E00\u4E9B\u6D4B\u8BD5\u5DE5\u5177\u7ED3\u5408\u4F7F\u7528"}),`
+`,e(o.li,{children:"\u53EF\u91CD\u590D\u4F7F\u7528\u7684\u6587\u6863\u5185\u5BB9"}),`
+`,e(o.li,{children:"\u53EF\u5206\u4EAB\u80FD\u529B"}),`
+`,e(o.li,{children:"\u5DE5\u4F5C\u6D41\u7A0B\u81EA\u52A8\u5316"}),`
+`]}),`
+`,e(o.p,{children:"\u56E0\u6B64\u5B83\u662F\u4E00\u4E2A\u590D\u6742\u4E14\u529F\u80FD\u5F3A\u5927\u7684\u5DE5\u5177\u3002"}),`
+`,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"}),`
+`,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"]}),`
+`,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"}),`
+`,t(o.ul,{children:[`
+`,e(o.li,{children:"\u5F15\u7528\u7EC4\u4EF6\u4EA7\u7269"}),`
+`,e(o.li,{children:"\u5F15\u7528\u7EC4\u4EF6\u6E90\u7801"}),`
+`]}),`
+`,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"]}),`
+`,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"}),`
+`,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"]}),`
+`,t(o.p,{children:["\u5047\u5982\u5B58\u5728 TypeScript \u9879\u76EE ",e(o.code,{children:"foo"}),"\uFF1A"]}),`
+`,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"}),`
+\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
+`,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,{})]})]}),`
+`,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"}),`
+`,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"]}),`
+`,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:[]}]}),`
+`,t(o.blockquote,{children:[`
+`,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"]}),`
+`]}),`
+`,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"]}),`
+`,e(o.p,{children:"\u90A3\u4E48\u4E3A\u4EC0\u4E48\u53EF\u4EE5\u76F4\u63A5\u5F15\u7528\u4EA7\u7269\u5462\uFF1F"}),`
+`,t(o.ol,{children:[`
+`,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"]}),`
+`,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"]}),`
+`]}),`
+`,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"]}),`
+`,e(o.p,{children:"\u5F15\u7528\u7EC4\u4EF6\u7684\u6E90\u7801\u53EF\u4EE5\u901A\u8FC7\u76F8\u5BF9\u8DEF\u5F84\u7684\u65B9\u5F0F\uFF1A"}),`
+`,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:[]}]}),`
+`,e(o.p,{children:"\u90A3\u4E48\u4E3A\u4EC0\u4E48\u4E0D\u63A8\u8350\u4F7F\u7528\u6E90\u7801\u7684\u65B9\u5F0F\u5462\uFF1F"}),`
+`,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
+\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"]}),`
+`,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"]}),`
+`,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"]}),`
+`,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"]})]}),`
+`,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"}),`
+`,t(o.ul,{children:[`
+`,e(o.li,{children:e(o.a,{href:"https://storybook.js.org/docs/react/configure/overview",target:"_blank",rel:"nofollow",children:"Configure Storybook"})}),`
+`]}),`
+`,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"]}),`
+`,t(o.ul,{children:[`
+`,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"]}),`
+`,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"]}),`
+`]}),`
+`,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"}),`
+`,t(o.h3,{id:"devstorybook",children:[e(o.a,{className:"header-anchor","aria-hidden":"true",href:"#devstorybook",children:"#"}),e(o.code,{children:"dev.storybook"})]}),`
+`,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"]}),`
+`,e(o.p,{children:"\u76EE\u524D\u53EF\u4EE5\u901A\u8FC7\u8BE5\u914D\u7F6E\u5BF9 Storybook \u7684 webpack \u914D\u7F6E\u8FDB\u884C\u4FEE\u6539\u3002"}),`
+`,t(o.ul,{children:[`
+`,e(o.li,{children:e(o.a,{href:"/xxx.html",children:e(o.code,{children:"dev.storybook.webpack"})})}),`
+`]}),`
+`,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"]}),`
+`,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"}),`
+`,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:[]}]}),`
+`,t(o.p,{children:["\u5173\u4E8E ",e(o.code,{children:"modern build --platform"})," \u547D\u4EE4\u53EF\u4EE5\u67E5\u770B\uFF1A"]}),`
+`,t(o.ul,{children:[`
+`,e(o.li,{children:e(o.a,{href:"/zh/guide/command-preview.html#modern-build",children:e(o.code,{children:"modern build"})})}),`
+`]}),`
+`,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/15 18:01:48",k=`# \u4F7F\u7528 Storybook
+
+\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
+
+* [\u4F7F\u7528\u5FAE\u751F\u6210\u5668\u5F00\u542F Storybook \u8C03\u8BD5](/zh/guide/use-micro-generator#storybook-\u8C03\u8BD5)
+* [\`modern dev\`](/zh/guide/command-preview#modern-dev)
+
+[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
+
+* \u4E30\u5BCC\u591A\u6837\u7684\u8C03\u8BD5\u80FD\u529B
+* \u53EF\u4E0E\u4E00\u4E9B\u6D4B\u8BD5\u5DE5\u5177\u7ED3\u5408\u4F7F\u7528
+* \u53EF\u91CD\u590D\u4F7F\u7528\u7684\u6587\u6863\u5185\u5BB9
+* \u53EF\u5206\u4EAB\u80FD\u529B
+* \u5DE5\u4F5C\u6D41\u7A0B\u81EA\u52A8\u5316
+
+\u56E0\u6B64\u5B83\u662F\u4E00\u4E2A\u590D\u6742\u4E14\u529F\u80FD\u5F3A\u5927\u7684\u5DE5\u5177\u3002
+
+\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
+
+## \u8C03\u8BD5\u4EE3\u7801
+
+\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
+
+* \u5F15\u7528\u7EC4\u4EF6\u4EA7\u7269
+* \u5F15\u7528\u7EC4\u4EF6\u6E90\u7801
+
+\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
+
+\u63A5\u4E0B\u6765\u6211\u4EEC\u5206\u522B\u8BB2\u4E00\u4E0B\u8FD9\u4E24\u79CD\u65B9\u5F0F\u5177\u4F53\u5982\u4F55\u4F7F\u7528\u3002
+
+### \u5F15\u7528\u7EC4\u4EF6\u4EA7\u7269
+
+\u5047\u5982\u5B58\u5728 TypeScript \u9879\u76EE \`foo\`\uFF1A
+
+<CH.Spotlight>
+
+\`\`\`json package.json
+{
+    "name": "foo",
+    "main": "./dist/index.js",
+    "types": "./dist/types/index.d.ts"
+}
+\`\`\`
+
+---
+
+\u786E\u4FDD \`package.json\` \u7684 \`main\` \u548C \`types\`
+\u7684\u503C\u4E3A\u771F\u5B9E\u7684\u8DEF\u5F84\u3002
+
+\`\`\`json package.json
+{
+    "name": "foo",
+    "main": "./dist/index.js",
+    "types": "./dist/types/index.d.ts"
+}
+\`\`\`
+
+---
+
+\`foo\` \u9879\u76EE\u7684\u6E90\u7801\u3002
+
+\`\`\`typescript src/index.ts
+export const content = 'hello world';
+\`\`\`
+
+---
+
+\u786E\u4FDD\u5728 \`stories/tsconfig.json\` \u4E2D\u8BBE\u7F6E\u4E86\u6307\u5411\u9879\u76EE\u6839\u76EE\u5F55\u7684 \`paths\` \u914D\u7F6E\u3002
+\`paths\` \u7684 \`key\` \u4E0E\u9879\u76EE\u540D\u79F0\u76F8\u540C\u3002
+
+\`\`\`json stories/tsconfig.json focus=7:9
+{
+  "extends": "../tsconfig.json",
+  "include": ["./"],
+  "compilerOptions": {
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "paths": {
+      "foo": ["../"]
+    }
+  }
+}
+\`\`\`
+
+---
+
+\u6700\u540E\u5728 Story \u4EE3\u7801\u4E2D\u76F4\u63A5\u4EE5\u9879\u76EE\u540D\u79F0\u7684\u65B9\u5F0F\u5F15\u7528\u3002
+
+\`\`\`tsx stories/index.stories.tsx focus=1:1
+import { content } from 'foo';
+
+const Component = () => <div>this is a Story Component {content}</div>;
+
+export const YourStory = () => <Component />;
+
+export default {
+  title: 'Your Stories',
+};
+\`\`\`
+
+</CH.Spotlight>
+
+\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
+
+\u5BF9\u4E8E \`pnpm\` \u7684\u9879\u76EE\uFF0C\u53EF\u4EE5\u6309\u7167\u4E0B\u9762\u7684\u5185\u5BB9\u5BF9 \`package.json\` \u8FDB\u884C\u4FEE\u6539\uFF1A
+
+\`\`\` ts focus=4:7
+{
+    "name": "foo",
+    "main": "./dist/index.js",
+    "types": "./src/index.ts",
+    "publishConfig": {
+      "types": "./dist/index.d.ts",
+    }
+}
+\`\`\`
+> \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
+
+\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
+
+
+\u90A3\u4E48\u4E3A\u4EC0\u4E48\u53EF\u4EE5\u76F4\u63A5\u5F15\u7528\u4EA7\u7269\u5462\uFF1F
+
+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
+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
+
+
+### \u5F15\u7528\u7EC4\u4EF6\u6E90\u7801
+
+\u5F15\u7528\u7EC4\u4EF6\u7684\u6E90\u7801\u53EF\u4EE5\u901A\u8FC7\u76F8\u5BF9\u8DEF\u5F84\u7684\u65B9\u5F0F\uFF1A
+
+\`\`\`ts ./stories/index.tsx
+import { content } from '../src';
+
+const Component = () => <div>this is a Story Component {content}</div>;
+
+export const YourStory = () => <Component />;
+
+export default {
+  title: 'Your Stories',
+};
+\`\`\`
+
+\u90A3\u4E48\u4E3A\u4EC0\u4E48\u4E0D\u63A8\u8350\u4F7F\u7528\u6E90\u7801\u7684\u65B9\u5F0F\u5462\uFF1F
+
+\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
+\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
+
+## \u914D\u7F6E Storybook
+
+### \u914D\u7F6E\u6587\u4EF6
+
+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**
+
+\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
+
+* [Configure Storybook](https://storybook.js.org/docs/react/configure/overview)
+
+**\u4E0D\u8FC7\u5728\u6A21\u5757\u9879\u76EE\u91CC\u8FDB\u884C Storybook \u5B58\u5728\u4E00\u4E9B\u9650\u5236**\uFF1A
+
+* \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
+* \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
+
+\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
+
+### \`dev.storybook\`
+
+\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
+
+\u76EE\u524D\u53EF\u4EE5\u901A\u8FC7\u8BE5\u914D\u7F6E\u5BF9 Storybook \u7684 webpack \u914D\u7F6E\u8FDB\u884C\u4FEE\u6539\u3002
+
+* [\`dev.storybook.webpack\`](xxx)
+
+### \u6784\u5EFA Storybook \u4EA7\u7269
+
+\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
+
+\`\`\` bash
+modern build --platform storybook
+\`\`\`
+
+\u5173\u4E8E \`modern build --platform\` \u547D\u4EE4\u53EF\u4EE5\u67E5\u770B\uFF1A
+
+* [\`modern build\`](/zh/guide/command-preview#modern-build)
+
+\u6784\u5EFA\u5B8C\u6210\u540E\uFF0C\u53EF\u4EE5\u5728 \`dist/storybook-static\` \u76EE\u5F55\u770B\u5230\u6784\u5EFA\u4EA7\u7269\u6587\u4EF6\u3002
+`;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};

package/docs/.island/dist/assets/welcome.94880043.js

@@ -0,0 +1,13 @@
+import{jsx as e,jsxs as n,Fragment as l}from"react/jsx-runtime";const d=void 0,c=[],i="\u6B22\u8FCE\u4F7F\u7528";function r(t){const o=Object.assign({h1:"h1",a:"a",p:"p",ul:"ul",li:"li",strong:"strong",code:"code"},t.components);return n(l,{children:[n(o.h1,{id:"\u6B22\u8FCE\u4F7F\u7528",children:[e(o.a,{className:"header-anchor","aria-hidden":"true",href:"#\u6B22\u8FCE\u4F7F\u7528",children:"#"}),"\u6B22\u8FCE\u4F7F\u7528"]}),`
+`,e(o.p,{children:"Module Tools \u662F Modern.js \u7684\u6A21\u5757\u5DE5\u7A0B\u89E3\u51B3\u65B9\u6848\uFF0C\u540C\u65F6\u4E5F\u662F\u6838\u5FC3\u4F9D\u8D56\u3002\u5B83\u53EF\u4EE5\u8BA9\u5F00\u53D1\u8005\u66F4\u8F7B\u677E\u5730\u6784\u5EFA\u3001\u8C03\u8BD5\u3001\u53D1\u5E03\u6A21\u5757\u7C7B\u578B\u7684\u9879\u76EE\u3002\u6A21\u5757\u7C7B\u578B\u7684\u9879\u76EE\u5927\u591A\u6570\u60C5\u51B5\u53EF\u4EE5\u8BA4\u4E3A\u662F npm \u5305\u7C7B\u578B\u7684\u9879\u76EE\uFF0C\u5B83\u53EF\u80FD\u662F\u4E00\u4E2A\u7EC4\u4EF6\u3001\u7EC4\u4EF6\u5E93\u6216\u8005\u5DE5\u5177\u5E93\u9879\u76EE\u3002"}),`
+`,e(o.p,{children:"\u5982\u679C\u4F60\u6B63\u6253\u7B97\u5F00\u53D1\u4E00\u4E2A npm \u5305\u7C7B\u578B\u7684\u9879\u76EE\uFF0C\u90A3\u4E48\u4F60\u5C31\u6765\u5BF9\u5730\u65B9\u4E86\uFF01Modern.js \u63D0\u4F9B\u4E86\u4E13\u4E1A\u7684\u6A21\u5757\u5DE5\u7A0B\u89E3\u51B3\u65B9\u6848\u3002\u5B83\u5E26\u6765\u4E86\uFF1A"}),`
+`,n(o.ul,{children:[`
+`,n(o.li,{children:[e(o.strong,{children:"\u7B80\u5355\u7684\u9879\u76EE\u521D\u59CB\u5316"}),"\uFF1A\u4EC5\u9700\u6267\u884C ",e(o.code,{children:"npx @modern-js/create project-dir"})," \u547D\u4EE4\uFF0C\u7136\u540E\u8FDB\u884C\u51E0\u4E2A\u4EA4\u4E92\u95EE\u9898\uFF0C\u5C31\u53EF\u4EE5\u521B\u5EFA\u4E00\u4E2A\u5B8C\u6574\u7684\u6A21\u5757\u7C7B\u578B\u9879\u76EE\u3002\u521B\u5EFA\u7684\u9879\u76EE\u8FD8\u652F\u6301\u9009\u62E9 ",e(o.a,{href:"https://pnpm.io/",target:"_blank",rel:"nofollow",children:e(o.strong,{children:"pnpm"})}),"\u3001",e(o.a,{href:"https://classic.yarnpkg.com/",target:"_blank",rel:"nofollow",children:e(o.strong,{children:"Yarn"})})," \u4E24\u79CD\u5305\u7BA1\u7406\u5668\u3002"]}),`
+`,n(o.li,{children:[e(o.strong,{children:"\u4EE3\u7801\u683C\u5F0F\u5316"}),"\uFF1A\u5728\u6A21\u5757\u5DE5\u7A0B\u9879\u76EE\u4E2D\uFF0C\u4F60\u53EF\u4EE5\u6267\u884C ",e(o.code,{children:"modern lint"})," \u6765\u5BF9\u4EE3\u7801\u8FDB\u884C\u683C\u5F0F\u5316\u3002\u540C\u65F6\u521D\u59CB\u5316\u7684\u6A21\u5757\u5DE5\u7A0B\u9879\u76EE\u91CC\u5305\u542B\u4E86 Modern.js \u7684 ",e(o.a,{href:"https://eslint.org/docs/latest/user-guide/core-concepts#what-is-eslint",target:"_blank",rel:"nofollow",children:"ESLint"})," \u89C4\u5219\u96C6\uFF0C\u53EF\u4EE5\u6EE1\u8DB3\u5927\u90E8\u5206\u573A\u666F\u4E0B\u7684\u9700\u6C42\u3002"]}),`
+`,n(o.li,{children:[e(o.strong,{children:"\u5168\u9762\u7684\u6784\u5EFA\u80FD\u529B\u548C\u66F4\u5FEB\u7684\u6784\u5EFA\u901F\u5EA6"}),"\uFF1AModule Tools \u57FA\u4E8E ",e(o.a,{href:"https://esbuild.github.io/getting-started/",target:"_blank",rel:"nofollow",children:"esbuild"})," \u548C ",e(o.a,{href:"https://swc.rs/",target:"_blank",rel:"nofollow",children:"SWC"})," \u63D0\u4F9B\u4E86\u9AD8\u6027\u80FD\u7684\u6784\u5EFA\u80FD\u529B\uFF0C\u5E76\u4E14\u4E3A\u4E0D\u540C\u6784\u5EFA\u6A21\u5757\u7684\u573A\u666F\u63D0\u4F9B\u4E86\u4E30\u5BCC\u7684\u914D\u7F6E\u3002"]}),`
+`,n(o.li,{children:[e(o.strong,{children:"Storybook \u8C03\u8BD5\u5DE5\u5177"}),"\uFF1AModule Tools \u4E3A\u8C03\u8BD5\u6A21\u5757\u9879\u76EE\u63D0\u4F9B\u4E86 ",e(o.a,{href:"https://storybook.js.org/",target:"_blank",rel:"nofollow",children:"Storybook"})," \u8C03\u8BD5\u5DE5\u5177\u3002\u5728\u5B89\u88C5\u4E86 Module Tools \u7684 Storybook \u63D2\u4EF6\u540E\uFF0C\u4F60\u53EF\u4EE5\u4F7F\u7528 ",e(o.code,{children:"modern dev storybook"})," \u547D\u4EE4\u6765\u542F\u52A8\u5B83\u3002\u4F60\u4E0D\u4EC5\u53EF\u4EE5\u4F7F\u7528 Storybook \u5BF9\u7EC4\u4EF6\u8FDB\u884C\u8C03\u8BD5\uFF0C\u4E5F\u53EF\u4EE5\u4F7F\u7528\u5728\u5176\u4ED6\u7C7B\u578B\u7684\u6A21\u5757\u4E0A\u3002"]}),`
+`,n(o.li,{children:[e(o.strong,{children:"\u96C6\u6210 Jest \u7684\u6D4B\u8BD5\u80FD\u529B"}),"\uFF1A\u5728\u9700\u8981\u5BF9\u6A21\u5757\u6D4B\u8BD5\u7684\u65F6\u5019\uFF0C\u53EF\u4EE5\u4F7F\u7528 Module Tools \u7684 ",e(o.code,{children:"modern test"})," \u547D\u4EE4\u3002Module Tools \u4E0D\u4EC5\u96C6\u6210\u4E86 ",e(o.a,{href:"https://jestjs.io/",target:"_blank",rel:"nofollow",children:"Jest"}),"\uFF0C\u540C\u65F6\u4E5F\u63D0\u4F9B\u4E86\u914D\u7F6E ",e(o.a,{href:"https://jestjs.io/docs/configuration",target:"_blank",rel:"nofollow",children:"Jest"})," \u7684 API\u3002"]}),`
+`,n(o.li,{children:[e(o.strong,{children:"\u57FA\u4E8E Changesets \u5B9E\u73B0\u7684\u7248\u672C\u7BA1\u7406"}),"\uFF1A\u5F53\u9700\u8981\u5BF9\u9879\u76EE\u8BB0\u5F55\u53D8\u66F4\u5185\u5BB9\u7684\u65F6\u5019\uFF0C\u53EF\u4EE5\u4F7F\u7528 ",e(o.code,{children:"modern change"})," \u547D\u4EE4\u751F\u6210\u5305\u542B\u53D8\u66F4\u5185\u5BB9\u7684 Markdown \u6587\u4EF6\uFF1B\u5F53\u9700\u8981\u5BF9\u9879\u76EE\u8FDB\u884C\u7248\u672C\u5347\u7EA7\u7684\u65F6\u5019\uFF0C\u53EF\u4EE5\u4F7F\u7528 ",e(o.code,{children:"modern bump"})," \u547D\u4EE4\u901A\u8FC7 Markdown \u6587\u4EF6\u5206\u6790\u5E76\u5347\u7EA7\u7248\u672C\uFF1B\u5F53\u9700\u8981\u53D1\u5E03\u9879\u76EE\u7684\u65F6\u5019\uFF0C\u53EF\u4EE5\u4F7F\u7528 ",e(o.code,{children:"modern release"})," \u547D\u4EE4\u5BF9\u9879\u76EE\u8FDB\u884C\u53D1\u5E03\u3002Module Tools \u57FA\u4E8E ",e(o.a,{href:"https://github.com/changesets/changesets",target:"_blank",rel:"nofollow",children:"Changesets"})," \u5B9E\u73B0\u4E86\u8FD9\u4E9B\u547D\u4EE4\u3002"]}),`
+`,n(o.li,{children:[e(o.strong,{children:"\u53EF\u6269\u5C55\u6027\u7684\u63D2\u4EF6\u673A\u5236"}),"\uFF1A\u60F3\u8981\u4E3A\u9879\u76EE\u96C6\u6210\u5176\u4ED6\u7684\u8C03\u8BD5\u5DE5\u5177\uFF1F\u53C8\u6216\u8005\u662F\u60F3\u8981\u5728\u6784\u5EFA\u8FC7\u7A0B\u4E2D\u505A\u4E00\u4E9B\u989D\u5916\u5904\u7406\uFF1FModule Tools \u63D0\u4F9B\u4E86\u63D2\u4EF6\u673A\u5236\u548C\u63D2\u4EF6\u94A9\u5B50\uFF0C\u63D2\u4EF6\u94A9\u5B50\u8986\u76D6\u4E86 ",e(o.code,{children:"dev"})," \u547D\u4EE4\u548C ",e(o.code,{children:"build"})," \u547D\u4EE4\u4E24\u4E2A\u6D41\u7A0B\u3002\u4F60\u53EF\u4EE5\u901A\u8FC7\u5B83\u4EEC\u4E3A\u9879\u76EE\u8FDB\u884C\u80FD\u529B\u7684\u6269\u5C55\u3002"]}),`
+`,n(o.li,{children:[e(o.strong,{children:"\u8FD8\u6709\u66F4\u591A"}),"\uFF1AModule Tools \u5728\u672A\u6765\u8FD8\u4F1A\u4E0D\u65AD\u7684\u5728\u6784\u5EFA\u3001\u8C03\u8BD5\u529F\u80FD\u4E0A\u8FDB\u884C\u4F18\u5316\u3002\u5982\u679C\u5728\u6A21\u5757\u9879\u76EE\u6784\u5EFA\u4E0A\u5B58\u5728\u9700\u8981\u89E3\u51B3\u7684\u91CD\u8981\u95EE\u9898\uFF0C\u53C8\u6216\u8005\u662F\u67D0\u4E2A\u4E3B\u6D41\u7684\u6A21\u5757\u9879\u76EE\u8C03\u8BD5\u5DE5\u5177\u3001\u6A21\u5F0F\u51FA\u73B0\u7684\u65F6\u5019\uFF0C\u90A3\u4E48\u5B83\u4EEC\u5F88\u53EF\u80FD\u6210\u4E3A Module Tools \u5C06\u8981\u652F\u6301\u529F\u80FD\u3002"]}),`
+`]})]})}function h(t={}){const{wrapper:o}=t.components||{};return o?e(o,Object.assign({},t,{children:e(r,t)})):r(t)}const a="2022/12/15 18:01:48",g="# \u6B22\u8FCE\u4F7F\u7528\n\nModule Tools \u662F Modern.js \u7684\u6A21\u5757\u5DE5\u7A0B\u89E3\u51B3\u65B9\u6848\uFF0C\u540C\u65F6\u4E5F\u662F\u6838\u5FC3\u4F9D\u8D56\u3002\u5B83\u53EF\u4EE5\u8BA9\u5F00\u53D1\u8005\u66F4\u8F7B\u677E\u5730\u6784\u5EFA\u3001\u8C03\u8BD5\u3001\u53D1\u5E03\u6A21\u5757\u7C7B\u578B\u7684\u9879\u76EE\u3002\u6A21\u5757\u7C7B\u578B\u7684\u9879\u76EE\u5927\u591A\u6570\u60C5\u51B5\u53EF\u4EE5\u8BA4\u4E3A\u662F npm \u5305\u7C7B\u578B\u7684\u9879\u76EE\uFF0C\u5B83\u53EF\u80FD\u662F\u4E00\u4E2A\u7EC4\u4EF6\u3001\u7EC4\u4EF6\u5E93\u6216\u8005\u5DE5\u5177\u5E93\u9879\u76EE\u3002\n\n\u5982\u679C\u4F60\u6B63\u6253\u7B97\u5F00\u53D1\u4E00\u4E2A npm \u5305\u7C7B\u578B\u7684\u9879\u76EE\uFF0C\u90A3\u4E48\u4F60\u5C31\u6765\u5BF9\u5730\u65B9\u4E86\uFF01Modern.js \u63D0\u4F9B\u4E86\u4E13\u4E1A\u7684\u6A21\u5757\u5DE5\u7A0B\u89E3\u51B3\u65B9\u6848\u3002\u5B83\u5E26\u6765\u4E86\uFF1A\n\n- **\u7B80\u5355\u7684\u9879\u76EE\u521D\u59CB\u5316**\uFF1A\u4EC5\u9700\u6267\u884C `npx @modern-js/create project-dir` \u547D\u4EE4\uFF0C\u7136\u540E\u8FDB\u884C\u51E0\u4E2A\u4EA4\u4E92\u95EE\u9898\uFF0C\u5C31\u53EF\u4EE5\u521B\u5EFA\u4E00\u4E2A\u5B8C\u6574\u7684\u6A21\u5757\u7C7B\u578B\u9879\u76EE\u3002\u521B\u5EFA\u7684\u9879\u76EE\u8FD8\u652F\u6301\u9009\u62E9 [**pnpm**](https://pnpm.io/)\u3001[**Yarn**](https://classic.yarnpkg.com/) \u4E24\u79CD\u5305\u7BA1\u7406\u5668\u3002\n- **\u4EE3\u7801\u683C\u5F0F\u5316**\uFF1A\u5728\u6A21\u5757\u5DE5\u7A0B\u9879\u76EE\u4E2D\uFF0C\u4F60\u53EF\u4EE5\u6267\u884C `modern lint` \u6765\u5BF9\u4EE3\u7801\u8FDB\u884C\u683C\u5F0F\u5316\u3002\u540C\u65F6\u521D\u59CB\u5316\u7684\u6A21\u5757\u5DE5\u7A0B\u9879\u76EE\u91CC\u5305\u542B\u4E86 Modern.js \u7684 [ESLint](https://eslint.org/docs/latest/user-guide/core-concepts#what-is-eslint) \u89C4\u5219\u96C6\uFF0C\u53EF\u4EE5\u6EE1\u8DB3\u5927\u90E8\u5206\u573A\u666F\u4E0B\u7684\u9700\u6C42\u3002\n- **\u5168\u9762\u7684\u6784\u5EFA\u80FD\u529B\u548C\u66F4\u5FEB\u7684\u6784\u5EFA\u901F\u5EA6**\uFF1AModule Tools \u57FA\u4E8E [esbuild](https://esbuild.github.io/getting-started/) \u548C [SWC](https://swc.rs/) \u63D0\u4F9B\u4E86\u9AD8\u6027\u80FD\u7684\u6784\u5EFA\u80FD\u529B\uFF0C\u5E76\u4E14\u4E3A\u4E0D\u540C\u6784\u5EFA\u6A21\u5757\u7684\u573A\u666F\u63D0\u4F9B\u4E86\u4E30\u5BCC\u7684\u914D\u7F6E\u3002\n- **Storybook \u8C03\u8BD5\u5DE5\u5177**\uFF1AModule Tools \u4E3A\u8C03\u8BD5\u6A21\u5757\u9879\u76EE\u63D0\u4F9B\u4E86 [Storybook](https://storybook.js.org/) \u8C03\u8BD5\u5DE5\u5177\u3002\u5728\u5B89\u88C5\u4E86 Module Tools \u7684 Storybook \u63D2\u4EF6\u540E\uFF0C\u4F60\u53EF\u4EE5\u4F7F\u7528 `modern dev storybook` \u547D\u4EE4\u6765\u542F\u52A8\u5B83\u3002\u4F60\u4E0D\u4EC5\u53EF\u4EE5\u4F7F\u7528 Storybook \u5BF9\u7EC4\u4EF6\u8FDB\u884C\u8C03\u8BD5\uFF0C\u4E5F\u53EF\u4EE5\u4F7F\u7528\u5728\u5176\u4ED6\u7C7B\u578B\u7684\u6A21\u5757\u4E0A\u3002\n- **\u96C6\u6210 Jest \u7684\u6D4B\u8BD5\u80FD\u529B**\uFF1A\u5728\u9700\u8981\u5BF9\u6A21\u5757\u6D4B\u8BD5\u7684\u65F6\u5019\uFF0C\u53EF\u4EE5\u4F7F\u7528 Module Tools \u7684 `modern test` \u547D\u4EE4\u3002Module Tools \u4E0D\u4EC5\u96C6\u6210\u4E86 [Jest](https://jestjs.io/)\uFF0C\u540C\u65F6\u4E5F\u63D0\u4F9B\u4E86\u914D\u7F6E [Jest](https://jestjs.io/docs/configuration) \u7684 API\u3002\n- **\u57FA\u4E8E Changesets \u5B9E\u73B0\u7684\u7248\u672C\u7BA1\u7406**\uFF1A\u5F53\u9700\u8981\u5BF9\u9879\u76EE\u8BB0\u5F55\u53D8\u66F4\u5185\u5BB9\u7684\u65F6\u5019\uFF0C\u53EF\u4EE5\u4F7F\u7528 `modern change` \u547D\u4EE4\u751F\u6210\u5305\u542B\u53D8\u66F4\u5185\u5BB9\u7684 Markdown \u6587\u4EF6\uFF1B\u5F53\u9700\u8981\u5BF9\u9879\u76EE\u8FDB\u884C\u7248\u672C\u5347\u7EA7\u7684\u65F6\u5019\uFF0C\u53EF\u4EE5\u4F7F\u7528 `modern bump` \u547D\u4EE4\u901A\u8FC7 Markdown \u6587\u4EF6\u5206\u6790\u5E76\u5347\u7EA7\u7248\u672C\uFF1B\u5F53\u9700\u8981\u53D1\u5E03\u9879\u76EE\u7684\u65F6\u5019\uFF0C\u53EF\u4EE5\u4F7F\u7528 `modern release` \u547D\u4EE4\u5BF9\u9879\u76EE\u8FDB\u884C\u53D1\u5E03\u3002Module Tools \u57FA\u4E8E [Changesets](https://github.com/changesets/changesets) \u5B9E\u73B0\u4E86\u8FD9\u4E9B\u547D\u4EE4\u3002\n- **\u53EF\u6269\u5C55\u6027\u7684\u63D2\u4EF6\u673A\u5236**\uFF1A\u60F3\u8981\u4E3A\u9879\u76EE\u96C6\u6210\u5176\u4ED6\u7684\u8C03\u8BD5\u5DE5\u5177\uFF1F\u53C8\u6216\u8005\u662F\u60F3\u8981\u5728\u6784\u5EFA\u8FC7\u7A0B\u4E2D\u505A\u4E00\u4E9B\u989D\u5916\u5904\u7406\uFF1FModule Tools \u63D0\u4F9B\u4E86\u63D2\u4EF6\u673A\u5236\u548C\u63D2\u4EF6\u94A9\u5B50\uFF0C\u63D2\u4EF6\u94A9\u5B50\u8986\u76D6\u4E86 `dev` \u547D\u4EE4\u548C `build` \u547D\u4EE4\u4E24\u4E2A\u6D41\u7A0B\u3002\u4F60\u53EF\u4EE5\u901A\u8FC7\u5B83\u4EEC\u4E3A\u9879\u76EE\u8FDB\u884C\u80FD\u529B\u7684\u6269\u5C55\u3002\n- **\u8FD8\u6709\u66F4\u591A**\uFF1AModule Tools \u5728\u672A\u6765\u8FD8\u4F1A\u4E0D\u65AD\u7684\u5728\u6784\u5EFA\u3001\u8C03\u8BD5\u529F\u80FD\u4E0A\u8FDB\u884C\u4F18\u5316\u3002\u5982\u679C\u5728\u6A21\u5757\u9879\u76EE\u6784\u5EFA\u4E0A\u5B58\u5728\u9700\u8981\u89E3\u51B3\u7684\u91CD\u8981\u95EE\u9898\uFF0C\u53C8\u6216\u8005\u662F\u67D0\u4E2A\u4E3B\u6D41\u7684\u6A21\u5757\u9879\u76EE\u8C03\u8BD5\u5DE5\u5177\u3001\u6A21\u5F0F\u51FA\u73B0\u7684\u65F6\u5019\uFF0C\u90A3\u4E48\u5B83\u4EEC\u5F88\u53EF\u80FD\u6210\u4E3A Module Tools \u5C06\u8981\u652F\u6301\u529F\u80FD\u3002\n";export{g as content,h as default,d as frontmatter,a as lastUpdatedTime,i as title,c as toc};

package/docs/.island/dist/assets/welcome.b2140e7e.js

@@ -0,0 +1,13 @@
+import{jsx as o,jsxs as t,Fragment as s}from"react/jsx-runtime";const a=void 0,l=[],d="Welcome to Module Tools";function r(n){const e=Object.assign({h1:"h1",a:"a",p:"p",ul:"ul",li:"li",strong:"strong",code:"code"},n.components);return t(s,{children:[t(e.h1,{id:"welcome-to-module-tools",children:[o(e.a,{className:"header-anchor","aria-hidden":"true",href:"#welcome-to-module-tools",children:"#"}),"Welcome to Module Tools"]}),`
+`,o(e.p,{children:"Module Tools is a modules engineering solution for Modern.js, as well as a core dependency. It allows developers to build, debug, and publish module type project more easily. A module type project can mostly be thought of as an npm package type project, which may be a component, component library or tool library project."}),`
+`,o(e.p,{children:"If you are planning to develop a project of the npm package type, then you came to the right place! Modern.js provides a professional module engineering solution. It gives you:"}),`
+`,t(e.ul,{children:[`
+`,t(e.li,{children:[o(e.strong,{children:"Simple project initialization"}),": simply execute the ",o(e.code,{children:"npx @modern-js/create project-dir"})," command, followed by a few interactive questions, to create a complete module type project. The created project also supports the choice of two package managers, ",o(e.a,{href:"https://pnpm.io/",target:"_blank",rel:"nofollow",children:o(e.strong,{children:"pnpm"})})," and ",o(e.a,{href:"https://classic.yarnpkg.com/",target:"_blank",rel:"nofollow",children:o(e.strong,{children:"Yarn"})}),"."]}),`
+`,t(e.li,{children:[o(e.strong,{children:"Code formatting"}),": In a module project, you can execute ",o(e.code,{children:"modern lint"})," to format the code. The initialized module project includes the ",o(e.a,{href:"https://eslint.org/docs/latest/user-guide/core-concepts#what-is-eslint",target:"_blank",rel:"nofollow",children:"ESLint"})," ruleset for Modern.js for most scenarios."]}),`
+`,t(e.li,{children:[o(e.strong,{children:"Comprehensive build capabilities and faster builds"}),": Module Tools provides high-performance build capabilities based on ",o(e.a,{href:"https://esbuild.github.io/getting-started/",target:"_blank",rel:"nofollow",children:"esbuild"})," and ",o(e.a,{href:"https://swc.rs/",target:"_blank",rel:"nofollow",children:"SWC"}),", and provides rich configurations for different build scenarios."]}),`
+`,t(e.li,{children:[o(e.strong,{children:"Storybook debugging tools"}),": Module Tools provides ",o(e.a,{href:"https://storybook.js.org/",target:"_blank",rel:"nofollow",children:"Storybook"})," debugging tools for debugging module projects. After installing the Storybook plugin for Module Tools, you can start it with the ",o(e.code,{children:"modern dev storybook"})," command. You can use Storybook not only for debugging components, but also for other types of modules."]}),`
+`,t(e.li,{children:[o(e.strong,{children:"Testing capabilities with Jest"}),": When you need to test a module, you can use the ",o(e.code,{children:"modern test"})," command of Module Tools, which not only integrates with ",o(e.a,{href:"https://jestjs.io/",target:"_blank",rel:"nofollow",children:"Jest"}),", but also provides an API for configuring ",o(e.a,{href:"https://jestjs.io/docs/configuration",target:"_blank",rel:"nofollow",children:"Jest"}),"."]}),`
+`,t(e.li,{children:[o(e.strong,{children:"Versioning based on Changesets"}),": When you need to record changes to a project, you can use the ",o(e.code,{children:"modern change"})," command to generate a Markdown file containing the changes; when you need to upgrade a project, you can use the ",o(e.code,{children:"modern bump"})," command to analyze and upgrade the version through the Markdown file; when you need to release a project, you can use the ",o(e.code,{children:"modern release"})," command to release the project; Module Tools implements these commands based on ",o(e.a,{href:"https://github.com/changesets/changesets",target:"_blank",rel:"nofollow",children:"Changesets"}),"."]}),`
+`,t(e.li,{children:[o(e.strong,{children:"Extensible plug-in mechanism"}),": Want to integrate additional debugging tools for your project? Or maybe you want to do some extra processing during the build process, Module Tools provides a plugin mechanism and plugin hooks that cover both the ",o(e.code,{children:"dev"})," command and the ",o(e.code,{children:"build"})," command process. You can use them to extend the capabilities of your project."]}),`
+`,t(e.li,{children:[o(e.strong,{children:"Lots more!"})," Module Tools will continue to optimize its build and debug features in the future. If there are important issues to be solved in module project building, or if a mainstream module project debugging tool or pattern emerges, then they will probably be supported by Module Tools."]}),`
+`]})]})}function c(n={}){const{wrapper:e}=n.components||{};return e?o(e,Object.assign({},n,{children:o(r,n)})):r(n)}const u="2022/12/15 18:01:48",h="# Welcome to Module Tools\n\nModule Tools is a modules engineering solution for Modern.js, as well as a core dependency. It allows developers to build, debug, and publish module type project more easily. A module type project can mostly be thought of as an npm package type project, which may be a component, component library or tool library project.\n\nIf you are planning to develop a project of the npm package type, then you came to the right place! Modern.js provides a professional module engineering solution. It gives you:\n\n- **Simple project initialization**: simply execute the `npx @modern-js/create project-dir` command, followed by a few interactive questions, to create a complete module type project. The created project also supports the choice of two package managers, [**pnpm**](https://pnpm.io/) and [**Yarn**](https://classic.yarnpkg.com/).\n- **Code formatting**: In a module project, you can execute `modern lint` to format the code. The initialized module project includes the [ESLint](https://eslint.org/docs/latest/user-guide/core-concepts#what-is-eslint) ruleset for Modern.js for most scenarios.\n- **Comprehensive build capabilities and faster builds**: Module Tools provides high-performance build capabilities based on [esbuild](https://esbuild.github.io/getting-started/) and [SWC](https://swc.rs/), and provides rich configurations for different build scenarios.\n- **Storybook debugging tools**: Module Tools provides [Storybook](https://storybook.js.org/) debugging tools for debugging module projects. After installing the Storybook plugin for Module Tools, you can start it with the `modern dev storybook` command. You can use Storybook not only for debugging components, but also for other types of modules.\n- **Testing capabilities with Jest**: When you need to test a module, you can use the `modern test` command of Module Tools, which not only integrates with [Jest](https://jestjs.io/), but also provides an API for configuring [Jest](https://jestjs.io/docs/configuration).\n- **Versioning based on Changesets**: When you need to record changes to a project, you can use the `modern change` command to generate a Markdown file containing the changes; when you need to upgrade a project, you can use the `modern bump` command to analyze and upgrade the version through the Markdown file; when you need to release a project, you can use the `modern release` command to release the project; Module Tools implements these commands based on [Changesets](https://github.com/changesets/changesets).\n- **Extensible plug-in mechanism**: Want to integrate additional debugging tools for your project? Or maybe you want to do some extra processing during the build process, Module Tools provides a plugin mechanism and plugin hooks that cover both the `dev` command and the `build` command process. You can use them to extend the capabilities of your project.\n- **Lots more!** Module Tools will continue to optimize its build and debug features in the future. If there are important issues to be solved in module project building, or if a mainstream module project debugging tool or pattern emerges, then they will probably be supported by Module Tools.\n";export{h as content,c as default,a as frontmatter,u as lastUpdatedTime,d as title,l as toc};

package/docs/.island/dist/assets/why-module-engineering-solution.bfe7981a.js

@@ -0,0 +1,26 @@
+import{jsx as o,jsxs as n,Fragment as r}from"react/jsx-runtime";const d=void 0,s=[],a="Why module project solution";function i(t){const e=Object.assign({h1:"h1",a:"a",p:"p",img:"img",strong:"strong"},t.components);return n(r,{children:[n(e.h1,{id:"why-module-project-solution",children:[o(e.a,{className:"header-anchor","aria-hidden":"true",href:"#why-module-project-solution",children:"#"}),"Why module project solution"]}),`
+`,o(e.p,{children:"You've probably all experienced it: when developing a component library or tool library from scratch, we have to consider not only how to write the code logic of the project itself, but also how to build, debug, test, format the code, and other things that have nothing to do with the code logic."}),`
+`,n(e.p,{children:["For example, when we consider which builder is used to build the code for a module project, we might previously consider ",o(e.a,{href:"https://webpack.js.org/",target:"_blank",rel:"nofollow",children:"webpack"})," or ",o(e.a,{href:"https://rollupjs.org/guide/en/",target:"_blank",rel:"nofollow",children:"Rollup"}),", but now we might also consider ",o(e.a,{href:"https://esbuild.github.io/",target:"_blank",rel:"nofollow",children:"esbuild"})," or ",o(e.a,{href:"https://swc.rs/",target:"_blank",rel:"nofollow",children:"SWC"}),"."]}),`
+`,o(e.p,{children:"Regardless of which builder is chosen, this is going to be a costly learning curve for developers who are not skilled in the use of these build tools. Even if you want to use them quickly, it will take a lot of time and effort."}),`
+`,o(e.p,{children:"In addition to the build, things like providing debugging tools for projects, supporting testing capabilities, adding code format validation, etc. can take a long time and effort for a novice to understand or master them and actually serve the current project."}),`
+`,o(e.p,{children:"To ensure the quality of the code and the integrity of the project, we often need to do these things that are not related to the logical implementation of the code. However, these things are likely to affect the overall project development progress, reduce the developer's development experience, and make the developer feel that the development threshold of the module project is very high."}),`
+`,o(e.p,{children:"If you have to go through all this work every time you develop a module type project, you will spend most of your development time in the beginning on these things that are not related to code implementation. If we could provide a module engineering solution that would help developers to solve the project engineering issues and allow them to focus more on code implementation, it would greatly improve the module type project development experience."}),`
+`,o(e.p,{children:o(e.img,{src:"/why-module-solution.png",alt:"Not using engineering solution vs. using engineering solution"})}),`
+`,n(e.p,{children:["Modern.js, in order to make developing module type projects easier, provides a module engineering solution in order to solve the above mentioned problems and provides the main features using Module Tools. ",o(e.strong,{children:"Module-tools can be understood as a tool dedicated to the development of module type projects"}),"."]})]})}function h(t={}){const{wrapper:e}=t.components||{};return e?o(e,Object.assign({},t,{children:o(i,t)})):i(t)}const c="2022/12/15 18:01:48",u=`# Why module project solution
+
+You've probably all experienced it: when developing a component library or tool library from scratch, we have to consider not only how to write the code logic of the project itself, but also how to build, debug, test, format the code, and other things that have nothing to do with the code logic.
+
+For example, when we consider which builder is used to build the code for a module project, we might previously consider [webpack](https://webpack.js.org/) or [Rollup](https://rollupjs.org/guide/en/), but now we might also consider [esbuild](https://esbuild.github.io/) or [SWC](https://swc.rs/).
+
+Regardless of which builder is chosen, this is going to be a costly learning curve for developers who are not skilled in the use of these build tools. Even if you want to use them quickly, it will take a lot of time and effort.
+
+In addition to the build, things like providing debugging tools for projects, supporting testing capabilities, adding code format validation, etc. can take a long time and effort for a novice to understand or master them and actually serve the current project.
+
+To ensure the quality of the code and the integrity of the project, we often need to do these things that are not related to the logical implementation of the code. However, these things are likely to affect the overall project development progress, reduce the developer's development experience, and make the developer feel that the development threshold of the module project is very high.
+
+If you have to go through all this work every time you develop a module type project, you will spend most of your development time in the beginning on these things that are not related to code implementation. If we could provide a module engineering solution that would help developers to solve the project engineering issues and allow them to focus more on code implementation, it would greatly improve the module type project development experience.
+
+![Not using engineering solution vs. using engineering solution](/why-module-solution.png)
+
+Modern.js, in order to make developing module type projects easier, provides a module engineering solution in order to solve the above mentioned problems and provides the main features using Module Tools. **Module-tools can be understood as a tool dedicated to the development of module type projects**.
+`;export{u as content,h as default,d as frontmatter,c as lastUpdatedTime,a as title,s as toc};

package/docs/.island/dist/assets/why-module-engineering-solution.e31cd19f.js

@@ -0,0 +1,26 @@
+import{jsx as e,jsxs as o,Fragment as r}from"react/jsx-runtime";const c=void 0,i=[],d="\u4E3A\u4EC0\u4E48\u9700\u8981\u6A21\u5757\u5DE5\u7A0B\u89E3\u51B3\u65B9\u6848";function l(t){const n=Object.assign({h1:"h1",a:"a",p:"p",img:"img",strong:"strong"},t.components);return o(r,{children:[o(n.h1,{id:"\u4E3A\u4EC0\u4E48\u9700\u8981\u6A21\u5757\u5DE5\u7A0B\u89E3\u51B3\u65B9\u6848",children:[e(n.a,{className:"header-anchor","aria-hidden":"true",href:"#\u4E3A\u4EC0\u4E48\u9700\u8981\u6A21\u5757\u5DE5\u7A0B\u89E3\u51B3\u65B9\u6848",children:"#"}),"\u4E3A\u4EC0\u4E48\u9700\u8981\u6A21\u5757\u5DE5\u7A0B\u89E3\u51B3\u65B9\u6848"]}),`
+`,e(n.p,{children:"\u5927\u5BB6\u53EF\u80FD\u90FD\u7ECF\u5386\u8FC7\uFF1A\u4ECE\u96F6\u5F00\u59CB\u5F00\u53D1\u4E00\u4E2A\u7EC4\u4EF6\u5E93\u6216\u8005\u5DE5\u5177\u5E93\u7684\u8FC7\u7A0B\u4E2D\uFF0C\u6211\u4EEC\u4E0D\u4EC5\u8981\u8003\u8651\u9879\u76EE\u672C\u8EAB\u7684\u4EE3\u7801\u903B\u8F91\u5982\u4F55\u7F16\u5199\uFF0C\u8FD8\u8981\u8003\u8651\u9879\u76EE\u7684\u6784\u5EFA\u3001\u8C03\u8BD5\u3001\u6D4B\u8BD5\u3001\u4EE3\u7801\u683C\u5F0F\u5316\u7B49\u7B49\u548C\u4EE3\u7801\u903B\u8F91\u65E0\u5173\u7684\u4E8B\u60C5\u3002"}),`
+`,o(n.p,{children:["\u6BD4\u5982\u8BF4\uFF0C\u5F53\u6211\u4EEC\u8003\u8651\u6784\u5EFA\u6A21\u5757\u9879\u76EE\u7684\u4EE3\u7801\u662F\u4F7F\u7528\u4EC0\u4E48\u6784\u5EFA\u5DE5\u5177\u7684\u65F6\u5019\uFF0C\u5728\u4E4B\u524D\u6211\u4EEC\u53EF\u80FD\u4F1A\u8003\u8651\u4F7F\u7528 ",e(n.a,{href:"https://webpack.js.org/",target:"_blank",rel:"nofollow",children:"webpack"})," \u8FD8\u662F ",e(n.a,{href:"https://rollupjs.org/guide/en/",target:"_blank",rel:"nofollow",children:"Rollup"}),"\uFF0C\u7136\u800C\u73B0\u5728\u7684\u8BDD\uFF0C\u4E5F\u8BB8\u8FD8\u4F1A\u8003\u8651\u662F\u4F7F\u7528 ",e(n.a,{href:"https://esbuild.github.io/",target:"_blank",rel:"nofollow",children:"esbuild"})," \u8FD8\u662F ",e(n.a,{href:"https://swc.rs/",target:"_blank",rel:"nofollow",children:"SWC"}),"\u3002"]}),`
+`,e(n.p,{children:"\u65E0\u8BBA\u9009\u62E9\u54EA\u4E2A\u6784\u5EFA\u5DE5\u5177\uFF0C\u8FD9\u5BF9\u4E8E\u6CA1\u6709\u719F\u7EC3\u638C\u63E1\u8FD9\u4E9B\u6784\u5EFA\u5DE5\u5177\u4F7F\u7528\u65B9\u5F0F\u7684\u5F00\u53D1\u8005\u6765\u8BF4\uFF0C\u662F\u9700\u8981\u4E00\u5B9A\u7684\u6210\u672C\u53BB\u5B66\u4E60\u7684\u3002\u5373\u4F7F\u60F3\u8981\u5FEB\u901F\u4F7F\u7528\uFF0C\u4E5F\u4F1A\u9700\u8981\u82B1\u8D39\u5927\u91CF\u7684\u65F6\u95F4\u548C\u7CBE\u529B\u3002"}),`
+`,e(n.p,{children:"\u800C\u9664\u4E86\u6784\u5EFA\u8FD9\u4EF6\u4E8B\u60C5\u4EE5\u5916\uFF0C\u50CF\u4E3A\u9879\u76EE\u63D0\u4F9B\u8C03\u8BD5\u5DE5\u5177\u3001\u652F\u6301\u6D4B\u8BD5\u80FD\u529B\u3001\u589E\u52A0\u4EE3\u7801\u683C\u5F0F\u6821\u9A8C\u7B49\u7B49\uFF0C\u5BF9\u4E8E\u4E00\u4E2A\u65B0\u624B\u6765\u8BF4\u90FD\u6709\u53EF\u80FD\u9700\u8981\u82B1\u8D39\u5F88\u957F\u7684\u65F6\u95F4\u548C\u7CBE\u529B\u4E86\u89E3\u6216\u8005\u638C\u63E1\u5B83\u4EEC\uFF0C\u5E76\u4E14\u771F\u6B63\u7684\u670D\u52A1\u4E8E\u5F53\u524D\u7684\u9879\u76EE\u4E2D\u3002"}),`
+`,e(n.p,{children:"\u800C\u4E3A\u4E86\u4FDD\u8BC1\u4EE3\u7801\u8D28\u91CF\u4EE5\u53CA\u9879\u76EE\u7684\u5B8C\u6574\u6027\uFF0C\u6211\u4EEC\u5F80\u5F80\u662F\u9700\u8981\u505A\u8FD9\u4E9B\u4E0E\u4EE3\u7801\u903B\u8F91\u5B9E\u73B0\u65E0\u5173\u7684\u4E8B\u60C5\u3002\u7136\u800C\u8FD9\u4E9B\u4E8B\u60C5\u5F88\u6709\u53EF\u80FD\u4F1A\u5F71\u54CD\u6574\u4F53\u7684\u9879\u76EE\u5F00\u53D1\u8FDB\u5EA6\uFF0C\u964D\u4F4E\u5F00\u53D1\u8005\u7684\u5F00\u53D1\u4F53\u9A8C\uFF0C\u4F1A\u8BA9\u5F00\u53D1\u8005\u611F\u89C9\u6A21\u5757\u9879\u76EE\u7684\u5F00\u53D1\u95E8\u69DB\u5F88\u9AD8\u3002"}),`
+`,e(n.p,{children:"\u5982\u679C\u8BF4\u6BCF\u6B21\u5F00\u53D1\u4E00\u4E2A\u6A21\u5757\u7C7B\u578B\u7684\u9879\u76EE\u90FD\u9700\u8981\u7ECF\u5386\u4E00\u904D\u8FD9\u4E9B\u5DE5\u4F5C\u51C6\u5907\u7684\u8BDD\uFF0C\u90A3\u4E48\u57FA\u672C\u4E0A\u521A\u5F00\u59CB\u5F00\u53D1\u7684\u65F6\u95F4\u4F1A\u5927\u90E8\u5206\u82B1\u8D39\u5728\u8FD9\u4E9B\u4E0E\u4EE3\u7801\u5B9E\u73B0\u65E0\u5173\u7684\u4E8B\u60C5\u4E0A\u3002\u5982\u679C\u80FD\u591F\u63D0\u4F9B\u4E00\u4E2A\u6A21\u5757\u5DE5\u7A0B\u89E3\u51B3\u65B9\u6848\uFF0C\u5B83\u80FD\u591F\u5E2E\u52A9\u5F00\u53D1\u8005\u89E3\u51B3\u9879\u76EE\u5DE5\u7A0B\u4E0A\u7684\u4E8B\u60C5\uFF0C\u8BA9\u5F00\u53D1\u8005\u53EF\u4EE5\u66F4\u4E13\u6CE8\u4E8E\u4EE3\u7801\u7684\u5B9E\u73B0\u4E0A\uFF0C\u90A3\u4E48\u8FD9\u5C06\u4F1A\u5927\u5927\u63D0\u5347\u6A21\u5757\u7C7B\u578B\u9879\u76EE\u7684\u5F00\u53D1\u4F53\u9A8C\u3002"}),`
+`,e(n.p,{children:e(n.img,{src:"/why-module-solution.png",alt:"\u6CA1\u6709\u4F7F\u7528\u5DE5\u7A0B\u65B9\u6848\u5BF9\u6BD4\u4F7F\u7528\u5DE5\u7A0B\u65B9\u6848"})}),`
+`,o(n.p,{children:["Modern.js \u4E3A\u4E86\u8BA9\u5F00\u53D1\u6A21\u5757\u7C7B\u578B\u7684\u9879\u76EE\u66F4\u7B80\u5355\uFF0C\u4E3A\u4E86\u89E3\u51B3\u4E0A\u8FF0\u63D0\u5230\u7684\u95EE\u9898\u63D0\u4F9B\u4E86\u6A21\u5757\u5DE5\u7A0B\u89E3\u51B3\u65B9\u6848\uFF0C\u5E76\u4E14\u4F7F\u7528 Module Tools \u63D0\u4F9B\u4E86\u4E3B\u8981\u7684\u529F\u80FD\u3002",e(n.strong,{children:"Module-tools \u53EF\u4EE5\u7406\u89E3\u4E3A\u662F\u4E00\u4E2A\u4E13\u95E8\u7528\u4E8E\u6A21\u5757\u7C7B\u578B\u9879\u76EE\u5F00\u53D1\u7684\u5DE5\u5177"}),"\u3002"]})]})}function h(t={}){const{wrapper:n}=t.components||{};return n?e(n,Object.assign({},t,{children:e(l,t)})):l(t)}const a="2022/12/15 18:01:48",p=`# \u4E3A\u4EC0\u4E48\u9700\u8981\u6A21\u5757\u5DE5\u7A0B\u89E3\u51B3\u65B9\u6848
+
+\u5927\u5BB6\u53EF\u80FD\u90FD\u7ECF\u5386\u8FC7\uFF1A\u4ECE\u96F6\u5F00\u59CB\u5F00\u53D1\u4E00\u4E2A\u7EC4\u4EF6\u5E93\u6216\u8005\u5DE5\u5177\u5E93\u7684\u8FC7\u7A0B\u4E2D\uFF0C\u6211\u4EEC\u4E0D\u4EC5\u8981\u8003\u8651\u9879\u76EE\u672C\u8EAB\u7684\u4EE3\u7801\u903B\u8F91\u5982\u4F55\u7F16\u5199\uFF0C\u8FD8\u8981\u8003\u8651\u9879\u76EE\u7684\u6784\u5EFA\u3001\u8C03\u8BD5\u3001\u6D4B\u8BD5\u3001\u4EE3\u7801\u683C\u5F0F\u5316\u7B49\u7B49\u548C\u4EE3\u7801\u903B\u8F91\u65E0\u5173\u7684\u4E8B\u60C5\u3002
+
+\u6BD4\u5982\u8BF4\uFF0C\u5F53\u6211\u4EEC\u8003\u8651\u6784\u5EFA\u6A21\u5757\u9879\u76EE\u7684\u4EE3\u7801\u662F\u4F7F\u7528\u4EC0\u4E48\u6784\u5EFA\u5DE5\u5177\u7684\u65F6\u5019\uFF0C\u5728\u4E4B\u524D\u6211\u4EEC\u53EF\u80FD\u4F1A\u8003\u8651\u4F7F\u7528 [webpack](https://webpack.js.org/) \u8FD8\u662F [Rollup](https://rollupjs.org/guide/en/)\uFF0C\u7136\u800C\u73B0\u5728\u7684\u8BDD\uFF0C\u4E5F\u8BB8\u8FD8\u4F1A\u8003\u8651\u662F\u4F7F\u7528 [esbuild](https://esbuild.github.io/) \u8FD8\u662F [SWC](https://swc.rs/)\u3002
+
+\u65E0\u8BBA\u9009\u62E9\u54EA\u4E2A\u6784\u5EFA\u5DE5\u5177\uFF0C\u8FD9\u5BF9\u4E8E\u6CA1\u6709\u719F\u7EC3\u638C\u63E1\u8FD9\u4E9B\u6784\u5EFA\u5DE5\u5177\u4F7F\u7528\u65B9\u5F0F\u7684\u5F00\u53D1\u8005\u6765\u8BF4\uFF0C\u662F\u9700\u8981\u4E00\u5B9A\u7684\u6210\u672C\u53BB\u5B66\u4E60\u7684\u3002\u5373\u4F7F\u60F3\u8981\u5FEB\u901F\u4F7F\u7528\uFF0C\u4E5F\u4F1A\u9700\u8981\u82B1\u8D39\u5927\u91CF\u7684\u65F6\u95F4\u548C\u7CBE\u529B\u3002
+
+\u800C\u9664\u4E86\u6784\u5EFA\u8FD9\u4EF6\u4E8B\u60C5\u4EE5\u5916\uFF0C\u50CF\u4E3A\u9879\u76EE\u63D0\u4F9B\u8C03\u8BD5\u5DE5\u5177\u3001\u652F\u6301\u6D4B\u8BD5\u80FD\u529B\u3001\u589E\u52A0\u4EE3\u7801\u683C\u5F0F\u6821\u9A8C\u7B49\u7B49\uFF0C\u5BF9\u4E8E\u4E00\u4E2A\u65B0\u624B\u6765\u8BF4\u90FD\u6709\u53EF\u80FD\u9700\u8981\u82B1\u8D39\u5F88\u957F\u7684\u65F6\u95F4\u548C\u7CBE\u529B\u4E86\u89E3\u6216\u8005\u638C\u63E1\u5B83\u4EEC\uFF0C\u5E76\u4E14\u771F\u6B63\u7684\u670D\u52A1\u4E8E\u5F53\u524D\u7684\u9879\u76EE\u4E2D\u3002
+
+\u800C\u4E3A\u4E86\u4FDD\u8BC1\u4EE3\u7801\u8D28\u91CF\u4EE5\u53CA\u9879\u76EE\u7684\u5B8C\u6574\u6027\uFF0C\u6211\u4EEC\u5F80\u5F80\u662F\u9700\u8981\u505A\u8FD9\u4E9B\u4E0E\u4EE3\u7801\u903B\u8F91\u5B9E\u73B0\u65E0\u5173\u7684\u4E8B\u60C5\u3002\u7136\u800C\u8FD9\u4E9B\u4E8B\u60C5\u5F88\u6709\u53EF\u80FD\u4F1A\u5F71\u54CD\u6574\u4F53\u7684\u9879\u76EE\u5F00\u53D1\u8FDB\u5EA6\uFF0C\u964D\u4F4E\u5F00\u53D1\u8005\u7684\u5F00\u53D1\u4F53\u9A8C\uFF0C\u4F1A\u8BA9\u5F00\u53D1\u8005\u611F\u89C9\u6A21\u5757\u9879\u76EE\u7684\u5F00\u53D1\u95E8\u69DB\u5F88\u9AD8\u3002
+
+\u5982\u679C\u8BF4\u6BCF\u6B21\u5F00\u53D1\u4E00\u4E2A\u6A21\u5757\u7C7B\u578B\u7684\u9879\u76EE\u90FD\u9700\u8981\u7ECF\u5386\u4E00\u904D\u8FD9\u4E9B\u5DE5\u4F5C\u51C6\u5907\u7684\u8BDD\uFF0C\u90A3\u4E48\u57FA\u672C\u4E0A\u521A\u5F00\u59CB\u5F00\u53D1\u7684\u65F6\u95F4\u4F1A\u5927\u90E8\u5206\u82B1\u8D39\u5728\u8FD9\u4E9B\u4E0E\u4EE3\u7801\u5B9E\u73B0\u65E0\u5173\u7684\u4E8B\u60C5\u4E0A\u3002\u5982\u679C\u80FD\u591F\u63D0\u4F9B\u4E00\u4E2A\u6A21\u5757\u5DE5\u7A0B\u89E3\u51B3\u65B9\u6848\uFF0C\u5B83\u80FD\u591F\u5E2E\u52A9\u5F00\u53D1\u8005\u89E3\u51B3\u9879\u76EE\u5DE5\u7A0B\u4E0A\u7684\u4E8B\u60C5\uFF0C\u8BA9\u5F00\u53D1\u8005\u53EF\u4EE5\u66F4\u4E13\u6CE8\u4E8E\u4EE3\u7801\u7684\u5B9E\u73B0\u4E0A\uFF0C\u90A3\u4E48\u8FD9\u5C06\u4F1A\u5927\u5927\u63D0\u5347\u6A21\u5757\u7C7B\u578B\u9879\u76EE\u7684\u5F00\u53D1\u4F53\u9A8C\u3002
+
+![\u6CA1\u6709\u4F7F\u7528\u5DE5\u7A0B\u65B9\u6848\u5BF9\u6BD4\u4F7F\u7528\u5DE5\u7A0B\u65B9\u6848](/why-module-solution.png)
+
+Modern.js \u4E3A\u4E86\u8BA9\u5F00\u53D1\u6A21\u5757\u7C7B\u578B\u7684\u9879\u76EE\u66F4\u7B80\u5355\uFF0C\u4E3A\u4E86\u89E3\u51B3\u4E0A\u8FF0\u63D0\u5230\u7684\u95EE\u9898\u63D0\u4F9B\u4E86\u6A21\u5757\u5DE5\u7A0B\u89E3\u51B3\u65B9\u6848\uFF0C\u5E76\u4E14\u4F7F\u7528 Module Tools \u63D0\u4F9B\u4E86\u4E3B\u8981\u7684\u529F\u80FD\u3002**Module-tools \u53EF\u4EE5\u7406\u89E3\u4E3A\u662F\u4E00\u4E2A\u4E13\u95E8\u7528\u4E8E\u6A21\u5757\u7C7B\u578B\u9879\u76EE\u5F00\u53D1\u7684\u5DE5\u5177**\u3002
+`;export{p as content,h as default,c as frontmatter,a as lastUpdatedTime,d as title,i as toc};

package/docs/.island/dist/chunk-COLCRJ2V.js

@@ -0,0 +1 @@
+import{a as r,c as s}from"./chunk-K5FMOYDC.js";var o=r((t,e)=>{"use strict";e.exports=s()});export{o as a};