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/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">开发组件 - Module Tools</title><meta data-rh="true" name="description" content="模块工程解决方案"/>
+<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/" 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/guide/intro/welcome.html">指南</a></div><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/api/index.html">API</a></div><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/plugins/guide/getting-started.html">插件</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">更新日志<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">贡献指南<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 class="rounded-md" p="y-1.6 l-3"><span m="r-1" text="brand">简体中文</span></div></div><div><div font="medium"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/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">English<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="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/guide/intro/welcome.html">指南</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/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/plugins/guide/getting-started.html">插件</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">更新日志</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">贡献指南</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="p-1"><span m="r-1" text="brand">简体中文</span></div></div><div><div class="py-1" font="medium"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en"><div><div flex="~"><span m="r-1">English</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div></div></div></div></div></div><div class="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">介绍</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/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">欢迎使用</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">为什么需要模块工程解决方案</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">快速开始</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">基础使用</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/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">开始之前</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">命令预览</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">修改输出产物</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">使用微生成器</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">使用 Storybook</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">测试项目</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">版本管理与发布</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">进阶指南</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/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">深入理解构建</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">深入理解 dev 命令</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">使用 Copy 工具</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">如何处理第三方依赖</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">构建 umd 产物</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">主题配置</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">处理静态资源文件</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">最佳实践</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/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">开发组件</div></a></div></div></div></section></nav></div></aside><div flex="~ shrink-0" class="Attzr"><div w="full"><div class="modern-doc"><!--$--><h1 id="开发组件"><a class="header-anchor" aria-hidden="true" href="#开发组件">#</a>开发组件</h1>
+<p>本章将要介绍如何使用模块工程解决方案开发组件项目。</p>
+<h2 id="初始化项目"><a class="header-anchor" aria-hidden="true" href="#初始化项目">#</a>初始化项目</h2>
+<section class="ch-spotlight  "><div class="ch-spotlight-tabs"><div></div><div class="ch-spotlight-tab"><p>推荐使用 <code>@modern-js/create</code> 命令来初始化一个 npm 项目。</p></div><div class="ch-spotlight-tab"><p>初始化的目录结构。</p></div><div class="ch-spotlight-tab"><p>修改 <code>./src/index.ts</code> 文件后缀和内容。</p><p>此时就初始化了一个组件项目。</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="交互式问题" 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>交互式问题</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>? 请选择你想创建的工程类型 模块</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>? 请填写项目名称 components-demo</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>? 请选择开发语言 TS</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>? 请选择包管理工具 pnpm</span></div></div><br/></code></div></div></div></div></div></section>
+<h2 id="使用-storybook-调试代码"><a class="header-anchor" aria-hidden="true" href="#使用-storybook-调试代码">#</a>使用 Storybook 调试代码</h2>
+<section class="ch-spotlight  "><div class="ch-spotlight-tabs"><div></div><div class="ch-spotlight-tab"><p>在项目根目录下执行 <code>new</code> 命令，可以开启 Storybook 功能。</p></div><div class="ch-spotlight-tab"><p>成功开启后，会看到 <code>package.json</code> 中新增了依赖。同时创建了 <code>stories</code> 目录和相关的初始化文件。</p></div><div class="ch-spotlight-tab"><p>初始化后，在 <code>./stories</code> 目录下的 <code>tsconfig.json</code> 文件中默认设置了与项目同名的 <code>paths</code> 配置。</p></div><div class="ch-spotlight-tab"><p>这样的配置可以让你在 Story 代码中直接使用项目的名称引入代码。</p></div><div class="ch-spotlight-tab"><p>此时 Storybook 会根据项目的 <code>package.json</code> 文件中的 <code>main</code>、<code>exports</code> 这样的字段确认导入代码的入口；
+根据 <code>types</code> 字段确定类型文件的位置。</p></div><div class="ch-spotlight-tab"><p>虽然也支持导入源代码进行调试，不过使用项目产物调试更加可靠。</p><p>使用源代码调试存在局限性：某些配置无法在 Storybook 和原本构建支持的配置等价使用。</p><p><strong>因此更推荐使用产物进行调试</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="终端" 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>终端</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>? 请选择你想要的操作 启用可选功能</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>? 启用可选功能 启用「Storybook」</span></div></div><br/></code></div></div></div></div></div></section>
+<h2 id="开发样式"><a class="header-anchor" aria-hidden="true" href="#开发样式">#</a>开发样式</h2>
+<p>接下来我们可以给组件添加样式。</p>
+<p>目前支持开发样式的能力有：</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>模块工程支持 PostCSS，并且内置了以下 postcss 插件：</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>因此我们可以在项目中创建 <code>.css</code> 文件，并且可以直接在 css 文件中使用这些插件提供的语法支持和能力。</p>
+<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>css 产物。</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>模块工程支持使用 Less 开发样式。</p>
+<blockquote>
+<p>目前支持的版本为 4.1.3</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 产物。</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>模块工程支持使用 Scss/Sass 开发样式。</p>
+<blockquote>
+<p>目前支持的版本为 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 产物。</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>模块工程支持使用 Tailwind CSS 开发组件样式。</p>
+<p>默认情况下，模块工程没有开启该功能，需要按照下面的方式开启它。</p>
+<section class="ch-spotlight  "><div class="ch-spotlight-tabs"><div></div><div class="ch-spotlight-tab"><p>在项目根目录下执行 <code>new</code> 命令，可以开启 Tailwind CSS 功能。</p></div><div class="ch-spotlight-tab"><p>成功开启后，会看到 <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="终端" 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>终端</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>? 请选择你想要的操作 启用可选功能</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>? 启用可选功能 启用「Storybook」</span></div></div><br/></code></div></div></div></div></div></section>
+<p>Tailwind CSS 提供了两种使用方式：</p>
+<h4 id="html-类名"><a class="header-anchor" aria-hidden="true" href="#html-类名">#</a>HTML 类名</h4>
+<section class="ch-spotlight  "><div class="ch-spotlight-tabs"><div></div><div class="ch-spotlight-tab"><p>Tailwind CSS 支持在 HTML 标签上使用类名的方式增加样式。</p></div><div class="ch-spotlight-tab"><p><strong>当使用 HTML 类名的时候，一定要注意导入 Tailwind CSS 相应的 css 文件。</strong></p></div><div class="ch-spotlight-tab"><p>样式产物。</p><blockquote>
+<p>此时是 bundle 构建。</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 提供了 <a href="https://v2.tailwindcss.com/docs/functions-and-directives#apply" target="_blank" rel="nofollow"><code>@apply</code></a> 指令，可以通过它将 Tailwind CSS 提供的样式内联到我们编写的样式中。</p>
+<p><code>@apply</code> 可以用于 CSS、Less、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>但是使用过程中，对于 Less 和 Sass 有些情况需要注意：</p>
+<h5 id="sass"><a class="header-anchor" aria-hidden="true" href="#sass">#</a>Sass</h5>
+<p>当将 Tailwind 与 Sass 一起使用时，<code>@apply</code> 后面存在 <code>!important</code> 的时候，需要使用插值来让 Sass 正确编译。</p>
+<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>能够正常工作。</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>在与 Less 一起使用 Tailwind 时，你不能嵌套 Tailwind 的 <code>@screen</code> 指令。</p>
+<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>相反，使用常规的媒体查询和 <code>theme()</code> 函数来引用你的屏幕尺寸，或者干脆不要嵌套你的 <code>@screen</code> 指令。</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="推荐方式"><a class="header-anchor" aria-hidden="true" href="#推荐方式">#</a>推荐方式</h4>
+<p><strong>推荐使用 <code>@apply</code> 指定的方式开发样式，这样在样式产物中仅包含通过指令内联的样式。</strong></p>
+<p>当使用 HTML 类名的方式添加样式的时候，默认情况下 Tailwind 不仅会将本身类名对应的样式加入产物中，同时还会有额外的样式代码存在，虽然这些代码可能不会对本身的样式产生影响。</p>
+<h4 id="bundle-和-bundleless-构建产物区别"><a class="header-anchor" aria-hidden="true" href="#bundle-和-bundleless-构建产物区别">#</a>bundle 和 bundleless 构建产物区别</h4>
+<p>对于以下代码，在 bundle 和 bundleless 两种模式下，构建产物会有很大区别。</p>
+<blockquote>
+<p>所谓 bundle 和 bundleless 可以查看 <a href="/module-tools/guide/advance/in-depth-about-build.html#bundle-%E5%92%8C-bundleless">【Bundle 和 Bundleless】</a></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>Bundle 模式下，会将第三方依赖打包进来。</p>
+<p>对于样式则会生成一份单独的产物文件，并且在 Js 产物文件中并不会存在导入样式的相关代码。</p>
+<p>如果需要将样式注入 Js 产物中，可以开启 <a href="/module-tools/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>Bundleless 模式下，并不会将第三方依赖打包进来，此时不会有样式产物生成。</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>模块工程支持使用 CSS Module 开发样式。默认情况下会将以下文件识别为 CSS Module 文件：</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>如果需要对 CSS Modules 进行配置，可以查看一下 API：</p>
+<ul>
+<li><a href="/module-tools/api/config/build-config.html#automodules">autoModules</a></li>
+<li><a href="/module-tools/api/config/build-config.html#modules">modules</a></li>
+</ul>
+<p>下面是一个代码示例：</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="配置构建产物"><a class="header-anchor" aria-hidden="true" href="#配置构建产物">#</a>配置构建产物</h2>
+<p>根据组件项目使用的多数场景，<strong>推荐使用 <code>npm-component</code> 构建预设</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>.</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>: 包含了支持 es6 语法的 ES modules 格式的 bundleless 产物。</li>
+<li><code>./dist/lib</code>: 包含了支持 es6 语法的 CommonJS 格式的 bundleless 产物。</li>
+<li><code>./dist/types</code>: 包含了类型文件。</li>
+</ul>
+<p>如果对使用语法支持有要求，可以手动配置 <a href="/module-tools/api/config/build-preset.html"><code>buildPreset</code></a>，并且支持在 <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>如果对构建产物目录结构有特殊需求，则可以使用 <a href="/module-tools/api/config/build-config.html"><code>buildConfig</code> API</a>，可以通过以下文档来了解使用方式：</p>
+<ul>
+<li><a href="/module-tools/guide/basic/modify-output-product.html#%E6%9E%84%E5%BB%BA%E9%85%8D%E7%BD%AE%E5%AF%B9%E8%B1%A1">修改输出产物</a></li>
+<li><a href="/module-tools/guide/advance/in-depth-about-build.html">深入理解构建</a></li>
+</ul>
+<h2 id="测试组件"><a class="header-anchor" aria-hidden="true" href="#测试组件">#</a>测试组件</h2>
+<p>关于如何对组件进行测试，可以参考 <a href="/module-tools/guide/basic/test-your-project.html">【测试项目】</a>。</p>
+<h2 id="发布组件"><a class="header-anchor" aria-hidden="true" href="#发布组件">#</a>发布组件</h2>
+<p>推荐使用模块工程提供版本发布功能，可以参考 <a href="/module-tools/guide/basic/publish-your-project.html">【版本管理与发布】</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/guide/advance/asset.html"><span class="pA5H9">上一页</span><span class="K2e43">处理静态资源文件</span></a></div><div flex="~ col" class="oflez"><a class="qVky9 gMyXy oflez" target="" cursor="pointer" href="/module-tools/plugins/guide/getting-started.html"><span class="pA5H9">下一页</span><span class="K2e43">快速开始</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">目录</div><nav><ul class="relative"><li><a href="#初始化项目" 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">初始化项目</a></li><li><a href="#使用-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">使用 Storybook 调试代码</a></li><li><a href="#开发样式" 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">开发样式</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-类名" 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 类名</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="#推荐方式" 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">推荐方式</a></li><li><a href="#bundle-和-bundleless-构建产物区别" 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">bundle 和 bundleless 构建产物区别</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="#配置构建产物" 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">配置构建产物</a></li><li><a href="#测试组件" 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">测试组件</a></li><li><a href="#发布组件" 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">发布组件</a></li></ul></nav></div></div></div></div></div></div></div></section></div></div><div id="search-container"></div></body></html>

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

