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

@modern-js/module-tools-docs 2.6.0 → 2.7.1-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 (153) hide show

package/doc_build/en/guide/best-practices/components.html ADDED Viewed

@@ -0,0 +1,122 @@
+<!doctype html><html  lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title data-rh="true">Developing Components - Module Tools</title><meta data-rh="true" name="description" content="Module Engineering Solutions"/>
+<script id="check-dark-light">
+;(() => {
+  const saved = localStorage.getItem('modern-theme-appearance')
+  const prefereDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+  if (!saved || saved === 'auto' ? prefereDark : saved === 'dark') {
+    document.documentElement.classList.add('dark')
+  }
+})()
+</script>
+<link rel="icon" href="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/logo-1x-0104.png"><script>!function(){"use strict";var e,n,i,t,o,u={},r={};function a(e){var n=r[e];if(void 0!==n)return n.exports;var i=r[e]={exports:{}};return u[e].call(i.exports,i,i.exports,a),i.exports}a.m=u,e=[],a.O=function(n,i,t,o){if(!i){var u=1/0;for(d=0;d<e.length;d++){i=e[d][0],t=e[d][1],o=e[d][2];for(var r=!0,_=0;_<i.length;_++)(!1&o||u>=o)&&Object.keys(a.O).every((function(e){return a.O[e](i[_])}))?i.splice(_--,1):(r=!1,o<u&&(u=o));if(r){e.splice(d--,1);var c=t();void 0!==c&&(n=c)}}return n}o=o||0;for(var d=e.length;d>0&&e[d-1][2]>o;d--)e[d]=e[d-1];e[d]=[i,t,o]},a.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(n,{a:n}),n},i=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},a.t=function(e,t){if(1&t&&(e=this(e)),8&t)return e;if("object"==typeof e&&e){if(4&t&&e.__esModule)return e;if(16&t&&"function"==typeof e.then)return e}var o=Object.create(null);a.r(o);var u={};n=n||[null,i({}),i([]),i(i)];for(var r=2&t&&e;"object"==typeof r&&!~n.indexOf(r);r=i(r))Object.getOwnPropertyNames(r).forEach((function(n){u[n]=function(){return e[n]}}));return u.default=function(){return e},a.d(o,u),o},a.d=function(e,n){for(var i in n)a.o(n,i)&&!a.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},a.f={},a.e=function(e){return Promise.all(Object.keys(a.f).reduce((function(n,i){return a.f[i](e,n),n}),[]))},a.u=function(e){return"static/js/async/"+({229:"en_guide_intro_getting-started",237:"zh_api_config_build-config",262:"en_plugins_official-list_plugin-banner",315:"en_index",421:"zh_api_config_testing",727:"zh_guide_advance_in-depth-about-build",775:"zh_guide_basic_before-getting-started",1085:"en_api_index",1108:"zh_guide_intro_why-module-engineering-solution",1178:"zh_api_plugin-api_plugin-hooks",1180:"zh_guide_advance_theme-config",1189:"zh_api_index",1677:"en_api_plugin-api_plugin-hooks",1756:"zh_guide_basic_command-preview",1895:"zh_index",2013:"zh_guide_best-practices_components",2020:"zh_guide_basic_publish-your-project",2033:"en_guide_intro_welcome",2034:"zh_guide_intro_welcome",2097:"en_api_config_plugins",2477:"zh_plugins_official-list_plugin-import",2532:"en_guide_basic_use-micro-generator",2540:"zh_guide_advance_in-depth-about-dev-command",2556:"en_api_config_testing",2611:"zh_guide_advance_copy",2633:"zh_guide_intro_getting-started",2678:"en_guide_basic_before-getting-started",2821:"zh_guide_basic_modify-output-product",2892:"zh_plugins_guide_setup-function",3032:"en_guide_basic_publish-your-project",3415:"zh_plugins_official-list_plugin-banner",3741:"en_guide_basic_test-your-project",3806:"zh_api_config_plugins",4260:"en_guide_advance_external-dependency",4390:"zh_plugins_official-list_overview",4663:"en_guide_advance_build-umd",4695:"zh_api_config_design-system",4749:"en_plugins_guide_setup-function",4837:"zh_guide_advance_build-umd",5057:"en_guide_advance_copy",5107:"zh_guide_basic_using-storybook",5284:"zh_plugins_guide_plugin-object",5300:"en_plugins_guide_plugin-object",5532:"zh_guide_advance_external-dependency",5578:"en_guide_basic_modify-output-product",5654:"en_api_config_build-config",5723:"zh_guide_advance_asset",5966:"zh_guide_basic_test-your-project",6098:"en_guide_advance_theme-config",7241:"zh_api_config_build-preset",7294:"zh_guide_basic_use-micro-generator",7401:"en_guide_best-practices_components",7512:"en_guide_intro_why-module-engineering-solution",7571:"en_guide_basic_command-preview",8230:"en_guide_advance_asset",8687:"en_plugins_guide_getting-started",8782:"en_api_config_build-preset",8888:"en_plugins_official-list_plugin-import",8927:"en_guide_advance_in-depth-about-build",9220:"en_api_config_design-system",9479:"en_plugins_official-list_overview",9675:"en_guide_basic_using-storybook",9826:"en_guide_advance_in-depth-about-dev-command",9868:"zh_plugins_guide_getting-started"}[e]||e)+"."+{229:"fdf2a5e3",237:"e0239f0b",262:"c8fc2ef5",315:"9d8e7f26",421:"7af33726",727:"f74fb46b",775:"cb228032",1085:"e8c3584a",1108:"c5feb99d",1114:"d0e9a03f",1178:"54181e2b",1180:"9d46a256",1189:"83d48f6f",1677:"130c0839",1756:"d01b5121",1895:"bdf672c6",2013:"63e6ce1f",2020:"f1222d3a",2033:"e8402d15",2034:"e1854445",2097:"e2525188",2477:"d9e7fb77",2532:"1d9ade59",2540:"390bd229",2556:"bdfe73d2",2611:"0c87a269",2633:"ed054585",2678:"1da2f70c",2821:"511034ae",2892:"d79620be",3032:"6ffa1dcb",3415:"defbf67c",3741:"503389bd",3806:"bb32094e",4260:"21c368af",4390:"bded70c0",4663:"5912e38e",4695:"6f3e0d0a",4749:"bf63c2f5",4837:"cd0724c4",5057:"e73474a0",5107:"e684c97c",5284:"acf4be01",5300:"2799e64d",5532:"38ab900c",5578:"c1634e05",5654:"4b68a964",5723:"0abb6b82",5966:"bb4ee150",6098:"ed245a3c",7241:"af73b578",7294:"fbbfa670",7401:"db985beb",7512:"5b18a76a",7571:"16337618",8230:"29c82557",8687:"5c423f88",8782:"3c87d23b",8888:"dc5a5224",8927:"90beffab",9220:"bae5a6a4",9479:"226be4e5",9675:"2e1cf2bc",9826:"7be33ae4",9868:"d0775941"}[e]+".js"},a.miniCssF=function(e){},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t={},o="@modern-js/module-tools-docs:",a.l=function(e,n,i,u){if(t[e])t[e].push(n);else{var r,_;if(void 0!==i)for(var c=document.getElementsByTagName("script"),d=0;d<c.length;d++){var f=c[d];if(f.getAttribute("src")==e||f.getAttribute("data-webpack")==o+i){r=f;break}}r||(_=!0,(r=document.createElement("script")).charset="utf-8",r.timeout=120,a.nc&&r.setAttribute("nonce",a.nc),r.setAttribute("data-webpack",o+i),r.src=e),t[e]=[n];var s=function(n,i){r.onerror=r.onload=null,clearTimeout(g);var o=t[e];if(delete t[e],r.parentNode&&r.parentNode.removeChild(r),o&&o.forEach((function(e){return e(i)})),n)return n(i)},g=setTimeout(s.bind(null,void 0,{type:"timeout",target:r}),12e4);r.onerror=s.bind(null,r.onerror),r.onload=s.bind(null,r.onload),_&&document.head.appendChild(r)}},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.p="/module-tools/",function(){var e={6272:0};a.f.j=function(n,i){var t=a.o(e,n)?e[n]:void 0;if(0!==t)if(t)i.push(t[2]);else if(6272!=n){var o=new Promise((function(i,o){t=e[n]=[i,o]}));i.push(t[2]=o);var u=a.p+a.u(n),r=new Error;a.l(u,(function(i){if(a.o(e,n)&&(0!==(t=e[n])&&(e[n]=void 0),t)){var o=i&&("load"===i.type?"missing":i.type),u=i&&i.target&&i.target.src;r.message="Loading chunk "+n+" failed.\n("+o+": "+u+")",r.name="ChunkLoadError",r.type=o,r.request=u,t[1](r)}}),"chunk-"+n,n)}else e[n]=0},a.O.j=function(n){return 0===e[n]};var n=function(n,i){var t,o,u=i[0],r=i[1],_=i[2],c=0;if(u.some((function(n){return 0!==e[n]}))){for(t in r)a.o(r,t)&&(a.m[t]=r[t]);if(_)var d=_(a)}for(n&&n(i);c<u.length;c++)o=u[c],a.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return a.O(d)},i=self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[];i.forEach(n.bind(null,0)),i.push=n.bind(null,i.push.bind(i))}()}();</script><script defer="defer" src="/module-tools/static/js/lib-polyfill.0d49b811.js"></script><script defer="defer" src="/module-tools/static/js/lib-lodash.5ea7bf7d.js"></script><script defer="defer" src="/module-tools/static/js/lib-react.209d3da0.js"></script><script defer="defer" src="/module-tools/static/js/lib-router.6f1082f5.js"></script><script defer="defer" src="/module-tools/static/js/9061.555c88e4.js"></script><script defer="defer" src="/module-tools/static/js/main.457dc37f.js"></script><link href="/module-tools/static/css/main.0bdbae52.css" rel="stylesheet"></head><body ><div id="root"><div><header class="top-0 left-0 relative md:fixed w-full" style="z-index:var(--modern-z-index-nav);background:var(--modern-c-bg)"><div class="dHJzp
+          csOJo"></div><div class="z0Ov1 modern-doc-nav" p="x-6"><div flex="~" justify="between" align="items-center" h="full" class="bcLAe"><div class="undefined"><a href="/module-tools/en" w="full" h="full" text="1rem" font="semibold" transition="opacity duration-300" hover="opacity-60" class="flex items-center"><span>Module Tools</span></a></div><div flex="~ 1" justify="end" align-items-center="~"><div class="LPoOT"><div flex="~ sm:1" items="center" p="sm:l-4 sm:r-2"><div class="B7xTH"><button><svg width="18" height="24" viewBox="0 0 32 32" hight="18"><path fill="var(--modern-c-gray)" 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><p class="JFbLy">Search</p><div><span>⌘</span><span>K</span></div></button></div><div class="cqbI7"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--modern-c-gray)" 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></div></div><div class="menu" h="14"><div text="sm" font="medium" m="x-3" class="text-brand-dark"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/guide/intro/welcome.html">Guide</a></div><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/api/index.html">API</a></div><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/plugins/guide/getting-started.html">Plugins</a></div><div m="x-3" last="mr-0"><div h="14" class="relative" flex="~ center"><button flex="~ center" align="items-center" font="medium" text="sm text-1 hover:text-2" transition="color duration-200" class="nav-menu-group-button"><span m="r-1" text="sm" font="medium">v2.7.0</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 pos="top-13 right-0" m="x-0.8" transition="opacity duration-300" class="nav-menu-group-content absolute" style="opacity:0;visibility:hidden"><div class="p-3 w-full h-full min-w-128px max-h-100vh rounded-xl whitespace-nowrap bg-white" style="box-shadow:var(--modern-shadow-3);margin-right:-1.5rem;z-index:100;border:1px solid var(--modern-c-divider-light)"><div><div font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">Changelog<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div></div><div><div font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">Contributing<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div></div></div></div></div></div></div><div class="flex-center flex-row"><div flex="~" text="sm" font="bold" align="items-center" class="translation sjQjZ"><div m="x-1.5"><div h="14" class="relative" flex="~ center"><button flex="~ center" align="items-center" font="medium" text="sm text-1 hover:text-2" transition="color duration-200" class="nav-menu-group-button"><span m="r-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 pos="top-13 right-0" m="x-0.8" transition="opacity duration-300" class="nav-menu-group-content absolute" style="opacity:0;visibility:hidden"><div class="p-3 w-full h-full min-w-128px max-h-100vh rounded-xl whitespace-nowrap bg-white" style="box-shadow:var(--modern-shadow-3);margin-right:-1.5rem;z-index:100;border:1px solid var(--modern-c-divider-light)"><div><div font="medium"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/guide/best-practices/components"><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">简体中文<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div></div><div><div class="rounded-md" p="y-1.6 l-3"><span m="r-1" text="brand">English</span></div></div></div></div></div></div></div><div class="sjQjZ modern-doc-appearance" align-items-center="center"><button class="xSrUP undefined" id="" type="button" role="switch"><span class="CSfjI"><span class="zDdMk"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="nk0gt"><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="A1HSI"><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 class="social-links WIILt flex-center" pos="relative"><div h="full" flex="~" gap="x-4" align-items-center="~" transition="color duration-300"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer"><div class="a9VBM"><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 class="yd31b"><button class=" eE8v3"><span class="pOzTZ"><span class="aD0WQ"></span><span class="GwaZ7"></span><span class="HyMv9"></span></span></button><div class="XAjwG " id="navScreen"><div class="VrSyn"><div class="YCP7r"><div w="full" class="LiNpS"><div text="sm" font="medium" m="x-3" class="text-brand-dark"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/guide/intro/welcome.html">Guide</a></div></div><div w="full" class="LiNpS"><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/api/index.html">API</a></div></div><div w="full" class="LiNpS"><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/plugins/guide/getting-started.html">Plugins</a></div></div><div w="full" class="LiNpS"><div m="x-3" last="mr-0"><div pos="relative" class=" FwXtz"><button class="YoOiJ"><span class="QFqBl">v2.7.0</span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" GPyuP "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="SEGAO"><div><div class="py-1" font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div><div flex="~"><span m="r-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><div><div class="py-1" font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div><div flex="~"><span m="r-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><div class="flex-center flex-col"><div class="mt-2 NeDxD" flex="~" justify="center"><button class="xSrUP undefined" id="" type="button" role="switch"><span class="CSfjI"><span class="zDdMk"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="nk0gt"><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="A1HSI"><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 flex="~" text="sm" font="bold" justify="center"><div m="x-1.5 y-1"><div pos="relative" class=" FwXtz"><button class="YoOiJ"><span class="QFqBl"><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=" GPyuP "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="SEGAO"><div><div class="py-1" font="medium"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/zh"><div><div flex="~"><span m="r-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 class="p-1"><span m="r-1" text="brand">English</span></div></div></div></div></div></div></div><div class="social-links WIILt flex-center" pos="relative"><div h="full" flex="~" gap="x-4" align-items-center="~" transition="color duration-300"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer"><div class="a9VBM"><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><div class="B7xTH"><button><svg width="18" height="24" viewBox="0 0 32 32" hight="18"><path fill="var(--modern-c-gray)" 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><p class="JFbLy">Search</p><div><span>⌘</span><span>K</span></div></button></div><div class="cqbI7"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--modern-c-gray)" 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></div></div></div></div></div></header><section><div p="t-0" m="md:t-14" class="NycN9"><div class="htA00"><button flex="~ center" class="i_YqX"><div text="md" m="r-2"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"></path></svg></div><span text="sm">Menu</span></button></div><aside class="modern-scrollbar WSh16 "><div m="t-1"><nav><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Introduction</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/intro/welcome.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Welcome to Module Tools</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/intro/why-module-engineering-solution.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Why module project solution</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/intro/getting-started.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Quick Start</div></a></div></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Basic Guide</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/before-getting-started.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Before you start</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/command-preview.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Command Preview</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/modify-output-product.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">modify-output-product</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/use-micro-generator.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Using the Microgenerator</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/using-storybook.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Using Storybook</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/test-your-project.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Testing Projects</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/publish-your-project.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Versioning and Publishing</div></a></div></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Advanced Guide</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/in-depth-about-build.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">In-depth understanding of build</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/in-depth-about-dev-command.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">In-depth understanding of the dev command</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/copy.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Use the Copy Tools</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/external-dependency.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">How to handle third-party dependencies</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/build-umd.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Build umd products</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/asset.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Handle static resource files</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/theme-config.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Theme Configuration</div></a></div></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Best practices</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/best-practices/components.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="DYqu8" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Developing Components</div></a></div></div></div></section></nav></div></aside><div flex="~ shrink-0" class="Attzr"><div w="full"><div class="modern-doc"><!--$--><h1 id="developing-components"><a class="header-anchor" aria-hidden="true" href="#developing-components">#</a>Developing Components</h1>
+<p>This chapter will describe how to develop component projects using the module engineering solution.</p>
+<h1 id="-initialize-the-project"><a class="header-anchor" aria-hidden="true" href="#-initialize-the-project">#</a># Initialize the project</h1>
+<section class="ch-spotlight  "><div class="ch-spotlight-tabs"><div></div><div class="ch-spotlight-tab"><p>It is recommended to use the <code>@modern-js/create</code> command to initialize an npm project.</p></div><div class="ch-spotlight-tab"><p>The initialized directory structure.</p></div><div class="ch-spotlight-tab"><p>Modify the <code>. /src/index.ts</code> file suffix and content.</p><p>At this point, a component project is initialized.</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="Interactive" 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>Interactive</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>npx @modern-js/create components-project</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>? Please select the solution you want to create Module Solution</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>? Package Name components-demo</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>? Development Language TS</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>? Package Management Tool pnpm</span></div></div><br/></code></div></div></div></div></div></section>
+<h2 id="debugging-code-with-storybook"><a class="header-anchor" aria-hidden="true" href="#debugging-code-with-storybook">#</a>Debugging code with Storybook</h2>
+<section class="ch-spotlight  "><div class="ch-spotlight-tabs"><div></div><div class="ch-spotlight-tab"><p>Execute the <code>new</code> command in the project root directory to enable the Storybook feature.</p></div><div class="ch-spotlight-tab"><p>Once successfully opened, you will see that a new dependency has been added to <code>package.json</code>. The <code>stories</code> directory and related initialization files are also created.</p></div><div class="ch-spotlight-tab"><p>After initialization, the <code>tsconfig.json</code> file in the <code>. /stories</code> directory, the <code>tsconfig.json</code> file is set by default with the <code>paths</code> configuration of the same name as the project.</p></div><div class="ch-spotlight-tab"><p>Such a configuration allows you to introduce code in Story code directly using the name of the project.</p></div><div class="ch-spotlight-tab"><p>At this point Storybook identifies the entry point for the imported code based on fields like <code>main</code>, <code>exports</code> in the project&#x27;s <code>package.json</code> file.
+The location of the type file is determined by the <code>types</code> field.</p></div><div class="ch-spotlight-tab"><p>While importing source code for debugging is also supported, debugging using project artifacts is more reliable.</p><p>Debugging with source code has a limitation: some configurations are not equivalent in Storybook and in the original build support.</p><p><strong>This is why debugging with the product is recommended</strong>.</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="Terminal" 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>Terminal</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>pnpm run new</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>? Action Enable features</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>? Enable features Enable Visual Testing (Storybook)</span></div></div><br/></code></div></div></div></div></div></section>
+<h2 id="developing-styles"><a class="header-anchor" aria-hidden="true" href="#developing-styles">#</a>Developing Styles</h2>
+<p>Next we can add styles to the component.</p>
+<p>The following capabilities are currently supported for developing styles.</p>
+<ul>
+<li>CSS/PostCSS</li>
+<li>Less</li>
+<li>Scss/Sass</li>
+<li>Tailwind CSS</li>
+<li>CSS Modules</li>
+</ul>
+<h3 id="csspostcss"><a class="header-anchor" aria-hidden="true" href="#csspostcss">#</a>CSS/PostCSS</h3>
+<p>The module project supports PostCSS and has the following built-in postcss plugins.</p>
+<ul>
+<li><a href="https://github.com/luisrudge/postcss-flexbugs-fixes" target="_blank" rel="nofollow">flexbugs-fixes</a></li>
+<li><a href="https://github.com/postcss/postcss-custom-properties" target="_blank" rel="nofollow">custom-properties</a></li>
+<li><a href="https://github.com/maximkoretskiy/postcss-initial" target="_blank" rel="nofollow">initial</a></li>
+<li><a href="https://github.com/shrpne/postcss-page-break" target="_blank" rel="nofollow">page-break</a></li>
+<li><a href="https://github.com/postcss/postcss-font-variant" target="_blank" rel="nofollow">font-variant</a></li>
+<li><a href="https://github.com/postcss/postcss-media-minmax" target="_blank" rel="nofollow">media-minmax</a></li>
+<li><a href="https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting#readme" target="_blank" rel="nofollow">nesting</a></li>
+</ul>
+<p>So we can create <code>.css</code> files in our projects and use the syntax support and capabilities provided by these plugins directly in our css files.</p>
+<section class="ch-spotlight  "><div class="ch-spotlight-tabs"><div></div><div class="ch-spotlight-tab"><p>Source Code.</p></div><div class="ch-spotlight-tab"><p>css product.</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="./src/index.css" 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.css</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>a,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>b {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  color: red;</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>  /* &quot;&amp;&quot; comes first */</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  &amp; c,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  &amp; d {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    color: white;</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>  /* &quot;&amp;&quot; comes later, requiring &quot;@nest&quot; */</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  @nest e &amp; {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    color: yellow;</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></section>
+<h3 id="less"><a class="header-anchor" aria-hidden="true" href="#less">#</a>Less</h3>
+<p>Module projects support development styles using Less.</p>
+<blockquote>
+<p>Currently supported version is 4.1.3</p>
+</blockquote>
+<section class="ch-spotlight  "><div class="ch-spotlight-tabs"><div></div><div class="ch-spotlight-tab"><p>Source Code.</p></div><div class="ch-spotlight-tab"><p>Less product.</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="./src/common.less" 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>common.less</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>@bg: black;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>@bg-light: boolean(luma(@bg) &gt; 50%);</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>div {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  background: @bg;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  color: if(@bg-light, black, white);</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><br/></code></div></div></div></div></div></section>
+<h3 id="sassscss"><a class="header-anchor" aria-hidden="true" href="#sassscss">#</a>Sass/Scss</h3>
+<p>Module projects support developing styles using Scss/Sass.</p>
+<blockquote>
+<p>Currently supported version is 1.54.4</p>
+</blockquote>
+<section class="ch-spotlight  "><div class="ch-spotlight-tabs"><div></div><div class="ch-spotlight-tab"><p>源代码。</p></div><div class="ch-spotlight-tab"><p>Less product.</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="./src/common.sass" 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>common.sass</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>$font-stack: Helvetica, sans-serif;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>$primary-color: #333;</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>body {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  font: 100% $font-stack;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  color: $primary-color;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><br/></code></div></div></div></div></div></section>
+<h3 id="tailwind-css"><a class="header-anchor" aria-hidden="true" href="#tailwind-css">#</a>Tailwind CSS</h3>
+<p>The module project supports the development of component styles using Tailwind CSS.</p>
+<p>By default, this feature is not enabled in the module project, you need to enable it as follows.</p>
+<section class="ch-spotlight  "><div class="ch-spotlight-tabs"><div></div><div class="ch-spotlight-tab"><p>The Tailwind CSS feature can be enabled by executing the <code>new</code> command in the project root directory.</p></div><div class="ch-spotlight-tab"><p>Once successfully opened, you will see that a new dependency has been added to <code>package.json</code>.</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="Terminal" 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>Terminal</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>pnpm run new</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>? Action Enable features</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>? Enable features Enable Visual Testing (Storybook)</span></div></div><br/></code></div></div></div></div></div></section>
+<p>Tailwind CSS offers two ways to use it.</p>
+<h4 id="html-class"><a class="header-anchor" aria-hidden="true" href="#html-class">#</a>HTML class</h4>
+<section class="ch-spotlight  "><div class="ch-spotlight-tabs"><div></div><div class="ch-spotlight-tab"><p>Tailwind CSS supports adding styles to HTML tags by using class names.</p></div><div class="ch-spotlight-tab"><p>**When using HTML class names, be sure to import the Tailwind CSS equivalent css file. **</p></div><div class="ch-spotlight-tab"><p>Style product.</p><blockquote>
+<p>This is a bundle build.</p>
+</blockquote></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="./src/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">./src/</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 &#x27;tailwindcss/utilities.css&#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 () =&gt; {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  return &lt;div className=&quot;bg-black text-white&quot;&gt;hello world&lt;/div&gt;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div></div></div></div></section>
+<h4 id="apply"><a class="header-anchor" aria-hidden="true" href="#apply">#</a><code>@apply</code></h4>
+<p>Tailwind CSS provides the <a href="https://v2.tailwindcss.com/docs/functions-and-directives#apply" target="_blank" rel="nofollow"><code>@apply</code></a> directive, which allows us to inline the styles provided by Tailwind CSS into the styles we write.</p>
+<p><code>@apply</code> can be used in CSS, Less, and Sass.</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>.btn {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  @apply font-bold py-2 px-4 rounded;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><br/></code></div></div>
+<p>However, there are some things to keep in mind when using Less and Sass.</p>
+<h5 id="sass"><a class="header-anchor" aria-hidden="true" href="#sass">#</a>Sass</h5>
+<p>When using Tailwind with Sass, the presence of <code>!important</code> after <code>@apply</code> requires interpolation to get Sass to compile correctly.</p>
+<section class="ch-spotlight  "><div class="ch-spotlight-tabs"><div></div><div class="ch-spotlight-tab"><p>It does not work properly.</p></div><div class="ch-spotlight-tab"><p>Can work properly.</p></div></div><div class="ch-spotlight-sticker"><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>.alert {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  @apply bg-red-500 !important;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><br/></code></div></div></div></section>
+<h5 id="less-1"><a class="header-anchor" aria-hidden="true" href="#less-1">#</a>Less</h5>
+<p>When using Tailwind with Less, you cannot nest Tailwind&#x27;s <code>@screen</code> directive.</p>
+<section class="ch-spotlight  "><div class="ch-spotlight-tabs"><div></div><div class="ch-spotlight-tab"><p>It does not work properly.</p></div><div class="ch-spotlight-tab"><p>Instead, use regular media queries and the <code>theme()</code> function to reference your screen size, or simply don&#x27;t nest your <code>@screen</code> directive.</p></div></div><div class="ch-spotlight-sticker"><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>.card {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  @apply rounded-none;</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>  @screen sm {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    @apply rounded-lg;</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></section>
+<h4 id="recommended-method"><a class="header-anchor" aria-hidden="true" href="#recommended-method">#</a>Recommended method</h4>
+<p>**It is recommended to develop styles in the way specified by <code>@apply</code>, so that only styles inlined by directives are included in the style product. **</p>
+<p>When adding styles using HTML class names, by default Tailwind will not only add the styles corresponding to its own class name to the product, but will also have additional style code that may not affect its own styles.</p>
+<h4 id="the-difference-between-bundle-and-bundleless-build-products"><a class="header-anchor" aria-hidden="true" href="#the-difference-between-bundle-and-bundleless-build-products">#</a>The difference between bundle and bundleless build products</h4>
+<p>For the following code, there is a big difference between the bundle and bundleless modes of building products.</p>
+<blockquote>
+<p>The so-called bundle and bundleless can be found in [[Bundle and Bundleless]](/en/guide/advance/in-depth-about-build#bundle- and-bundleless)</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="./src/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">./src/</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 &#x27;tailwindcss/utilities.css&#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 () =&gt; {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  return &lt;div className=&quot;bg-black text-white&quot;&gt;hello world11&lt;/div&gt;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div></div></div>
+<p>In Bundle mode, third-party dependencies are packaged in.</p>
+<p>For styles, a separate product file is generated, and there is no code related to importing styles in the Js product file.</p>
+<p>If you need to inject styles into Js products, you can enable the <a href="/module-tools/en/api/config/build-config.html#inject"><code>style.inject</code> API</a>.</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="./dist/es/index.css" 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">./dist/es/</span>index.css</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>/* ../../node_modules/.pnpm/tailwindcss@2.2.19/node_modules/tailwindcss/utilities.css */</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>.table {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  display: table;</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>@keyframes spin {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  to {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    transform: rotate(360deg);</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>@keyframes ping {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  75%, 100% {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    transform: scale(2);</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    opacity: 0;</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>@keyframes pulse {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  50% {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    opacity: .5;</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>@keyframes bounce {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  0%, 100% {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    transform: translateY(-25%);</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);</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>  50% {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    transform: none;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);</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>.bg-black {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  --tw-bg-opacity: 1;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));</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>.text-white {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  --tw-text-opacity: 1;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  color: rgba(255, 255, 255, var(--tw-text-opacity));</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>::before,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>::after {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  --tw-shadow: 0 0 #0000 ;</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>::before,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>::after {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  --tw-ring-inset: var(--tw-empty, );</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  --tw-ring-offset-width: 0px;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  --tw-ring-offset-color: #fff;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  --tw-ring-color: rgba(59, 130, 246, 0.5);</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  --tw-ring-offset-shadow: 0 0 #0000;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  --tw-ring-shadow: 0 0 #0000 ;</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>@media (min-width: 640px) {</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>@media (min-width: 768px) {</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>@media (min-width: 1024px) {</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>@media (min-width: 1280px) {</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>@media (min-width: 1536px) {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><br/></code></div></div><div class="ch-frame-title-bar" style="color:#C5C5C5;background:#2e3440"><div style="position:absolute;height:1px;background:#3b425201;width:100%;top:0;z-index:1"></div><div></div><div title="./dist/es/index.js" data-ch-tab="south" 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">./dist/es/</span>index.js</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="south" 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>// src/index.tsx</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>import { jsx } from &quot;react/jsx-runtime&quot;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>var src_default = () =&gt; {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  return /* @__PURE__ */ jsx(&quot;div&quot;, {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    className: &quot;bg-black text-white&quot;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    children: &quot;hello world11&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>export {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  src_default as default</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div></div></div>
+<p>In Bundleless mode, no third-party dependencies are packaged in, and no style products are generated at this time.</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="./dist/es/index.js" 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">./dist/es/</span>index.js</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 { jsx } from &#x27;react/jsx-runtime&#x27;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>import &#x27;tailwindcss/utilities.css&#x27;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>var src_default = () =&gt; {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  return /* @__PURE__ */ jsx(&#x27;div&#x27;, {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    className: &#x27;bg-black text-white&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    children: &#x27;hello world11&#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>export { src_default as default };</span></div></div><br/></code></div></div></div></div>
+<h3 id="css-modules"><a class="header-anchor" aria-hidden="true" href="#css-modules">#</a>CSS Modules</h3>
+<p>Module projects support the development of styles using CSS Modules. By default, the following files are recognized as CSS Module files.</p>
+<ul>
+<li><code>.module.css</code></li>
+<li><code>.module.less</code></li>
+<li><code>.module.scss</code></li>
+<li><code>.module.sass</code></li>
+</ul>
+<p>If you need to configure CSS Modules, you can check out the API at</p>
+<ul>
+<li><a href="/module-tools/en/api/config/build-config.html#automodules">autoModules</a></li>
+<li><a href="/module-tools/en/api/config/build-config.html#modules">modules</a></li>
+</ul>
+<p>The following is a code example.</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.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">./src/</span>index.tsx</div></div><div title="./src/index.module.css" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-inactive" style="background:#2e3440;color:#d8dee966;border-right-color:#3b425200;border-bottom-color:#2e3440"><div><span style="opacity:0.5">./src/</span>index.module.css</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 style from &#x27;./index.module.css&#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 () =&gt; {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  return &lt;div className={style.btn}&gt;hello world&lt;/div&gt;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div></div></div>
+<h2 id="configuring-build-products"><a class="header-anchor" aria-hidden="true" href="#configuring-build-products">#</a>Configuring build products</h2>
+<p>Based on most scenarios of component project usage, <strong>it is recommended to use the <code>npm-component</code> build preset</strong>. This preset yields a product directory structure of</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>.</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>├── dist</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>│   ├── es</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>│   ├── lib</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>│   └── types</span></div></div><br/></code></div></div>
+<ul>
+<li><code>. /dist/es</code>: Contains bundleless products in ES modules format that support the es6 syntax.</li>
+<li><code>. /dist/lib</code>: Contains bundleless products in CommonJS format with support for es6 syntax.</li>
+<li><code>. /dist/types</code>: Contains the types file.</li>
+</ul>
+<p>The <a href="/module-tools/en/api/config/build-preset.html"><code>buildPreset</code></a> can be configured manually if there is a requirement to use syntax support, and supports modifying the supported syntax by adding a suffix to <code>npm-component</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>export default defineConfig({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  buildPreset: &#x27;npm-component-es2019&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br/></code></div></div>
+<p>If you have special needs for the build product directory structure, you can use the <a href="/module-tools/en/api/config/build-config.html"><code>buildConfig</code> API</a>, which can be used by the following documentation.</p>
+<ul>
+<li><a href="/module-tools/en/guide/basic/modify-output-product.html#build-configuration-object">modify-output-product</a></li>
+<li><a href="/module-tools/en/guide/advance/in-depth-about-build.html">in-depth-about-build</a></li>
+</ul>
+<h2 id="testing-components"><a class="header-anchor" aria-hidden="true" href="#testing-components">#</a>Testing components</h2>
+<p>For more information on how to test components, please refer to <a href="/module-tools/en/guide/basic/test-your-project.html">[Test project]</a>.</p>
+<h2 id="releasing-components"><a class="header-anchor" aria-hidden="true" href="#releasing-components">#</a>Releasing components</h2>
+<p>It is recommended to use module project to provide version publishing function, you can refer to <a href="/module-tools/en/guide/basic/publish-your-project.html">[Versioning and publishing]</a>.</p><!--/$--><div><footer m="t-8"><div flex="~ col sm:row" justify="sm:around" gap="2" p="t-6"><div flex="~ col" class="zPHT1"><a class="qVky9 gMyXy" target="" cursor="pointer" href="/module-tools/en/guide/advance/theme-config.html"><span class="pA5H9">Previous Page</span><span class="K2e43">Theme Configuration</span></a></div><div flex="~ col" class="oflez"><a class="qVky9 gMyXy oflez" target="" cursor="pointer" href="/module-tools/en/plugins/guide/getting-started.html"><span class="pA5H9">Next page</span><span class="K2e43">Quick Start</span></a></div></div></footer></div></div></div><div class="xH_Uj" style="min-height:calc(100vh - (var(--modern-nav-height) + 32px))"><div><div flex="~ col"><div class="&lt;lg:hidden"><div p="l-4" text="sm" font-medium="~" id="aside-container" style="border-left:1px solid var(--modern-c-divider-light)" class="relative"><div class="absolute" opacity="0" w="1px" h="18px" bg="brand" style="top:33px;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="~" class="leading-7" text="sm" font="semibold">ON THIS PAGE</div><nav><ul class="relative"><li><a href="#debugging-code-with-storybook" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Debugging code with Storybook</a></li><li><a href="#developing-styles" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Developing Styles</a></li><li><a href="#csspostcss" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">CSS/PostCSS</a></li><li><a href="#less" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Less</a></li><li><a href="#sassscss" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Sass/Scss</a></li><li><a href="#tailwind-css" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Tailwind CSS</a></li><li><a href="#html-class" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">HTML class</a></li><li><a href="#apply" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">@apply</a></li><li><a href="#recommended-method" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Recommended method</a></li><li><a href="#the-difference-between-bundle-and-bundleless-build-products" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">The difference between bundle and bundleless build products</a></li><li><a href="#css-modules" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">CSS Modules</a></li><li><a href="#configuring-build-products" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Configuring build products</a></li><li><a href="#testing-components" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Testing components</a></li><li><a href="#releasing-components" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Releasing components</a></li></ul></nav></div></div></div></div></div></div></div></section></div></div><div id="search-container"></div></body></html>

package/doc_build/en/guide/intro/getting-started.html ADDED Viewed

@@ -0,0 +1,51 @@
+<!doctype html><html  lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title data-rh="true">Quick Start - Module Tools</title><meta data-rh="true" name="description" content="Module Engineering Solutions"/>
+<script id="check-dark-light">
+;(() => {
+  const saved = localStorage.getItem('modern-theme-appearance')
+  const prefereDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+  if (!saved || saved === 'auto' ? prefereDark : saved === 'dark') {
+    document.documentElement.classList.add('dark')
+  }
+})()
+</script>
+<link rel="icon" href="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/logo-1x-0104.png"><script>!function(){"use strict";var e,n,i,t,o,u={},r={};function a(e){var n=r[e];if(void 0!==n)return n.exports;var i=r[e]={exports:{}};return u[e].call(i.exports,i,i.exports,a),i.exports}a.m=u,e=[],a.O=function(n,i,t,o){if(!i){var u=1/0;for(d=0;d<e.length;d++){i=e[d][0],t=e[d][1],o=e[d][2];for(var r=!0,_=0;_<i.length;_++)(!1&o||u>=o)&&Object.keys(a.O).every((function(e){return a.O[e](i[_])}))?i.splice(_--,1):(r=!1,o<u&&(u=o));if(r){e.splice(d--,1);var c=t();void 0!==c&&(n=c)}}return n}o=o||0;for(var d=e.length;d>0&&e[d-1][2]>o;d--)e[d]=e[d-1];e[d]=[i,t,o]},a.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(n,{a:n}),n},i=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},a.t=function(e,t){if(1&t&&(e=this(e)),8&t)return e;if("object"==typeof e&&e){if(4&t&&e.__esModule)return e;if(16&t&&"function"==typeof e.then)return e}var o=Object.create(null);a.r(o);var u={};n=n||[null,i({}),i([]),i(i)];for(var r=2&t&&e;"object"==typeof r&&!~n.indexOf(r);r=i(r))Object.getOwnPropertyNames(r).forEach((function(n){u[n]=function(){return e[n]}}));return u.default=function(){return e},a.d(o,u),o},a.d=function(e,n){for(var i in n)a.o(n,i)&&!a.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},a.f={},a.e=function(e){return Promise.all(Object.keys(a.f).reduce((function(n,i){return a.f[i](e,n),n}),[]))},a.u=function(e){return"static/js/async/"+({229:"en_guide_intro_getting-started",237:"zh_api_config_build-config",262:"en_plugins_official-list_plugin-banner",315:"en_index",421:"zh_api_config_testing",727:"zh_guide_advance_in-depth-about-build",775:"zh_guide_basic_before-getting-started",1085:"en_api_index",1108:"zh_guide_intro_why-module-engineering-solution",1178:"zh_api_plugin-api_plugin-hooks",1180:"zh_guide_advance_theme-config",1189:"zh_api_index",1677:"en_api_plugin-api_plugin-hooks",1756:"zh_guide_basic_command-preview",1895:"zh_index",2013:"zh_guide_best-practices_components",2020:"zh_guide_basic_publish-your-project",2033:"en_guide_intro_welcome",2034:"zh_guide_intro_welcome",2097:"en_api_config_plugins",2477:"zh_plugins_official-list_plugin-import",2532:"en_guide_basic_use-micro-generator",2540:"zh_guide_advance_in-depth-about-dev-command",2556:"en_api_config_testing",2611:"zh_guide_advance_copy",2633:"zh_guide_intro_getting-started",2678:"en_guide_basic_before-getting-started",2821:"zh_guide_basic_modify-output-product",2892:"zh_plugins_guide_setup-function",3032:"en_guide_basic_publish-your-project",3415:"zh_plugins_official-list_plugin-banner",3741:"en_guide_basic_test-your-project",3806:"zh_api_config_plugins",4260:"en_guide_advance_external-dependency",4390:"zh_plugins_official-list_overview",4663:"en_guide_advance_build-umd",4695:"zh_api_config_design-system",4749:"en_plugins_guide_setup-function",4837:"zh_guide_advance_build-umd",5057:"en_guide_advance_copy",5107:"zh_guide_basic_using-storybook",5284:"zh_plugins_guide_plugin-object",5300:"en_plugins_guide_plugin-object",5532:"zh_guide_advance_external-dependency",5578:"en_guide_basic_modify-output-product",5654:"en_api_config_build-config",5723:"zh_guide_advance_asset",5966:"zh_guide_basic_test-your-project",6098:"en_guide_advance_theme-config",7241:"zh_api_config_build-preset",7294:"zh_guide_basic_use-micro-generator",7401:"en_guide_best-practices_components",7512:"en_guide_intro_why-module-engineering-solution",7571:"en_guide_basic_command-preview",8230:"en_guide_advance_asset",8687:"en_plugins_guide_getting-started",8782:"en_api_config_build-preset",8888:"en_plugins_official-list_plugin-import",8927:"en_guide_advance_in-depth-about-build",9220:"en_api_config_design-system",9479:"en_plugins_official-list_overview",9675:"en_guide_basic_using-storybook",9826:"en_guide_advance_in-depth-about-dev-command",9868:"zh_plugins_guide_getting-started"}[e]||e)+"."+{229:"fdf2a5e3",237:"e0239f0b",262:"c8fc2ef5",315:"9d8e7f26",421:"7af33726",727:"f74fb46b",775:"cb228032",1085:"e8c3584a",1108:"c5feb99d",1114:"d0e9a03f",1178:"54181e2b",1180:"9d46a256",1189:"83d48f6f",1677:"130c0839",1756:"d01b5121",1895:"bdf672c6",2013:"63e6ce1f",2020:"f1222d3a",2033:"e8402d15",2034:"e1854445",2097:"e2525188",2477:"d9e7fb77",2532:"1d9ade59",2540:"390bd229",2556:"bdfe73d2",2611:"0c87a269",2633:"ed054585",2678:"1da2f70c",2821:"511034ae",2892:"d79620be",3032:"6ffa1dcb",3415:"defbf67c",3741:"503389bd",3806:"bb32094e",4260:"21c368af",4390:"bded70c0",4663:"5912e38e",4695:"6f3e0d0a",4749:"bf63c2f5",4837:"cd0724c4",5057:"e73474a0",5107:"e684c97c",5284:"acf4be01",5300:"2799e64d",5532:"38ab900c",5578:"c1634e05",5654:"4b68a964",5723:"0abb6b82",5966:"bb4ee150",6098:"ed245a3c",7241:"af73b578",7294:"fbbfa670",7401:"db985beb",7512:"5b18a76a",7571:"16337618",8230:"29c82557",8687:"5c423f88",8782:"3c87d23b",8888:"dc5a5224",8927:"90beffab",9220:"bae5a6a4",9479:"226be4e5",9675:"2e1cf2bc",9826:"7be33ae4",9868:"d0775941"}[e]+".js"},a.miniCssF=function(e){},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t={},o="@modern-js/module-tools-docs:",a.l=function(e,n,i,u){if(t[e])t[e].push(n);else{var r,_;if(void 0!==i)for(var c=document.getElementsByTagName("script"),d=0;d<c.length;d++){var f=c[d];if(f.getAttribute("src")==e||f.getAttribute("data-webpack")==o+i){r=f;break}}r||(_=!0,(r=document.createElement("script")).charset="utf-8",r.timeout=120,a.nc&&r.setAttribute("nonce",a.nc),r.setAttribute("data-webpack",o+i),r.src=e),t[e]=[n];var s=function(n,i){r.onerror=r.onload=null,clearTimeout(g);var o=t[e];if(delete t[e],r.parentNode&&r.parentNode.removeChild(r),o&&o.forEach((function(e){return e(i)})),n)return n(i)},g=setTimeout(s.bind(null,void 0,{type:"timeout",target:r}),12e4);r.onerror=s.bind(null,r.onerror),r.onload=s.bind(null,r.onload),_&&document.head.appendChild(r)}},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.p="/module-tools/",function(){var e={6272:0};a.f.j=function(n,i){var t=a.o(e,n)?e[n]:void 0;if(0!==t)if(t)i.push(t[2]);else if(6272!=n){var o=new Promise((function(i,o){t=e[n]=[i,o]}));i.push(t[2]=o);var u=a.p+a.u(n),r=new Error;a.l(u,(function(i){if(a.o(e,n)&&(0!==(t=e[n])&&(e[n]=void 0),t)){var o=i&&("load"===i.type?"missing":i.type),u=i&&i.target&&i.target.src;r.message="Loading chunk "+n+" failed.\n("+o+": "+u+")",r.name="ChunkLoadError",r.type=o,r.request=u,t[1](r)}}),"chunk-"+n,n)}else e[n]=0},a.O.j=function(n){return 0===e[n]};var n=function(n,i){var t,o,u=i[0],r=i[1],_=i[2],c=0;if(u.some((function(n){return 0!==e[n]}))){for(t in r)a.o(r,t)&&(a.m[t]=r[t]);if(_)var d=_(a)}for(n&&n(i);c<u.length;c++)o=u[c],a.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return a.O(d)},i=self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[];i.forEach(n.bind(null,0)),i.push=n.bind(null,i.push.bind(i))}()}();</script><script defer="defer" src="/module-tools/static/js/lib-polyfill.0d49b811.js"></script><script defer="defer" src="/module-tools/static/js/lib-lodash.5ea7bf7d.js"></script><script defer="defer" src="/module-tools/static/js/lib-react.209d3da0.js"></script><script defer="defer" src="/module-tools/static/js/lib-router.6f1082f5.js"></script><script defer="defer" src="/module-tools/static/js/9061.555c88e4.js"></script><script defer="defer" src="/module-tools/static/js/main.457dc37f.js"></script><link href="/module-tools/static/css/main.0bdbae52.css" rel="stylesheet"></head><body ><div id="root"><div><header class="top-0 left-0 relative md:fixed w-full" style="z-index:var(--modern-z-index-nav);background:var(--modern-c-bg)"><div class="dHJzp
+          csOJo"></div><div class="z0Ov1 modern-doc-nav" p="x-6"><div flex="~" justify="between" align="items-center" h="full" class="bcLAe"><div class="undefined"><a href="/module-tools/en" w="full" h="full" text="1rem" font="semibold" transition="opacity duration-300" hover="opacity-60" class="flex items-center"><span>Module Tools</span></a></div><div flex="~ 1" justify="end" align-items-center="~"><div class="LPoOT"><div flex="~ sm:1" items="center" p="sm:l-4 sm:r-2"><div class="B7xTH"><button><svg width="18" height="24" viewBox="0 0 32 32" hight="18"><path fill="var(--modern-c-gray)" 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><p class="JFbLy">Search</p><div><span>⌘</span><span>K</span></div></button></div><div class="cqbI7"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--modern-c-gray)" 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></div></div><div class="menu" h="14"><div text="sm" font="medium" m="x-3" class="text-brand-dark"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/guide/intro/welcome.html">Guide</a></div><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/api/index.html">API</a></div><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/plugins/guide/getting-started.html">Plugins</a></div><div m="x-3" last="mr-0"><div h="14" class="relative" flex="~ center"><button flex="~ center" align="items-center" font="medium" text="sm text-1 hover:text-2" transition="color duration-200" class="nav-menu-group-button"><span m="r-1" text="sm" font="medium">v2.7.0</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 pos="top-13 right-0" m="x-0.8" transition="opacity duration-300" class="nav-menu-group-content absolute" style="opacity:0;visibility:hidden"><div class="p-3 w-full h-full min-w-128px max-h-100vh rounded-xl whitespace-nowrap bg-white" style="box-shadow:var(--modern-shadow-3);margin-right:-1.5rem;z-index:100;border:1px solid var(--modern-c-divider-light)"><div><div font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">Changelog<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div></div><div><div font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">Contributing<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div></div></div></div></div></div></div><div class="flex-center flex-row"><div flex="~" text="sm" font="bold" align="items-center" class="translation sjQjZ"><div m="x-1.5"><div h="14" class="relative" flex="~ center"><button flex="~ center" align="items-center" font="medium" text="sm text-1 hover:text-2" transition="color duration-200" class="nav-menu-group-button"><span m="r-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 pos="top-13 right-0" m="x-0.8" transition="opacity duration-300" class="nav-menu-group-content absolute" style="opacity:0;visibility:hidden"><div class="p-3 w-full h-full min-w-128px max-h-100vh rounded-xl whitespace-nowrap bg-white" style="box-shadow:var(--modern-shadow-3);margin-right:-1.5rem;z-index:100;border:1px solid var(--modern-c-divider-light)"><div><div font="medium"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/guide/intro/getting-started"><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">简体中文<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div></div><div><div class="rounded-md" p="y-1.6 l-3"><span m="r-1" text="brand">English</span></div></div></div></div></div></div></div><div class="sjQjZ modern-doc-appearance" align-items-center="center"><button class="xSrUP undefined" id="" type="button" role="switch"><span class="CSfjI"><span class="zDdMk"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="nk0gt"><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="A1HSI"><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 class="social-links WIILt flex-center" pos="relative"><div h="full" flex="~" gap="x-4" align-items-center="~" transition="color duration-300"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer"><div class="a9VBM"><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 class="yd31b"><button class=" eE8v3"><span class="pOzTZ"><span class="aD0WQ"></span><span class="GwaZ7"></span><span class="HyMv9"></span></span></button><div class="XAjwG " id="navScreen"><div class="VrSyn"><div class="YCP7r"><div w="full" class="LiNpS"><div text="sm" font="medium" m="x-3" class="text-brand-dark"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/guide/intro/welcome.html">Guide</a></div></div><div w="full" class="LiNpS"><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/api/index.html">API</a></div></div><div w="full" class="LiNpS"><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/plugins/guide/getting-started.html">Plugins</a></div></div><div w="full" class="LiNpS"><div m="x-3" last="mr-0"><div pos="relative" class=" FwXtz"><button class="YoOiJ"><span class="QFqBl">v2.7.0</span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" GPyuP "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="SEGAO"><div><div class="py-1" font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div><div flex="~"><span m="r-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><div><div class="py-1" font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div><div flex="~"><span m="r-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><div class="flex-center flex-col"><div class="mt-2 NeDxD" flex="~" justify="center"><button class="xSrUP undefined" id="" type="button" role="switch"><span class="CSfjI"><span class="zDdMk"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="nk0gt"><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="A1HSI"><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 flex="~" text="sm" font="bold" justify="center"><div m="x-1.5 y-1"><div pos="relative" class=" FwXtz"><button class="YoOiJ"><span class="QFqBl"><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=" GPyuP "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="SEGAO"><div><div class="py-1" font="medium"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/zh"><div><div flex="~"><span m="r-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 class="p-1"><span m="r-1" text="brand">English</span></div></div></div></div></div></div></div><div class="social-links WIILt flex-center" pos="relative"><div h="full" flex="~" gap="x-4" align-items-center="~" transition="color duration-300"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer"><div class="a9VBM"><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><div class="B7xTH"><button><svg width="18" height="24" viewBox="0 0 32 32" hight="18"><path fill="var(--modern-c-gray)" 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><p class="JFbLy">Search</p><div><span>⌘</span><span>K</span></div></button></div><div class="cqbI7"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--modern-c-gray)" 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></div></div></div></div></div></header><section><div p="t-0" m="md:t-14" class="NycN9"><div class="htA00"><button flex="~ center" class="i_YqX"><div text="md" m="r-2"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"></path></svg></div><span text="sm">Menu</span></button></div><aside class="modern-scrollbar WSh16 "><div m="t-1"><nav><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Introduction</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/intro/welcome.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Welcome to Module Tools</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/intro/why-module-engineering-solution.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Why module project solution</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/intro/getting-started.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="DYqu8" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Quick Start</div></a></div></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Basic Guide</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/before-getting-started.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Before you start</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/command-preview.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Command Preview</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/modify-output-product.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">modify-output-product</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/use-micro-generator.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Using the Microgenerator</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/using-storybook.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Using Storybook</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/test-your-project.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Testing Projects</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/publish-your-project.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Versioning and Publishing</div></a></div></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Advanced Guide</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/in-depth-about-build.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">In-depth understanding of build</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/in-depth-about-dev-command.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">In-depth understanding of the dev command</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/copy.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Use the Copy Tools</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/external-dependency.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">How to handle third-party dependencies</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/build-umd.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Build umd products</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/asset.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Handle static resource files</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/theme-config.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Theme Configuration</div></a></div></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Best practices</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/best-practices/components.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Developing Components</div></a></div></div></div></section></nav></div></aside><div flex="~ shrink-0" class="Attzr"><div w="full"><div class="modern-doc"><!--$--><h1 id="quick-start"><a class="header-anchor" aria-hidden="true" href="#quick-start">#</a>Quick Start</h1>
+<h2 id="3-minute-demo"><a class="header-anchor" aria-hidden="true" href="#3-minute-demo">#</a>3 minute demo</h2>
+<p>Want to experience Module Tools in action? The only prerequisite you need is <a href="https://github.com/nodejs/Release" target="_blank" rel="nofollow">Node.js LTS</a> and make sure your Node version is <strong>&gt;= 14.18.0</strong>.We recommend using the LTS version of Node.js 16.</p>
+<p>From your shell, install the following dependencies in your project.</p>
+<ul>
+<li><code>@modern-js/module-tools</code></li>
+<li><code>&quot;typescript&quot;</code> (omitted if not a TypeScript project)</li>
+</ul>
+<blockquote>
+<p>If it&#x27;s a TypeScript project, add the <code>&quot;typescript&quot;</code> dependency.</p>
+</blockquote>
+<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>npm install -D @modern-js/module-tools typescript</span></div></div><br/></code></div></div>
+<blockquote>
+<p>For projects that use pnpm or the Yarn package manager, just replace npm. <strong>pnpm is recommended</strong>.</p>
+</blockquote>
+<p>Next, create the <code>modern.config.(t|j)s</code> file in the root of the project.</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 moduleTools, { 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>    plugins: [moduleTools()],</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>})</span></div></div><br/></code></div></div>
+<p>Finally, add the command <code>&quot;build&quot;: &quot;modern build&quot;</code> to the project&#x27;s <code>package.json</code> file.</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>{</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  &quot;scripts&quot;: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &quot;build&quot;: &quot;modern build&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>
+<p>If your project has a <code>src/index.(js|jsx)</code> file or both <code>src/index.(ts|tsx)</code> and <code>tsconfig.json</code> files, then congratulations you can run the <code>npm run build</code> command directly to build your project with Module Tools.</p>
+<p><strong>If you want to see the complete project using the modular engineering scheme, you can execute the following command</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>git clone https://github.com/web-infra-dev/module-tools-examples</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>cd module-tools-example/base</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>## Execute the build.</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>pnpm build</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>## Execute the build in listening mode.</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>pnpm build --watch</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>## Start Storybook</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>pnpm dev storybook</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>## Test</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>pnpm test</span></div></div><br/></code></div></div>
+<p><strong>If you want to create a complete module project, you can execute the following command:</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>npx @modern-js/create your-project-dir-name</span></div></div><br/></code></div></div>
+<div class="modern-directive info"><p class="modern-directive-title">INFO</p><div class="modern-directive-content"><p>
+Execute <code>npx @modern-js/create -h</code>for more command line arguments</p></div></div>
+<p>Next, in the issue interaction, follow the options below.</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>? Please select the type of project you want to create Module</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>? Please fill in the project name library</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>? Please select the development language TS</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>? Please select the package management tool pnpm</span></div></div><br/></code></div></div>
+<blockquote>
+<p>The project name is the value of the <code>&quot;name&quot;</code> field in <code>package.json</code>.</p>
+</blockquote>
+<p>Then the process of initializing the project will start. After the project directory and files are generated and the dependencies are installed, a complete module project is created.</p>
+<p>We can start the project build directly with the <code>pnpm build</code> command, and start the build in watching mode with the <code>pnpm build --watch</code> command.</p>
+<h2 id="lets-get-started"><a class="header-anchor" aria-hidden="true" href="#lets-get-started">#</a>Let&#x27;s get started</h2>
+<p>Choose your tutorial scenario...</p>
+<ul>
+<li>I&#x27;m a beginner and need to learn <a href="/module-tools/en/guide/basic/before-getting-started.html">basic usage</a> of Module Tools.</li>
+<li>I have learned the basic usage of Module Tools and can learn <a href="/module-tools/en/guide/advance/in-depth-about-build.html">advanced usage</a> of Module Tools.</li>
+<li>I need to expand my project capabilities and need to learn how to develop <a href="/module-tools/en/plugins/guide/getting-started.html">plugins</a> for Module Tools.</li>
+</ul><!--/$--><div><footer m="t-8"><div flex="~ col sm:row" justify="sm:around" gap="2" p="t-6"><div flex="~ col" class="zPHT1"><a class="qVky9 gMyXy" target="" cursor="pointer" href="/module-tools/en/guide/intro/why-module-engineering-solution.html"><span class="pA5H9">Previous Page</span><span class="K2e43">Why module project solution</span></a></div><div flex="~ col" class="oflez"><a class="qVky9 gMyXy oflez" target="" cursor="pointer" href="/module-tools/en/guide/basic/before-getting-started.html"><span class="pA5H9">Next page</span><span class="K2e43">Before you start</span></a></div></div></footer></div></div></div><div class="xH_Uj" style="min-height:calc(100vh - (var(--modern-nav-height) + 32px))"><div><div flex="~ col"><div class="&lt;lg:hidden"><div p="l-4" text="sm" font-medium="~" id="aside-container" style="border-left:1px solid var(--modern-c-divider-light)" class="relative"><div class="absolute" opacity="0" w="1px" h="18px" bg="brand" style="top:33px;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="~" class="leading-7" text="sm" font="semibold">ON THIS PAGE</div><nav><ul class="relative"><li><a href="#3-minute-demo" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">3 minute demo</a></li><li><a href="#lets-get-started" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Let&#x27;s get started</a></li></ul></nav></div></div></div></div></div></div></div></section></div></div><div id="search-container"></div></body></html>