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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (163) hide show
  1. package/LICENSE +144 -0
  2. package/docs/.island/config.ts +245 -0
  3. package/docs/.island/dist/404.html +41 -0
  4. package/docs/.island/dist/assets/before-getting-started.1b82b538.js +87 -0
  5. package/docs/.island/dist/assets/before-getting-started.582a31cc.js +87 -0
  6. package/docs/.island/dist/assets/build-config.72eb0918.js +804 -0
  7. package/docs/.island/dist/assets/build-config.d8bb1658.js +809 -0
  8. package/docs/.island/dist/assets/build-preset.96805d7d.js +256 -0
  9. package/docs/.island/dist/assets/build-preset.c20dcd40.js +256 -0
  10. package/docs/.island/dist/assets/build-your-ui.7f349247.js +2 -0
  11. package/docs/.island/dist/assets/build-your-ui.a8361604.js +2 -0
  12. package/docs/.island/dist/assets/command-preview.2d45fc82.js +264 -0
  13. package/docs/.island/dist/assets/command-preview.dc51b953.js +264 -0
  14. package/docs/.island/dist/assets/components.esm.03560353.js +9 -0
  15. package/docs/.island/dist/assets/design-system.86694ff5.js +1254 -0
  16. package/docs/.island/dist/assets/design-system.c4745cce.js +639 -0
  17. package/docs/.island/dist/assets/dev.1d326a37.js +37 -0
  18. package/docs/.island/dist/assets/dev.1fd06000.js +37 -0
  19. package/docs/.island/dist/assets/down.f35427d3.svg +1 -0
  20. package/docs/.island/dist/assets/extension.12299fd6.js +2 -0
  21. package/docs/.island/dist/assets/extension.96dc63a4.js +2 -0
  22. package/docs/.island/dist/assets/getting-started.40e9218d.js +117 -0
  23. package/docs/.island/dist/assets/getting-started.b1ed3f10.js +114 -0
  24. package/docs/.island/dist/assets/github.3bf8ccee.svg +1 -0
  25. package/docs/.island/dist/assets/index.2b2347ea.js +33 -0
  26. package/docs/.island/dist/assets/index.6cef6f5f.js +4 -0
  27. package/docs/.island/dist/assets/index.cb118238.js +36 -0
  28. package/docs/.island/dist/assets/index.ccb6ce27.js +4 -0
  29. package/docs/.island/dist/assets/island_inject.11a12ecc.js +1 -0
  30. package/docs/.island/dist/assets/island_inject.b13deaee.js +1 -0
  31. package/docs/.island/dist/assets/loading.8c9bb911.svg +1 -0
  32. package/docs/.island/dist/assets/modify-output-product.7f6bff35.js +100 -0
  33. package/docs/.island/dist/assets/modify-output-product.b91eff1f.js +100 -0
  34. package/docs/.island/dist/assets/moon.6b705924.svg +3 -0
  35. package/docs/.island/dist/assets/plugin.895932d8.js +42 -0
  36. package/docs/.island/dist/assets/plugin.d2fbc531.js +42 -0
  37. package/docs/.island/dist/assets/publish-your-project.21b8309f.js +164 -0
  38. package/docs/.island/dist/assets/publish-your-project.8d398b17.js +166 -0
  39. package/docs/.island/dist/assets/right.89674cd7.svg +1 -0
  40. package/docs/.island/dist/assets/search.0aea6901.svg +1 -0
  41. package/docs/.island/dist/assets/search.1c85d17c.js +3 -0
  42. package/docs/.island/dist/assets/search.484eca11.js +222 -0
  43. package/docs/.island/dist/assets/search.54fca8d0.js +3 -0
  44. package/docs/.island/dist/assets/style.09015a4b.css +1 -0
  45. package/docs/.island/dist/assets/style.2e5f7bc2.css +1970 -0
  46. package/docs/.island/dist/assets/sun.841dac10.svg +11 -0
  47. package/docs/.island/dist/assets/test-your-project.18bd4582.js +190 -0
  48. package/docs/.island/dist/assets/test-your-project.f53bebf7.js +190 -0
  49. package/docs/.island/dist/assets/test.0da1f99f.js +67 -0
  50. package/docs/.island/dist/assets/test.0e81f002.js +66 -0
  51. package/docs/.island/dist/assets/translator.b1077c44.svg +1 -0
  52. package/docs/.island/dist/assets/use-micro-generator.7d9e4016.js +60 -0
  53. package/docs/.island/dist/assets/use-micro-generator.db5520c1.js +60 -0
  54. package/docs/.island/dist/assets/using-storybook.57ea6b77.js +260 -0
  55. package/docs/.island/dist/assets/using-storybook.a2212f2e.js +260 -0
  56. package/docs/.island/dist/assets/welcome.0449a9c8.js +13 -0
  57. package/docs/.island/dist/assets/welcome.a8448931.js +13 -0
  58. package/docs/.island/dist/assets/why-module-engineering-solution.6ae8c0e3.js +26 -0
  59. package/docs/.island/dist/assets/why-module-engineering-solution.c9a45cbd.js +26 -0
  60. package/docs/.island/dist/chunk-COLCRJ2V.js +1 -0
  61. package/docs/.island/dist/chunk-K5FMOYDC.js +10 -0
  62. package/docs/.island/dist/chunk-WE42KMYS.js +26 -0
  63. package/docs/.island/dist/client-entry.js +3 -0
  64. package/docs/.island/dist/en/api/build-config.html +344 -0
  65. package/docs/.island/dist/en/api/build-preset.html +82 -0
  66. package/docs/.island/dist/en/api/design-system.html +155 -0
  67. package/docs/.island/dist/en/api/dev.html +45 -0
  68. package/docs/.island/dist/en/api/index.html +41 -0
  69. package/docs/.island/dist/en/api/plugin.html +48 -0
  70. package/docs/.island/dist/en/api/test.html +58 -0
  71. package/docs/.island/dist/en/guide/before-getting-started.html +127 -0
  72. package/docs/.island/dist/en/guide/build-your-ui.html +41 -0
  73. package/docs/.island/dist/en/guide/command-preview.html +100 -0
  74. package/docs/.island/dist/en/guide/extension.html +41 -0
  75. package/docs/.island/dist/en/guide/getting-started.html +76 -0
  76. package/docs/.island/dist/en/guide/modify-output-product.html +140 -0
  77. package/docs/.island/dist/en/guide/publish-your-project.html +91 -0
  78. package/docs/.island/dist/en/guide/test-your-project.html +72 -0
  79. package/docs/.island/dist/en/guide/use-micro-generator.html +65 -0
  80. package/docs/.island/dist/en/guide/using-storybook.html +113 -0
  81. package/docs/.island/dist/en/guide/welcome.html +53 -0
  82. package/docs/.island/dist/en/guide/why-module-engineering-solution.html +49 -0
  83. package/docs/.island/dist/en/index.html +42 -0
  84. package/docs/.island/dist/react-dom.js +1 -0
  85. package/docs/.island/dist/react-dom_client.js +1 -0
  86. package/docs/.island/dist/react.js +1 -0
  87. package/docs/.island/dist/react_jsx-runtime.js +10 -0
  88. package/docs/.island/dist/ssr-manifest.json +57 -0
  89. package/docs/.island/dist/test-result.png +0 -0
  90. package/docs/.island/dist/why-module-solution.png +0 -0
  91. package/docs/.island/dist/zh/api/build-config.html +347 -0
  92. package/docs/.island/dist/zh/api/build-preset.html +82 -0
  93. package/docs/.island/dist/zh/api/design-system.html +149 -0
  94. package/docs/.island/dist/zh/api/dev.html +46 -0
  95. package/docs/.island/dist/zh/api/index.html +41 -0
  96. package/docs/.island/dist/zh/api/plugin.html +48 -0
  97. package/docs/.island/dist/zh/api/test.html +59 -0
  98. package/docs/.island/dist/zh/guide/before-getting-started.html +127 -0
  99. package/docs/.island/dist/zh/guide/build-your-ui.html +41 -0
  100. package/docs/.island/dist/zh/guide/command-preview.html +100 -0
  101. package/docs/.island/dist/zh/guide/extension.html +41 -0
  102. package/docs/.island/dist/zh/guide/getting-started.html +79 -0
  103. package/docs/.island/dist/zh/guide/modify-output-product.html +140 -0
  104. package/docs/.island/dist/zh/guide/publish-your-project.html +92 -0
  105. package/docs/.island/dist/zh/guide/test-your-project.html +72 -0
  106. package/docs/.island/dist/zh/guide/use-micro-generator.html +65 -0
  107. package/docs/.island/dist/zh/guide/using-storybook.html +114 -0
  108. package/docs/.island/dist/zh/guide/welcome.html +53 -0
  109. package/docs/.island/dist/zh/guide/why-module-engineering-solution.html +49 -0
  110. package/docs/.island/dist/zh/index.html +42 -0
  111. package/docs/.island/index.html +39 -0
  112. package/docs/.island/styles/index.css +10 -0
  113. package/docs/en/api/build-config.md +501 -0
  114. package/docs/en/api/build-preset.md +214 -0
  115. package/docs/en/api/design-system.md +524 -0
  116. package/docs/en/api/dev.md +32 -0
  117. package/docs/en/api/index.md +3 -0
  118. package/docs/en/api/plugin.md +34 -0
  119. package/docs/en/api/test.md +48 -0
  120. package/docs/en/guide/advance/asset.mdx +132 -0
  121. package/docs/en/guide/advance/build-umd.mdx +241 -0
  122. package/docs/en/guide/advance/copy.md +235 -0
  123. package/docs/en/guide/advance/external-dependency.mdx +125 -0
  124. package/docs/en/guide/advance/in-depth-about-build.md +266 -0
  125. package/docs/en/guide/advance/in-depth-about-dev-command.md +22 -0
  126. package/docs/en/guide/basic/before-getting-started.md +187 -0
  127. package/docs/en/guide/basic/command-preview.md +204 -0
  128. package/docs/en/guide/basic/modify-output-product.md +145 -0
  129. package/docs/en/guide/basic/publish-your-project.md +115 -0
  130. package/docs/en/guide/basic/test-your-project.mdx +158 -0
  131. package/docs/en/guide/basic/use-micro-generator.md +35 -0
  132. package/docs/en/guide/basic/using-storybook.mdx +187 -0
  133. package/docs/en/guide/intro/getting-started.md +78 -0
  134. package/docs/en/guide/intro/welcome.md +14 -0
  135. package/docs/en/guide/intro/why-module-engineering-solution.md +17 -0
  136. package/docs/en/index.md +35 -0
  137. package/docs/public/test-result.png +0 -0
  138. package/docs/public/why-module-solution.png +0 -0
  139. package/docs/zh/api/build-config.md +570 -0
  140. package/docs/zh/api/build-preset.md +220 -0
  141. package/docs/zh/api/design-system.md +1147 -0
  142. package/docs/zh/api/dev.md +33 -0
  143. package/docs/zh/api/index.md +3 -0
  144. package/docs/zh/api/plugins.md +108 -0
  145. package/docs/zh/api/testing.md +52 -0
  146. package/docs/zh/guide/advance/asset.mdx +132 -0
  147. package/docs/zh/guide/advance/build-umd.mdx +232 -0
  148. package/docs/zh/guide/advance/copy.md +235 -0
  149. package/docs/zh/guide/advance/external-dependency.mdx +125 -0
  150. package/docs/zh/guide/advance/in-depth-about-build.md +267 -0
  151. package/docs/zh/guide/advance/in-depth-about-dev-command.md +26 -0
  152. package/docs/zh/guide/basic/before-getting-started.md +187 -0
  153. package/docs/zh/guide/basic/command-preview.md +204 -0
  154. package/docs/zh/guide/basic/modify-output-product.md +144 -0
  155. package/docs/zh/guide/basic/publish-your-project.md +112 -0
  156. package/docs/zh/guide/basic/test-your-project.mdx +158 -0
  157. package/docs/zh/guide/basic/use-micro-generator.md +35 -0
  158. package/docs/zh/guide/basic/using-storybook.mdx +186 -0
  159. package/docs/zh/guide/intro/getting-started.md +78 -0
  160. package/docs/zh/guide/intro/welcome.md +14 -0
  161. package/docs/zh/guide/intro/why-module-engineering-solution.md +17 -0
  162. package/docs/zh/index.md +29 -0
  163. package/package.json +19 -0