@@ -0,0 +1,48 @@
+<!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">快速开始 - Module Tools</title><meta data-rh="true" name="description" content="模块工程解决方案"/>
+<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/" 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/guide/intro/welcome.html">指南</a></div><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/api/index.html">API</a></div><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/plugins/guide/getting-started.html">插件</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">更新日志<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">贡献指南<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 class="rounded-md" p="y-1.6 l-3"><span m="r-1" text="brand">简体中文</span></div></div><div><div font="medium"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/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">English<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="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/guide/intro/welcome.html">指南</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/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/plugins/guide/getting-started.html">插件</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">更新日志</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">贡献指南</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="p-1"><span m="r-1" text="brand">简体中文</span></div></div><div><div class="py-1" font="medium"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en"><div><div flex="~"><span m="r-1">English</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div></div></div></div></div></div><div class="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">介绍</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/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">欢迎使用</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">为什么需要模块工程解决方案</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">快速开始</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">基础使用</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/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">开始之前</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">命令预览</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">修改输出产物</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">使用微生成器</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">使用 Storybook</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">测试项目</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">版本管理与发布</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">进阶指南</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/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">深入理解构建</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">深入理解 dev 命令</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">使用 Copy 工具</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">如何处理第三方依赖</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">构建 umd 产物</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">主题配置</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/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">处理静态资源文件</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">最佳实践</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/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">开发组件</div></a></div></div></div></section></nav></div></aside><div flex="~ shrink-0" class="Attzr"><div w="full"><div class="modern-doc"><!--$--><h1 id="快速开始"><a class="header-anchor" aria-hidden="true" href="#快速开始">#</a>快速开始</h1>
+<h2 id="三分钟快速上手"><a class="header-anchor" aria-hidden="true" href="#三分钟快速上手">#</a>三分钟快速上手</h2>
+<p>想要实际体验 Module Tools？首先需要安装 <a href="https://github.com/nodejs/Release" target="_blank" rel="nofollow">Node.js LTS</a>，并确保 Node 版本大于等于 <strong>14.18.0</strong>。我们推荐使用 Node.js 16 的 LTS 版本。</p>
+<p>然后在你的项目里安装以下依赖：</p>
+<ul>
+<li><code>&quot;@modern-js/module-tools&quot;</code></li>
+<li><code>&quot;typescript&quot;</code>（如果不是 TypeScript 项目，则省略）</li>
+</ul>
+<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>对于使用 pnpm 或者 Yarn 包管理器的项目，只需要替换 npm 就可以了。<strong>推荐使用 pnpm</strong>。</p>
+</blockquote>
+<p>接着在项目的根目录下创建 <code>modern.config.(t|j)s</code> 文件：</p>
+<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>import 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>最后在项目的 <code>package.json</code> 文件里增加命令 <code>&quot;build&quot;: &quot;modern build&quot;</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>{</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>如果你的项目存在 <code>src/index.(js|jsx)</code> 文件或者同时存在 <code>src/index.(ts|tsx)</code> 和 <code>tsconfig.json</code> 文件，那么恭喜你可以运行直接运行 <code>npm run build</code> 来使用 Module Tools 构建你的项目了。</p>
+<p><strong>如果你想要看看使用了模块工程方案的完整项目，可以执行以下命令</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>## 执行构建：</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>## 监听模式执行构建：</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>## 启动 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>## 测试</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>pnpm test</span></div></div><br/></code></div></div>
+<p><strong>如果你想要创建一个完整的模块工程项目，可以执行以下命令：</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>
+执行 <code>npx @modern-js/create -h</code>查看更多命令行参数</p></div></div>
+<p>接着在问题交互中，按照如下选择：</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>? 请填写项目名称 library</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>? 请选择开发语言 TS</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>? 请选择包管理工具 pnpm</span></div></div><br/></code></div></div>
+<blockquote>
+<p>项目名称为 <code>package.json</code> 中的 <code>&quot;name&quot;</code> 字段值。</p>
+</blockquote>
+<p>接着就会开始初始化项目的流程。在项目目录和文件生成以及依赖安装完毕后，此时就创建了一个完整的模块工程项目。</p>
+<p>我们可以直接执行 <code>pnpm build</code> 命令启动项目的构建，执行 <code>pnpm build --watch</code> 命令开启构建的观察模式。</p>
+<h2 id="让我们开始吧"><a class="header-anchor" aria-hidden="true" href="#让我们开始吧">#</a>让我们开始吧</h2>
+<p>选择适合你的教程：</p>
+<ul>
+<li>我是初学者，需要学习 Module Tools 的<a href="/module-tools/guide/basic/before-getting-started.html">基础使用</a>。</li>
+<li>我已经初步掌握了 Module Tools 的使用，可以学习 Module Tools 的<a href="/module-tools/guide/advance/in-depth-about-build.html">进阶指南</a>。</li>
+<li>我需要扩展项目能力，需要学习如何开发 Module Tools 的<a href="/module-tools/plugins/guide/getting-started.html">插件</a>。</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/guide/intro/why-module-engineering-solution.html"><span class="pA5H9">上一页</span><span class="K2e43">为什么需要模块工程解决方案</span></a></div><div flex="~ col" class="oflez"><a class="qVky9 gMyXy oflez" target="" cursor="pointer" href="/module-tools/guide/basic/before-getting-started.html"><span class="pA5H9">下一页</span><span class="K2e43">开始之前</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">目录</div><nav><ul class="relative"><li><a href="#三分钟快速上手" 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">三分钟快速上手</a></li><li><a href="#让我们开始吧" 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">让我们开始吧</a></li></ul></nav></div></div></div></div></div></div></div></section></div></div><div id="search-container"></div></body></html>