npm - @modern-js/module-tools-docs - Versions diffs - 2.0.2 → 2.2.0-beta.0 - Mend

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

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 (308) hide show

package/docs/.island/dist/en/guide/advance/in-depth-about-build.html ADDED Viewed

@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+  <html>
+    <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width,initial-scale=1">
+      <link rel="icon" href="" type="image/svg+xml"></link>
+      <script  id="check-dark-light">
+        ;(() => {
+          const saved = localStorage.getItem('island-theme-appearance')
+          const prefereDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+          if (!saved || saved === 'auto' ? prefereDark : saved === 'dark') {
+            document.documentElement.classList.add('dark')
+          }
+        })()
+      </script>
+      <title data-rh="true">In-depth understanding of build</title>
+      <meta data-rh="true" name="description" content="Island"/>
+      <script defer src='https://ga.jspm.io/npm:es-module-shims@1.6.0/dist/es-module-shims.js'></script>
+      <script type="importmap">
+        {
+          "imports": {
+            "react": "/react.js","react-dom": "/react-dom.js","react-dom/client": "/react-dom_client.js","react/jsx-runtime": "/react_jsx-runtime.js"
+          }
+        }
+      </script>
+      <link rel="stylesheet" href="/assets/style.2e5f7bc2.css">
+    </head>
+    <body>
+      <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="/en/" 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="/en/guide/intro/welcome.html" target="" class="_link_r3fql_1 ">Guide</a></div><div text="sm" font="medium" m="x-3" class=""><a href="/en/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.4</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">Changelog</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">Contributing</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 font="medium"><a href="/zh" target="" 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 rounded="md" p="y-1.6 l-3"><span mr="1" text="brand">English</span></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="/en/guide/intro/welcome.html" target="" class="_link_r3fql_1 ">Guide</a></div></div><div w="100%" class="_navMenuItem_1mkpq_34"><div text="sm" font="medium" m="x-3" class=""><a href="/en/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.4</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">Changelog</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">Contributing</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" font="medium"><a href="/zh" target="" 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"><span mr="1" text="brand">English</span></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">Introduction</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="/en/guide/intro/welcome.html" target="" class="_link_r3fql_1 ">WelCome</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/en/guide/intro/why-module-engineering-solution.html" target="" class="_link_r3fql_1 ">Why module project solution</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/en/guide/intro/getting-started.html" target="" class="_link_r3fql_1 ">Getting Started</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">Basic Guide</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="/en/guide/basic/before-getting-started.html" target="" class="_link_r3fql_1 ">Before getting started</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/en/guide/basic/command-preview.html" target="" class="_link_r3fql_1 ">Command preview</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/en/guide/basic/modify-output-product.html" target="" class="_link_r3fql_1 ">Modify output product</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/en/guide/basic/use-micro-generator.html" target="" class="_link_r3fql_1 ">Use Micro generator</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/en/guide/basic/using-storybook.html" target="" class="_link_r3fql_1 ">Using 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="/en/guide/basic/test-your-project.html" target="" class="_link_r3fql_1 ">Test project</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/en/guide/basic/publish-your-project.html" target="" class="_link_r3fql_1 ">Publish project</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">Advanced Guide</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-brand"><a href="/en/guide/advance/in-depth-about-build.html" target="" class="_link_r3fql_1 ">In depth about build</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/en/guide/advance/in-depth-about-dev-command.html" target="" class="_link_r3fql_1 ">In depth about dev command</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/en/guide/advance/copy.html" target="" class="_link_r3fql_1 ">Use Copy Tools</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/en/guide/advance/external-dependency.html" target="" class="_link_r3fql_1 ">How to handle third-party dependencies</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/en/guide/advance/build-umd.html" target="" class="_link_r3fql_1 ">Build umd</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/en/guide/advance/asset.html" target="" class="_link_r3fql_1 ">Handling static files</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/en/guide/advance/extension.html" target="" class="_link_r3fql_1 ">Plugins extension</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="in-depth-understanding-of-build"><a class="header-anchor" aria-hidden="true" href="#in-depth-understanding-of-build">#</a>In-depth understanding of build</h1>
+<p>In the [Basic Usage] section, we already knew that you can modify the output product of a project through the <code>buildConfig</code> configuration. <code>buildConfig</code> not only describes some of the features of the product, but also provides some functionality for building the product.</p>
+<div class="island-directive tip"><p class="island-directive-title">notes</p><div class="island-directive-content"><p>If you are not sure what <code>buildConfig</code> is, it is recommended to take some time to understand it by following this link.</p><ul>
+<li>[<a href="/en/guide/modify-output-product.html">modify-output-product</a>]</li>
+</ul></div></div>
+<p>In this chapter we&#x27;ll dive into the use of certain build configurations and understand what happens when the <code>modern build</code> command is executed.</p>
+<h2 id="in-depth-understanding-of-buildconfig"><a class="header-anchor" aria-hidden="true" href="#in-depth-understanding-of-buildconfig">#</a>In-depth understanding of <code>buildConfig</code></h2>
+<h3 id="bundle-and-bundleless"><a class="header-anchor" aria-hidden="true" href="#bundle-and-bundleless">#</a>Bundle and Bundleless</h3>
+<p>So first let&#x27;s understand Bundle and Bundleless.</p>
+<p>A Bundle is a package of build products, which may be a single file or multiple files based on a certain <a href="https://esbuild.github.io/api/#splitting" target="_blank" rel="nofollow">code splitting strategy</a>.</p>
+<p>Bundleless, on the other hand, means that each source file is compiled and built separately, but not packaged together. Each product file can be found with its corresponding source code file. The process of <strong>Bundleless build can also be understood as the process of code conversion of source files only</strong>.</p>
+<p>In <code>buildConfig</code> you can specify whether the current build task is Bundle or Bundleless by using <a href="/en/api/build-config.html#buildtype"><code>buildConfig.buildType</code></a>.</p>
+<h3 id="relationship-between-input-and-sourcedir"><a class="header-anchor" aria-hidden="true" href="#relationship-between-input-and-sourcedir">#</a>Relationship between <code>input</code> and <code>sourceDir</code></h3>
+<p><a href="/en/api/build-config.html#input"><code>buildConfig.input</code></a> is used to specify the file path or directory path where the source code is read, and its default value differs between Bundle and Bundleless builds.</p>
+<ul>
+<li>When <code>buildType: &#x27;bundle&#x27;</code>, <code>input</code> defaults to <code>[&#x27;src/index.ts&#x27;]</code></li>
+<li>When <code>buildType: &#x27;bundleless&#x27;</code>, <code>input</code> defaults to <code>[&#x27;src&#x27;]</code></li>
+</ul>
+<blockquote>
+<p>In fact, at <code>buildType: &#x27;bundle&#x27;</code>, the build tool detects the existence of a file matching the name rule <code>src/index.(j|t)sx?</code> and uses it as an entry file.</p>
+</blockquote>
+<div class="island-directive tip"><p class="island-directive-title">notes</p><div class="island-directive-content"><p>It is recommended that you do not specify multiple source file directories during a Bundleless build, as unintended results may occur. Bundleless builds with multiple source directories are currently in an unstable stage.</p></div></div>
+<p>We know from the defaults: <strong>Bundle builds can generally specify a file path as the entry point to the build, while Bundleless builds are more expected to use directory paths to find source files</strong>.</p>
+<h4 id="object-type-of-input"><a class="header-anchor" aria-hidden="true" href="#object-type-of-input">#</a>Object type of <code>input</code></h4>
+<p>In addition to setting <code>input</code> to an array, you can also set it to an object during the Bundle build process. <strong>By using the object form, we can modify the name of the file that the build product outputs</strong>. So for the following example, <code>. /src/index.ts</code> corresponds to the path of the build product file as <code>. /dist/main.js</code>.</p>
+<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="modern.config.ts" 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>modern.config.ts</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 { defineConfig } from &#x27;@modern-js/module-tools&#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>export default defineConfig({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    buildConfig: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>        input: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>            main: [&#x27;./src/index.ts&#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>        outdir: &#x27;./dist&#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>});</span></div></div><br/></code></div></div></div></div>
+<p>The Bundleless build process also supports such use, but it is not recommended.</p>
+<h4 id="sourcedir"><a class="header-anchor" aria-hidden="true" href="#sourcedir">#</a><code>sourceDir</code></h4>
+<p><a href="/en/api/build-config.html#sourcedir"><code>sourceDir</code></a> is used to specify the source code directory, which is related to both.</p>
+<ul>
+<li>type file generation</li>
+<li><a href="https://esbuild.github.io/api/#outbase" target="_blank" rel="nofollow"><code>outbase</code></a> for specifying the build process</li>
+</ul>
+<p>In general:</p>
+<ul>
+<li><strong>During the Bundleless build process, the values of <code>sourceDir</code> and <code>input</code> should be the same, and their default values are both <code>src</code></strong>.</li>
+<li>It is rarely necessary to use <code>sourceDir</code> during the Bundle build process.</li>
+</ul>
+<h3 id="declaration-type-files"><a class="header-anchor" aria-hidden="true" href="#declaration-type-files">#</a>Declaration Type Files</h3>
+<p>The <a href="/en/api/build-config.html#dts"><code>buildConfig.dts</code></a> configuration is mainly used for type file generation.</p>
+<h4 id="turn-off-type-generation"><a class="header-anchor" aria-hidden="true" href="#turn-off-type-generation">#</a>Turn off type generation</h4>
+<p>Type generation is turned on by default, if you need to turn it off, you can configure it as follows:</p>
+<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="./modern.config.ts" 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>modern.config.ts</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 { defineConfig } from &#x27;@modern-js/module-tools&#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>export default defineConfig({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  buildConfig: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    dts: false</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></div></div>
+<div class="island-directive tip"><p class="island-directive-title">TIP</p><div class="island-directive-content"><p>The build speed is generally improved by closing the type file.</p></div></div>
+<h4 id="build-type-files"><a class="header-anchor" aria-hidden="true" href="#build-type-files">#</a>Build type files</h4>
+<p>With <code>buildType: &#x27;bundleless&#x27;</code>, type files are generated using the project&#x27;s <code>tsc</code> command to complete production.</p>
+<p>The <strong>module engineering solution also supports packaging of type files</strong>, although care needs to be taken when using this feature.</p>
+<ul>
+<li>Some third-party dependencies have incorrect syntax that can cause the packaging process to fail. So in this case, you need to exclude such third-party packages manually with <a href="/en/api/build-config.html#externals"><code>buildConfig.externals</code></a>.</li>
+<li>It is not possible to handle the case where the type file of a third-party dependency points to a <code>.ts</code> file. For example, the <code>package.json</code> of a third-party dependency contains something like this: <code>{&quot;types&quot;: &quot;. /src/index.ts&quot;}</code>.</li>
+</ul>
+<h4 id="alias-conversion"><a class="header-anchor" aria-hidden="true" href="#alias-conversion">#</a>Alias Conversion</h4>
+<p>During the Bundleless build process, if an alias appears in the source code, e.g.</p>
+<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="./src/index.ts" 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">./src/</span>index.ts</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 utils from &#x27;@common/utils&#x27;;</span></div></div><br/></code></div></div></div></div>
+<p>Normally, product type files generated with <code>tsc</code> will also contain these aliases. However, Module Tools will convert the aliases in the type file generated by <code>tsc</code> to:</p>
+<ul>
+<li>Alias conversion is possible for code of the form <code>import &#x27;@common/utils&#x27;</code> or <code>import utils from &#x27;@common/utils&#x27;</code>.</li>
+<li>Aliasing is possible for code of the form <code>export { utils } from &#x27;@common/utils&#x27;</code>.</li>
+</ul>
+<p>However, there are some cases that cannot be handled at this time.</p>
+<ul>
+<li>Output types of the form <code>Promise&lt;import(&#x27;@common/utils&#x27;)&gt;</code> cannot be converted at this time.</li>
+</ul>
+<h4 id="some-examples-of-the-use-of-dts"><a class="header-anchor" aria-hidden="true" href="#some-examples-of-the-use-of-dts">#</a>Some examples of the use of <code>dts</code></h4>
+<p>General usage:</p>
+<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>import { defineConfig } from &#x27;@modern-js/module-tools&#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>export default defineConfig({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  // The output path of the packaged type file at this point is `./dist/types`</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  buildConfig: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    buildType: &#x27;bundle&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    dts: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      tsconfigPath: &#x27;./other-tsconfig.json&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      distPath: &#x27;./types&#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>    outdir: &#x27;./dist&#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>});</span></div></div><br/></code></div></div>
+<p>For the use of <code>dts.only</code>:</p>
+<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>import { defineConfig } from &#x27;@modern-js/module-tools&#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>export default defineConfig({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  // At this moment the type file is not packaged and the output path is `./dist/types`</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  buildConfig: [</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>      buildType: &#x27;bundle&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      dts: false,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      outdir: &#x27;./dist&#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>    {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      buildType: &#x27;bundleless&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      dts: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>        only: true,</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>      outdir: &#x27;./dist/types&#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>  ]</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br/></code></div></div>
+<h3 id="buildconfigdefine-usage-for-different-scenarios"><a class="header-anchor" aria-hidden="true" href="#buildconfigdefine-usage-for-different-scenarios">#</a><code>buildConfig.define</code> Usage for different scenarios</h3>
+<p><a href="/en/api/build-config.html#define"><code>buildConfig.define</code></a> functions somewhat similar to <a href="https://webpack.js.org/plugins/define-plugin/" target="_blank" rel="nofollow"><code>webpack.DefinePlugin</code></a>. A few usage scenarios are described here.</p>
+<h4 id="environment-variable-replacement"><a class="header-anchor" aria-hidden="true" href="#environment-variable-replacement">#</a>Environment variable replacement</h4>
+<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>import { defineConfig } from &#x27;@modern-js/module-tools&#x27;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default defineConfig({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  buildConfig: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    define: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      &#x27;process.env.VERSION&#x27;: JSON.stringify(process.env.VERSION || &#x27;0.0.0&#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>  }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br/></code></div></div>
+<p>With the above configuration, we can put the following code.</p>
+<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>// pre-compiler code</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>console.log(process.env.VERSION);</span></div></div><br/></code></div></div>
+<p>When executing <code>VERSION=1.0.0 modern build</code>, the conversion is:</p>
+<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>// compiled code</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>console.log(&#x27;1.0.0&#x27;);</span></div></div><br/></code></div></div>
+<h4 id="global-variable-replacement"><a class="header-anchor" aria-hidden="true" href="#global-variable-replacement">#</a>Global variable replacement</h4>
+<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>import { defineConfig } from &#x27;@modern-js/module-tools&#x27;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default defineConfig({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  buildConfig: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    define: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      &#x27;VERSION&#x27;: JSON.stringify(require(&#x27;. /package.json&#x27;).version || &#x27;0.0.0&#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>  }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br/></code></div></div>
+<p>With the above configuration, we can put the following code.</p>
+<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>// pre-compile code</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>console.log(VERSION);</span></div></div><br/></code></div></div>
+<p>Convert to:</p>
+<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>// post-compile code</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>console.log(&#x27;1.0.0&#x27;);</span></div></div><br/></code></div></div>
+<p>Note, however: If the project is a TypeScript project, then you may need to add the following to the <code>.d.ts</code> file in the project source directory.</p>
+<blockquote>
+<p>If the <code>.d.ts</code> file does not exist, then you can create it manually.</p>
+</blockquote>
+<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="env.d.ts" 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>env.d.ts</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>declare const YOUR_ADD_GLOBAL_VAR;</span></div></div><br/></code></div></div></div></div>
+<h2 id="build-process"><a class="header-anchor" aria-hidden="true" href="#build-process">#</a>Build process</h2>
+<p>When the <code>modern build</code> command is executed, the</p>
+<ul>
+<li>Clear the products directory according to <code>buildConfig.outdir</code>.</li>
+<li>Compile <code>js/ts</code> source code to generate the JS build product for Bundle/Bundleless.</li>
+<li>Generate Bundle/Bundleless type files using <code>tsc</code>.</li>
+<li>Handle Copy tasks.</li>
+</ul>
+<h2 id="build-errors"><a class="header-anchor" aria-hidden="true" href="#build-errors">#</a>Build errors</h2>
+<p>When a build error occurs, based on the information learned above, it is easy to understand what error appears in the terminal.</p>
+<p><strong>Errors reported for js or ts builds:</strong></p>
+<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>error  ModuleBuildError:</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><div><div style="display:inline-block;margin-left:16px"><span>│ bundle failed:        │</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>│  - format is &quot;cjs&quot;    │</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>│  - target is &quot;esnext&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><div><div style="display:inline-block;margin-left:16px"><span>Detailed Information:</span></div></div><br/></code></div></div>
+<p><strong>Errors reported for the type file generation process:</strong></p>
+<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>error   ModuleBuildError:</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>bundle DTS failed:</span></div></div><br/></code></div></div>
+<p>For <code>js/ts</code> build errors, we can tell from the error message.</p>
+<ul>
+<li>By <code>&#x27;bundle failed:&#x27;</code> to determine if the error is reported for a Bundle build or a Bundleless build?</li>
+<li>What is the <code>format</code> of the build process?</li>
+<li>What is the <code>target</code> of the build process?</li>
+<li>The specific error message.</li>
+</ul><!--/$--></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/en/guide/advance/in-depth-about-build.md" transition="color duration-300">📝 Edit this page on GitHub</a><div flex="" text="sm text-2" leading-6="~" leading-8="sm:~" font-medium=""><p>Last Updated: </p><span>2022/12/15 18:01:48</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="/en/guide/basic/publish-your-project.html" class="_pager-link_1f77m_20"><span class="_desc_1f77m_43">Previous Page</span><span class="_title_1f77m_34">Publish project</span></a></div><div flex="~ col" class="_next_1f77m_16"><a href="/en/guide/advance/in-depth-about-dev-command.html" class="_pager-link_1f77m_20 _next_1f77m_16"><span class="_desc_1f77m_43">Next page</span><span class="_title_1f77m_34">In depth about dev command</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">ON THIS PAGE</div><nav><ul relative=""><li><a href="#in-depth-understanding-of-buildconfig" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:0">In-depth understanding of buildConfig</a></li><li><a href="#bundle-and-bundleless" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:12px">Bundle and Bundleless</a></li><li><a href="#relationship-between-input-and-sourcedir" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:12px">Relationship between input and sourceDir</a></li><li><a href="#object-type-of-input" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:24px">Object type of input</a></li><li><a href="#sourcedir" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:24px">sourceDir</a></li><li><a href="#declaration-type-files" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:12px">Declaration Type Files</a></li><li><a href="#turn-off-type-generation" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:24px">Turn off type generation</a></li><li><a href="#build-type-files" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:24px">Build type files</a></li><li><a href="#alias-conversion" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:24px">Alias Conversion</a></li><li><a href="#some-examples-of-the-use-of-dts" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:24px">Some examples of the use of dts</a></li><li><a href="#buildconfigdefine-usage-for-different-scenarios" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:12px">buildConfig.define Usage for different scenarios</a></li><li><a href="#environment-variable-replacement" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:24px">Environment variable replacement</a></li><li><a href="#global-variable-replacement" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:24px">Global variable replacement</a></li><li><a href="#build-process" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:0">Build process</a></li><li><a href="#build-errors" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:0">Build errors</a></li></ul></nav></div></div></div></div></div></div></div></div></div></section><div __island="BackTop:0"></div></div></div>
+      <script id="island-props">[{},{"langRoutePrefix":"/en/"},{"socialLinks":[{"icon":"github","mode":"link","content":"https://github.com/modern-js-dev/modern.js"}]},{"localeData":{"lang":"en","label":"English","lastUpdated":"Last Updated","nav":[{"text":"Guide","link":"/en/guide/intro/welcome","activeMatch":"/guide/"},{"text":"API","link":"/en/api/","activeMatch":"/api/"},{"text":"v2.0.0-beta.4","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/intro/welcome"},{"text":"Why module project solution","link":"/en/guide/intro/why-module-engineering-solution"},{"text":"Getting Started","link":"/en/guide/intro/getting-started"}]},{"text":"Basic Guide","items":[{"text":"Before getting started","link":"/en/guide/basic/before-getting-started"},{"text":"Command preview","link":"/en/guide/basic/command-preview"},{"text":"Modify output product","link":"/en/guide/basic/modify-output-product"},{"text":"Use Micro generator","link":"/en/guide/basic/use-micro-generator"},{"text":"Using Storybook","link":"/en/guide/basic/using-storybook"},{"text":"Test project","link":"/en/guide/basic/test-your-project"},{"text":"Publish project","link":"/en/guide/basic/publish-your-project"}]},{"text":"Advanced Guide","items":[{"text":"In depth about build","link":"/en/guide/advance/in-depth-about-build"},{"text":"In depth about dev command","link":"/en/guide/advance/in-depth-about-dev-command"},{"text":"Use Copy Tools","link":"/en/guide/advance/copy"},{"text":"How to handle third-party dependencies","link":"/en/guide/advance/external-dependency"},{"text":"Build umd","link":"/en/guide/advance/build-umd"},{"text":"Handling static files","link":"/en/guide/advance/asset"},{"text":"Plugins extension","link":"/en/guide/advance/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"},"langRoutePrefix":"/en/"},"siteData":{"lang":"en-US","title":"Module tools","description":"Island","themeConfig":{"locales":{"/zh/":{"lang":"zh","label":"简体中文","lastUpdatedText":"上次更新","nav":[{"text":"指南","link":"/zh/guide/intro/welcome","activeMatch":"/guide/"},{"text":"API","link":"/zh/api/","activeMatch":"/api/"},{"text":"v2.0.0-beta.4","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/intro/welcome"},{"text":"为什么需要模块工程解决方案","link":"/zh/guide/intro/why-module-engineering-solution"},{"text":"快速开始","link":"/zh/guide/intro/getting-started"}]},{"text":"基础使用","items":[{"text":"开始之前","link":"/zh/guide/basic/before-getting-started"},{"text":"命令预览","link":"/zh/guide/basic/command-preview"},{"text":"修改输出产物","link":"/zh/guide/basic/modify-output-product"},{"text":"使用微生成器","link":"/zh/guide/basic/use-micro-generator"},{"text":"使用 Storybook","link":"/zh/guide/basic/using-storybook"},{"text":"测试项目","link":"/zh/guide/basic/test-your-project"},{"text":"发布项目","link":"/zh/guide/basic/publish-your-project"}]},{"text":"进阶指南","items":[{"text":"深入理解构建","link":"/zh/guide/advance/in-depth-about-build"},{"text":"深入理解 dev 命令","link":"/zh/guide/advance/in-depth-about-dev-command"},{"text":"使用 Copy 工具","link":"/zh/guide/advance/copy"},{"text":"如何处理第三方依赖","link":"/zh/guide/advance/external-dependency"},{"text":"构建 umd 产物","link":"/zh/guide/advance/build-umd"},{"text":"处理静态文件","link":"/zh/guide/advance/asset"},{"text":"插件扩展","link":"/zh/guide/advance/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/intro/welcome","activeMatch":"/guide/"},{"text":"API","link":"/en/api/","activeMatch":"/api/"},{"text":"v2.0.0-beta.4","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/intro/welcome"},{"text":"Why module project solution","link":"/en/guide/intro/why-module-engineering-solution"},{"text":"Getting Started","link":"/en/guide/intro/getting-started"}]},{"text":"Basic Guide","items":[{"text":"Before getting started","link":"/en/guide/basic/before-getting-started"},{"text":"Command preview","link":"/en/guide/basic/command-preview"},{"text":"Modify output product","link":"/en/guide/basic/modify-output-product"},{"text":"Use Micro generator","link":"/en/guide/basic/use-micro-generator"},{"text":"Using Storybook","link":"/en/guide/basic/using-storybook"},{"text":"Test project","link":"/en/guide/basic/test-your-project"},{"text":"Publish project","link":"/en/guide/basic/publish-your-project"}]},{"text":"Advanced Guide","items":[{"text":"In depth about build","link":"/en/guide/advance/in-depth-about-build"},{"text":"In depth about dev command","link":"/en/guide/advance/in-depth-about-dev-command"},{"text":"Use Copy Tools","link":"/en/guide/advance/copy"},{"text":"How to handle third-party dependencies","link":"/en/guide/advance/external-dependency"},{"text":"Build umd","link":"/en/guide/advance/build-umd"},{"text":"Handling static files","link":"/en/guide/advance/asset"},{"text":"Plugins extension","link":"/en/guide/advance/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/targeral/github/targeral-modern-js/website/module-tools/docs","appearance":true},"pathname":"/en/guide/advance/in-depth-about-build"},{"text":"v2.0.0-beta.4","items":[{"text":"Changelog","link":"https://github.com/modern-js-dev/modern.js"},{"text":"Contributing","link":"https://github.com/modern-js-dev/modern.js"}]},{"items":[{"text":"简体中文","link":"/zh"},{"text":"English","link":"/en"}],"activeIndex":1,"isTranslation":true},{},{"socialLinks":[{"icon":"github","mode":"link","content":"https://github.com/modern-js-dev/modern.js"}]},{"pathname":"/en/guide/advance/in-depth-about-build","langRoutePrefix":"","sidebarData":[{"text":"Introduction","items":[{"text":"WelCome","link":"/en/guide/intro/welcome"},{"text":"Why module project solution","link":"/en/guide/intro/why-module-engineering-solution"},{"text":"Getting Started","link":"/en/guide/intro/getting-started"}]},{"text":"Basic Guide","items":[{"text":"Before getting started","link":"/en/guide/basic/before-getting-started"},{"text":"Command preview","link":"/en/guide/basic/command-preview"},{"text":"Modify output product","link":"/en/guide/basic/modify-output-product"},{"text":"Use Micro generator","link":"/en/guide/basic/use-micro-generator"},{"text":"Using Storybook","link":"/en/guide/basic/using-storybook"},{"text":"Test project","link":"/en/guide/basic/test-your-project"},{"text":"Publish project","link":"/en/guide/basic/publish-your-project"}]},{"text":"Advanced Guide","items":[{"text":"In depth about build","link":"/en/guide/advance/in-depth-about-build"},{"text":"In depth about dev command","link":"/en/guide/advance/in-depth-about-dev-command"},{"text":"Use Copy Tools","link":"/en/guide/advance/copy"},{"text":"How to handle third-party dependencies","link":"/en/guide/advance/external-dependency"},{"text":"Build umd","link":"/en/guide/advance/build-umd"},{"text":"Handling static files","link":"/en/guide/advance/asset"},{"text":"Plugins extension","link":"/en/guide/advance/extension"}]}]}]</script><script type="module" src="/assets/island_inject.69495876.js"></script>
+      <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.
+Expects a CSS selector, a Node element, a NodeList or an array.
+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()})});
+</script>
+    </body>
+  </html>