@modern-js/module-tools-docs 2.0.2 → 2.2.0

package/doc_build/static/js/async/en_guide_basic_modify-output-product.ad453d13.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([[5578],{13355:function(e,o,t){t.r(o),t.d(o,{CH:function(){return i},chCodeConfig:function(){return s},content:function(){return l},frontmatter:function(){return c},title:function(){return d},toc:function(){return a}});var n=t(97458),r=t(53799);const i={annotations:r.ds,Code:r.EK},s={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,skipLanguages:[],filepath:"/Users/bytedance/modern.js/website/module-tools/docs/en/guide/basic/modify-output-product.md"},c={sidebar_position:3},a=[{id:"modify-the-output-product",text:"Modify the output product",depth:2},{id:"default-output-products",text:"Default output products",depth:2},{id:"buildpreset",text:"buildPreset",depth:2},{id:"string-form-of-build-preset",text:"String form of build preset",depth:3},{id:"build-pre-defined-function-forms",text:"Build pre-defined function forms",depth:3},{id:"build-configuration-object",text:"Build configuration (object)",depth:2},{id:"when-to-use-buildconfig",text:"When to use buildConfig",depth:2}],d="modify-output-product",l='"---\\nsidebar_position: 3\\n---\\n# modify-output-product\\n\\n## Modify the output product\\n\\n## Default output products\\n\\nWhen the `modern build` command is used in an initialized project, the products are generated according to the default configuration supported by Module Tools. The default supported configurations are specified as follows.\\n\\n```typescript\\nimport moduleTools, { defineConfig } from \'@modern-js/module-tools\';\\n\\nexport default defineConfig({\\n  plugins: [moduleTools()],\\n  buildPreset: \'npm-library\',\\n});\\n```\\n\\n**The default generation product has the following characteristics**.\\n\\n- will generate [CommonJS](https://nodejs.org/api/modules.html#modules-commonjs-modules) and [ESM](https://nodejs.org/api/esm.html#modules- ecmascript-modules).\\n- The code syntax is supported up to `ES6` , and more advanced syntax will be converted.\\n- All code is packaged into one file, i.e. **bundle** processing is performed.\\n- The output root directory is the `dist` directory under the project, and the type file output directory is `dist/types`.\\n\\nYou may have the following questions when you see this.\\n\\n1. what is `buildPreset`?\\n2. what determines these characteristics of the product?\\n\\nThen the next step is to first explain `buildPreset`.\\n\\n## buildPreset\\n\\nThe `buildPreset` represents one or more sets of build-related configurations prepared in advance. By using the corresponding preset values of the `buildPreset`, you can eliminate the troublesome and complicated configuration work and get the expected product.\\n\\n### String form of build preset\\n\\nThe value of a **build preset can be in the form of a string**, so a build preset of this form is called a preset string.\\n\\nThe module engineering solution provides generic build preset strings and corresponding variants, depending on the generic scenario in which the npm package is used. All currently supported preset strings can be viewed via the [BuildPreset API](/api/config/build-preset). Here is an explanation about the relationship between **generic preset strings and variants**.\\n\\nAmong the generic preset strings, `\\"npm-library\\"` can be used in the scenario of developing npm packages of the library type, which is suitable for most common module type projects. When `\\"npm-library\\"` is set, the output product of the project will have the following characteristics.\\n\\n- In the `dist/lib` directory you will get code formatted as `cjs`, syntax supported up to `es6` and packaged.\\n- In the `dist/es` directory, you get code in the format `esm`, with syntax support up to `es6` and after packaging.\\n- In the `dist/types` directory, you get the type files. If it is not a TypeScript project, there is no such directory.\\n\\nThe default string `\\"npm-library\\"` is a variant of the original product with a modified **code syntax support** feature and a string naming change to `\\"npm-library-[es5 | es2016.... . es2020 | esnext]\\"`.\\n\\nFor example, if the output product is based on the preset string `\\"npm-library\\"` and the syntax supported by the product code is changed to `es5`, then simply changing `\\"npm-library\\"` to `\\"npm-library-es5\\"` would be sufficient.\\n\\n### Build pre-defined function forms\\n\\n**In addition to the string form, the value of a build preset can also be in the form of a function, where the specific configuration corresponding to a preset value can be printed or modified**.\\n\\nFor example, to achieve the same effect as the preset string ``npm-library-es5\\"` using the form of a preset function, you can do the following.\\n\\n```typescript\\nimport { defineConfig } from \'@modern-js/module-tools\';\\n\\nexport default defineConfig({\\n  buildPreset({ preset }) {\\n    return preset.NPM_LIBRARY.map(config => {\\n      return { ... .config, target: \'es5\' }\\n    });\\n  },\\n});\\n```\\n\\nIn the above code implementation, `preset.NPM_LIBRARY` corresponds to the preset string `\\"npm-library\\"`, which represents the `\\"npm-library\\"` equivalent of a multi-group build-related configuration. We traverse the `NPM_LIBRARY` array, which contains multiple `buildConfig` objects, with the `map` method. We make a shallow copy of the original `buildConfig` object and modify the shallow copy to get `buildConfig.target`, specifying it as `es5`.\\n\\n> NPM_LIBRARY`, you can check it with [BuildPreset API](/api/config/build-preset). The`preset`object contains not only`NPM_LIBRARY`, but also other similar constants.\\n\\nSo what is the `buildConfig` object here? What is the basis for the build product feature mentioned before?\\n\\nLet\'s explain next.\\n\\n## Build configuration (object)\\n\\n**`buildConfig` is a configuration object that describes how to compile and generate build products**. What was mentioned at the beginning about \\"_features of build products_\\" are actually properties supported by `buildConfig`. The currently supported properties cover the needs of most module type projects when building products. `buildConfig` not only contains some properties that products have, but also contains some features needed to build products. The following is a brief list from a classification point of view.\\n\\n**The basic attributes of a build product include:**\\n\\n- Whether the product is packaged or not: the corresponding API is [`buildConfig.buildType`](/api/config/build-config#buildtype).\\n- Product support for syntax: the corresponding API is [`buildConfig.target`](/api/config/build-config#target).\\n- Output format: the corresponding API is [`buildConfig.format`](/api/config/build-config#format).\\n- How the output type file is handled: the corresponding API is [`buildConfig.dts`](/api/config/build-config#dts).\\n- How the sourceMap of the product is handled: the corresponding API is [`buildConfig.sourceMap`](/api/config/build-config#sourcemap).\\n- The input (or source file) corresponding to the output: the corresponding API is [`buildConfig.input`](/api/config/build-config#input).\\n- The directory of the output of the product: the corresponding API is [`buildConfig.outDir`](/api/config/build-config#outDir).\\n- Build source directory: the corresponding API is [`buildConfig.sourceDir`](/api/config/build-config#sourcedir).\\n\\n**Common functions required for build products include:**\\n\\n- Alias: The corresponding API is [`buildConfig.alias`](/api/config/build-config#alias).\\n- Static resource handling: the corresponding API is [`buildConfig.asset`](/api/config/build-config#asset).\\n- Third-party dependency handling: The corresponding APIs are\\n  - [`buildConfig.autoExternal`](/api/config/build-config#autoexternal).\\n  - [`buildConfig.externals`](/api/config/build-config#externals).\\n- Copy: The corresponding API is [`buildConfig.copy`](/api/config/build-config#copy).\\n- Global variable substitution: the corresponding API is [`buildConfig.define`](/api/config/build-config#define).\\n- Specify [JSX](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) compilation method, the corresponding API is [`buildConfig.jsx`](/api/config/ build-config#jsx).\\n\\n**Some advanced properties or less frequently used functions:**\\n\\n- Product code compression: The corresponding API is [`buildConfig.minify`](/api/config/build-config#minify).\\n- Code splitting: [`buildConfig.splitting`](/api/config/build-config#splitting)\\n- Specify whether the build product is for the NodeJS environment or the browser environment: the corresponding API is [`buildConfig.platform`](/api/config/build-config#platform).\\n- umd product-related.\\n  - Specifies the global variables imported externally to the umd product: the corresponding API is [`buildConfig.umdGlobals`](/api/config/build-config#umdglobals).\\n  - Specify the module name of the umd product: the corresponding API is [`buildConfig.umdModuleName`](/api/config/build-config#umdmodulename).\\n\\nIn addition to the above categories, frequently asked questions and best practices about these APIs can be found at the following links\\n\\n- [What are `bundle` and `bundleless`?](/guide/advance/in-depth-about-build#bundle- and-bundleless)\\n- [Relationship of `input` to `sourceDir`](/guide/advance/in-depth-about-build#input- to -sourcedir-)\\n- [Multiple ways to generate type files in product](/guide/advance/in-depth-about-build#type-files).\\n- [`buildConfig.define` Different ways to use it for different scenarios.](/guide/advance/in-depth-about-build#buildconfigdefine - How to use it for different scenarios)\\n- [How to handle third-party dependencies?](/guide/advance/external-dependency)\\n- [How to use copy?](/guide/advance/copy)\\n- How do I build umd products? (/guide/advance/build-umd# sets the global variable name of the project)\\n- [The capabilities currently supported by static resources.](/guide/advance/asset)\\n\\n## When to use `buildConfig`\\n\\n`buildConfig` is one of the methods used to modify the product, **only `buildConfig` will take effect when configured in conjunction with `buildPreset`**. So if configured as follows.\\n\\n```typescript\\nimport { defineConfig } from \'@modern-js/module-tools\';\\n\\nexport default defineConfig({\\n  buildConfig: {\\n    format: \'umd\',\\n  },\\n  buildPreset: \'npm-library\',\\n});\\n```\\n\\nThen at this point you will see the following prompt.\\n\\n```bash\\nSince both \'buildConfig\' and \'buildPreset\' are present, only the \'buildConfig\' configuration will take effect\\n```\\n\\nThe set or sets of build-related configurations represented by `buildPreset` are composed of `buildConfig`, **which can be used to customize output products** when the current project needs cannot be met using `buildPreset`.\\n\\nThe process of using `buildConfig` is the process of thinking about **what kind of build product to get**.\\n"';function u(e){const o=Object.assign({h1:"h1",a:"a",h2:"h2",p:"p",code:"code",strong:"strong",ul:"ul",li:"li",ol:"ol",h3:"h3",blockquote:"blockquote",em:"em"},e.components);return i||p("CH",!1),i.Code||p("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(o.h1,{id:"modify-output-product",children:[(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#modify-output-product",children:"#"}),"modify-output-product"]}),"\n",(0,n.jsxs)(o.h2,{id:"modify-the-output-product",children:[(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#modify-the-output-product",children:"#"}),"Modify the output product"]}),"\n",(0,n.jsxs)(o.h2,{id:"default-output-products",children:[(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#default-output-products",children:"#"}),"Default output products"]}),"\n",(0,n.jsxs)(o.p,{children:["When the ",(0,n.jsx)(o.code,{children:"modern build"})," command is used in an initialized project, the products are generated according to the default configuration supported by Module Tools. The default supported configurations are specified as follows."]}),"\n",(0,n.jsx)(i.Code,{codeConfig:s,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"import",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"moduleTools",props:{style:{color:"#D8DEE9"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"defineConfig",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:"@modern-js/module-tools",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{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:"defineConfig",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"plugins",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" [",props:{style:{color:"#D8DEE9FF"}}},{content:"moduleTools",props:{style:{color:"#88C0D0"}}},{content:"()]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildPreset",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"npm-library",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"typescript"},annotations:[]}]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.strong,{children:"The default generation product has the following characteristics"}),"."]}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsxs)(o.li,{children:["will generate ",(0,n.jsx)(o.a,{href:"https://nodejs.org/api/modules.html#modules-commonjs-modules-3",target:"_blank",rel:"nofollow",children:"CommonJS"})," and [ESM](",(0,n.jsx)(o.a,{href:"https://nodejs.org/api/esm.html#modules--1",target:"_blank",rel:"nofollow",children:"https://nodejs.org/api/esm.html#modules-"})," ecmascript-modules)."]}),"\n",(0,n.jsxs)(o.li,{children:["The code syntax is supported up to ",(0,n.jsx)(o.code,{children:"ES6"})," , and more advanced syntax will be converted."]}),"\n",(0,n.jsxs)(o.li,{children:["All code is packaged into one file, i.e. ",(0,n.jsx)(o.strong,{children:"bundle"})," processing is performed."]}),"\n",(0,n.jsxs)(o.li,{children:["The output root directory is the ",(0,n.jsx)(o.code,{children:"dist"})," directory under the project, and the type file output directory is ",(0,n.jsx)(o.code,{children:"dist/types"}),"."]}),"\n"]}),"\n",(0,n.jsx)(o.p,{children:"You may have the following questions when you see this."}),"\n",(0,n.jsxs)(o.ol,{children:["\n",(0,n.jsxs)(o.li,{children:["what is ",(0,n.jsx)(o.code,{children:"buildPreset"}),"?"]}),"\n",(0,n.jsx)(o.li,{children:"what determines these characteristics of the product?"}),"\n"]}),"\n",(0,n.jsxs)(o.p,{children:["Then the next step is to first explain ",(0,n.jsx)(o.code,{children:"buildPreset"}),"."]}),"\n",(0,n.jsxs)(o.h2,{id:"buildpreset",children:[(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#buildpreset",children:"#"}),"buildPreset"]}),"\n",(0,n.jsxs)(o.p,{children:["The ",(0,n.jsx)(o.code,{children:"buildPreset"})," represents one or more sets of build-related configurations prepared in advance. By using the corresponding preset values of the ",(0,n.jsx)(o.code,{children:"buildPreset"}),", you can eliminate the troublesome and complicated configuration work and get the expected product."]}),"\n",(0,n.jsxs)(o.h3,{id:"string-form-of-build-preset",children:[(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#string-form-of-build-preset",children:"#"}),"String form of build preset"]}),"\n",(0,n.jsxs)(o.p,{children:["The value of a ",(0,n.jsx)(o.strong,{children:"build preset can be in the form of a string"}),", so a build preset of this form is called a preset string."]}),"\n",(0,n.jsxs)(o.p,{children:["The module engineering solution provides generic build preset strings and corresponding variants, depending on the generic scenario in which the npm package is used. All currently supported preset strings can be viewed via the ",(0,n.jsx)(o.a,{href:"/module-tools/en/api/config/build-preset.html",children:"BuildPreset API"}),". Here is an explanation about the relationship between ",(0,n.jsx)(o.strong,{children:"generic preset strings and variants"}),"."]}),"\n",(0,n.jsxs)(o.p,{children:["Among the generic preset strings, ",(0,n.jsx)(o.code,{children:'"npm-library"'})," can be used in the scenario of developing npm packages of the library type, which is suitable for most common module type projects. When ",(0,n.jsx)(o.code,{children:'"npm-library"'})," is set, the output product of the project will have the following characteristics."]}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsxs)(o.li,{children:["In the ",(0,n.jsx)(o.code,{children:"dist/lib"})," directory you will get code formatted as ",(0,n.jsx)(o.code,{children:"cjs"}),", syntax supported up to ",(0,n.jsx)(o.code,{children:"es6"})," and packaged."]}),"\n",(0,n.jsxs)(o.li,{children:["In the ",(0,n.jsx)(o.code,{children:"dist/es"})," directory, you get code in the format ",(0,n.jsx)(o.code,{children:"esm"}),", with syntax support up to ",(0,n.jsx)(o.code,{children:"es6"})," and after packaging."]}),"\n",(0,n.jsxs)(o.li,{children:["In the ",(0,n.jsx)(o.code,{children:"dist/types"})," directory, you get the type files. If it is not a TypeScript project, there is no such directory."]}),"\n"]}),"\n",(0,n.jsxs)(o.p,{children:["The default string ",(0,n.jsx)(o.code,{children:'"npm-library"'})," is a variant of the original product with a modified ",(0,n.jsx)(o.strong,{children:"code syntax support"})," feature and a string naming change to ",(0,n.jsx)(o.code,{children:'"npm-library-[es5 | es2016.... . es2020 | esnext]"'}),"."]}),"\n",(0,n.jsxs)(o.p,{children:["For example, if the output product is based on the preset string ",(0,n.jsx)(o.code,{children:'"npm-library"'})," and the syntax supported by the product code is changed to ",(0,n.jsx)(o.code,{children:"es5"}),", then simply changing ",(0,n.jsx)(o.code,{children:'"npm-library"'})," to ",(0,n.jsx)(o.code,{children:'"npm-library-es5"'})," would be sufficient."]}),"\n",(0,n.jsxs)(o.h3,{id:"build-pre-defined-function-forms",children:[(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#build-pre-defined-function-forms",children:"#"}),"Build pre-defined function forms"]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.strong,{children:"In addition to the string form, the value of a build preset can also be in the form of a function, where the specific configuration corresponding to a preset value can be printed or modified"}),"."]}),"\n",(0,n.jsx)(o.p,{children:'For example, to achieve the same effect as the preset string ``npm-library-es5"` using the form of a preset function, you can do the following.'}),"\n",(0,n.jsx)(i.Code,{codeConfig:s,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",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:"defineConfig",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:"@modern-js/module-tools",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{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:"defineConfig",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildPreset",props:{style:{color:"#88C0D0"}}},{content:"({",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"preset",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"})",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"preset",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"NPM_LIBRARY",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"map",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"config",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"      ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",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:"#ECEFF4"}}},{content:"config",props:{style:{color:"#D8DEE9"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"target",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"es5",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:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"typescript"},annotations:[]}]}),"\n",(0,n.jsxs)(o.p,{children:["In the above code implementation, ",(0,n.jsx)(o.code,{children:"preset.NPM_LIBRARY"})," corresponds to the preset string ",(0,n.jsx)(o.code,{children:'"npm-library"'}),", which represents the ",(0,n.jsx)(o.code,{children:'"npm-library"'})," equivalent of a multi-group build-related configuration. We traverse the ",(0,n.jsx)(o.code,{children:"NPM_LIBRARY"})," array, which contains multiple ",(0,n.jsx)(o.code,{children:"buildConfig"})," objects, with the ",(0,n.jsx)(o.code,{children:"map"})," method. We make a shallow copy of the original ",(0,n.jsx)(o.code,{children:"buildConfig"})," object and modify the shallow copy to get ",(0,n.jsx)(o.code,{children:"buildConfig.target"}),", specifying it as ",(0,n.jsx)(o.code,{children:"es5"}),"."]}),"\n",(0,n.jsxs)(o.blockquote,{children:["\n",(0,n.jsxs)(o.p,{children:["NPM_LIBRARY",(0,n.jsx)(o.code,{children:", you can check it with [BuildPreset API](/api/config/build-preset). The"}),"preset",(0,n.jsx)(o.code,{children:"object contains not only"}),"NPM_LIBRARY`, but also other similar constants."]}),"\n"]}),"\n",(0,n.jsxs)(o.p,{children:["So what is the ",(0,n.jsx)(o.code,{children:"buildConfig"})," object here? What is the basis for the build product feature mentioned before?"]}),"\n",(0,n.jsx)(o.p,{children:"Let's explain next."}),"\n",(0,n.jsxs)(o.h2,{id:"build-configuration-object",children:[(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#build-configuration-object",children:"#"}),"Build configuration (object)"]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsxs)(o.strong,{children:[(0,n.jsx)(o.code,{children:"buildConfig"})," is a configuration object that describes how to compile and generate build products"]}),'. What was mentioned at the beginning about "',(0,n.jsx)(o.em,{children:"features of build products"}),'" are actually properties supported by ',(0,n.jsx)(o.code,{children:"buildConfig"}),". The currently supported properties cover the needs of most module type projects when building products. ",(0,n.jsx)(o.code,{children:"buildConfig"})," not only contains some properties that products have, but also contains some features needed to build products. The following is a brief list from a classification point of view."]}),"\n",(0,n.jsx)(o.p,{children:(0,n.jsx)(o.strong,{children:"The basic attributes of a build product include:"})}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsxs)(o.li,{children:["Whether the product is packaged or not: the corresponding API is ",(0,n.jsx)(o.a,{href:"/module-tools/en/api/config/build-config.html#buildtype-7",children:(0,n.jsx)(o.code,{children:"buildConfig.buildType"})}),"."]}),"\n",(0,n.jsxs)(o.li,{children:["Product support for syntax: the corresponding API is ",(0,n.jsx)(o.a,{href:"/module-tools/en/api/config/build-config.html#target-3",children:(0,n.jsx)(o.code,{children:"buildConfig.target"})}),"."]}),"\n",(0,n.jsxs)(o.li,{children:["Output format: the corresponding API is ",(0,n.jsx)(o.a,{href:"/module-tools/en/api/config/build-config.html#format-3",children:(0,n.jsx)(o.code,{children:"buildConfig.format"})}),"."]}),"\n",(0,n.jsxs)(o.li,{children:["How the output type file is handled: the corresponding API is ",(0,n.jsx)(o.a,{href:"/module-tools/en/api/config/build-config.html#dts-7",children:(0,n.jsx)(o.code,{children:"buildConfig.dts"})}),"."]}),"\n",(0,n.jsxs)(o.li,{children:["How the sourceMap of the product is handled: the corresponding API is ",(0,n.jsx)(o.a,{href:"/module-tools/en/api/config/build-config.html#sourcemap-3",children:(0,n.jsx)(o.code,{children:"buildConfig.sourceMap"})}),"."]}),"\n",(0,n.jsxs)(o.li,{children:["The input (or source file) corresponding to the output: the corresponding API is ",(0,n.jsx)(o.a,{href:"/module-tools/en/api/config/build-config.html#input-7",children:(0,n.jsx)(o.code,{children:"buildConfig.input"})}),"."]}),"\n",(0,n.jsxs)(o.li,{children:["The directory of the output of the product: the corresponding API is ",(0,n.jsx)(o.a,{href:"/module-tools/en/api/config/build-config.html#outdir-13",children:(0,n.jsx)(o.code,{children:"buildConfig.outDir"})}),"."]}),"\n",(0,n.jsxs)(o.li,{children:["Build source directory: the corresponding API is ",(0,n.jsx)(o.a,{href:"/module-tools/en/api/config/build-config.html#sourcedir-11",children:(0,n.jsx)(o.code,{children:"buildConfig.sourceDir"})}),"."]}),"\n"]}),"\n",(0,n.jsx)(o.p,{children:(0,n.jsx)(o.strong,{children:"Common functions required for build products include:"})}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsxs)(o.li,{children:["Alias: The corresponding API is ",(0,n.jsx)(o.a,{href:"/module-tools/en/api/config/build-config.html#alias-3",children:(0,n.jsx)(o.code,{children:"buildConfig.alias"})}),"."]}),"\n",(0,n.jsxs)(o.li,{children:["Static resource handling: the corresponding API is ",(0,n.jsx)(o.a,{href:"/module-tools/en/api/config/build-config.html#asset-6",children:(0,n.jsx)(o.code,{children:"buildConfig.asset"})}),"."]}),"\n",(0,n.jsxs)(o.li,{children:["Third-party dependency handling: The corresponding APIs are","\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsxs)(o.li,{children:[(0,n.jsx)(o.a,{href:"/module-tools/en/api/config/build-config.html#autoexternal-11",children:(0,n.jsx)(o.code,{children:"buildConfig.autoExternal"})}),"."]}),"\n",(0,n.jsxs)(o.li,{children:[(0,n.jsx)(o.a,{href:"/module-tools/en/api/config/build-config.html#externals-15",children:(0,n.jsx)(o.code,{children:"buildConfig.externals"})}),"."]}),"\n"]}),"\n"]}),"\n",(0,n.jsxs)(o.li,{children:["Copy: The corresponding API is ",(0,n.jsx)(o.a,{href:"/module-tools/en/api/config/build-config.html#copy-7",children:(0,n.jsx)(o.code,{children:"buildConfig.copy"})}),"."]}),"\n",(0,n.jsxs)(o.li,{children:["Global variable substitution: the corresponding API is ",(0,n.jsx)(o.a,{href:"/module-tools/en/api/config/build-config.html#define-7",children:(0,n.jsx)(o.code,{children:"buildConfig.define"})}),"."]}),"\n",(0,n.jsxs)(o.li,{children:["Specify ",(0,n.jsx)(o.a,{href:"https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html",target:"_blank",rel:"nofollow",children:"JSX"})," compilation method, the corresponding API is [",(0,n.jsx)(o.code,{children:"buildConfig.jsx"}),"](/api/config/ build-config#jsx)."]}),"\n"]}),"\n",(0,n.jsx)(o.p,{children:(0,n.jsx)(o.strong,{children:"Some advanced properties or less frequently used functions:"})}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsxs)(o.li,{children:["Product code compression: The corresponding API is ",(0,n.jsx)(o.a,{href:"/module-tools/en/api/config/build-config.html#minify-3",children:(0,n.jsx)(o.code,{children:"buildConfig.minify"})}),"."]}),"\n",(0,n.jsxs)(o.li,{children:["Code splitting: ",(0,n.jsx)(o.a,{href:"/module-tools/en/api/config/build-config.html#splitting-9",children:(0,n.jsx)(o.code,{children:"buildConfig.splitting"})})]}),"\n",(0,n.jsxs)(o.li,{children:["Specify whether the build product is for the NodeJS environment or the browser environment: the corresponding API is ",(0,n.jsx)(o.a,{href:"/module-tools/en/api/config/build-config.html#platform-3",children:(0,n.jsx)(o.code,{children:"buildConfig.platform"})}),"."]}),"\n",(0,n.jsxs)(o.li,{children:["umd product-related.","\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsxs)(o.li,{children:["Specifies the global variables imported externally to the umd product: the corresponding API is ",(0,n.jsx)(o.a,{href:"/module-tools/en/api/config/build-config.html#umdglobals-7",children:(0,n.jsx)(o.code,{children:"buildConfig.umdGlobals"})}),"."]}),"\n",(0,n.jsxs)(o.li,{children:["Specify the module name of the umd product: the corresponding API is ",(0,n.jsx)(o.a,{href:"/module-tools/en/api/config/build-config.html#umdmodulename-7",children:(0,n.jsx)(o.code,{children:"buildConfig.umdModuleName"})}),"."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,n.jsx)(o.p,{children:"In addition to the above categories, frequently asked questions and best practices about these APIs can be found at the following links"}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsxs)(o.li,{children:["[What are ",(0,n.jsx)(o.code,{children:"bundle"})," and ",(0,n.jsx)(o.code,{children:"bundleless"}),"?](/guide/advance/in-depth-about-build#bundle- and-bundleless)"]}),"\n",(0,n.jsxs)(o.li,{children:["[Relationship of ",(0,n.jsx)(o.code,{children:"input"})," to ",(0,n.jsx)(o.code,{children:"sourceDir"}),"](/guide/advance/in-depth-about-build#input- to -sourcedir-)"]}),"\n",(0,n.jsxs)(o.li,{children:[(0,n.jsx)(o.a,{href:"/module-tools/en/guide/advance/in-depth-about-build.html#type-files-1",children:"Multiple ways to generate type files in product"}),"."]}),"\n",(0,n.jsxs)(o.li,{children:["[",(0,n.jsx)(o.code,{children:"buildConfig.define"})," Different ways to use it for different scenarios.](/guide/advance/in-depth-about-build#buildconfigdefine - How to use it for different scenarios)"]}),"\n",(0,n.jsx)(o.li,{children:(0,n.jsx)(o.a,{href:"/module-tools/en/guide/advance/external-dependency.html",children:"How to handle third-party dependencies?"})}),"\n",(0,n.jsx)(o.li,{children:(0,n.jsx)(o.a,{href:"/module-tools/en/guide/advance/copy.html",children:"How to use copy?"})}),"\n",(0,n.jsx)(o.li,{children:"How do I build umd products? (/guide/advance/build-umd# sets the global variable name of the project)"}),"\n",(0,n.jsx)(o.li,{children:(0,n.jsx)(o.a,{href:"/module-tools/en/guide/advance/asset.html",children:"The capabilities currently supported by static resources."})}),"\n"]}),"\n",(0,n.jsxs)(o.h2,{id:"when-to-use-buildconfig",children:[(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#when-to-use-buildconfig",children:"#"}),"When to use ",(0,n.jsx)(o.code,{children:"buildConfig"})]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"buildConfig"})," is one of the methods used to modify the product, ",(0,n.jsxs)(o.strong,{children:["only ",(0,n.jsx)(o.code,{children:"buildConfig"})," will take effect when configured in conjunction with ",(0,n.jsx)(o.code,{children:"buildPreset"})]}),". So if configured as follows."]}),"\n",(0,n.jsx)(i.Code,{codeConfig:s,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",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:"defineConfig",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:"@modern-js/module-tools",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{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:"defineConfig",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"format",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"umd",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:"buildPreset",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"npm-library",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"typescript"},annotations:[]}]}),"\n",(0,n.jsx)(o.p,{children:"Then at this point you will see the following prompt."}),"\n",(0,n.jsx)(i.Code,{codeConfig:s,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"Since both ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"buildConfig",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:" and ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"buildPreset",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:" are present, only the ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"buildConfig",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:" configuration will take effect",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"bash"},annotations:[]}]}),"\n",(0,n.jsxs)(o.p,{children:["The set or sets of build-related configurations represented by ",(0,n.jsx)(o.code,{children:"buildPreset"})," are composed of ",(0,n.jsx)(o.code,{children:"buildConfig"}),", ",(0,n.jsx)(o.strong,{children:"which can be used to customize output products"})," when the current project needs cannot be met using ",(0,n.jsx)(o.code,{children:"buildPreset"}),"."]}),"\n",(0,n.jsxs)(o.p,{children:["The process of using ",(0,n.jsx)(o.code,{children:"buildConfig"})," is the process of thinking about ",(0,n.jsx)(o.strong,{children:"what kind of build product to get"}),"."]})]})}function p(e,o){throw new Error("Expected "+(o?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}o.default=function(e={}){const{wrapper:o}=e.components||{};return o?(0,n.jsx)(o,Object.assign({},e,{children:(0,n.jsx)(u,e)})):u(e)}}}]);

package/doc_build/static/js/async/en_guide_basic_publish-your-project.08c5112f.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([[3032],{70967:function(e,o,t){t.r(o),t.d(o,{CH:function(){return a},chCodeConfig:function(){return i},content:function(){return u},frontmatter:function(){return s},title:function(){return d},toc:function(){return c}});var n=t(97458),r=t(53799);const a={annotations:r.ds,Code:r.EK},i={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,skipLanguages:[],filepath:"/Users/bytedance/modern.js/website/module-tools/docs/en/guide/basic/publish-your-project.md"},s={sidebar_position:7},c=[{id:"tracking-changes",text:"Tracking changes",depth:2},{id:"version-update",text:"Version update",depth:2},{id:"publish",text:"Publish",depth:2},{id:"pre-releases",text:"Pre-releases",depth:2}],d="Versioning and Publishing",u='"---\\nsidebar_position: 7\\n---\\n\\n# Versioning and Publishing\\n\\nAn npm-type module project release process consists of two phases.\\n\\n- The first phase is during development, where the developer needs to provide a change file to record changes that need to be released.\\n- The second phase is during release, where Module Tools can collect all the change files to update the version, update the release log, and release new packages to the [npm Registry](https://www.npmjs.com/).\\n\\n## Tracking changes\\n\\n**Changes need to be logged when they happen to the project**. Changes that occur in a project are typically.\\n\\n- New features\\n- Fixes to issues\\n- Configuration file changes\\n- ...\\n\\nOnce these changes have been made, the current changes need to be documented with the following command.\\n\\n- [`modern change`](/guide/basic/command-preview#modern-change)\\n\\nExecuting the `modern change` command asks the developer several questions and generates a change log based on the developer\'s answers. The changelog file contains the type of change and its description, and is committed to the git repository.\\n\\n```bash\\n$ npx modern change\\n\ud83e\udd8b What kind of change is this for module-example? (current version is 0.1.0) - patch\\n\ud83e\udd8b Please enter a summary for this change (this will be in the changelogs). Submit empty line to open external editor\\n\ud83e\udd8b Summary - publish test\\n\ud83e\udd8b === Releasing the following packages ===\\n\ud83e\udd8b [Patch]\\n\ud83e\udd8b module\\n\ud83e\udd8b Is this your desired changeset? (Y/n) - true\\n\ud83e\udd8b Changeset added! - you can now commit it\\n\ud83e\udd8b\\n\ud83e\udd8b If you want to modify or expand on the changeset summary, you can find it here\\n\ud83e\udd8b info /xxxxxx/module/.changeset/brave-dryers-agree.md\\n```\\n\\nWhen executed successfully, the resulting Markdown file containing the change log is saved in the project\'s `.changeset` directory. The contents will look like the following.\\n\\n```markdown .changeset/brave-dryers-agree.md\\n---\\n\\"``module-example\'\': patch\\n---\\n\\npublish test\\n```\\n\\n## Version update\\n\\nWhen the project version needs to be updated, execute the following command.\\n\\n- [`modern bump`](/guide/basic/command-preview#modern-bump)\\n\\nExecuting `modern bump` will modify the version number in `package.json` based on the contents of the Markdown file in the `.changeset/` directory where the changes were recorded, and generate the `CHANGELOG.md` file. **These Markdown files are also deleted when the version update is complete, so they are \\"consumed \\"**.\\n\\n```markdown CHANGELOG.md\\n# module\\n\\n## 0.1.1\\n\\n### Patch Changes\\n\\n- publish test\\n```\\n\\n## Publish\\n\\nTo publish a project, you can execute the following command.\\n\\n- [`modern publish`](/guide/basic/command-preview#modern-release)\\n\\nThe `modern release` command publishes the project to the npm Registry.\\n\\nThe release is the `latest` version, which is also the official version. If you want to change the `dist-tag`, you can specify it with the `modern release --tag` command. For example.\\n\\n```bash\\nmodern release --tag beta\\n```\\n\\nHowever, if you want to change the version number of the current project to a pre-release as well, you need to use the `modern pre` command.\\n\\n> `dist-tag` can be understood as: tagging the current release. Generally speaking, the `dist-tag` for the default release is `latest`, so you can consider `latest` as the `dist-tag` for the official release.\\n\\n## Pre-releases\\n\\nWhen a pre-release is needed before the official release, the following command is executed.\\n\\n- [`modern pre`](/guide/basic/command-preview#modern-pre)\\n\\nFirst `modern pre enter <tag>` to enter pre-release mode, `<tag>` can be the same as the `tag` specified with the `modern release --tag` command when releasing the project.\\n\\n````bash\\n$ npx modern pre enter next\\n\ud83e\udd8b success Entered pre mode with tag next\\n\ud83e\udd8b info Run `changeset version` to version packages with prerelease versions\\n\u2728 Done in 5.30s.\\nDone in 5.30s. ```\\n\\nThen you can update the specific version number with the `modern bump` command, **which doesn\'t actually \\"consume\\" the Markdown file that records the changes**: ``` bash\\n\\n``` bash\\n$ npx modern bump\\n\ud83e\udd8b warn ===============================IMPORTANT!===============================\\n\ud83e\udd8b warn You are in prerelease mode\\n\ud83e\udd8b warn If you meant to do a normal release you should revert these changes and run `changeset pre exit`\\n\ud83e\udd8b warn You can then run `changeset version` again to do a normal release\\n\ud83e\udd8b warn ----------------------------------------------------------------------\\n\ud83e\udd8b All files have been updated. review them and commit at your leisure\\n````\\n\\nThen you can see that the updated version number in `package.json` will look like this: `0.1.2-next.0`.\\n\\nFinally, **if you don\'t need to do a pre-release anymore, be sure to run the `modern pre exit` command** to exit the pre-release state and to release the official version when you run the `modern bump` command again.\\n"';function l(e){const o=Object.assign({h1:"h1",a:"a",p:"p",ul:"ul",li:"li",h2:"h2",strong:"strong",code:"code",blockquote:"blockquote"},e.components);return a||g("CH",!1),a.Code||g("CH.Code",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(o.h1,{id:"versioning-and-publishing",children:[(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#versioning-and-publishing",children:"#"}),"Versioning and Publishing"]}),"\n",(0,n.jsx)(o.p,{children:"An npm-type module project release process consists of two phases."}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsx)(o.li,{children:"The first phase is during development, where the developer needs to provide a change file to record changes that need to be released."}),"\n",(0,n.jsxs)(o.li,{children:["The second phase is during release, where Module Tools can collect all the change files to update the version, update the release log, and release new packages to the ",(0,n.jsx)(o.a,{href:"https://www.npmjs.com/",target:"_blank",rel:"nofollow",children:"npm Registry"}),"."]}),"\n"]}),"\n",(0,n.jsxs)(o.h2,{id:"tracking-changes",children:[(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#tracking-changes",children:"#"}),"Tracking changes"]}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.strong,{children:"Changes need to be logged when they happen to the project"}),". Changes that occur in a project are typically."]}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsx)(o.li,{children:"New features"}),"\n",(0,n.jsx)(o.li,{children:"Fixes to issues"}),"\n",(0,n.jsx)(o.li,{children:"Configuration file changes"}),"\n",(0,n.jsx)(o.li,{children:"..."}),"\n"]}),"\n",(0,n.jsx)(o.p,{children:"Once these changes have been made, the current changes need to be documented with the following command."}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsx)(o.li,{children:(0,n.jsx)(o.a,{href:"/module-tools/en/guide/basic/command-preview.html#modern-change-3",children:(0,n.jsx)(o.code,{children:"modern change"})})}),"\n"]}),"\n",(0,n.jsxs)(o.p,{children:["Executing the ",(0,n.jsx)(o.code,{children:"modern change"})," command asks the developer several questions and generates a change log based on the developer's answers. The changelog file contains the type of change and its description, and is committed to the git repository."]}),"\n",(0,n.jsx)(a.Code,{codeConfig:i,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"$ npx modern change",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\ud83e\udd8b What kind of change is this ",props:{style:{color:"#D8DEE9FF"}}},{content:"for",props:{style:{color:"#81A1C1"}}},{content:" module-example",props:{style:{color:"#D8DEE9FF"}}},{content:"?",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"current version is 0.1.0",props:{style:{color:"#D8DEE9FF"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" - patch",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\ud83e\udd8b Please enter a summary ",props:{style:{color:"#D8DEE9FF"}}},{content:"for",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"this change (this will be",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"in",props:{style:{color:"#81A1C1"}}},{content:" the changelogs). Submit empty line to open external editor",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\ud83e\udd8b Summary - publish ",props:{style:{color:"#D8DEE9FF"}}},{content:"test",props:{style:{color:"#88C0D0"}}}]},{tokens:[{content:"\ud83e\udd8b === Releasing the following packages ===",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\ud83e\udd8b ",props:{style:{color:"#D8DEE9FF"}}},{content:"[",props:{style:{color:"#ECEFF4"}}},{content:"Patch",props:{style:{color:"#D8DEE9FF"}}},{content:"]",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"\ud83e\udd8b module",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\ud83e\udd8b Is this your desired changeset",props:{style:{color:"#D8DEE9FF"}}},{content:"?",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"Y/n",props:{style:{color:"#D8DEE9FF"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" - ",props:{style:{color:"#D8DEE9FF"}}},{content:"true",props:{style:{color:"#88C0D0"}}}]},{tokens:[{content:"\ud83e\udd8b Changeset added",props:{style:{color:"#D8DEE9FF"}}},{content:"!",props:{style:{color:"#81A1C1"}}},{content:" - you can now commit it",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\ud83e\udd8b",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\ud83e\udd8b If you want to modify or expand on the changeset summary, you can find it here",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\ud83e\udd8b info /xxxxxx/module/.changeset/brave-dryers-agree.md",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"bash"},annotations:[]}]}),"\n",(0,n.jsxs)(o.p,{children:["When executed successfully, the resulting Markdown file containing the change log is saved in the project's ",(0,n.jsx)(o.code,{children:".changeset"})," directory. The contents will look like the following."]}),"\n",(0,n.jsx)(a.Code,{codeConfig:i,northPanel:{tabs:[".changeset/brave-dryers-agree.md"],active:".changeset/brave-dryers-agree.md",heightRatio:1},files:[{name:".changeset/brave-dryers-agree.md",focus:"",code:{lines:[{tokens:[{content:"---",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:'"',props:{style:{color:"#81A1C1"}}},{content:"``module-example'': patch",props:{style:{color:"#A3BE8C"}}}]},{tokens:[{content:"---",props:{style:{color:"#A3BE8C"}}}]},{tokens:[]},{tokens:[{content:"publish test",props:{style:{color:"#A3BE8C"}}}]}],lang:"markdown"},annotations:[]}]}),"\n",(0,n.jsxs)(o.h2,{id:"version-update",children:[(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#version-update",children:"#"}),"Version update"]}),"\n",(0,n.jsx)(o.p,{children:"When the project version needs to be updated, execute the following command."}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsx)(o.li,{children:(0,n.jsx)(o.a,{href:"/module-tools/en/guide/basic/command-preview.html#modern-bump-3",children:(0,n.jsx)(o.code,{children:"modern bump"})})}),"\n"]}),"\n",(0,n.jsxs)(o.p,{children:["Executing ",(0,n.jsx)(o.code,{children:"modern bump"})," will modify the version number in ",(0,n.jsx)(o.code,{children:"package.json"})," based on the contents of the Markdown file in the ",(0,n.jsx)(o.code,{children:".changeset/"})," directory where the changes were recorded, and generate the ",(0,n.jsx)(o.code,{children:"CHANGELOG.md"})," file. ",(0,n.jsx)(o.strong,{children:'These Markdown files are also deleted when the version update is complete, so they are "consumed "'}),"."]}),"\n",(0,n.jsx)(a.Code,{codeConfig:i,northPanel:{tabs:["CHANGELOG.md"],active:"CHANGELOG.md",heightRatio:1},files:[{name:"CHANGELOG.md",focus:"",code:{lines:[{tokens:[{content:"#",props:{style:{color:"#81A1C1"}}},{content:" module",props:{style:{color:"#88C0D0"}}}]},{tokens:[]},{tokens:[{content:"##",props:{style:{color:"#81A1C1"}}},{content:" 0.1.1",props:{style:{color:"#88C0D0"}}}]},{tokens:[]},{tokens:[{content:"###",props:{style:{color:"#81A1C1"}}},{content:" Patch Changes",props:{style:{color:"#88C0D0"}}}]},{tokens:[]},{tokens:[{content:"-",props:{style:{color:"#ECEFF4"}}},{content:" publish test",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"markdown"},annotations:[]}]}),"\n",(0,n.jsxs)(o.h2,{id:"publish",children:[(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#publish",children:"#"}),"Publish"]}),"\n",(0,n.jsx)(o.p,{children:"To publish a project, you can execute the following command."}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsx)(o.li,{children:(0,n.jsx)(o.a,{href:"/module-tools/en/guide/basic/command-preview.html#modern-release-3",children:(0,n.jsx)(o.code,{children:"modern publish"})})}),"\n"]}),"\n",(0,n.jsxs)(o.p,{children:["The ",(0,n.jsx)(o.code,{children:"modern release"})," command publishes the project to the npm Registry."]}),"\n",(0,n.jsxs)(o.p,{children:["The release is the ",(0,n.jsx)(o.code,{children:"latest"})," version, which is also the official version. If you want to change the ",(0,n.jsx)(o.code,{children:"dist-tag"}),", you can specify it with the ",(0,n.jsx)(o.code,{children:"modern release --tag"})," command. For example."]}),"\n",(0,n.jsx)(a.Code,{codeConfig:i,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"modern release --tag beta",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"bash"},annotations:[]}]}),"\n",(0,n.jsxs)(o.p,{children:["However, if you want to change the version number of the current project to a pre-release as well, you need to use the ",(0,n.jsx)(o.code,{children:"modern pre"})," command."]}),"\n",(0,n.jsxs)(o.blockquote,{children:["\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.code,{children:"dist-tag"})," can be understood as: tagging the current release. Generally speaking, the ",(0,n.jsx)(o.code,{children:"dist-tag"})," for the default release is ",(0,n.jsx)(o.code,{children:"latest"}),", so you can consider ",(0,n.jsx)(o.code,{children:"latest"})," as the ",(0,n.jsx)(o.code,{children:"dist-tag"})," for the official release."]}),"\n"]}),"\n",(0,n.jsxs)(o.h2,{id:"pre-releases",children:[(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#pre-releases",children:"#"}),"Pre-releases"]}),"\n",(0,n.jsx)(o.p,{children:"When a pre-release is needed before the official release, the following command is executed."}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsx)(o.li,{children:(0,n.jsx)(o.a,{href:"/module-tools/en/guide/basic/command-preview.html#modern-pre-3",children:(0,n.jsx)(o.code,{children:"modern pre"})})}),"\n"]}),"\n",(0,n.jsxs)(o.p,{children:["First ",(0,n.jsx)(o.code,{children:"modern pre enter <tag>"})," to enter pre-release mode, ",(0,n.jsx)(o.code,{children:"<tag>"})," can be the same as the ",(0,n.jsx)(o.code,{children:"tag"})," specified with the ",(0,n.jsx)(o.code,{children:"modern release --tag"})," command when releasing the project."]}),"\n",(0,n.jsx)(a.Code,{codeConfig:i,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"$ npx modern pre enter next",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\ud83e\udd8b success Entered pre mode with tag next",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\ud83e\udd8b info Run ",props:{style:{color:"#D8DEE9FF"}}},{content:"`",props:{style:{color:"#ECEFF4"}}},{content:"changeset version",props:{style:{color:"#A3BE8C"}}},{content:"`",props:{style:{color:"#ECEFF4"}}},{content:" to version packages with prerelease versions",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"\u2728 Done ",props:{style:{color:"#D8DEE9FF"}}},{content:"in",props:{style:{color:"#81A1C1"}}},{content:" 5.30s.",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"Done ",props:{style:{color:"#D8DEE9FF"}}},{content:"in",props:{style:{color:"#81A1C1"}}},{content:" 5.30s. ",props:{style:{color:"#D8DEE9FF"}}},{content:"```",props:{style:{color:"#ECEFF4"}}}]},{tokens:[]},{tokens:[{content:"Then you can update the specific version number with the ",props:{style:{color:"#A3BE8C"}}},{content:"`",props:{style:{color:"#ECEFF4"}}},{content:"modern bump",props:{style:{color:"#D8DEE9FF"}}},{content:"`",props:{style:{color:"#ECEFF4"}}},{content:" command, ",props:{style:{color:"#A3BE8C"}}},{content:"**",props:{style:{color:"#81A1C1"}}},{content:"which doesn",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:'t actually "consume" the Markdown file that records the changes**: ``` bash',props:{style:{color:"#A3BE8C"}}}]},{tokens:[]},{tokens:[{content:"``` bash",props:{style:{color:"#A3BE8C"}}}]},{tokens:[{content:"$ npx modern bump",props:{style:{color:"#A3BE8C"}}}]},{tokens:[{content:"\ud83e\udd8b warn ===============================IMPORTANT!===============================",props:{style:{color:"#A3BE8C"}}}]},{tokens:[{content:"\ud83e\udd8b warn You are in prerelease mode",props:{style:{color:"#A3BE8C"}}}]},{tokens:[{content:"\ud83e\udd8b warn If you meant to do a normal release you should revert these changes and run `changeset pre exit`",props:{style:{color:"#A3BE8C"}}}]},{tokens:[{content:"\ud83e\udd8b warn You can then run `changeset version` again to do a normal release",props:{style:{color:"#A3BE8C"}}}]},{tokens:[{content:"\ud83e\udd8b warn ----------------------------------------------------------------------",props:{style:{color:"#A3BE8C"}}}]},{tokens:[{content:"\ud83e\udd8b All files have been updated. review them and commit at your leisure",props:{style:{color:"#A3BE8C"}}}]}],lang:"bash"},annotations:[]}]}),"\n",(0,n.jsxs)(o.p,{children:["Then you can see that the updated version number in ",(0,n.jsx)(o.code,{children:"package.json"})," will look like this: ",(0,n.jsx)(o.code,{children:"0.1.2-next.0"}),"."]}),"\n",(0,n.jsxs)(o.p,{children:["Finally, ",(0,n.jsxs)(o.strong,{children:["if you don't need to do a pre-release anymore, be sure to run the ",(0,n.jsx)(o.code,{children:"modern pre exit"})," command"]})," to exit the pre-release state and to release the official version when you run the ",(0,n.jsx)(o.code,{children:"modern bump"})," command again."]})]})}function g(e,o){throw new Error("Expected "+(o?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}o.default=function(e={}){const{wrapper:o}=e.components||{};return o?(0,n.jsx)(o,Object.assign({},e,{children:(0,n.jsx)(l,e)})):l(e)}}}]);

package/doc_build/static/js/async/en_guide_basic_test-your-project.f5f6b204.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([[3741],{71423:function(e,o,t){t.r(o),t.d(o,{CH:function(){return s},chCodeConfig:function(){return c},content:function(){return l},frontmatter:function(){return i},title:function(){return d},toc:function(){return a}});var n=t(97458),r=t(53799);const s={annotations:r.ds,Code:r.EK,Spotlight:r.$1,CodeSlot:r.Af},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,skipLanguages:[],filepath:"/Users/bytedance/modern.js/website/module-tools/docs/en/guide/basic/test-your-project.mdx"},i={sidebar_position:6},a=[{id:"prerequisites-and-conventions",text:"Prerequisites and conventions",depth:2},{id:"run-the-tests",text:"Run the tests",depth:2},{id:"usage-configuration",text:"Usage Configuration",depth:2},{id:"test-example",text:"Test example",depth:2},{id:"common-modules",text:"Common modules",depth:3},{id:"components",text:"Components",depth:3}],d="Testing Projects",l="\"---\\nsidebar_position: 6\\n---\\n\\n# Testing Projects\\n\\nThis chapter will describe how to test modules.\\n\\n## Prerequisites and conventions\\n\\nTo use the testing features of the project, you need to make sure that the project contains the dependency: `\\\"@modern-js/plugin-testing\\\"` , which can be done with [modern new](/guide/basic/command-preview#modern-new).\\n\\nIn the module engineering scheme, the following conventions are in place for test cases, or files for writing tests:\\n\\n- The `tests` directory in the project directory is the directory for test cases and test files, **no support for changing the directory for running test cases**.\\n- Files with the suffix `.test.[tj]sx?` are automatically recognized as test files by default.\\n- Other `. [tj]sx?` suffixes are recognized as normal files that can be used as test `utils` files or for other purposes.\\n\\n## Run the tests\\n\\nOnce the dependencies are prepared and we know where to write the test cases, we can execute the tests with the following command:\\n\\n```bash\\nmodern test\\n\\n// Update snapshot\\nmodern test --updateSnapshot\\n```\\n\\nAfter execution, you will see the results of the test:\\n\\n![test-result](https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/test-result.png)\\n\\n## Usage Configuration\\n\\nThe Module Engineering Program provides the following configurations for testing.\\n\\n- [`testing`](/api/config/testing)\\n\\nYou can add it in `modern.config.(j|t)s`.\\n\\n## Test example\\n\\n### Common modules\\n\\nFor common modules, we can use the test function as follows:\\n\\n<CH.Spotlight>\\n\\n```typescript ./src/index.ts\\nexport default function () {\\n  return 'hello world';\\n}\\n```\\n\\n---\\n\\nFirst is the code of the module.\\n\\n```typescript ./src/index.ts\\nexport default function () {\\n  return 'hello world';\\n}\\n```\\n\\n---\\n\\nThen in the test file, we can do this.\\n\\nWhere `@` points to the source directory, defined in `tests/tsconfig.json` in the initialization project.\\n\\n```typescript ./tests/index.test.ts\\nimport main from '@/index';\\n\\ndescribe('default cases', () => {\\n  test('Have returns', () => {\\n    const drink = jest.fn(main);\\n    drink();\\n    expect(drink).toHaveReturned();\\n  });\\n});\\n```\\n\\n---\\n\\nFinally we can execute `modern test`.\\n\\n```bash\\npnpm test\\n## or\\nyarn test\\n## or\\nnpm run test\\n```\\n\\n</CH.Spotlight>\\n\\n### Components\\n\\n{/* \u94fe\u63a5\u5f85\u8865\u5145 */}\\n\\nFor components, Modern.js's Runtime API provides functionality for testing UI components, which is provided by `@modern-js/runtime/testing`.\\n\\n:::tip\\nIf you need to use the Runtime API, then you can turn it on via [microgenerator](/guide/basic/command-preview).\\n:::\\n\\n<CH.Spotlight>\\n\\n```tsx ./src/index.tsx\\nexport const default () {\\n  return (\\n    <div>This is a UI Component</div>\\n  );\\n}\\n```\\n\\n---\\n\\nFirst is the code of the component.\\n\\n```tsx ./src/index.tsx\\nexport const default () {\\n  return (\\n    <div>This is a UI Component</div>\\n  );\\n}\\n```\\n\\n---\\n\\nThen in the test file, we can do this.\\n\\nWhere `@` points to the source directory, defined in `tests/tsconfig.json` in the initialization project.\\n\\n```tsx ./tests/index.test.tsx\\nimport { render, screen } from '@modern-js/runtime/testing';\\n\\nimport Component from '@/index';\\n\\ndescribe('default cases', () => {\\n  test('Rendered', () => {\\n    render(<Component />);\\n    expect(screen.getByText('This is a UI Component')).toBeInTheDocument();\\n  });\\n});\\n```\\n\\n---\\n\\nFinally we can execute `modern test`.\\n\\n```bash\\npnpm test\\n## or\\nyarn test\\n## or\\nnpm run test\\n```\\n\\n</CH.Spotlight>\\n\"";function p(e){const o=Object.assign({h1:"h1",a:"a",p:"p",h2:"h2",code:"code",ul:"ul",li:"li",strong:"strong",img:"img",h3:"h3",div:"div"},e.components);return s||u("CH",!1),s.Code||u("CH.Code",!0),s.CodeSlot||u("CH.CodeSlot",!0),s.Spotlight||u("CH.Spotlight",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(o.h1,{id:"testing-projects",children:[(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#testing-projects",children:"#"}),"Testing Projects"]}),"\n",(0,n.jsx)(o.p,{children:"This chapter will describe how to test modules."}),"\n",(0,n.jsxs)(o.h2,{id:"prerequisites-and-conventions",children:[(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#prerequisites-and-conventions",children:"#"}),"Prerequisites and conventions"]}),"\n",(0,n.jsxs)(o.p,{children:["To use the testing features of the project, you need to make sure that the project contains the dependency: ",(0,n.jsx)(o.code,{children:'"@modern-js/plugin-testing"'})," , which can be done with ",(0,n.jsx)(o.a,{href:"/module-tools/en/guide/basic/command-preview.html#modern-new-3",children:"modern new"}),"."]}),"\n",(0,n.jsx)(o.p,{children:"In the module engineering scheme, the following conventions are in place for test cases, or files for writing tests:"}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsxs)(o.li,{children:["The ",(0,n.jsx)(o.code,{children:"tests"})," directory in the project directory is the directory for test cases and test files, ",(0,n.jsx)(o.strong,{children:"no support for changing the directory for running test cases"}),"."]}),"\n",(0,n.jsxs)(o.li,{children:["Files with the suffix ",(0,n.jsx)(o.code,{children:".test.[tj]sx?"})," are automatically recognized as test files by default."]}),"\n",(0,n.jsxs)(o.li,{children:["Other ",(0,n.jsx)(o.code,{children:". [tj]sx?"})," suffixes are recognized as normal files that can be used as test ",(0,n.jsx)(o.code,{children:"utils"})," files or for other purposes."]}),"\n"]}),"\n",(0,n.jsxs)(o.h2,{id:"run-the-tests",children:[(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#run-the-tests",children:"#"}),"Run the tests"]}),"\n",(0,n.jsx)(o.p,{children:"Once the dependencies are prepared and we know where to write the test cases, we can execute the tests with the following command:"}),"\n",(0,n.jsx)(s.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"modern ",props:{style:{color:"#D8DEE9FF"}}},{content:"test",props:{style:{color:"#88C0D0"}}}]},{tokens:[]},{tokens:[{content:"// Update snapshot",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"modern ",props:{style:{color:"#D8DEE9FF"}}},{content:"test",props:{style:{color:"#88C0D0"}}},{content:" --updateSnapshot",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"bash"},annotations:[]}]}),"\n",(0,n.jsx)(o.p,{children:"After execution, you will see the results of the test:"}),"\n",(0,n.jsx)(o.p,{children:(0,n.jsx)(o.img,{src:"https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/test-result.png",alt:"test-result"})}),"\n",(0,n.jsxs)(o.h2,{id:"usage-configuration",children:[(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#usage-configuration",children:"#"}),"Usage Configuration"]}),"\n",(0,n.jsx)(o.p,{children:"The Module Engineering Program provides the following configurations for testing."}),"\n",(0,n.jsxs)(o.ul,{children:["\n",(0,n.jsx)(o.li,{children:(0,n.jsx)(o.a,{href:"/module-tools/en/api/config/testing.html",children:(0,n.jsx)(o.code,{children:"testing"})})}),"\n"]}),"\n",(0,n.jsxs)(o.p,{children:["You can add it in ",(0,n.jsx)(o.code,{children:"modern.config.(j|t)s"}),"."]}),"\n",(0,n.jsxs)(o.h2,{id:"test-example",children:[(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#test-example",children:"#"}),"Test example"]}),"\n",(0,n.jsxs)(o.h3,{id:"common-modules",children:[(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#common-modules",children:"#"}),"Common modules"]}),"\n",(0,n.jsx)(o.p,{children:"For common modules, we can use the test function as follows:"}),"\n",(0,n.jsxs)(s.Spotlight,{codeConfig:c,editorSteps:[{northPanel:{tabs:["./src/index.ts"],active:"./src/index.ts",heightRatio:1},files:[{name:"./src/index.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"function",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",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"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"typescript"},annotations:[]}]},{northPanel:{tabs:["./src/index.ts"],active:"./src/index.ts",heightRatio:1},files:[{name:"./src/index.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"function",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",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"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"typescript"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:["./src/index.ts","./tests/index.test.ts"],active:"./tests/index.test.ts",heightRatio:1},files:[{name:"./src/index.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"function",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",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"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"typescript"},annotations:[]},{name:"./tests/index.test.ts",focus:"",code:{lines:[{tokens:[{content:"import",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"main",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"from",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"@/index",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"describe",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"default cases",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:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"test",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"Have returns",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:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"const",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"drink",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"jest",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"fn",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"main",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"drink",props:{style:{color:"#88C0D0"}}},{content:"()",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"expect",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"drink",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"toHaveReturned",props:{style:{color:"#88C0D0"}}},{content:"()",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"typescript"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:["./src/index.ts",""],active:"",heightRatio:1},files:[{name:"./src/index.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"function",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",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"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"typescript"},annotations:[]},{name:"",focus:"",code:{lines:[{tokens:[{content:"pnpm ",props:{style:{color:"#D8DEE9FF"}}},{content:"test",props:{style:{color:"#88C0D0"}}}]},{tokens:[{content:"## or",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"yarn ",props:{style:{color:"#D8DEE9FF"}}},{content:"test",props:{style:{color:"#88C0D0"}}}]},{tokens:[{content:"## or",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"npm run ",props:{style:{color:"#D8DEE9FF"}}},{content:"test",props:{style:{color:"#88C0D0"}}}]}],lang:"bash"},annotations:[]}],southPanel:void 0}],children:[(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(s.CodeSlot,{})}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o.p,{children:"First is the code of the module."}),(0,n.jsx)(s.CodeSlot,{})]}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o.p,{children:"Then in the test file, we can do this."}),(0,n.jsxs)(o.p,{children:["Where ",(0,n.jsx)(o.code,{children:"@"})," points to the source directory, defined in ",(0,n.jsx)(o.code,{children:"tests/tsconfig.json"})," in the initialization project."]}),(0,n.jsx)(s.CodeSlot,{})]}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(o.p,{children:["Finally we can execute ",(0,n.jsx)(o.code,{children:"modern test"}),"."]}),(0,n.jsx)(s.CodeSlot,{})]})]}),"\n",(0,n.jsxs)(o.h3,{id:"components",children:[(0,n.jsx)(o.a,{className:"header-anchor","aria-hidden":"true",href:"#components",children:"#"}),"Components"]}),"\n","\n",(0,n.jsxs)(o.p,{children:["For components, Modern.js's Runtime API provides functionality for testing UI components, which is provided by ",(0,n.jsx)(o.code,{children:"@modern-js/runtime/testing"}),"."]}),"\n",(0,n.jsxs)(o.div,{className:"modern-directive tip",children:[(0,n.jsx)(o.p,{className:"modern-directive-title",children:"TIP"}),(0,n.jsx)(o.div,{className:"modern-directive-content",children:(0,n.jsxs)(o.p,{children:["\nIf you need to use the Runtime API, then you can turn it on via ",(0,n.jsx)(o.a,{href:"/module-tools/en/guide/basic/command-preview.html",children:"microgenerator"}),"."]})})]}),"\n",(0,n.jsxs)(s.Spotlight,{codeConfig:c,editorSteps:[{northPanel:{tabs:["./src/index.tsx"],active:"./src/index.tsx",heightRatio:1},files:[{name:"./src/index.tsx",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:"default",props:{style:{color:"#D8DEE9"}}},{content:" () {",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"<div>",props:{style:{color:"#81A1C1"}}},{content:"This is a UI Component",props:{style:{color:"#D8DEE9FF"}}},{content:"</div>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  )",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}]},{northPanel:{tabs:["./src/index.tsx"],active:"./src/index.tsx",heightRatio:1},files:[{name:"./src/index.tsx",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:"default",props:{style:{color:"#D8DEE9"}}},{content:" () {",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"<div>",props:{style:{color:"#81A1C1"}}},{content:"This is a UI Component",props:{style:{color:"#D8DEE9FF"}}},{content:"</div>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  )",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:["./src/index.tsx","./tests/index.test.tsx"],active:"./tests/index.test.tsx",heightRatio:1},files:[{name:"./src/index.tsx",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:"default",props:{style:{color:"#D8DEE9"}}},{content:" () {",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"<div>",props:{style:{color:"#81A1C1"}}},{content:"This is a UI Component",props:{style:{color:"#D8DEE9FF"}}},{content:"</div>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  )",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"./tests/index.test.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:"render",props:{style:{color:"#D8DEE9"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"screen",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:"@modern-js/runtime/testing",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"import",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"Component",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"from",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"@/index",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"describe",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"default cases",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:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"test",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"Rendered",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:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"render",props:{style:{color:"#88C0D0"}}},{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"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"expect",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"screen",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"getByText",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"This is a UI Component",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"))",props:{style:{color:"#D8DEE9FF"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"toBeInTheDocument",props:{style:{color:"#88C0D0"}}},{content:"()",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:["./src/index.tsx",""],active:"",heightRatio:1},files:[{name:"./src/index.tsx",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:"default",props:{style:{color:"#D8DEE9"}}},{content:" () {",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"  ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:"    ",props:{style:{color:"#D8DEE9FF"}}},{content:"<div>",props:{style:{color:"#81A1C1"}}},{content:"This is a UI Component",props:{style:{color:"#D8DEE9FF"}}},{content:"</div>",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"  )",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"tsx"},annotations:[]},{name:"",focus:"",code:{lines:[{tokens:[{content:"pnpm ",props:{style:{color:"#D8DEE9FF"}}},{content:"test",props:{style:{color:"#88C0D0"}}}]},{tokens:[{content:"## or",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"yarn ",props:{style:{color:"#D8DEE9FF"}}},{content:"test",props:{style:{color:"#88C0D0"}}}]},{tokens:[{content:"## or",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"npm run ",props:{style:{color:"#D8DEE9FF"}}},{content:"test",props:{style:{color:"#88C0D0"}}}]}],lang:"bash"},annotations:[]}],southPanel:void 0}],children:[(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(s.CodeSlot,{})}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o.p,{children:"First is the code of the component."}),(0,n.jsx)(s.CodeSlot,{})]}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o.p,{children:"Then in the test file, we can do this."}),(0,n.jsxs)(o.p,{children:["Where ",(0,n.jsx)(o.code,{children:"@"})," points to the source directory, defined in ",(0,n.jsx)(o.code,{children:"tests/tsconfig.json"})," in the initialization project."]}),(0,n.jsx)(s.CodeSlot,{})]}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(o.p,{children:["Finally we can execute ",(0,n.jsx)(o.code,{children:"modern test"}),"."]}),(0,n.jsx)(s.CodeSlot,{})]})]})]})}function u(e,o){throw new Error("Expected "+(o?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}o.default=function(e={}){const{wrapper:o}=e.components||{};return o?(0,n.jsx)(o,Object.assign({},e,{children:(0,n.jsx)(p,e)})):p(e)}}}]);

package/doc_build/static/js/async/en_guide_basic_use-micro-generator.56325139.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([[2532],{84703:function(e,n,o){o.r(n),o.d(n,{content:function(){return d},frontmatter:function(){return r},title:function(){return s},toc:function(){return i}});var t=o(97458);const r={sidebar_position:4},i=[{id:"test",text:"Test",depth:2},{id:"storybook",text:"Storybook",depth:2},{id:"tailwind-css-support",text:"Tailwind CSS support",depth:2},{id:"modernjs-runtime-api",text:"Modern.js Runtime API",depth:2}],s="Using the Microgenerator",d='"---\\nsidebar_position: 4\\n---\\n\\n# Using the Microgenerator\\n\\nThe Module Engineering solution provides the Microgenerator tool, which allows for the current project to.\\n\\n- add new directories and files\\n- Modify the contents of the `package.json` file\\n- Execute commands\\n\\nThus with these capabilities, **Microgenerator can enable additional feature functionality for the project**.\\n\\nThe microgenerator can be started via [`modern new`](/guide/basic/command-preview). The current Microgenerator features supported by the Module Engineering program are:\\n\\n## Test\\n\\nWhen we want to test some modules, we can enable the test test feature. When this feature is enabled, **a `tests` directory and related files will be created in the project directory, and a new `\\"@modern-js/plugin-testing\\"` dependency will be added to package.json**.\\n\\n## Storybook\\n\\nThe **Storybook feature** can be enabled when we want to debug a component or a common module. When this feature is enabled, **the `stories` directory and related files are created in the project directory, and a new `\\"@modern-js/plugin-storybook\\"` dependency is added to package.json**.\\n\\nFor more information on how to start Storybook and how to use it, check out the following link.\\n\\n- [`modern dev`](/en/guide/basic/command-preview#modern-dev)\\n- [`using Storybook`](/en/guide/basic/using-storybook)\\n\\n## Tailwind CSS support\\n\\nThis can be enabled when we want to add [Tailwind CSS](https://v2.tailwindcss.com/) support to our project. Tailwind CSS is a CSS library that provides out-of-the-box styling.\\n\\nFor more information on how to use Tailwind CSS in your module projects, check out.\\n\\n\x3c!-- \u94fe\u63a5\u5f85\u8865\u5145 --\x3e\\n\\n- Using Tailwind CSS\\n\\n## Modern.js Runtime API\\n\\n\x3c!-- \u94fe\u63a5\u5f85\u8865\u5145 --\x3e\\n\\n**Modern.js provides Runtime API capabilities that can only be used in the Modern.js application project environment**. If you need to develop a component for use in a Modern.js application environment, then you can turn on this feature and the microgenerator will add the `\\"@modern-js/runtime\\"` dependency.\\n\\nAlso, the Storybook debugging tool will determine if the project needs to use the Runtime API by checking the project\'s dependencies and providing the same Runtime API runtime environment as the Modern.js application project.\\n"';function a(e){const n=Object.assign({h1:"h1",a:"a",p:"p",ul:"ul",li:"li",code:"code",strong:"strong",h2:"h2"},e.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.h1,{id:"using-the-microgenerator",children:[(0,t.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#using-the-microgenerator",children:"#"}),"Using the Microgenerator"]}),"\n",(0,t.jsx)(n.p,{children:"The Module Engineering solution provides the Microgenerator tool, which allows for the current project to."}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"add new directories and files"}),"\n",(0,t.jsxs)(n.li,{children:["Modify the contents of the ",(0,t.jsx)(n.code,{children:"package.json"})," file"]}),"\n",(0,t.jsx)(n.li,{children:"Execute commands"}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["Thus with these capabilities, ",(0,t.jsx)(n.strong,{children:"Microgenerator can enable additional feature functionality for the project"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["The microgenerator can be started via ",(0,t.jsx)(n.a,{href:"/module-tools/en/guide/basic/command-preview.html",children:(0,t.jsx)(n.code,{children:"modern new"})}),". The current Microgenerator features supported by the Module Engineering program are:"]}),"\n",(0,t.jsxs)(n.h2,{id:"test",children:[(0,t.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#test",children:"#"}),"Test"]}),"\n",(0,t.jsxs)(n.p,{children:["When we want to test some modules, we can enable the test test feature. When this feature is enabled, ",(0,t.jsxs)(n.strong,{children:["a ",(0,t.jsx)(n.code,{children:"tests"})," directory and related files will be created in the project directory, and a new ",(0,t.jsx)(n.code,{children:'"@modern-js/plugin-testing"'})," dependency will be added to package.json"]}),"."]}),"\n",(0,t.jsxs)(n.h2,{id:"storybook",children:[(0,t.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#storybook",children:"#"}),"Storybook"]}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.strong,{children:"Storybook feature"})," can be enabled when we want to debug a component or a common module. When this feature is enabled, ",(0,t.jsxs)(n.strong,{children:["the ",(0,t.jsx)(n.code,{children:"stories"})," directory and related files are created in the project directory, and a new ",(0,t.jsx)(n.code,{children:'"@modern-js/plugin-storybook"'})," dependency is added to package.json"]}),"."]}),"\n",(0,t.jsx)(n.p,{children:"For more information on how to start Storybook and how to use it, check out the following link."}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"/module-tools/en/guide/basic/command-preview.html#modern-dev-7",children:(0,t.jsx)(n.code,{children:"modern dev"})})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"/module-tools/en/guide/basic/using-storybook.html",children:(0,t.jsx)(n.code,{children:"using Storybook"})})}),"\n"]}),"\n",(0,t.jsxs)(n.h2,{id:"tailwind-css-support",children:[(0,t.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#tailwind-css-support",children:"#"}),"Tailwind CSS support"]}),"\n",(0,t.jsxs)(n.p,{children:["This can be enabled when we want to add ",(0,t.jsx)(n.a,{href:"https://v2.tailwindcss.com/",target:"_blank",rel:"nofollow",children:"Tailwind CSS"})," support to our project. Tailwind CSS is a CSS library that provides out-of-the-box styling."]}),"\n",(0,t.jsx)(n.p,{children:"For more information on how to use Tailwind CSS in your module projects, check out."}),"\n","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Using Tailwind CSS"}),"\n"]}),"\n",(0,t.jsxs)(n.h2,{id:"modernjs-runtime-api",children:[(0,t.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#modernjs-runtime-api",children:"#"}),"Modern.js Runtime API"]}),"\n","\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Modern.js provides Runtime API capabilities that can only be used in the Modern.js application project environment"}),". If you need to develop a component for use in a Modern.js application environment, then you can turn on this feature and the microgenerator will add the ",(0,t.jsx)(n.code,{children:'"@modern-js/runtime"'})," dependency."]}),"\n",(0,t.jsx)(n.p,{children:"Also, the Storybook debugging tool will determine if the project needs to use the Runtime API by checking the project's dependencies and providing the same Runtime API runtime environment as the Modern.js application project."})]})}n.default=function(e={}){const{wrapper:n}=e.components||{};return n?(0,t.jsx)(n,Object.assign({},e,{children:(0,t.jsx)(a,e)})):a(e)}}}]);