package/docs/.island/dist/zh/guide/use-micro-generator.html ADDED
@@ -0,0 +1,65 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width,initial-scale=1">
6
+ <link rel="icon" href="" type="image/svg+xml"></link>
7
+ <script id="check-dark-light">
8
+ ;(() => {
9
+ const saved = localStorage.getItem('island-theme-appearance')
10
+ const prefereDark = window.matchMedia('(prefers-color-scheme: dark)').matches
11
+ if (!saved || saved === 'auto' ? prefereDark : saved === 'dark') {
12
+ document.documentElement.classList.add('dark')
13
+ }
14
+ })()
15
+ </script>
16
+ <title data-rh="true">使用微生成器</title>
17
+ <meta data-rh="true" name="description" content="Island"/>
18
+
19
+
20
+ <script defer src='https://ga.jspm.io/npm:es-module-shims@1.6.0/dist/es-module-shims.js'></script>
21
+ <script type="importmap">
22
+ {
23
+ "imports": {
24
+ "react": "/react.js","react-dom": "/react-dom.js","react-dom/client": "/react-dom_client.js","react/jsx-runtime": "/react_jsx-runtime.js"
25
+ }
26
+ }
27
+ </script>
28
+
29
+ <link rel="stylesheet" href="/assets/style.2e5f7bc2.css">
30
+
31
+ </head>
32
+ <body>
33
+ <div id="root"><div style="height:100%"><header relative="" z="4" fixed="md:~" class="top-0 left-0" w="100%"><div relative="" p="l-8 sm:x-8" transition="background-color duration-500" class="divider-bottom md:border-b-transparent lg:border-b-transparent" nav-h="mobile lg:desktop"><div flex="" justify="between" m="0 auto" nav-h="mobile lg:desktop" class="_container_1ic07_52 _has-sidebar_1ic07_16"><div shrink="0" border="border t-0 b-1 border-solid transparent" class="_nav-bar-title_1ic07_16"><a href="/zh/" w="100%" h="100%" text="1rem" font="semibold" transition="opacity duration-300" hover="opacity-60" class="flex items-center"><span>Module tools</span></a></div><div class="_content_1ic07_24" flex="~ 1" justify="end" items-center=""><div class="search" flex="sm:1" pl="sm:8"><div __island="Search:1"><div flex="" items-center="~" relative="" mr="2" font="semibold"><svg width="32" height="32" viewBox="0 0 32 32" w="5" h="5" fill="currentColor"><path fill="#888888" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg><input disabled="" cursor="text focus:auto" placeholder="Search" height="8" border="none" type="text" text="sm" p="t-0 r-2 b-0 l-2" transition="all duration-200 ease" class="rounded-sm _searchInput_y03a3_1 " aria-label="Search" autoComplete="off"/><div m="r-3" w="10" h="6" p="x-1.5" rounded="md" border="1px solid gray-light-3" text="xs gray-light-3" flex="~" items-center="~" justify="around" class="_searchCommand_y03a3_7"><span>⌘</span><span>K</span></div></div></div></div><div class="_rightNav_1ic07_42"><div class="menu"><div text="sm" font="medium" m="x-3" class="text-brand"><a href="/zh/guide/welcome.html" target="" class="_link_r3fql_1 ">指南</a></div><div text="sm" font="medium" m="x-3" class=""><a href="/zh/api/index.html" target="" class="_link_r3fql_1 ">API</a></div><div m="x-3" last="mr-0"><div __island="NavMenuGroup:4"><div relative=""><button flex="center" nav-h="mobile sm:desktop" font="medium" text="sm text-1 hover:text-2" transition="color duration-200" class="nav-menu-group-button"><span mr="1" text="sm" font="medium">v2.0.0-beta.3</span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div absolute="" pos="top-13 right-0" m="x-0.8" transition="opacity duration-300" class="nav-menu-group-content" style="opacity:0;visibility:hidden"><div p="3" w="100%" h="100%" class="min-w-128px max-h-100vh" border-1="" rounded="xl" bg="bg-default" style="box-shadow:var(--island-shadow-3);margin-right:-1.5rem;z-index:100"><div font="medium"><a href="https://github.com/modern-js-dev/modern.js" target="_blank" rel="noopener noreferrer" class="_link_r3fql_1 "><div rounded="md" hover="bg-bg-mute" p="y-1.6 l-3"><div flex=""><span mr="1">更新日志</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div><div font="medium"><a href="https://github.com/modern-js-dev/modern.js" target="_blank" rel="noopener noreferrer" class="_link_r3fql_1 "><div rounded="md" hover="bg-bg-mute" p="y-1.6 l-3"><div flex=""><span mr="1">贡献指南</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div></div></div></div></div></div><div class="translation" flex="~" text="sm" font="bold" items-center="~" before="menu-item-before"><div m="x-1.5"><div __island="NavMenuGroup:5"><div relative=""><button flex="center" nav-h="mobile sm:desktop" font="medium" text="sm text-1 hover:text-2" transition="color duration-200" class="nav-menu-group-button"><span mr="1" text="sm" font="medium"><svg width="32" height="32" viewBox="0 0 32 32" w="18px" h="18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6l2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div absolute="" pos="top-13 right-0" m="x-0.8" transition="opacity duration-300" class="nav-menu-group-content" style="opacity:0;visibility:hidden"><div p="3" w="100%" h="100%" class="min-w-128px max-h-100vh" border-1="" rounded="xl" bg="bg-default" style="box-shadow:var(--island-shadow-3);margin-right:-1.5rem;z-index:100"><div rounded="md" p="y-1.6 l-3"><span mr="1" text="brand">简体中文</span></div><div font="medium"><a href="/en" target="" class="_link_r3fql_1 "><div rounded="md" hover="bg-bg-mute" p="y-1.6 l-3"><div flex=""><span mr="1">English</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div></div></div></div></div></div><div class="appearance" before="menu-item-before" display="none sm:flex" items-center="center"><div __island="SwitchAppearance:6"><button class="_switch_1tqe3_1 undefined" id="" type="button" role="switch"><span class="_check_1tqe3_17"><span class="_icon_1tqe3_34"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="_sun_8e60k_1"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="_moon_8e60k_5"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></span></span></button></div></div><div __island="SocialLinks:2"><div class="social-links" nav-h="mobile sm:desktop" flex="" items-center="" before="menu-item-before" relative=""><div h="100%" flex="" gap="x-4" items-center="" transition="color duration-300"><a href="https://github.com/modern-js-dev/modern.js" target="_blank" rel="noopener noreferrer"><div class="_social-links-icon_wx6p9_1"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div><div __island="NavHamburger:3"><button class=" _navHamburger_14nz8_1"><span class="_container_14nz8_14"><span class="_top_14nz8_21"></span><span class="_middle_14nz8_27"></span><span class="_bottom_14nz8_33"></span></span></button><div class="_navScreen_1mkpq_1 " id="navScreen"><div class="_container_1mkpq_21"><div class="_navMenu_1mkpq_27"><div w="100%" class="_navMenuItem_1mkpq_34"><div text="sm" font="medium" m="x-3" class="text-brand"><a href="/zh/guide/welcome.html" target="" class="_link_r3fql_1 ">指南</a></div></div><div w="100%" class="_navMenuItem_1mkpq_34"><div text="sm" font="medium" m="x-3" class=""><a href="/zh/api/index.html" target="" class="_link_r3fql_1 ">API</a></div></div><div w="100%" class="_navMenuItem_1mkpq_34"><div m="x-3" last="mr-0"><div relative="" class=" _navScreenMenuGroup_1xte3_1"><button class="_button_1xte3_12"><span class="_buttonSpan_1xte3_25">v2.0.0-beta.3</span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" _down_1xte3_40 "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="_items_1xte3_32"><div class="pa-1" font="medium"><a href="https://github.com/modern-js-dev/modern.js" target="_blank" rel="noopener noreferrer" class="_link_r3fql_1 "><div><div flex=""><span mr="1">更新日志</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div><div class="pa-1" font="medium"><a href="https://github.com/modern-js-dev/modern.js" target="_blank" rel="noopener noreferrer" class="_link_r3fql_1 "><div><div flex=""><span mr="1">贡献指南</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div></div></div></div></div></div><div class="_socialAndAppearance_1mkpq_50" flex="~" justify="center" items-center="center"><div class="items-center appearance pa-2 _navAppearance_1mkpq_46" flex="~" justify="center"><button class="_switch_1tqe3_1 undefined" id="" type="button" role="switch"><span class="_check_1tqe3_17"><span class="_icon_1tqe3_34"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="_sun_8e60k_1"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="_moon_8e60k_5"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></span></span></button></div><div __island="SocialLinks:7"><div class="social-links" nav-h="mobile sm:desktop" flex="" items-center="" before="menu-item-before" relative=""><div h="100%" flex="" gap="x-4" items-center="" transition="color duration-300"><a href="https://github.com/modern-js-dev/modern.js" target="_blank" rel="noopener noreferrer"><div class="_social-links-icon_wx6p9_1"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div><div flex="~" text="sm" font="bold" justify="center"><div m="x-1.5"><div relative="" class=" _navScreenMenuGroup_1xte3_1"><button class="_button_1xte3_12"><span class="_buttonSpan_1xte3_25"><svg width="32" height="32" viewBox="0 0 32 32" w="18px" h="18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6l2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" _down_1xte3_40 "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="_items_1xte3_32"><div class="pa-1"><span mr="1" text="brand">简体中文</span></div><div class="pa-1" font="medium"><a href="/en" target="" class="_link_r3fql_1 "><div><div flex=""><span mr="1">English</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div></div></div></div></div></div></div></div></div></div></div></header><section style="padding-top:var(--island-nav-height)"><div p="t-0 x-6 b-24 sm:6" class="_docLayout_5cssi_8"><div __island="SideMenu:8"><div class="_localNav_ncerp_1"><button flex="center" class="_menu_ncerp_16"><div text="md" mr="2" class="i-carbon:menu"></div><span text="md ">Menu</span></button></div><aside class="_sidebar_iav29_1 "><nav><section block="~" not-first="divider-top mt-4"><div flex="~" justify="between" items-start="~" class="items-center"><h2 m="t-3 b-2" text="1rem text-1" font="bold">介绍</h2></div><div mb="1.4 sm:1" style="height:auto;display:block"><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/zh/guide/welcome.html" target="" class="_link_r3fql_1 ">欢迎使用</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/zh/guide/why-module-engineering-solution.html" target="" class="_link_r3fql_1 ">为什么需要模块工程解决方案</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/zh/guide/getting-started.html" target="" class="_link_r3fql_1 ">快速开始</a></div></div></div></div></section><section block="~" not-first="divider-top mt-4"><div flex="~" justify="between" items-start="~" class="items-center"><h2 m="t-3 b-2" text="1rem text-1" font="bold">基础使用</h2></div><div mb="1.4 sm:1" style="height:auto;display:block"><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/zh/guide/before-getting-started.html" target="" class="_link_r3fql_1 ">开始之前</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/zh/guide/command-preview.html" target="" class="_link_r3fql_1 ">命令预览</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/zh/guide/modify-output-product.html" target="" class="_link_r3fql_1 ">修改输出产物</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-brand"><a href="/zh/guide/use-micro-generator.html" target="" class="_link_r3fql_1 ">使用微生成器</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/zh/guide/using-storybook.html" target="" class="_link_r3fql_1 ">使用 Storybook</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/zh/guide/test-your-project.html" target="" class="_link_r3fql_1 ">测试项目</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/zh/guide/publish-your-project.html" target="" class="_link_r3fql_1 ">发布项目</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/zh/guide/build-your-ui.html" target="" class="_link_r3fql_1 ">为你的项目构建UI(可选)</a></div></div></div></div></section><section block="~" not-first="divider-top mt-4"><div flex="~" justify="between" items-start="~" class="items-center"><h2 m="t-3 b-2" text="1rem text-1" font="bold">进阶指南</h2></div><div mb="1.4 sm:1" style="height:auto;display:block"><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/zh/guide/extension.html" target="" class="_link_r3fql_1 ">使用插件扩展</a></div></div></div></div></section></nav></aside></div><div flex="~ 1 shrink-0" m="x-auto" class="_content_5cssi_2"><div m="x-auto" flex="~ col" class="max-w-100%"><div relative="~" m="x-auto" p="l-2" class="w-100% md:max-w-712px lg:min-w-640px "><div class="island-doc "><!--$--><h1 id="使用微生成器"><a class="header-anchor" aria-hidden="true" href="#使用微生成器">#</a>使用微生成器</h1>
34
+ <p>模块工程解决方案提供了微生成器工具，它可以为当前项目：</p>
35
+ <ul>
36
+ <li>新增目录和文件</li>
37
+ <li>修改 <code>package.json</code> 文件内容</li>
38
+ <li>执行命令</li>
39
+ </ul>
40
+ <p>因此通过这些能力，<strong>微生成器可以为项目开启额外的特性功能</strong>。</p>
41
+ <p>可以通过 <a href="/zh/guide/command-preview.html"><code>modern new</code></a> 启动微生成器。目前模块工程方案支持的微生成器功能有：</p>
42
+ <h2 id="storybook-调试"><a class="header-anchor" aria-hidden="true" href="#storybook-调试">#</a>Storybook 调试</h2>
43
+ <p>当我们想要对组件或者普通模块进行调试的时候，可以启用 <strong>Storybook 调试功能</strong>。启动该功能后，<strong>会在项目目录下创建 <code>stories</code> 目录以及相关文件，在 package.json 中新增 <code>&quot;@modern-js/plugin-storybook&quot;</code> 依赖</strong>。</p>
44
+ <p>关于如何启动 Storybook 以及如何使用 Storybook，可以查看下面的链接：</p>
45
+ <ul>
46
+ <li><a href="/zh/guide/command-preview.html#modern-dev"><code>modern dev</code></a></li>
47
+ <li><a href="/zh/guide/using-storybook.html">使用 Storybook</a></li>
48
+ </ul>
49
+ <h2 id="tailwind-css-支持"><a class="header-anchor" aria-hidden="true" href="#tailwind-css-支持">#</a>Tailwind CSS 支持</h2>
50
+ <p>当我们想要为项目增加 <a href="https://v2.tailwindcss.com/" target="_blank" rel="nofollow">Tailwind CSS</a> 支持的时候，可以启动这个功能。Tailwind CSS 是一个 CSS 库，提供开箱即用的样式。</p>
51
+ <p>关于如何在模块工程里使用 Tailwind CSS，可以查看：</p>
52
+ <ul>
53
+ <li><a href="/xxx.html">使用 Tailwind CSS</a></li>
54
+ </ul>
55
+ <h2 id="启动-modernjs-runtime-api"><a class="header-anchor" aria-hidden="true" href="#启动-modernjs-runtime-api">#</a>启动 Modern.js Runtime API</h2>
56
+ <p><strong>Modern.js/EdenX 提供了 <a href="/xxx.html">Runtime API</a> 能力，这些 API 只能在 Modern.js/EdenX 的应用项目环境中使用</strong>。如果你需要开发一个 Modern.js/EdenX 应用环境中使用的组件，那么你可以开启该特性，微生成器会增加 <code>&quot;@modern-js/runtime&quot;</code>依赖。</p>
57
+ <p>另外，Storybook 调试工具也会通过检测项目的依赖确定项目是否需要使用 Runtime API，并且提供与 Modern.js/EdenX 应用项目一样的 Runtime API 运行环境。</p><!--/$--></div><footer mt="8"><div class="xs:flex" p="b-5" justify="between" items-center="~"><a flex="~" items-center="" leading-8="" font-medium="~" text="sm brand" hover="text-brand-dark" href="https://github.com/modern-js-dev/modern.js/tree/next/website/module-tools/docs/zh/guide/use-micro-generator.md" transition="color duration-300">📝 在 GitHub 上编辑此页</a><div flex="" text="sm text-2" leading-6="~" leading-8="sm:~" font-medium=""><p>上次更新: </p><span>2022/12/5 16:29:55</span></div></div><div flex="~ col sm:row" justify="sm:around" gap="2" divider-top="" pt="6"><div flex="~ col" class="_prev_1f77m_13"><a href="/zh/guide/modify-output-product.html" class="_pager-link_1f77m_20"><span class="_desc_1f77m_43">上一页</span><span class="_title_1f77m_34">修改输出产物</span></a></div><div flex="~ col" class="_next_1f77m_16"><a href="/zh/guide/using-storybook.html" class="_pager-link_1f77m_20 _next_1f77m_16"><span class="_desc_1f77m_43">下一页</span><span class="_title_1f77m_34">使用 Storybook</span></a></div></div></footer></div></div><div relative="~" display="none lg:block" order="2" flex="1" p="l-8" class="max-w-256px"><div class="_aside-container_5cssi_32"><div flex="~ col" p="b-8" style="min-height:calc(100vh - (var(--island-nav-height-desktop) + 32px))"><div><div flex="~ col 1"><div display="lg:block"><div relative="" divider-left="" p="l-4" text="13px" font-medium="" id="aside-container"><div absolute="" pos="top-33px" opacity="0" w="1px" h="18px" bg="brand" style="left:-1px;transition:top 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s, opacity 0.25s" id="aside-marker"></div><div block="~" leading-7="" text="13px" font="semibold">目录</div><nav><ul relative=""><li><a href="#storybook-调试" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:0">Storybook 调试</a></li><li><a href="#tailwind-css-支持" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:0">Tailwind CSS 支持</a></li><li><a href="#启动-modernjs-runtime-api" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:0">启动 Modern.js Runtime API</a></li></ul></nav></div></div></div></div></div></div></div></div></div></section><div __island="BackTop:0"></div></div></div>
58
+
59
+ <script id="island-props">[{},{"langRoutePrefix":"/zh/"},{"socialLinks":[{"icon":"github","mode":"link","content":"https://github.com/modern-js-dev/modern.js"}]},{"localeData":{"lang":"zh","label":"简体中文","lastUpdatedText":"上次更新","nav":[{"text":"指南","link":"/zh/guide/welcome","activeMatch":"/guide/"},{"text":"API","link":"/zh/api/","activeMatch":"/api/"},{"text":"v2.0.0-beta.3","items":[{"text":"更新日志","link":"https://github.com/modern-js-dev/modern.js"},{"text":"贡献指南","link":"https://github.com/modern-js-dev/modern.js"}]}],"sidebar":{"/zh/guide/":[{"text":"介绍","items":[{"text":"欢迎使用","link":"/zh/guide/welcome"},{"text":"为什么需要模块工程解决方案","link":"/zh/guide/why-module-engineering-solution"},{"text":"快速开始","link":"/zh/guide/getting-started"}]},{"text":"基础使用","items":[{"text":"开始之前","link":"/zh/guide/before-getting-started"},{"text":"命令预览","link":"/zh/guide/command-preview"},{"text":"修改输出产物","link":"/zh/guide/modify-output-product"},{"text":"使用微生成器","link":"/zh/guide/use-micro-generator"},{"text":"使用 Storybook","link":"/zh/guide/using-storybook"},{"text":"测试项目","link":"/zh/guide/test-your-project"},{"text":"发布项目","link":"/zh/guide/publish-your-project"},{"text":"为你的项目构建UI(可选)","link":"/zh/guide/build-your-ui"}]},{"text":"进阶指南","items":[{"text":"使用插件扩展","link":"/zh/guide/extension"}]}],"/zh/api/":[{"text":"配置项","items":[{"text":"BuildConfig","link":"/zh/api/build-config"},{"text":"BuildPreset","link":"/zh/api/build-preset"},{"text":"Dev","link":"/zh/api/dev"},{"text":"Test","link":"/zh/api/test"},{"text":"Plugin","link":"/zh/api/plugin"},{"text":"DesignSystem","link":"/zh/api/design-system"}]}]},"title":"Module tools","outlineTitle":"目录","prevPageText":"上一页","nextPageText":"下一页","description":"模块工程解决方案","editLink":{"pattern":"https://github.com/modern-js-dev/modern.js/tree/next/website/module-tools/docs/:path","text":"📝 在 GitHub 上编辑此页"},"langRoutePrefix":"/zh/"},"siteData":{"lang":"en-US","title":"Module tools","description":"Island","themeConfig":{"locales":{"/zh/":{"lang":"zh","label":"简体中文","lastUpdatedText":"上次更新","nav":[{"text":"指南","link":"/zh/guide/welcome","activeMatch":"/guide/"},{"text":"API","link":"/zh/api/","activeMatch":"/api/"},{"text":"v2.0.0-beta.3","items":[{"text":"更新日志","link":"https://github.com/modern-js-dev/modern.js"},{"text":"贡献指南","link":"https://github.com/modern-js-dev/modern.js"}]}],"sidebar":{"/zh/guide/":[{"text":"介绍","items":[{"text":"欢迎使用","link":"/zh/guide/welcome"},{"text":"为什么需要模块工程解决方案","link":"/zh/guide/why-module-engineering-solution"},{"text":"快速开始","link":"/zh/guide/getting-started"}]},{"text":"基础使用","items":[{"text":"开始之前","link":"/zh/guide/before-getting-started"},{"text":"命令预览","link":"/zh/guide/command-preview"},{"text":"修改输出产物","link":"/zh/guide/modify-output-product"},{"text":"使用微生成器","link":"/zh/guide/use-micro-generator"},{"text":"使用 Storybook","link":"/zh/guide/using-storybook"},{"text":"测试项目","link":"/zh/guide/test-your-project"},{"text":"发布项目","link":"/zh/guide/publish-your-project"},{"text":"为你的项目构建UI(可选)","link":"/zh/guide/build-your-ui"}]},{"text":"进阶指南","items":[{"text":"使用插件扩展","link":"/zh/guide/extension"}]}],"/zh/api/":[{"text":"配置项","items":[{"text":"BuildConfig","link":"/zh/api/build-config"},{"text":"BuildPreset","link":"/zh/api/build-preset"},{"text":"Dev","link":"/zh/api/dev"},{"text":"Test","link":"/zh/api/test"},{"text":"Plugin","link":"/zh/api/plugin"},{"text":"DesignSystem","link":"/zh/api/design-system"}]}]},"title":"Module tools","outlineTitle":"目录","prevPageText":"上一页","nextPageText":"下一页","description":"模块工程解决方案","editLink":{"pattern":"https://github.com/modern-js-dev/modern.js/tree/next/website/module-tools/docs/:path","text":"📝 在 GitHub 上编辑此页"}},"/en/":{"lang":"en","label":"English","lastUpdated":"Last Updated","nav":[{"text":"Guide","link":"/en/guide/welcome","activeMatch":"/guide/"},{"text":"API","link":"/en/api/","activeMatch":"/api/"},{"text":"v2.0.0-beta.3","items":[{"text":"Changelog","link":"https://github.com/modern-js-dev/modern.js"},{"text":"Contributing","link":"https://github.com/modern-js-dev/modern.js"}]}],"sidebar":{"/en/guide/":[{"text":"Introduction","items":[{"text":"WelCome","link":"/en/guide/welcome"},{"text":"Why module project solution","link":"/en/guide/why-module-engineering-solution"},{"text":"Getting Started","link":"/en/guide/getting-started"}]},{"text":"Basic Guide","items":[{"text":"Before getting started","link":"/en/guide/before-getting-started"},{"text":"Command preview","link":"/en/guide/command-preview"},{"text":"Modify output product","link":"/en/guide/modify-output-product"},{"text":"Use Micro generator","link":"/en/guide/use-micro-generator"},{"text":"Using Storybook","link":"/en/guide/using-storybook"},{"text":"Test project","link":"/en/guide/test-your-project"},{"text":"Publish project","link":"/en/guide/publish-your-project"},{"text":"Build your UI(optional)","link":"/en/guide/build-your-ui"}]},{"text":"Advanced Guide","items":[{"text":"Plugins extension","link":"/en/guide/extension"}]}],"/en/api/":[{"text":"Config","items":[{"text":"BuildConfig","link":"/en/api/build-config"},{"text":"BuildPreset","link":"/en/api/build-preset"},{"text":"Dev","link":"/en/api/dev"},{"text":"Test","link":"/en/api/test"},{"text":"Plugin","link":"/en/api/plugin"},{"text":"DesignSystem","link":"/en/api/design-system"}]}]},"title":"Module tools","description":"Module Engineering Solutions","lastUpdatedText":"Last Updated","editLink":{"pattern":"https://github.com/modern-js-dev/modern.js/tree/next/website/module-tools/docs/:path","text":"📝 Edit this page on GitHub"}}},"outlineTitle":"ON THIS PAGE","socialLinks":[{"icon":"github","mode":"link","content":"https://github.com/modern-js-dev/modern.js"}],"footer":{"message":"The Module Engineering Solutions","copyright":"\nCopyright © 2022 ByteDance."}},"head":[["script",{"id":"check-dark-light"},"\n ;(() => {\n const saved = localStorage.getItem('island-theme-appearance')\n const prefereDark = window.matchMedia('(prefers-color-scheme: dark)').matches\n if (!saved || saved === 'auto' ? prefereDark : saved === 'dark') {\n document.documentElement.classList.add('dark')\n }\n })()\n "]],"base":"","icon":"","root":"/Users/bytedance/modern.js/website/module-tools/docs","appearance":true},"pathname":"/zh/guide/use-micro-generator"},{"text":"v2.0.0-beta.3","items":[{"text":"更新日志","link":"https://github.com/modern-js-dev/modern.js"},{"text":"贡献指南","link":"https://github.com/modern-js-dev/modern.js"}]},{"items":[{"text":"简体中文","link":"/zh"},{"text":"English","link":"/en"}],"activeIndex":0,"isTranslation":true},{},{"socialLinks":[{"icon":"github","mode":"link","content":"https://github.com/modern-js-dev/modern.js"}]},{"pathname":"/zh/guide/use-micro-generator","langRoutePrefix":"","sidebarData":[{"text":"介绍","items":[{"text":"欢迎使用","link":"/zh/guide/welcome"},{"text":"为什么需要模块工程解决方案","link":"/zh/guide/why-module-engineering-solution"},{"text":"快速开始","link":"/zh/guide/getting-started"}]},{"text":"基础使用","items":[{"text":"开始之前","link":"/zh/guide/before-getting-started"},{"text":"命令预览","link":"/zh/guide/command-preview"},{"text":"修改输出产物","link":"/zh/guide/modify-output-product"},{"text":"使用微生成器","link":"/zh/guide/use-micro-generator"},{"text":"使用 Storybook","link":"/zh/guide/using-storybook"},{"text":"测试项目","link":"/zh/guide/test-your-project"},{"text":"发布项目","link":"/zh/guide/publish-your-project"},{"text":"为你的项目构建UI(可选)","link":"/zh/guide/build-your-ui"}]},{"text":"进阶指南","items":[{"text":"使用插件扩展","link":"/zh/guide/extension"}]}]}]</script><script type="module" src="/assets/island_inject.11a12ecc.js"></script>
60
+ <script type="module">import Le,{createContext as ke}from"react";import{jsx as Ce}from"react/jsx-runtime";const Ae="modulepreload",Ie=function(e){return"/"+e},ne={},Oe=function(t,n,i){return!n||n.length===0?t():Promise.all(n.map(r=>{if(r=Ie(r),r in ne)return;ne[r]=!0;const s=r.endsWith(".css"),p=s?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${r}"]${p}`))return;const a=document.createElement("link");if(a.rel=s?"stylesheet":Ae,s||(a.as="script",a.crossOrigin=""),a.href=r,document.head.appendChild(a),s)return new Promise((f,_)=>{a.addEventListener("load",f),a.addEventListener("error",()=>_(new Error(`Unable to preload CSS for ${r}`)))})})).then(()=>t())};const me=()=>typeof window<"u";ke({data:me()?window==null?void 0:window.ISLAND_PAGE_DATA:null,setData:e=>{}});const je="island-theme-appearance";let He,W,V;typeof window<"u"&&typeof localStorage<"u"&&(W=localStorage.getItem(je)||"auto",V=window.matchMedia("(prefers-color-scheme: dark)"),W==="auto"&&V.matches,V.onchange=e=>{W==="auto"&&Ne(e.matches)});const Ne=e=>{He[e?"add":"remove"]("dark")};var Re=typeof global=="object"&&global&&global.Object===Object&&global;const Pe=Re;var $e=typeof self=="object"&&self&&self.Object===Object&&self,De=Pe||$e||Function("return this")();const ue=De;var qe=ue.Symbol;const Y=qe;var pe=Object.prototype,Me=pe.hasOwnProperty,Be=pe.toString,D=Y?Y.toStringTag:void 0;function Ue(e){var t=Me.call(e,D),n=e[D];try{e[D]=void 0;var i=!0}catch{}var r=Be.call(e);return i&&(t?e[D]=n:delete e[D]),r}var We=Object.prototype,Ge=We.toString;function Fe(e){return Ge.call(e)}var Ye="[object Null]",Ke="[object Undefined]",oe=Y?Y.toStringTag:void 0;function Xe(e){return e==null?e===void 0?Ke:Ye:oe&&oe in Object(e)?Ue(e):Fe(e)}function Ze(e){return e!=null&&typeof e=="object"}var Ve="[object Symbol]";function Je(e){return typeof e=="symbol"||Ze(e)&&Xe(e)==Ve}var Qe=/\s/;function et(e){for(var t=e.length;t--&&Qe.test(e.charAt(t)););return t}var tt=/^\s+/;function nt(e){return e&&e.slice(0,et(e)+1).replace(tt,"")}function K(e){var t=typeof e;return e!=null&&(t=="object"||t=="function")}var re=0/0,ot=/^[-+]0x[0-9a-f]+$/i,rt=/^0b[01]+$/i,at=/^0o[0-7]+$/i,it=parseInt;function ae(e){if(typeof e=="number")return e;if(Je(e))return re;if(K(e)){var t=typeof e.valueOf=="function"?e.valueOf():e;e=K(t)?t+"":t}if(typeof e!="string")return e===0?e:+e;e=nt(e);var n=rt.test(e);return n||at.test(e)?it(e.slice(2),n?2:8):ot.test(e)?re:+e}var ct=function(){return ue.Date.now()};const J=ct;var st="Expected a function",dt=Math.max,lt=Math.min;function mt(e,t,n){var i,r,s,p,a,f,_=0,g=!1,w=!1,z=!0;if(typeof e!="function")throw new TypeError(st);t=ae(t)||0,K(n)&&(g=!!n.leading,w="maxWait"in n,s=w?dt(ae(n.maxWait)||0,t):s,z="trailing"in n?!!n.trailing:z);function L(h){var m=i,o=r;return i=r=void 0,_=h,p=e.apply(o,m),p}function E(h){return _=h,a=setTimeout(H,t),g?L(h):p}function A(h){var m=h-f,o=h-_,O=t-m;return w?lt(O,s-o):O}function M(h){var m=h-f,o=h-_;return f===void 0||m>=t||m<0||w&&o>=s}function H(){var h=J();if(M(h))return B(h);a=setTimeout(H,A(h))}function B(h){return a=void 0,z&&i?L(h):(i=r=void 0,p)}function x(){a!==void 0&&clearTimeout(a),_=0,i=f=r=a=void 0}function N(){return a===void 0?p:B(J())}function C(){var h=J(),m=M(h);if(i=arguments,r=this,f=h,m){if(a===void 0)return E(f);if(w)return clearTimeout(a),a=setTimeout(H,t),L(f)}return a===void 0&&(a=setTimeout(H,t)),p}return C.cancel=x,C.flush=N,C}var ut="Expected a function";function pt(e,t,n){var i=!0,r=!0;if(typeof e!="function")throw new TypeError(ut);return K(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),mt(e,t,{leading:i,maxWait:t,trailing:r})}var ft=function(){var e=document.getSelection();if(!e.rangeCount)return function(){};for(var t=document.activeElement,n=[],i=0;i<e.rangeCount;i++)n.push(e.getRangeAt(i));switch(t.tagName.toUpperCase()){case"INPUT":case"TEXTAREA":t.blur();break;default:t=null;break}return e.removeAllRanges(),function(){e.type==="Caret"&&e.removeAllRanges(),e.rangeCount||n.forEach(function(r){e.addRange(r)}),t&&t.focus()}},gt=ft,ie={"text/plain":"Text","text/html":"Url",default:"Text"},vt="Copy to clipboard: #{key}, Enter";function ht(e){var t=(/mac os x/i.test(navigator.userAgent)?"\u2318":"Ctrl")+"+C";return e.replace(/#{\s*key\s*}/g,t)}function _t(e,t){var n,i,r,s,p,a,f=!1;t||(t={}),n=t.debug||!1;try{r=gt(),s=document.createRange(),p=document.getSelection(),a=document.createElement("span"),a.textContent=e,a.ariaHidden="true",a.style.all="unset",a.style.position="fixed",a.style.top=0,a.style.clip="rect(0, 0, 0, 0)",a.style.whiteSpace="pre",a.style.webkitUserSelect="text",a.style.MozUserSelect="text",a.style.msUserSelect="text",a.style.userSelect="text",a.addEventListener("copy",function(g){if(g.stopPropagation(),t.format)if(g.preventDefault(),typeof g.clipboardData>"u"){n&&console.warn("unable to use e.clipboardData"),n&&console.warn("trying IE specific stuff"),window.clipboardData.clearData();var w=ie[t.format]||ie.default;window.clipboardData.setData(w,e)}else g.clipboardData.clearData(),g.clipboardData.setData(t.format,e);t.onCopy&&(g.preventDefault(),t.onCopy(g.clipboardData))}),document.body.appendChild(a),s.selectNodeContents(a),p.addRange(s);var _=document.execCommand("copy");if(!_)throw new Error("copy command was unsuccessful");f=!0}catch(g){n&&console.error("unable to copy using execCommand: ",g),n&&console.warn("trying IE specific stuff");try{window.clipboardData.setData(t.format||"text",e),t.onCopy&&t.onCopy(window.clipboardData),f=!0}catch(w){n&&console.error("unable to copy using clipboardData: ",w),n&&console.error("falling back to prompt"),i=ht("message"in t?t.message:vt),window.prompt(i,e)}}finally{p&&(typeof p.removeRange=="function"?p.removeRange(s):p.removeAllRanges()),a&&document.body.removeChild(a),r()}return f}var yt=_t;function bt(){const e=new Map;window.addEventListener("click",t=>{var i;const n=t.target;if(n.matches('div[class*="language-"] > button.copy')){const r=n.parentElement,s=(i=n.nextElementSibling)==null?void 0:i.nextElementSibling;if(!r||!s)return;const{innerText:p=""}=s;if(yt(p)){n.classList.add("copied"),clearTimeout(e.get(n));const f=setTimeout(()=>{n.classList.remove("copied"),n.blur(),e.delete(n)},2e3);e.set(n,f)}}})}/*! medium-zoom 1.0.6 | MIT License | https://github.com/francoischalifour/medium-zoom */var j=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},G=function(t){return t.tagName==="IMG"},wt=function(t){return NodeList.prototype.isPrototypeOf(t)},F=function(t){return t&&t.nodeType===1},ce=function(t){var n=t.currentSrc||t.src;return n.substr(-4).toLowerCase()===".svg"},se=function(t){try{return Array.isArray(t)?t.filter(G):wt(t)?[].slice.call(t).filter(G):F(t)?[t].filter(G):typeof t=="string"?[].slice.call(document.querySelectorAll(t)).filter(G):[]}catch{throw new TypeError(`The provided selector is invalid.
61
+ Expects a CSS selector, a Node element, a NodeList or an array.
62
+ See: https://github.com/francoischalifour/medium-zoom`)}},Et=function(t){var n=document.createElement("div");return n.classList.add("medium-zoom-overlay"),n.style.background=t,n},xt=function(t){var n=t.getBoundingClientRect(),i=n.top,r=n.left,s=n.width,p=n.height,a=t.cloneNode(),f=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,_=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0;return a.removeAttribute("id"),a.style.position="absolute",a.style.top=i+f+"px",a.style.left=r+_+"px",a.style.width=s+"px",a.style.height=p+"px",a.style.transform="",a},P=function(t,n){var i=j({bubbles:!1,cancelable:!1,detail:void 0},n);if(typeof window.CustomEvent=="function")return new CustomEvent(t,i);var r=document.createEvent("CustomEvent");return r.initCustomEvent(t,i.bubbles,i.cancelable,i.detail),r},Tt=function e(t){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},i=window.Promise||function(c){function d(){}c(d,d)},r=function(c){var d=c.target;if(d===O){E();return}x.indexOf(d)!==-1&&A({target:d})},s=function(){if(!(C||!o.original)){var c=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;Math.abs(h-c)>m.scrollOffset&&setTimeout(E,150)}},p=function(c){var d=c.key||c.keyCode;(d==="Escape"||d==="Esc"||d===27)&&E()},a=function(){var c=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},d=c;if(c.background&&(O.style.background=c.background),c.container&&c.container instanceof Object&&(d.container=j({},m.container,c.container)),c.template){var v=F(c.template)?c.template:document.querySelector(c.template);d.template=v}return m=j({},m,d),x.forEach(function(y){y.dispatchEvent(P("medium-zoom:update",{detail:{zoom:b}}))}),b},f=function(){var c=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};return e(j({},m,c))},_=function(){for(var c=arguments.length,d=Array(c),v=0;v<c;v++)d[v]=arguments[v];var y=d.reduce(function(u,S){return[].concat(u,se(S))},[]);return y.filter(function(u){return x.indexOf(u)===-1}).forEach(function(u){x.push(u),u.classList.add("medium-zoom-image")}),N.forEach(function(u){var S=u.type,k=u.listener,R=u.options;y.forEach(function(I){I.addEventListener(S,k,R)})}),b},g=function(){for(var c=arguments.length,d=Array(c),v=0;v<c;v++)d[v]=arguments[v];o.zoomed&&E();var y=d.length>0?d.reduce(function(u,S){return[].concat(u,se(S))},[]):x;return y.forEach(function(u){u.classList.remove("medium-zoom-image"),u.dispatchEvent(P("medium-zoom:detach",{detail:{zoom:b}}))}),x=x.filter(function(u){return y.indexOf(u)===-1}),b},w=function(c,d){var v=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{};return x.forEach(function(y){y.addEventListener("medium-zoom:"+c,d,v)}),N.push({type:"medium-zoom:"+c,listener:d,options:v}),b},z=function(c,d){var v=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{};return x.forEach(function(y){y.removeEventListener("medium-zoom:"+c,d,v)}),N=N.filter(function(y){return!(y.type==="medium-zoom:"+c&&y.listener.toString()===d.toString())}),b},L=function(){var c=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},d=c.target,v=function(){var u={width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,left:0,top:0,right:0,bottom:0},S=void 0,k=void 0;if(m.container)if(m.container instanceof Object)u=j({},u,m.container),S=u.width-u.left-u.right-m.margin*2,k=u.height-u.top-u.bottom-m.margin*2;else{var R=F(m.container)?m.container:document.querySelector(m.container),I=R.getBoundingClientRect(),X=I.width,ve=I.height,he=I.left,_e=I.top;u=j({},u,{width:X,height:ve,left:he,top:_e})}S=S||u.width-m.margin*2,k=k||u.height-m.margin*2;var $=o.zoomedHd||o.original,ye=ce($)?S:$.naturalWidth||S,be=ce($)?k:$.naturalHeight||k,U=$.getBoundingClientRect(),we=U.top,Ee=U.left,Q=U.width,ee=U.height,xe=Math.min(ye,S)/Q,Te=Math.min(be,k)/ee,Z=Math.min(xe,Te),Se=(-Ee+(S-Q)/2+m.margin+u.left)/Z,ze=(-we+(k-ee)/2+m.margin+u.top)/Z,te="scale("+Z+") translate3d("+Se+"px, "+ze+"px, 0)";o.zoomed.style.transform=te,o.zoomedHd&&(o.zoomedHd.style.transform=te)};return new i(function(y){if(d&&x.indexOf(d)===-1){y(b);return}var u=function X(){C=!1,o.zoomed.removeEventListener("transitionend",X),o.original.dispatchEvent(P("medium-zoom:opened",{detail:{zoom:b}})),y(b)};if(o.zoomed){y(b);return}if(d)o.original=d;else if(x.length>0){var S=x;o.original=S[0]}else{y(b);return}if(o.original.dispatchEvent(P("medium-zoom:open",{detail:{zoom:b}})),h=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,C=!0,o.zoomed=xt(o.original),document.body.appendChild(O),m.template){var k=F(m.template)?m.template:document.querySelector(m.template);o.template=document.createElement("div"),o.template.appendChild(k.content.cloneNode(!0)),document.body.appendChild(o.template)}if(document.body.appendChild(o.zoomed),window.requestAnimationFrame(function(){document.body.classList.add("medium-zoom--opened")}),o.original.classList.add("medium-zoom-image--hidden"),o.zoomed.classList.add("medium-zoom-image--opened"),o.zoomed.addEventListener("click",E),o.zoomed.addEventListener("transitionend",u),o.original.getAttribute("data-zoom-src")){o.zoomedHd=o.zoomed.cloneNode(),o.zoomedHd.removeAttribute("srcset"),o.zoomedHd.removeAttribute("sizes"),o.zoomedHd.src=o.zoomed.getAttribute("data-zoom-src"),o.zoomedHd.onerror=function(){clearInterval(R),console.warn("Unable to reach the zoom image target "+o.zoomedHd.src),o.zoomedHd=null,v()};var R=setInterval(function(){o.zoomedHd.complete&&(clearInterval(R),o.zoomedHd.classList.add("medium-zoom-image--opened"),o.zoomedHd.addEventListener("click",E),document.body.appendChild(o.zoomedHd),v())},10)}else if(o.original.hasAttribute("srcset")){o.zoomedHd=o.zoomed.cloneNode(),o.zoomedHd.removeAttribute("sizes"),o.zoomedHd.removeAttribute("loading");var I=o.zoomedHd.addEventListener("load",function(){o.zoomedHd.removeEventListener("load",I),o.zoomedHd.classList.add("medium-zoom-image--opened"),o.zoomedHd.addEventListener("click",E),document.body.appendChild(o.zoomedHd),v()})}else v()})},E=function(){return new i(function(c){if(C||!o.original){c(b);return}var d=function v(){o.original.classList.remove("medium-zoom-image--hidden"),document.body.removeChild(o.zoomed),o.zoomedHd&&document.body.removeChild(o.zoomedHd),document.body.removeChild(O),o.zoomed.classList.remove("medium-zoom-image--opened"),o.template&&document.body.removeChild(o.template),C=!1,o.zoomed.removeEventListener("transitionend",v),o.original.dispatchEvent(P("medium-zoom:closed",{detail:{zoom:b}})),o.original=null,o.zoomed=null,o.zoomedHd=null,o.template=null,c(b)};C=!0,document.body.classList.remove("medium-zoom--opened"),o.zoomed.style.transform="",o.zoomedHd&&(o.zoomedHd.style.transform=""),o.template&&(o.template.style.transition="opacity 150ms",o.template.style.opacity=0),o.original.dispatchEvent(P("medium-zoom:close",{detail:{zoom:b}})),o.zoomed.addEventListener("transitionend",d)})},A=function(){var c=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},d=c.target;return o.original?E():L({target:d})},M=function(){return m},H=function(){return x},B=function(){return o.original},x=[],N=[],C=!1,h=0,m=n,o={original:null,zoomed:null,zoomedHd:null,template:null};Object.prototype.toString.call(t)==="[object Object]"?m=t:(t||typeof t=="string")&&_(t),m=j({margin:0,background:"#fff",scrollOffset:40,container:null,template:null},m);var O=Et(m.background);document.addEventListener("click",r),document.addEventListener("keyup",p),document.addEventListener("scroll",s),window.addEventListener("resize",E);var b={open:L,close:E,toggle:A,update:a,clone:f,attach:_,detach:g,on:w,off:z,getOptions:M,getImages:H,getZoomedImage:B};return b};function St(e,t){t===void 0&&(t={});var n=t.insertAt;if(!(!e||typeof document>"u")){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css",n==="top"&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}var zt=".medium-zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .3s;will-change:opacity}.medium-zoom--opened .medium-zoom-overlay{cursor:pointer;cursor:zoom-out;opacity:1}.medium-zoom-image{cursor:pointer;cursor:zoom-in;transition:transform .3s cubic-bezier(.2,0,.2,1)!important}.medium-zoom-image--hidden{visibility:hidden}.medium-zoom-image--opened{position:relative;cursor:pointer;cursor:zoom-out;will-change:transform}";St(zt);const Lt=Tt,kt=60;function Ct(){function e(t,n,i=!1){let r=null;try{r=t.classList.contains("header-anchor")?t:document.getElementById(decodeURIComponent(n.slice(1)))}catch(s){console.warn(s)}if(r){const s=parseInt(window.getComputedStyle(r).paddingTop,10),p=window.scrollY+r.getBoundingClientRect().top-kt+s;window.scrollTo({left:0,top:p,...i?{behavior:"smooth"}:{}})}}window.addEventListener("click",t=>{const n=t.target.closest("a");if(n){const{origin:i,hash:r,target:s,pathname:p,search:a}=n,f=window.location;r&&s!=="_blank"&&i===f.origin&&p===f.pathname&&a===f.search&&r&&r!==f.hash&&n.classList.contains("header-anchor")&&(t.preventDefault(),history.pushState(null,"",r),e(n,r,!0),window.dispatchEvent(new Event("hashchange")))}},{capture:!0}),window.addEventListener("hashchange",t=>{t.preventDefault()})}function At(){function e(){return document.documentElement.scrollTop+window.innerHeight>=document.documentElement.scrollHeight}const t=60,n=document.getElementById("aside-marker"),i=document.getElementById("aside-container"),r=document.querySelectorAll(".island-doc .header-anchor");let s=null;const p=Array.from((i==null?void 0:i.getElementsByTagName("a"))||[]).map(g=>decodeURIComponent(g.hash));if(n&&!p.length){n.style.opacity="0";return}const a=(g,w)=>{if(s&&s.classList.remove("aside-active"),g[w]){g[w].classList.add("aside-active");const z=g[w].getAttribute("href"),L=p.findIndex(A=>A===z),E=i==null?void 0:i.querySelector(`a[href="#${z==null?void 0:z.slice(1)}"]`);E&&(s=E,s.classList.add("aside-active"),n.style.top=`${33+L*28}px`,n.style.opacity="1")}},f=()=>{if(e())a(r,r.length-1);else for(let g=0;g<r.length;g++){const w=r[g],z=r[g+1],L=window.scrollY,E=w.parentElement.offsetTop-t;if(g===0&&L===0&&a(r,0),!z){a(r,g);break}const A=z.parentElement.offsetTop-t;if(L>E&&L<A){a(r,g);break}}},_=pt(f,100);return requestAnimationFrame(f),window.addEventListener("scroll",_),()=>{window.removeEventListener("scroll",_)}}function It(){const e=document.querySelectorAll("img");Lt(e,{margin:100,background:"rgba(0, 0, 0, 0.7)"})}function Ot(){!me()||(At(),Ct(),bt(),It())}if(typeof window<"u"){var de={get passive(){}};window.addEventListener("testPassive",null,de),window.removeEventListener("testPassive",null,de)}typeof window<"u"&&window.navigator&&window.navigator.platform&&(/iP(ad|hone|od)/.test(window.navigator.platform)||window.navigator.platform==="MacIntel"&&window.navigator.maxTouchPoints>1);var l={exports:{}},jt="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED",Ht=jt,Nt=Ht;function fe(){}function ge(){}ge.resetWarningCache=fe;var Rt=function(){function e(i,r,s,p,a,f){if(f!==Nt){var _=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw _.name="Invariant Violation",_}}e.isRequired=e;function t(){return e}var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:ge,resetWarningCache:fe};return n.PropTypes=n,n};l.exports=Rt();var q={BASE:"base",BODY:"body",HEAD:"head",HTML:"html",LINK:"link",META:"meta",NOSCRIPT:"noscript",SCRIPT:"script",STYLE:"style",TITLE:"title",FRAGMENT:"Symbol(react.fragment)"};Object.keys(q).map(function(e){return q[e]});var le={accesskey:"accessKey",charset:"charSet",class:"className",contenteditable:"contentEditable",contextmenu:"contextMenu","http-equiv":"httpEquiv",itemprop:"itemProp",tabindex:"tabIndex"};Object.keys(le).reduce(function(e,t){return e[le[t]]=t,e},{});q.NOSCRIPT,q.SCRIPT,q.STYLE;Le.createContext({});var Pt=l.exports.shape({setHelmet:l.exports.func,helmetInstances:l.exports.shape({get:l.exports.func,add:l.exports.func,remove:l.exports.func})});l.exports.shape({helmet:l.exports.shape()}),l.exports.node.isRequired;Pt.isRequired;l.exports.object,l.exports.object,l.exports.oneOfType([l.exports.arrayOf(l.exports.node),l.exports.node]),l.exports.string,l.exports.bool,l.exports.bool,l.exports.object,l.exports.arrayOf(l.exports.object),l.exports.arrayOf(l.exports.object),l.exports.arrayOf(l.exports.object),l.exports.func,l.exports.arrayOf(l.exports.object),l.exports.arrayOf(l.exports.object),l.exports.string,l.exports.object,l.exports.string,l.exports.bool,l.exports.object;async function $t(){if(!document.getElementById("root"))throw new Error("#root element not found");{const t=document.querySelectorAll("[__island]");if(t.length===0)return;const{hydrateRoot:n}=await Oe(()=>import("react-dom/client"),[]);for(let i=0;i<t.length;i++){const r=t[i],[s,p]=r.getAttribute("__island").split(":"),a=window.ISLANDS[s];n(r,Ce(a,{...window.ISLAND_PROPS[p]}))}}}$t().then(()=>{setTimeout(()=>{Ot()})});
63
+ </script>
64
+ </body>
65
+ </html>
package/docs/.island/dist/zh/guide/using-storybook.html ADDED
@@ -0,0 +1,114 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width,initial-scale=1">
6
+ <link rel="icon" href="" type="image/svg+xml"></link>
7
+ <script id="check-dark-light">
8
+ ;(() => {
9
+ const saved = localStorage.getItem('island-theme-appearance')
10
+ const prefereDark = window.matchMedia('(prefers-color-scheme: dark)').matches
11
+ if (!saved || saved === 'auto' ? prefereDark : saved === 'dark') {
12
+ document.documentElement.classList.add('dark')
13
+ }
14
+ })()
15
+ </script>
16
+ <title data-rh="true">使用 Storybook</title>
17
+ <meta data-rh="true" name="description" content="Island"/>
18
+
19
+
20
+ <script defer src='https://ga.jspm.io/npm:es-module-shims@1.6.0/dist/es-module-shims.js'></script>
21
+ <script type="importmap">
22
+ {
23
+ "imports": {
24
+ "react": "/react.js","react-dom": "/react-dom.js","react-dom/client": "/react-dom_client.js","react/jsx-runtime": "/react_jsx-runtime.js"
25
+ }
26
+ }
27
+ </script>
28
+
29
+ <link rel="stylesheet" href="/assets/style.2e5f7bc2.css">
30
+
31
+ </head>
32
+ <body>
33
+ <div id="root"><div style="height:100%"><header relative="" z="4" fixed="md:~" class="top-0 left-0" w="100%"><div relative="" p="l-8 sm:x-8" transition="background-color duration-500" class="divider-bottom md:border-b-transparent lg:border-b-transparent" nav-h="mobile lg:desktop"><div flex="" justify="between" m="0 auto" nav-h="mobile lg:desktop" class="_container_1ic07_52 _has-sidebar_1ic07_16"><div shrink="0" border="border t-0 b-1 border-solid transparent" class="_nav-bar-title_1ic07_16"><a href="/zh/" w="100%" h="100%" text="1rem" font="semibold" transition="opacity duration-300" hover="opacity-60" class="flex items-center"><span>Module tools</span></a></div><div class="_content_1ic07_24" flex="~ 1" justify="end" items-center=""><div class="search" flex="sm:1" pl="sm:8"><div __island="Search:1"><div flex="" items-center="~" relative="" mr="2" font="semibold"><svg width="32" height="32" viewBox="0 0 32 32" w="5" h="5" fill="currentColor"><path fill="#888888" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg><input disabled="" cursor="text focus:auto" placeholder="Search" height="8" border="none" type="text" text="sm" p="t-0 r-2 b-0 l-2" transition="all duration-200 ease" class="rounded-sm _searchInput_y03a3_1 " aria-label="Search" autoComplete="off"/><div m="r-3" w="10" h="6" p="x-1.5" rounded="md" border="1px solid gray-light-3" text="xs gray-light-3" flex="~" items-center="~" justify="around" class="_searchCommand_y03a3_7"><span>⌘</span><span>K</span></div></div></div></div><div class="_rightNav_1ic07_42"><div class="menu"><div text="sm" font="medium" m="x-3" class="text-brand"><a href="/zh/guide/welcome.html" target="" class="_link_r3fql_1 ">指南</a></div><div text="sm" font="medium" m="x-3" class=""><a href="/zh/api/index.html" target="" class="_link_r3fql_1 ">API</a></div><div m="x-3" last="mr-0"><div __island="NavMenuGroup:4"><div relative=""><button flex="center" nav-h="mobile sm:desktop" font="medium" text="sm text-1 hover:text-2" transition="color duration-200" class="nav-menu-group-button"><span mr="1" text="sm" font="medium">v2.0.0-beta.3</span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div absolute="" pos="top-13 right-0" m="x-0.8" transition="opacity duration-300" class="nav-menu-group-content" style="opacity:0;visibility:hidden"><div p="3" w="100%" h="100%" class="min-w-128px max-h-100vh" border-1="" rounded="xl" bg="bg-default" style="box-shadow:var(--island-shadow-3);margin-right:-1.5rem;z-index:100"><div font="medium"><a href="https://github.com/modern-js-dev/modern.js" target="_blank" rel="noopener noreferrer" class="_link_r3fql_1 "><div rounded="md" hover="bg-bg-mute" p="y-1.6 l-3"><div flex=""><span mr="1">更新日志</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div><div font="medium"><a href="https://github.com/modern-js-dev/modern.js" target="_blank" rel="noopener noreferrer" class="_link_r3fql_1 "><div rounded="md" hover="bg-bg-mute" p="y-1.6 l-3"><div flex=""><span mr="1">贡献指南</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div></div></div></div></div></div><div class="translation" flex="~" text="sm" font="bold" items-center="~" before="menu-item-before"><div m="x-1.5"><div __island="NavMenuGroup:5"><div relative=""><button flex="center" nav-h="mobile sm:desktop" font="medium" text="sm text-1 hover:text-2" transition="color duration-200" class="nav-menu-group-button"><span mr="1" text="sm" font="medium"><svg width="32" height="32" viewBox="0 0 32 32" w="18px" h="18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6l2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div absolute="" pos="top-13 right-0" m="x-0.8" transition="opacity duration-300" class="nav-menu-group-content" style="opacity:0;visibility:hidden"><div p="3" w="100%" h="100%" class="min-w-128px max-h-100vh" border-1="" rounded="xl" bg="bg-default" style="box-shadow:var(--island-shadow-3);margin-right:-1.5rem;z-index:100"><div rounded="md" p="y-1.6 l-3"><span mr="1" text="brand">简体中文</span></div><div font="medium"><a href="/en" target="" class="_link_r3fql_1 "><div rounded="md" hover="bg-bg-mute" p="y-1.6 l-3"><div flex=""><span mr="1">English</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div></div></div></div></div></div><div class="appearance" before="menu-item-before" display="none sm:flex" items-center="center"><div __island="SwitchAppearance:6"><button class="_switch_1tqe3_1 undefined" id="" type="button" role="switch"><span class="_check_1tqe3_17"><span class="_icon_1tqe3_34"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="_sun_8e60k_1"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="_moon_8e60k_5"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></span></span></button></div></div><div __island="SocialLinks:2"><div class="social-links" nav-h="mobile sm:desktop" flex="" items-center="" before="menu-item-before" relative=""><div h="100%" flex="" gap="x-4" items-center="" transition="color duration-300"><a href="https://github.com/modern-js-dev/modern.js" target="_blank" rel="noopener noreferrer"><div class="_social-links-icon_wx6p9_1"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div><div __island="NavHamburger:3"><button class=" _navHamburger_14nz8_1"><span class="_container_14nz8_14"><span class="_top_14nz8_21"></span><span class="_middle_14nz8_27"></span><span class="_bottom_14nz8_33"></span></span></button><div class="_navScreen_1mkpq_1 " id="navScreen"><div class="_container_1mkpq_21"><div class="_navMenu_1mkpq_27"><div w="100%" class="_navMenuItem_1mkpq_34"><div text="sm" font="medium" m="x-3" class="text-brand"><a href="/zh/guide/welcome.html" target="" class="_link_r3fql_1 ">指南</a></div></div><div w="100%" class="_navMenuItem_1mkpq_34"><div text="sm" font="medium" m="x-3" class=""><a href="/zh/api/index.html" target="" class="_link_r3fql_1 ">API</a></div></div><div w="100%" class="_navMenuItem_1mkpq_34"><div m="x-3" last="mr-0"><div relative="" class=" _navScreenMenuGroup_1xte3_1"><button class="_button_1xte3_12"><span class="_buttonSpan_1xte3_25">v2.0.0-beta.3</span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" _down_1xte3_40 "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="_items_1xte3_32"><div class="pa-1" font="medium"><a href="https://github.com/modern-js-dev/modern.js" target="_blank" rel="noopener noreferrer" class="_link_r3fql_1 "><div><div flex=""><span mr="1">更新日志</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div><div class="pa-1" font="medium"><a href="https://github.com/modern-js-dev/modern.js" target="_blank" rel="noopener noreferrer" class="_link_r3fql_1 "><div><div flex=""><span mr="1">贡献指南</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div></div></div></div></div></div><div class="_socialAndAppearance_1mkpq_50" flex="~" justify="center" items-center="center"><div class="items-center appearance pa-2 _navAppearance_1mkpq_46" flex="~" justify="center"><button class="_switch_1tqe3_1 undefined" id="" type="button" role="switch"><span class="_check_1tqe3_17"><span class="_icon_1tqe3_34"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="_sun_8e60k_1"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="_moon_8e60k_5"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></span></span></button></div><div __island="SocialLinks:7"><div class="social-links" nav-h="mobile sm:desktop" flex="" items-center="" before="menu-item-before" relative=""><div h="100%" flex="" gap="x-4" items-center="" transition="color duration-300"><a href="https://github.com/modern-js-dev/modern.js" target="_blank" rel="noopener noreferrer"><div class="_social-links-icon_wx6p9_1"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div><div flex="~" text="sm" font="bold" justify="center"><div m="x-1.5"><div relative="" class=" _navScreenMenuGroup_1xte3_1"><button class="_button_1xte3_12"><span class="_buttonSpan_1xte3_25"><svg width="32" height="32" viewBox="0 0 32 32" w="18px" h="18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6l2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" _down_1xte3_40 "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="_items_1xte3_32"><div class="pa-1"><span mr="1" text="brand">简体中文</span></div><div class="pa-1" font="medium"><a href="/en" target="" class="_link_r3fql_1 "><div><div flex=""><span mr="1">English</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div></div></div></div></div></div></div></div></div></div></div></header><section style="padding-top:var(--island-nav-height)"><div p="t-0 x-6 b-24 sm:6" class="_docLayout_5cssi_8"><div __island="SideMenu:8"><div class="_localNav_ncerp_1"><button flex="center" class="_menu_ncerp_16"><div text="md" mr="2" class="i-carbon:menu"></div><span text="md ">Menu</span></button></div><aside class="_sidebar_iav29_1 "><nav><section block="~" not-first="divider-top mt-4"><div flex="~" justify="between" items-start="~" class="items-center"><h2 m="t-3 b-2" text="1rem text-1" font="bold">介绍</h2></div><div mb="1.4 sm:1" style="height:auto;display:block"><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/zh/guide/welcome.html" target="" class="_link_r3fql_1 ">欢迎使用</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/zh/guide/why-module-engineering-solution.html" target="" class="_link_r3fql_1 ">为什么需要模块工程解决方案</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/zh/guide/getting-started.html" target="" class="_link_r3fql_1 ">快速开始</a></div></div></div></div></section><section block="~" not-first="divider-top mt-4"><div flex="~" justify="between" items-start="~" class="items-center"><h2 m="t-3 b-2" text="1rem text-1" font="bold">基础使用</h2></div><div mb="1.4 sm:1" style="height:auto;display:block"><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/zh/guide/before-getting-started.html" target="" class="_link_r3fql_1 ">开始之前</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/zh/guide/command-preview.html" target="" class="_link_r3fql_1 ">命令预览</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/zh/guide/modify-output-product.html" target="" class="_link_r3fql_1 ">修改输出产物</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/zh/guide/use-micro-generator.html" target="" class="_link_r3fql_1 ">使用微生成器</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-brand"><a href="/zh/guide/using-storybook.html" target="" class="_link_r3fql_1 ">使用 Storybook</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/zh/guide/test-your-project.html" target="" class="_link_r3fql_1 ">测试项目</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/zh/guide/publish-your-project.html" target="" class="_link_r3fql_1 ">发布项目</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/zh/guide/build-your-ui.html" target="" class="_link_r3fql_1 ">为你的项目构建UI(可选)</a></div></div></div></div></section><section block="~" not-first="divider-top mt-4"><div flex="~" justify="between" items-start="~" class="items-center"><h2 m="t-3 b-2" text="1rem text-1" font="bold">进阶指南</h2></div><div mb="1.4 sm:1" style="height:auto;display:block"><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/zh/guide/extension.html" target="" class="_link_r3fql_1 ">使用插件扩展</a></div></div></div></div></section></nav></aside></div><div flex="~ 1 shrink-0" m="x-auto" class="_content_5cssi_2"><div m="x-auto" flex="~ col" class="max-w-100%"><div relative="~" m="x-auto" p="l-2" class="w-100% md:max-w-712px lg:min-w-640px "><div class="island-doc "><!--$--><h1 id="使用-storybook"><a class="header-anchor" aria-hidden="true" href="#使用-storybook">#</a>使用 Storybook</h1>
34
+ <p>首先如果没有看过以下内容的话，可以先花几分钟先了解一下：</p>
35
+ <ul>
36
+ <li><a href="/zh/guide/use-micro-generator.html#storybook-%E8%B0%83%E8%AF%95">使用微生成器开启 Storybook 调试</a></li>
37
+ <li><a href="/zh/guide/command-preview.html#modern-dev"><code>modern dev</code></a></li>
38
+ </ul>
39
+ <p><a href="https://storybook.js.org/" target="_blank" rel="nofollow">Storybook</a> 是一个专门用于组件调试的工具，围绕着组件开发提供了：</p>
40
+ <ul>
41
+ <li>丰富多样的调试能力</li>
42
+ <li>可与一些测试工具结合使用</li>
43
+ <li>可重复使用的文档内容</li>
44
+ <li>可分享能力</li>
45
+ <li>工作流程自动化</li>
46
+ </ul>
47
+ <p>因此它是一个复杂且功能强大的工具。</p>
48
+ <p>模块工程解决方案集成了 Storybook，因此你几乎可以按照 Storybook 官方文档的内容进行使用。不过依然有一些地方需要注意，接下来讲解一下：</p>
49
+ <h2 id="调试代码"><a class="header-anchor" aria-hidden="true" href="#调试代码">#</a>调试代码</h2>
50
+ <p>在调试代码过程中需要引入组件代码，目前可以通过两种方式引入组件代码：</p>
51
+ <ul>
52
+ <li>引用组件产物</li>
53
+ <li>引用组件源码</li>
54
+ </ul>
55
+ <p>我们更推荐使用第一种“<strong>引用组件产物</strong>”的方式。因为它几乎接近真实的使用场景，不仅可以对组件功能进行调试，同时也对构建产物的正确性进行了验证。</p>
56
+ <p>接下来我们分别讲一下这两种方式具体如何使用。</p>
57
+ <h3 id="引用组件产物"><a class="header-anchor" aria-hidden="true" href="#引用组件产物">#</a>引用组件产物</h3>
58
+ <p>假如存在 TypeScript 项目 <code>foo</code>：</p>
59
+ <section class="ch-spotlight "><div class="ch-spotlight-tabs"><div></div><div class="ch-spotlight-tab"><p>确保 <code>package.json</code> 的 <code>main</code> 和 <code>types</code>
60
+ 的值为真实的路径。</p></div><div class="ch-spotlight-tab"><p><code>foo</code> 项目的源码。</p></div><div class="ch-spotlight-tab"><p>确保在 <code>stories/tsconfig.json</code> 中设置了指向项目根目录的 <code>paths</code> 配置。
61
+ <code>paths</code> 的 <code>key</code> 与项目名称相同。</p></div><div class="ch-spotlight-tab"><p>最后在 Story 代码中直接以项目名称的方式引用。</p></div></div><div class="ch-spotlight-sticker"><div class="ch-codegroup not-prose "><div class="ch-editor-frame" style="background:#2e3440"><div class="ch-frame-title-bar" style="color:#C5C5C5;background:#2e3440"><div class="ch-frame-buttons"><div class="ch-frame-button ch-frame-button-left"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-middle"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-right"></div></div><div title="package.json" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-active" style="background:#3b4252;color:#d8dee9;border-right-color:#3b425200;border-bottom-color:#88c0d000"><div><span style="opacity:0.5"></span>package.json</div></div><div style="flex:1;min-width:0.8em"></div><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ch-editor-button"><title>Copy</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></div><div data-ch-panel="north" style="flex-grow:1;overflow:hidden"><div class="ch-code-wrapper" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto;height:100%"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>{</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> &quot;name&quot;: &quot;foo&quot;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> &quot;main&quot;: &quot;./dist/index.js&quot;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> &quot;types&quot;: &quot;./dist/types/index.d.ts&quot;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><br/></code></div></div></div></div></div></section>
62
+ <p>如果在开发过程中，遇到无法实时获得类型定义的情况，此时：</p>
63
+ <p>对于 <code>pnpm</code> 的项目，可以按照下面的内容对 <code>package.json</code> 进行修改：</p>
64
+ <div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>{</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> &quot;name&quot;: &quot;foo&quot;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> &quot;main&quot;: &quot;./dist/index.js&quot;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> &quot;types&quot;: &quot;./src/index.ts&quot;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> &quot;publishConfig&quot;: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> &quot;types&quot;: &quot;./dist/index.d.ts&quot;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><br/></code></div></div>
65
+ <blockquote>
66
+ <p>关于 pnpm 的 <code>publishConfig</code> 的使用，可以阅读下面这个<a href="https://pnpm.io/package_json#publishconfig" target="_blank" rel="nofollow">链接</a>。</p>
67
+ </blockquote>
68
+ <p>而对于 npm 和 Yarn 的项目，则只能通过手动的方式在<strong>开发阶段</strong>和<strong>发布阶段</strong>对 <code>package.json</code> 的 <code>types</code> 的值进行修改。</p>
69
+ <p>那么为什么可以直接引用产物呢？</p>
70
+ <ol>
71
+ <li>在执行 <code>modern dev storybook</code> 命令之前，会自动执行 <code>modern build</code> 命令，保证项目构建产物的存在。</li>
72
+ <li>在 Storybook 内部增加了以项目名称作为别名的处理，保证能够<strong>根据 <code>package.json</code> 解析出项目的产物路径</strong>。</li>
73
+ </ol>
74
+ <h3 id="引用组件源码"><a class="header-anchor" aria-hidden="true" href="#引用组件源码">#</a>引用组件源码</h3>
75
+ <p>引用组件的源码可以通过相对路径的方式：</p>
76
+ <div class="ch-codegroup not-prose "><div class="ch-editor-frame" style="background:#2e3440"><div class="ch-frame-title-bar" style="color:#C5C5C5;background:#2e3440"><div class="ch-frame-buttons"><div class="ch-frame-button ch-frame-button-left"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-middle"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-right"></div></div><div title="./stories/index.tsx" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-active" style="background:#3b4252;color:#d8dee9;border-right-color:#3b425200;border-bottom-color:#88c0d000"><div><span style="opacity:0.5">./stories/</span>index.tsx</div></div><div style="flex:1;min-width:0.8em"></div><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ch-editor-button"><title>Copy</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></div><div data-ch-panel="north" style="flex-grow:1;overflow:hidden"><div class="ch-code-wrapper" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto;height:100%"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>import { content } from &#x27;../src&#x27;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>const Component = () =&gt; &lt;div&gt;this is a Story Component {content}&lt;/div&gt;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export const YourStory = () =&gt; &lt;Component /&gt;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> title: &#x27;Your Stories&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div></div></div>
77
+ <p>那么为什么不推荐使用源码的方式呢？</p>
78
+ <p>不仅仅是因为使用组件源码无法验证组件产物是否正确，<strong>同时模块工程对于构建产物支持的一些配置无法完全转换为 Storybook
79
+ 内部的配置</strong>。如果某些配置无法进行相互转换的话，就会在 Storybook 调试过程中出现不符合预期的结果。</p>
80
+ <h2 id="配置-storybook"><a class="header-anchor" aria-hidden="true" href="#配置-storybook">#</a>配置 Storybook</h2>
81
+ <h3 id="配置文件"><a class="header-anchor" aria-hidden="true" href="#配置文件">#</a>配置文件</h3>
82
+ <p>Storybook 官方通过一个名为 <code>.storybook</code> 的文件夹来进行项目配置，其中包含各种配置文件。<strong>在模块工程方案中，可以在项目的 <code>config/storybook</code> 目录下增加 Storybook 配置文件。</strong></p>
83
+ <p>关于 Storybook 各种配置文件的使用方式，可以查看下面的链接：</p>
84
+ <ul>
85
+ <li><a href="https://storybook.js.org/docs/react/configure/overview" target="_blank" rel="nofollow">Configure Storybook</a></li>
86
+ </ul>
87
+ <p><strong>不过在模块项目里进行 Storybook 存在一些限制</strong>：</p>
88
+ <ul>
89
+ <li>目前不能修改 Story 文件存放的位置，即无法在 <code>main.js</code> 文件里修改 <code>stories</code> 配置。</li>
90
+ <li>目前不能修改 Webpack 和 Babel 相关的配置，即无法在 <code>main.js</code> 文件里修改 <code>webpackFinal</code> 和 <code>babel</code> 配置。</li>
91
+ </ul>
92
+ <p>在未来我们会考虑这些配置是否可以允许修改，不过目前为了减少不可预知的问题暂时限制使用这些配置。</p>
93
+ <h3 id="devstorybook"><a class="header-anchor" aria-hidden="true" href="#devstorybook">#</a><code>dev.storybook</code></h3>
94
+ <p>除了配置文件以外，模块工程方案还在 <code>modern.config.(j|t)s</code> 项目配置文件里提供了 <code>dev.storybook</code> 配置项。</p>
95
+ <p>目前可以通过该配置对 Storybook 的 webpack 配置进行修改。</p>
96
+ <ul>
97
+ <li><a href="/xxx.html"><code>dev.storybook.webpack</code></a></li>
98
+ </ul>
99
+ <h3 id="构建-storybook-产物"><a class="header-anchor" aria-hidden="true" href="#构建-storybook-产物">#</a>构建 Storybook 产物</h3>
100
+ <p>除了可以对组件或者普通的模块进行 Storybook 调试，还可以通过下面的命令来执行 Storybook 的构建任务。</p>
101
+ <div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>modern build --platform storybook</span></div></div><br/></code></div></div>
102
+ <p>关于 <code>modern build --platform</code> 命令可以查看：</p>
103
+ <ul>
104
+ <li><a href="/zh/guide/command-preview.html#modern-build"><code>modern build</code></a></li>
105
+ </ul>
106
+ <p>构建完成后，可以在 <code>dist/storybook-static</code> 目录看到构建产物文件。</p><!--/$--></div><footer mt="8"><div class="xs:flex" p="b-5" justify="between" items-center="~"><a flex="~" items-center="" leading-8="" font-medium="~" text="sm brand" hover="text-brand-dark" href="https://github.com/modern-js-dev/modern.js/tree/next/website/module-tools/docs/zh/guide/using-storybook.mdx" transition="color duration-300">📝 在 GitHub 上编辑此页</a><div flex="" text="sm text-2" leading-6="~" leading-8="sm:~" font-medium=""><p>上次更新: </p><span>2022/12/5 16:29:55</span></div></div><div flex="~ col sm:row" justify="sm:around" gap="2" divider-top="" pt="6"><div flex="~ col" class="_prev_1f77m_13"><a href="/zh/guide/use-micro-generator.html" class="_pager-link_1f77m_20"><span class="_desc_1f77m_43">上一页</span><span class="_title_1f77m_34">使用微生成器</span></a></div><div flex="~ col" class="_next_1f77m_16"><a href="/zh/guide/test-your-project.html" class="_pager-link_1f77m_20 _next_1f77m_16"><span class="_desc_1f77m_43">下一页</span><span class="_title_1f77m_34">测试项目</span></a></div></div></footer></div></div><div relative="~" display="none lg:block" order="2" flex="1" p="l-8" class="max-w-256px"><div class="_aside-container_5cssi_32"><div flex="~ col" p="b-8" style="min-height:calc(100vh - (var(--island-nav-height-desktop) + 32px))"><div><div flex="~ col 1"><div display="lg:block"><div relative="" divider-left="" p="l-4" text="13px" font-medium="" id="aside-container"><div absolute="" pos="top-33px" opacity="0" w="1px" h="18px" bg="brand" style="left:-1px;transition:top 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s, opacity 0.25s" id="aside-marker"></div><div block="~" leading-7="" text="13px" font="semibold">目录</div><nav><ul relative=""><li><a href="#调试代码" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:0">调试代码</a></li><li><a href="#引用组件产物" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:12px">引用组件产物</a></li><li><a href="#引用组件源码" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:12px">引用组件源码</a></li><li><a href="#配置-storybook" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:0">配置 Storybook</a></li><li><a href="#配置文件" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:12px">配置文件</a></li><li><a href="#devstorybook" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:12px">dev.storybook</a></li><li><a href="#构建-storybook-产物" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:12px">构建 Storybook 产物</a></li></ul></nav></div></div></div></div></div></div></div></div></div></section><div __island="BackTop:0"></div></div></div>
107
+
108
+ <script id="island-props">[{},{"langRoutePrefix":"/zh/"},{"socialLinks":[{"icon":"github","mode":"link","content":"https://github.com/modern-js-dev/modern.js"}]},{"localeData":{"lang":"zh","label":"简体中文","lastUpdatedText":"上次更新","nav":[{"text":"指南","link":"/zh/guide/welcome","activeMatch":"/guide/"},{"text":"API","link":"/zh/api/","activeMatch":"/api/"},{"text":"v2.0.0-beta.3","items":[{"text":"更新日志","link":"https://github.com/modern-js-dev/modern.js"},{"text":"贡献指南","link":"https://github.com/modern-js-dev/modern.js"}]}],"sidebar":{"/zh/guide/":[{"text":"介绍","items":[{"text":"欢迎使用","link":"/zh/guide/welcome"},{"text":"为什么需要模块工程解决方案","link":"/zh/guide/why-module-engineering-solution"},{"text":"快速开始","link":"/zh/guide/getting-started"}]},{"text":"基础使用","items":[{"text":"开始之前","link":"/zh/guide/before-getting-started"},{"text":"命令预览","link":"/zh/guide/command-preview"},{"text":"修改输出产物","link":"/zh/guide/modify-output-product"},{"text":"使用微生成器","link":"/zh/guide/use-micro-generator"},{"text":"使用 Storybook","link":"/zh/guide/using-storybook"},{"text":"测试项目","link":"/zh/guide/test-your-project"},{"text":"发布项目","link":"/zh/guide/publish-your-project"},{"text":"为你的项目构建UI(可选)","link":"/zh/guide/build-your-ui"}]},{"text":"进阶指南","items":[{"text":"使用插件扩展","link":"/zh/guide/extension"}]}],"/zh/api/":[{"text":"配置项","items":[{"text":"BuildConfig","link":"/zh/api/build-config"},{"text":"BuildPreset","link":"/zh/api/build-preset"},{"text":"Dev","link":"/zh/api/dev"},{"text":"Test","link":"/zh/api/test"},{"text":"Plugin","link":"/zh/api/plugin"},{"text":"DesignSystem","link":"/zh/api/design-system"}]}]},"title":"Module tools","outlineTitle":"目录","prevPageText":"上一页","nextPageText":"下一页","description":"模块工程解决方案","editLink":{"pattern":"https://github.com/modern-js-dev/modern.js/tree/next/website/module-tools/docs/:path","text":"📝 在 GitHub 上编辑此页"},"langRoutePrefix":"/zh/"},"siteData":{"lang":"en-US","title":"Module tools","description":"Island","themeConfig":{"locales":{"/zh/":{"lang":"zh","label":"简体中文","lastUpdatedText":"上次更新","nav":[{"text":"指南","link":"/zh/guide/welcome","activeMatch":"/guide/"},{"text":"API","link":"/zh/api/","activeMatch":"/api/"},{"text":"v2.0.0-beta.3","items":[{"text":"更新日志","link":"https://github.com/modern-js-dev/modern.js"},{"text":"贡献指南","link":"https://github.com/modern-js-dev/modern.js"}]}],"sidebar":{"/zh/guide/":[{"text":"介绍","items":[{"text":"欢迎使用","link":"/zh/guide/welcome"},{"text":"为什么需要模块工程解决方案","link":"/zh/guide/why-module-engineering-solution"},{"text":"快速开始","link":"/zh/guide/getting-started"}]},{"text":"基础使用","items":[{"text":"开始之前","link":"/zh/guide/before-getting-started"},{"text":"命令预览","link":"/zh/guide/command-preview"},{"text":"修改输出产物","link":"/zh/guide/modify-output-product"},{"text":"使用微生成器","link":"/zh/guide/use-micro-generator"},{"text":"使用 Storybook","link":"/zh/guide/using-storybook"},{"text":"测试项目","link":"/zh/guide/test-your-project"},{"text":"发布项目","link":"/zh/guide/publish-your-project"},{"text":"为你的项目构建UI(可选)","link":"/zh/guide/build-your-ui"}]},{"text":"进阶指南","items":[{"text":"使用插件扩展","link":"/zh/guide/extension"}]}],"/zh/api/":[{"text":"配置项","items":[{"text":"BuildConfig","link":"/zh/api/build-config"},{"text":"BuildPreset","link":"/zh/api/build-preset"},{"text":"Dev","link":"/zh/api/dev"},{"text":"Test","link":"/zh/api/test"},{"text":"Plugin","link":"/zh/api/plugin"},{"text":"DesignSystem","link":"/zh/api/design-system"}]}]},"title":"Module tools","outlineTitle":"目录","prevPageText":"上一页","nextPageText":"下一页","description":"模块工程解决方案","editLink":{"pattern":"https://github.com/modern-js-dev/modern.js/tree/next/website/module-tools/docs/:path","text":"📝 在 GitHub 上编辑此页"}},"/en/":{"lang":"en","label":"English","lastUpdated":"Last Updated","nav":[{"text":"Guide","link":"/en/guide/welcome","activeMatch":"/guide/"},{"text":"API","link":"/en/api/","activeMatch":"/api/"},{"text":"v2.0.0-beta.3","items":[{"text":"Changelog","link":"https://github.com/modern-js-dev/modern.js"},{"text":"Contributing","link":"https://github.com/modern-js-dev/modern.js"}]}],"sidebar":{"/en/guide/":[{"text":"Introduction","items":[{"text":"WelCome","link":"/en/guide/welcome"},{"text":"Why module project solution","link":"/en/guide/why-module-engineering-solution"},{"text":"Getting Started","link":"/en/guide/getting-started"}]},{"text":"Basic Guide","items":[{"text":"Before getting started","link":"/en/guide/before-getting-started"},{"text":"Command preview","link":"/en/guide/command-preview"},{"text":"Modify output product","link":"/en/guide/modify-output-product"},{"text":"Use Micro generator","link":"/en/guide/use-micro-generator"},{"text":"Using Storybook","link":"/en/guide/using-storybook"},{"text":"Test project","link":"/en/guide/test-your-project"},{"text":"Publish project","link":"/en/guide/publish-your-project"},{"text":"Build your UI(optional)","link":"/en/guide/build-your-ui"}]},{"text":"Advanced Guide","items":[{"text":"Plugins extension","link":"/en/guide/extension"}]}],"/en/api/":[{"text":"Config","items":[{"text":"BuildConfig","link":"/en/api/build-config"},{"text":"BuildPreset","link":"/en/api/build-preset"},{"text":"Dev","link":"/en/api/dev"},{"text":"Test","link":"/en/api/test"},{"text":"Plugin","link":"/en/api/plugin"},{"text":"DesignSystem","link":"/en/api/design-system"}]}]},"title":"Module tools","description":"Module Engineering Solutions","lastUpdatedText":"Last Updated","editLink":{"pattern":"https://github.com/modern-js-dev/modern.js/tree/next/website/module-tools/docs/:path","text":"📝 Edit this page on GitHub"}}},"outlineTitle":"ON THIS PAGE","socialLinks":[{"icon":"github","mode":"link","content":"https://github.com/modern-js-dev/modern.js"}],"footer":{"message":"The Module Engineering Solutions","copyright":"\nCopyright © 2022 ByteDance."}},"head":[["script",{"id":"check-dark-light"},"\n ;(() => {\n const saved = localStorage.getItem('island-theme-appearance')\n const prefereDark = window.matchMedia('(prefers-color-scheme: dark)').matches\n if (!saved || saved === 'auto' ? prefereDark : saved === 'dark') {\n document.documentElement.classList.add('dark')\n }\n })()\n "]],"base":"","icon":"","root":"/Users/bytedance/modern.js/website/module-tools/docs","appearance":true},"pathname":"/zh/guide/using-storybook"},{"text":"v2.0.0-beta.3","items":[{"text":"更新日志","link":"https://github.com/modern-js-dev/modern.js"},{"text":"贡献指南","link":"https://github.com/modern-js-dev/modern.js"}]},{"items":[{"text":"简体中文","link":"/zh"},{"text":"English","link":"/en"}],"activeIndex":0,"isTranslation":true},{},{"socialLinks":[{"icon":"github","mode":"link","content":"https://github.com/modern-js-dev/modern.js"}]},{"pathname":"/zh/guide/using-storybook","langRoutePrefix":"","sidebarData":[{"text":"介绍","items":[{"text":"欢迎使用","link":"/zh/guide/welcome"},{"text":"为什么需要模块工程解决方案","link":"/zh/guide/why-module-engineering-solution"},{"text":"快速开始","link":"/zh/guide/getting-started"}]},{"text":"基础使用","items":[{"text":"开始之前","link":"/zh/guide/before-getting-started"},{"text":"命令预览","link":"/zh/guide/command-preview"},{"text":"修改输出产物","link":"/zh/guide/modify-output-product"},{"text":"使用微生成器","link":"/zh/guide/use-micro-generator"},{"text":"使用 Storybook","link":"/zh/guide/using-storybook"},{"text":"测试项目","link":"/zh/guide/test-your-project"},{"text":"发布项目","link":"/zh/guide/publish-your-project"},{"text":"为你的项目构建UI(可选)","link":"/zh/guide/build-your-ui"}]},{"text":"进阶指南","items":[{"text":"使用插件扩展","link":"/zh/guide/extension"}]}]}]</script><script type="module" src="/assets/island_inject.11a12ecc.js"></script>
109
+ <script type="module">import Le,{createContext as ke}from"react";import{jsx as Ce}from"react/jsx-runtime";const Ae="modulepreload",Ie=function(e){return"/"+e},ne={},Oe=function(t,n,i){return!n||n.length===0?t():Promise.all(n.map(r=>{if(r=Ie(r),r in ne)return;ne[r]=!0;const s=r.endsWith(".css"),p=s?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${r}"]${p}`))return;const a=document.createElement("link");if(a.rel=s?"stylesheet":Ae,s||(a.as="script",a.crossOrigin=""),a.href=r,document.head.appendChild(a),s)return new Promise((f,_)=>{a.addEventListener("load",f),a.addEventListener("error",()=>_(new Error(`Unable to preload CSS for ${r}`)))})})).then(()=>t())};const me=()=>typeof window<"u";ke({data:me()?window==null?void 0:window.ISLAND_PAGE_DATA:null,setData:e=>{}});const je="island-theme-appearance";let He,W,V;typeof window<"u"&&typeof localStorage<"u"&&(W=localStorage.getItem(je)||"auto",V=window.matchMedia("(prefers-color-scheme: dark)"),W==="auto"&&V.matches,V.onchange=e=>{W==="auto"&&Ne(e.matches)});const Ne=e=>{He[e?"add":"remove"]("dark")};var Re=typeof global=="object"&&global&&global.Object===Object&&global;const Pe=Re;var $e=typeof self=="object"&&self&&self.Object===Object&&self,De=Pe||$e||Function("return this")();const ue=De;var qe=ue.Symbol;const Y=qe;var pe=Object.prototype,Me=pe.hasOwnProperty,Be=pe.toString,D=Y?Y.toStringTag:void 0;function Ue(e){var t=Me.call(e,D),n=e[D];try{e[D]=void 0;var i=!0}catch{}var r=Be.call(e);return i&&(t?e[D]=n:delete e[D]),r}var We=Object.prototype,Ge=We.toString;function Fe(e){return Ge.call(e)}var Ye="[object Null]",Ke="[object Undefined]",oe=Y?Y.toStringTag:void 0;function Xe(e){return e==null?e===void 0?Ke:Ye:oe&&oe in Object(e)?Ue(e):Fe(e)}function Ze(e){return e!=null&&typeof e=="object"}var Ve="[object Symbol]";function Je(e){return typeof e=="symbol"||Ze(e)&&Xe(e)==Ve}var Qe=/\s/;function et(e){for(var t=e.length;t--&&Qe.test(e.charAt(t)););return t}var tt=/^\s+/;function nt(e){return e&&e.slice(0,et(e)+1).replace(tt,"")}function K(e){var t=typeof e;return e!=null&&(t=="object"||t=="function")}var re=0/0,ot=/^[-+]0x[0-9a-f]+$/i,rt=/^0b[01]+$/i,at=/^0o[0-7]+$/i,it=parseInt;function ae(e){if(typeof e=="number")return e;if(Je(e))return re;if(K(e)){var t=typeof e.valueOf=="function"?e.valueOf():e;e=K(t)?t+"":t}if(typeof e!="string")return e===0?e:+e;e=nt(e);var n=rt.test(e);return n||at.test(e)?it(e.slice(2),n?2:8):ot.test(e)?re:+e}var ct=function(){return ue.Date.now()};const J=ct;var st="Expected a function",dt=Math.max,lt=Math.min;function mt(e,t,n){var i,r,s,p,a,f,_=0,g=!1,w=!1,z=!0;if(typeof e!="function")throw new TypeError(st);t=ae(t)||0,K(n)&&(g=!!n.leading,w="maxWait"in n,s=w?dt(ae(n.maxWait)||0,t):s,z="trailing"in n?!!n.trailing:z);function L(h){var m=i,o=r;return i=r=void 0,_=h,p=e.apply(o,m),p}function E(h){return _=h,a=setTimeout(H,t),g?L(h):p}function A(h){var m=h-f,o=h-_,O=t-m;return w?lt(O,s-o):O}function M(h){var m=h-f,o=h-_;return f===void 0||m>=t||m<0||w&&o>=s}function H(){var h=J();if(M(h))return B(h);a=setTimeout(H,A(h))}function B(h){return a=void 0,z&&i?L(h):(i=r=void 0,p)}function x(){a!==void 0&&clearTimeout(a),_=0,i=f=r=a=void 0}function N(){return a===void 0?p:B(J())}function C(){var h=J(),m=M(h);if(i=arguments,r=this,f=h,m){if(a===void 0)return E(f);if(w)return clearTimeout(a),a=setTimeout(H,t),L(f)}return a===void 0&&(a=setTimeout(H,t)),p}return C.cancel=x,C.flush=N,C}var ut="Expected a function";function pt(e,t,n){var i=!0,r=!0;if(typeof e!="function")throw new TypeError(ut);return K(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),mt(e,t,{leading:i,maxWait:t,trailing:r})}var ft=function(){var e=document.getSelection();if(!e.rangeCount)return function(){};for(var t=document.activeElement,n=[],i=0;i<e.rangeCount;i++)n.push(e.getRangeAt(i));switch(t.tagName.toUpperCase()){case"INPUT":case"TEXTAREA":t.blur();break;default:t=null;break}return e.removeAllRanges(),function(){e.type==="Caret"&&e.removeAllRanges(),e.rangeCount||n.forEach(function(r){e.addRange(r)}),t&&t.focus()}},gt=ft,ie={"text/plain":"Text","text/html":"Url",default:"Text"},vt="Copy to clipboard: #{key}, Enter";function ht(e){var t=(/mac os x/i.test(navigator.userAgent)?"\u2318":"Ctrl")+"+C";return e.replace(/#{\s*key\s*}/g,t)}function _t(e,t){var n,i,r,s,p,a,f=!1;t||(t={}),n=t.debug||!1;try{r=gt(),s=document.createRange(),p=document.getSelection(),a=document.createElement("span"),a.textContent=e,a.ariaHidden="true",a.style.all="unset",a.style.position="fixed",a.style.top=0,a.style.clip="rect(0, 0, 0, 0)",a.style.whiteSpace="pre",a.style.webkitUserSelect="text",a.style.MozUserSelect="text",a.style.msUserSelect="text",a.style.userSelect="text",a.addEventListener("copy",function(g){if(g.stopPropagation(),t.format)if(g.preventDefault(),typeof g.clipboardData>"u"){n&&console.warn("unable to use e.clipboardData"),n&&console.warn("trying IE specific stuff"),window.clipboardData.clearData();var w=ie[t.format]||ie.default;window.clipboardData.setData(w,e)}else g.clipboardData.clearData(),g.clipboardData.setData(t.format,e);t.onCopy&&(g.preventDefault(),t.onCopy(g.clipboardData))}),document.body.appendChild(a),s.selectNodeContents(a),p.addRange(s);var _=document.execCommand("copy");if(!_)throw new Error("copy command was unsuccessful");f=!0}catch(g){n&&console.error("unable to copy using execCommand: ",g),n&&console.warn("trying IE specific stuff");try{window.clipboardData.setData(t.format||"text",e),t.onCopy&&t.onCopy(window.clipboardData),f=!0}catch(w){n&&console.error("unable to copy using clipboardData: ",w),n&&console.error("falling back to prompt"),i=ht("message"in t?t.message:vt),window.prompt(i,e)}}finally{p&&(typeof p.removeRange=="function"?p.removeRange(s):p.removeAllRanges()),a&&document.body.removeChild(a),r()}return f}var yt=_t;function bt(){const e=new Map;window.addEventListener("click",t=>{var i;const n=t.target;if(n.matches('div[class*="language-"] > button.copy')){const r=n.parentElement,s=(i=n.nextElementSibling)==null?void 0:i.nextElementSibling;if(!r||!s)return;const{innerText:p=""}=s;if(yt(p)){n.classList.add("copied"),clearTimeout(e.get(n));const f=setTimeout(()=>{n.classList.remove("copied"),n.blur(),e.delete(n)},2e3);e.set(n,f)}}})}/*! medium-zoom 1.0.6 | MIT License | https://github.com/francoischalifour/medium-zoom */var j=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},G=function(t){return t.tagName==="IMG"},wt=function(t){return NodeList.prototype.isPrototypeOf(t)},F=function(t){return t&&t.nodeType===1},ce=function(t){var n=t.currentSrc||t.src;return n.substr(-4).toLowerCase()===".svg"},se=function(t){try{return Array.isArray(t)?t.filter(G):wt(t)?[].slice.call(t).filter(G):F(t)?[t].filter(G):typeof t=="string"?[].slice.call(document.querySelectorAll(t)).filter(G):[]}catch{throw new TypeError(`The provided selector is invalid.
110
+ Expects a CSS selector, a Node element, a NodeList or an array.
111
+ See: https://github.com/francoischalifour/medium-zoom`)}},Et=function(t){var n=document.createElement("div");return n.classList.add("medium-zoom-overlay"),n.style.background=t,n},xt=function(t){var n=t.getBoundingClientRect(),i=n.top,r=n.left,s=n.width,p=n.height,a=t.cloneNode(),f=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,_=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0;return a.removeAttribute("id"),a.style.position="absolute",a.style.top=i+f+"px",a.style.left=r+_+"px",a.style.width=s+"px",a.style.height=p+"px",a.style.transform="",a},P=function(t,n){var i=j({bubbles:!1,cancelable:!1,detail:void 0},n);if(typeof window.CustomEvent=="function")return new CustomEvent(t,i);var r=document.createEvent("CustomEvent");return r.initCustomEvent(t,i.bubbles,i.cancelable,i.detail),r},Tt=function e(t){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},i=window.Promise||function(c){function d(){}c(d,d)},r=function(c){var d=c.target;if(d===O){E();return}x.indexOf(d)!==-1&&A({target:d})},s=function(){if(!(C||!o.original)){var c=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;Math.abs(h-c)>m.scrollOffset&&setTimeout(E,150)}},p=function(c){var d=c.key||c.keyCode;(d==="Escape"||d==="Esc"||d===27)&&E()},a=function(){var c=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},d=c;if(c.background&&(O.style.background=c.background),c.container&&c.container instanceof Object&&(d.container=j({},m.container,c.container)),c.template){var v=F(c.template)?c.template:document.querySelector(c.template);d.template=v}return m=j({},m,d),x.forEach(function(y){y.dispatchEvent(P("medium-zoom:update",{detail:{zoom:b}}))}),b},f=function(){var c=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};return e(j({},m,c))},_=function(){for(var c=arguments.length,d=Array(c),v=0;v<c;v++)d[v]=arguments[v];var y=d.reduce(function(u,S){return[].concat(u,se(S))},[]);return y.filter(function(u){return x.indexOf(u)===-1}).forEach(function(u){x.push(u),u.classList.add("medium-zoom-image")}),N.forEach(function(u){var S=u.type,k=u.listener,R=u.options;y.forEach(function(I){I.addEventListener(S,k,R)})}),b},g=function(){for(var c=arguments.length,d=Array(c),v=0;v<c;v++)d[v]=arguments[v];o.zoomed&&E();var y=d.length>0?d.reduce(function(u,S){return[].concat(u,se(S))},[]):x;return y.forEach(function(u){u.classList.remove("medium-zoom-image"),u.dispatchEvent(P("medium-zoom:detach",{detail:{zoom:b}}))}),x=x.filter(function(u){return y.indexOf(u)===-1}),b},w=function(c,d){var v=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{};return x.forEach(function(y){y.addEventListener("medium-zoom:"+c,d,v)}),N.push({type:"medium-zoom:"+c,listener:d,options:v}),b},z=function(c,d){var v=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{};return x.forEach(function(y){y.removeEventListener("medium-zoom:"+c,d,v)}),N=N.filter(function(y){return!(y.type==="medium-zoom:"+c&&y.listener.toString()===d.toString())}),b},L=function(){var c=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},d=c.target,v=function(){var u={width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,left:0,top:0,right:0,bottom:0},S=void 0,k=void 0;if(m.container)if(m.container instanceof Object)u=j({},u,m.container),S=u.width-u.left-u.right-m.margin*2,k=u.height-u.top-u.bottom-m.margin*2;else{var R=F(m.container)?m.container:document.querySelector(m.container),I=R.getBoundingClientRect(),X=I.width,ve=I.height,he=I.left,_e=I.top;u=j({},u,{width:X,height:ve,left:he,top:_e})}S=S||u.width-m.margin*2,k=k||u.height-m.margin*2;var $=o.zoomedHd||o.original,ye=ce($)?S:$.naturalWidth||S,be=ce($)?k:$.naturalHeight||k,U=$.getBoundingClientRect(),we=U.top,Ee=U.left,Q=U.width,ee=U.height,xe=Math.min(ye,S)/Q,Te=Math.min(be,k)/ee,Z=Math.min(xe,Te),Se=(-Ee+(S-Q)/2+m.margin+u.left)/Z,ze=(-we+(k-ee)/2+m.margin+u.top)/Z,te="scale("+Z+") translate3d("+Se+"px, "+ze+"px, 0)";o.zoomed.style.transform=te,o.zoomedHd&&(o.zoomedHd.style.transform=te)};return new i(function(y){if(d&&x.indexOf(d)===-1){y(b);return}var u=function X(){C=!1,o.zoomed.removeEventListener("transitionend",X),o.original.dispatchEvent(P("medium-zoom:opened",{detail:{zoom:b}})),y(b)};if(o.zoomed){y(b);return}if(d)o.original=d;else if(x.length>0){var S=x;o.original=S[0]}else{y(b);return}if(o.original.dispatchEvent(P("medium-zoom:open",{detail:{zoom:b}})),h=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,C=!0,o.zoomed=xt(o.original),document.body.appendChild(O),m.template){var k=F(m.template)?m.template:document.querySelector(m.template);o.template=document.createElement("div"),o.template.appendChild(k.content.cloneNode(!0)),document.body.appendChild(o.template)}if(document.body.appendChild(o.zoomed),window.requestAnimationFrame(function(){document.body.classList.add("medium-zoom--opened")}),o.original.classList.add("medium-zoom-image--hidden"),o.zoomed.classList.add("medium-zoom-image--opened"),o.zoomed.addEventListener("click",E),o.zoomed.addEventListener("transitionend",u),o.original.getAttribute("data-zoom-src")){o.zoomedHd=o.zoomed.cloneNode(),o.zoomedHd.removeAttribute("srcset"),o.zoomedHd.removeAttribute("sizes"),o.zoomedHd.src=o.zoomed.getAttribute("data-zoom-src"),o.zoomedHd.onerror=function(){clearInterval(R),console.warn("Unable to reach the zoom image target "+o.zoomedHd.src),o.zoomedHd=null,v()};var R=setInterval(function(){o.zoomedHd.complete&&(clearInterval(R),o.zoomedHd.classList.add("medium-zoom-image--opened"),o.zoomedHd.addEventListener("click",E),document.body.appendChild(o.zoomedHd),v())},10)}else if(o.original.hasAttribute("srcset")){o.zoomedHd=o.zoomed.cloneNode(),o.zoomedHd.removeAttribute("sizes"),o.zoomedHd.removeAttribute("loading");var I=o.zoomedHd.addEventListener("load",function(){o.zoomedHd.removeEventListener("load",I),o.zoomedHd.classList.add("medium-zoom-image--opened"),o.zoomedHd.addEventListener("click",E),document.body.appendChild(o.zoomedHd),v()})}else v()})},E=function(){return new i(function(c){if(C||!o.original){c(b);return}var d=function v(){o.original.classList.remove("medium-zoom-image--hidden"),document.body.removeChild(o.zoomed),o.zoomedHd&&document.body.removeChild(o.zoomedHd),document.body.removeChild(O),o.zoomed.classList.remove("medium-zoom-image--opened"),o.template&&document.body.removeChild(o.template),C=!1,o.zoomed.removeEventListener("transitionend",v),o.original.dispatchEvent(P("medium-zoom:closed",{detail:{zoom:b}})),o.original=null,o.zoomed=null,o.zoomedHd=null,o.template=null,c(b)};C=!0,document.body.classList.remove("medium-zoom--opened"),o.zoomed.style.transform="",o.zoomedHd&&(o.zoomedHd.style.transform=""),o.template&&(o.template.style.transition="opacity 150ms",o.template.style.opacity=0),o.original.dispatchEvent(P("medium-zoom:close",{detail:{zoom:b}})),o.zoomed.addEventListener("transitionend",d)})},A=function(){var c=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},d=c.target;return o.original?E():L({target:d})},M=function(){return m},H=function(){return x},B=function(){return o.original},x=[],N=[],C=!1,h=0,m=n,o={original:null,zoomed:null,zoomedHd:null,template:null};Object.prototype.toString.call(t)==="[object Object]"?m=t:(t||typeof t=="string")&&_(t),m=j({margin:0,background:"#fff",scrollOffset:40,container:null,template:null},m);var O=Et(m.background);document.addEventListener("click",r),document.addEventListener("keyup",p),document.addEventListener("scroll",s),window.addEventListener("resize",E);var b={open:L,close:E,toggle:A,update:a,clone:f,attach:_,detach:g,on:w,off:z,getOptions:M,getImages:H,getZoomedImage:B};return b};function St(e,t){t===void 0&&(t={});var n=t.insertAt;if(!(!e||typeof document>"u")){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css",n==="top"&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}var zt=".medium-zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .3s;will-change:opacity}.medium-zoom--opened .medium-zoom-overlay{cursor:pointer;cursor:zoom-out;opacity:1}.medium-zoom-image{cursor:pointer;cursor:zoom-in;transition:transform .3s cubic-bezier(.2,0,.2,1)!important}.medium-zoom-image--hidden{visibility:hidden}.medium-zoom-image--opened{position:relative;cursor:pointer;cursor:zoom-out;will-change:transform}";St(zt);const Lt=Tt,kt=60;function Ct(){function e(t,n,i=!1){let r=null;try{r=t.classList.contains("header-anchor")?t:document.getElementById(decodeURIComponent(n.slice(1)))}catch(s){console.warn(s)}if(r){const s=parseInt(window.getComputedStyle(r).paddingTop,10),p=window.scrollY+r.getBoundingClientRect().top-kt+s;window.scrollTo({left:0,top:p,...i?{behavior:"smooth"}:{}})}}window.addEventListener("click",t=>{const n=t.target.closest("a");if(n){const{origin:i,hash:r,target:s,pathname:p,search:a}=n,f=window.location;r&&s!=="_blank"&&i===f.origin&&p===f.pathname&&a===f.search&&r&&r!==f.hash&&n.classList.contains("header-anchor")&&(t.preventDefault(),history.pushState(null,"",r),e(n,r,!0),window.dispatchEvent(new Event("hashchange")))}},{capture:!0}),window.addEventListener("hashchange",t=>{t.preventDefault()})}function At(){function e(){return document.documentElement.scrollTop+window.innerHeight>=document.documentElement.scrollHeight}const t=60,n=document.getElementById("aside-marker"),i=document.getElementById("aside-container"),r=document.querySelectorAll(".island-doc .header-anchor");let s=null;const p=Array.from((i==null?void 0:i.getElementsByTagName("a"))||[]).map(g=>decodeURIComponent(g.hash));if(n&&!p.length){n.style.opacity="0";return}const a=(g,w)=>{if(s&&s.classList.remove("aside-active"),g[w]){g[w].classList.add("aside-active");const z=g[w].getAttribute("href"),L=p.findIndex(A=>A===z),E=i==null?void 0:i.querySelector(`a[href="#${z==null?void 0:z.slice(1)}"]`);E&&(s=E,s.classList.add("aside-active"),n.style.top=`${33+L*28}px`,n.style.opacity="1")}},f=()=>{if(e())a(r,r.length-1);else for(let g=0;g<r.length;g++){const w=r[g],z=r[g+1],L=window.scrollY,E=w.parentElement.offsetTop-t;if(g===0&&L===0&&a(r,0),!z){a(r,g);break}const A=z.parentElement.offsetTop-t;if(L>E&&L<A){a(r,g);break}}},_=pt(f,100);return requestAnimationFrame(f),window.addEventListener("scroll",_),()=>{window.removeEventListener("scroll",_)}}function It(){const e=document.querySelectorAll("img");Lt(e,{margin:100,background:"rgba(0, 0, 0, 0.7)"})}function Ot(){!me()||(At(),Ct(),bt(),It())}if(typeof window<"u"){var de={get passive(){}};window.addEventListener("testPassive",null,de),window.removeEventListener("testPassive",null,de)}typeof window<"u"&&window.navigator&&window.navigator.platform&&(/iP(ad|hone|od)/.test(window.navigator.platform)||window.navigator.platform==="MacIntel"&&window.navigator.maxTouchPoints>1);var l={exports:{}},jt="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED",Ht=jt,Nt=Ht;function fe(){}function ge(){}ge.resetWarningCache=fe;var Rt=function(){function e(i,r,s,p,a,f){if(f!==Nt){var _=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw _.name="Invariant Violation",_}}e.isRequired=e;function t(){return e}var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:ge,resetWarningCache:fe};return n.PropTypes=n,n};l.exports=Rt();var q={BASE:"base",BODY:"body",HEAD:"head",HTML:"html",LINK:"link",META:"meta",NOSCRIPT:"noscript",SCRIPT:"script",STYLE:"style",TITLE:"title",FRAGMENT:"Symbol(react.fragment)"};Object.keys(q).map(function(e){return q[e]});var le={accesskey:"accessKey",charset:"charSet",class:"className",contenteditable:"contentEditable",contextmenu:"contextMenu","http-equiv":"httpEquiv",itemprop:"itemProp",tabindex:"tabIndex"};Object.keys(le).reduce(function(e,t){return e[le[t]]=t,e},{});q.NOSCRIPT,q.SCRIPT,q.STYLE;Le.createContext({});var Pt=l.exports.shape({setHelmet:l.exports.func,helmetInstances:l.exports.shape({get:l.exports.func,add:l.exports.func,remove:l.exports.func})});l.exports.shape({helmet:l.exports.shape()}),l.exports.node.isRequired;Pt.isRequired;l.exports.object,l.exports.object,l.exports.oneOfType([l.exports.arrayOf(l.exports.node),l.exports.node]),l.exports.string,l.exports.bool,l.exports.bool,l.exports.object,l.exports.arrayOf(l.exports.object),l.exports.arrayOf(l.exports.object),l.exports.arrayOf(l.exports.object),l.exports.func,l.exports.arrayOf(l.exports.object),l.exports.arrayOf(l.exports.object),l.exports.string,l.exports.object,l.exports.string,l.exports.bool,l.exports.object;async function $t(){if(!document.getElementById("root"))throw new Error("#root element not found");{const t=document.querySelectorAll("[__island]");if(t.length===0)return;const{hydrateRoot:n}=await Oe(()=>import("react-dom/client"),[]);for(let i=0;i<t.length;i++){const r=t[i],[s,p]=r.getAttribute("__island").split(":"),a=window.ISLANDS[s];n(r,Ce(a,{...window.ISLAND_PROPS[p]}))}}}$t().then(()=>{setTimeout(()=>{Ot()})});
112
+ </script>
113
+ </body>
114
+ </html>