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

@modern-js/module-tools-docs 2.6.0 → 2.7.1-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (153) hide show

package/doc_build/en/guide/basic/test-your-project.html ADDED Viewed

@@ -0,0 +1,42 @@
+<!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">Testing Projects - Module Tools</title><meta data-rh="true" name="description" content="Module Engineering Solutions"/>
+<script id="check-dark-light">
+;(() => {
+  const saved = localStorage.getItem('modern-theme-appearance')
+  const prefereDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+  if (!saved || saved === 'auto' ? prefereDark : saved === 'dark') {
+    document.documentElement.classList.add('dark')
+  }
+})()
+</script>
+<link rel="icon" href="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/logo-1x-0104.png"><script>!function(){"use strict";var e,n,i,t,o,u={},r={};function a(e){var n=r[e];if(void 0!==n)return n.exports;var i=r[e]={exports:{}};return u[e].call(i.exports,i,i.exports,a),i.exports}a.m=u,e=[],a.O=function(n,i,t,o){if(!i){var u=1/0;for(d=0;d<e.length;d++){i=e[d][0],t=e[d][1],o=e[d][2];for(var r=!0,_=0;_<i.length;_++)(!1&o||u>=o)&&Object.keys(a.O).every((function(e){return a.O[e](i[_])}))?i.splice(_--,1):(r=!1,o<u&&(u=o));if(r){e.splice(d--,1);var c=t();void 0!==c&&(n=c)}}return n}o=o||0;for(var d=e.length;d>0&&e[d-1][2]>o;d--)e[d]=e[d-1];e[d]=[i,t,o]},a.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(n,{a:n}),n},i=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},a.t=function(e,t){if(1&t&&(e=this(e)),8&t)return e;if("object"==typeof e&&e){if(4&t&&e.__esModule)return e;if(16&t&&"function"==typeof e.then)return e}var o=Object.create(null);a.r(o);var u={};n=n||[null,i({}),i([]),i(i)];for(var r=2&t&&e;"object"==typeof r&&!~n.indexOf(r);r=i(r))Object.getOwnPropertyNames(r).forEach((function(n){u[n]=function(){return e[n]}}));return u.default=function(){return e},a.d(o,u),o},a.d=function(e,n){for(var i in n)a.o(n,i)&&!a.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},a.f={},a.e=function(e){return Promise.all(Object.keys(a.f).reduce((function(n,i){return a.f[i](e,n),n}),[]))},a.u=function(e){return"static/js/async/"+({229:"en_guide_intro_getting-started",237:"zh_api_config_build-config",262:"en_plugins_official-list_plugin-banner",315:"en_index",421:"zh_api_config_testing",727:"zh_guide_advance_in-depth-about-build",775:"zh_guide_basic_before-getting-started",1085:"en_api_index",1108:"zh_guide_intro_why-module-engineering-solution",1178:"zh_api_plugin-api_plugin-hooks",1180:"zh_guide_advance_theme-config",1189:"zh_api_index",1677:"en_api_plugin-api_plugin-hooks",1756:"zh_guide_basic_command-preview",1895:"zh_index",2013:"zh_guide_best-practices_components",2020:"zh_guide_basic_publish-your-project",2033:"en_guide_intro_welcome",2034:"zh_guide_intro_welcome",2097:"en_api_config_plugins",2477:"zh_plugins_official-list_plugin-import",2532:"en_guide_basic_use-micro-generator",2540:"zh_guide_advance_in-depth-about-dev-command",2556:"en_api_config_testing",2611:"zh_guide_advance_copy",2633:"zh_guide_intro_getting-started",2678:"en_guide_basic_before-getting-started",2821:"zh_guide_basic_modify-output-product",2892:"zh_plugins_guide_setup-function",3032:"en_guide_basic_publish-your-project",3415:"zh_plugins_official-list_plugin-banner",3741:"en_guide_basic_test-your-project",3806:"zh_api_config_plugins",4260:"en_guide_advance_external-dependency",4390:"zh_plugins_official-list_overview",4663:"en_guide_advance_build-umd",4695:"zh_api_config_design-system",4749:"en_plugins_guide_setup-function",4837:"zh_guide_advance_build-umd",5057:"en_guide_advance_copy",5107:"zh_guide_basic_using-storybook",5284:"zh_plugins_guide_plugin-object",5300:"en_plugins_guide_plugin-object",5532:"zh_guide_advance_external-dependency",5578:"en_guide_basic_modify-output-product",5654:"en_api_config_build-config",5723:"zh_guide_advance_asset",5966:"zh_guide_basic_test-your-project",6098:"en_guide_advance_theme-config",7241:"zh_api_config_build-preset",7294:"zh_guide_basic_use-micro-generator",7401:"en_guide_best-practices_components",7512:"en_guide_intro_why-module-engineering-solution",7571:"en_guide_basic_command-preview",8230:"en_guide_advance_asset",8687:"en_plugins_guide_getting-started",8782:"en_api_config_build-preset",8888:"en_plugins_official-list_plugin-import",8927:"en_guide_advance_in-depth-about-build",9220:"en_api_config_design-system",9479:"en_plugins_official-list_overview",9675:"en_guide_basic_using-storybook",9826:"en_guide_advance_in-depth-about-dev-command",9868:"zh_plugins_guide_getting-started"}[e]||e)+"."+{229:"fdf2a5e3",237:"e0239f0b",262:"c8fc2ef5",315:"9d8e7f26",421:"7af33726",727:"f74fb46b",775:"cb228032",1085:"e8c3584a",1108:"c5feb99d",1114:"d0e9a03f",1178:"54181e2b",1180:"9d46a256",1189:"83d48f6f",1677:"130c0839",1756:"d01b5121",1895:"bdf672c6",2013:"63e6ce1f",2020:"f1222d3a",2033:"e8402d15",2034:"e1854445",2097:"e2525188",2477:"d9e7fb77",2532:"1d9ade59",2540:"390bd229",2556:"bdfe73d2",2611:"0c87a269",2633:"ed054585",2678:"1da2f70c",2821:"511034ae",2892:"d79620be",3032:"6ffa1dcb",3415:"defbf67c",3741:"503389bd",3806:"bb32094e",4260:"21c368af",4390:"bded70c0",4663:"5912e38e",4695:"6f3e0d0a",4749:"bf63c2f5",4837:"cd0724c4",5057:"e73474a0",5107:"e684c97c",5284:"acf4be01",5300:"2799e64d",5532:"38ab900c",5578:"c1634e05",5654:"4b68a964",5723:"0abb6b82",5966:"bb4ee150",6098:"ed245a3c",7241:"af73b578",7294:"fbbfa670",7401:"db985beb",7512:"5b18a76a",7571:"16337618",8230:"29c82557",8687:"5c423f88",8782:"3c87d23b",8888:"dc5a5224",8927:"90beffab",9220:"bae5a6a4",9479:"226be4e5",9675:"2e1cf2bc",9826:"7be33ae4",9868:"d0775941"}[e]+".js"},a.miniCssF=function(e){},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t={},o="@modern-js/module-tools-docs:",a.l=function(e,n,i,u){if(t[e])t[e].push(n);else{var r,_;if(void 0!==i)for(var c=document.getElementsByTagName("script"),d=0;d<c.length;d++){var f=c[d];if(f.getAttribute("src")==e||f.getAttribute("data-webpack")==o+i){r=f;break}}r||(_=!0,(r=document.createElement("script")).charset="utf-8",r.timeout=120,a.nc&&r.setAttribute("nonce",a.nc),r.setAttribute("data-webpack",o+i),r.src=e),t[e]=[n];var s=function(n,i){r.onerror=r.onload=null,clearTimeout(g);var o=t[e];if(delete t[e],r.parentNode&&r.parentNode.removeChild(r),o&&o.forEach((function(e){return e(i)})),n)return n(i)},g=setTimeout(s.bind(null,void 0,{type:"timeout",target:r}),12e4);r.onerror=s.bind(null,r.onerror),r.onload=s.bind(null,r.onload),_&&document.head.appendChild(r)}},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.p="/module-tools/",function(){var e={6272:0};a.f.j=function(n,i){var t=a.o(e,n)?e[n]:void 0;if(0!==t)if(t)i.push(t[2]);else if(6272!=n){var o=new Promise((function(i,o){t=e[n]=[i,o]}));i.push(t[2]=o);var u=a.p+a.u(n),r=new Error;a.l(u,(function(i){if(a.o(e,n)&&(0!==(t=e[n])&&(e[n]=void 0),t)){var o=i&&("load"===i.type?"missing":i.type),u=i&&i.target&&i.target.src;r.message="Loading chunk "+n+" failed.\n("+o+": "+u+")",r.name="ChunkLoadError",r.type=o,r.request=u,t[1](r)}}),"chunk-"+n,n)}else e[n]=0},a.O.j=function(n){return 0===e[n]};var n=function(n,i){var t,o,u=i[0],r=i[1],_=i[2],c=0;if(u.some((function(n){return 0!==e[n]}))){for(t in r)a.o(r,t)&&(a.m[t]=r[t]);if(_)var d=_(a)}for(n&&n(i);c<u.length;c++)o=u[c],a.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return a.O(d)},i=self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[];i.forEach(n.bind(null,0)),i.push=n.bind(null,i.push.bind(i))}()}();</script><script defer="defer" src="/module-tools/static/js/lib-polyfill.0d49b811.js"></script><script defer="defer" src="/module-tools/static/js/lib-lodash.5ea7bf7d.js"></script><script defer="defer" src="/module-tools/static/js/lib-react.209d3da0.js"></script><script defer="defer" src="/module-tools/static/js/lib-router.6f1082f5.js"></script><script defer="defer" src="/module-tools/static/js/9061.555c88e4.js"></script><script defer="defer" src="/module-tools/static/js/main.457dc37f.js"></script><link href="/module-tools/static/css/main.0bdbae52.css" rel="stylesheet"></head><body ><div id="root"><div><header class="top-0 left-0 relative md:fixed w-full" style="z-index:var(--modern-z-index-nav);background:var(--modern-c-bg)"><div class="dHJzp
+          csOJo"></div><div class="z0Ov1 modern-doc-nav" p="x-6"><div flex="~" justify="between" align="items-center" h="full" class="bcLAe"><div class="undefined"><a href="/module-tools/en" w="full" h="full" text="1rem" font="semibold" transition="opacity duration-300" hover="opacity-60" class="flex items-center"><span>Module Tools</span></a></div><div flex="~ 1" justify="end" align-items-center="~"><div class="LPoOT"><div flex="~ sm:1" items="center" p="sm:l-4 sm:r-2"><div class="B7xTH"><button><svg width="18" height="24" viewBox="0 0 32 32" hight="18"><path fill="var(--modern-c-gray)" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg><p class="JFbLy">Search</p><div><span>⌘</span><span>K</span></div></button></div><div class="cqbI7"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--modern-c-gray)" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg></div></div><div class="menu" h="14"><div text="sm" font="medium" m="x-3" class="text-brand-dark"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/guide/intro/welcome.html">Guide</a></div><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/api/index.html">API</a></div><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/plugins/guide/getting-started.html">Plugins</a></div><div m="x-3" last="mr-0"><div h="14" class="relative" flex="~ center"><button flex="~ center" align="items-center" font="medium" text="sm text-1 hover:text-2" transition="color duration-200" class="nav-menu-group-button"><span m="r-1" text="sm" font="medium">v2.7.0</span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div pos="top-13 right-0" m="x-0.8" transition="opacity duration-300" class="nav-menu-group-content absolute" style="opacity:0;visibility:hidden"><div class="p-3 w-full h-full min-w-128px max-h-100vh rounded-xl whitespace-nowrap bg-white" style="box-shadow:var(--modern-shadow-3);margin-right:-1.5rem;z-index:100;border:1px solid var(--modern-c-divider-light)"><div><div font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">Changelog<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div></div><div><div font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">Contributing<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div></div></div></div></div></div></div><div class="flex-center flex-row"><div flex="~" text="sm" font="bold" align="items-center" class="translation sjQjZ"><div m="x-1.5"><div h="14" class="relative" flex="~ center"><button flex="~ center" align="items-center" font="medium" text="sm text-1 hover:text-2" transition="color duration-200" class="nav-menu-group-button"><span m="r-1" text="sm" font="medium"><svg width="32" height="32" viewBox="0 0 32 32" w="18px" h="18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6l2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div pos="top-13 right-0" m="x-0.8" transition="opacity duration-300" class="nav-menu-group-content absolute" style="opacity:0;visibility:hidden"><div class="p-3 w-full h-full min-w-128px max-h-100vh rounded-xl whitespace-nowrap bg-white" style="box-shadow:var(--modern-shadow-3);margin-right:-1.5rem;z-index:100;border:1px solid var(--modern-c-divider-light)"><div><div font="medium"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/guide/basic/test-your-project"><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">简体中文<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div></div><div><div class="rounded-md" p="y-1.6 l-3"><span m="r-1" text="brand">English</span></div></div></div></div></div></div></div><div class="sjQjZ modern-doc-appearance" align-items-center="center"><button class="xSrUP undefined" id="" type="button" role="switch"><span class="CSfjI"><span class="zDdMk"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="nk0gt"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="A1HSI"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></span></span></button></div><div class="social-links WIILt flex-center" pos="relative"><div h="full" flex="~" gap="x-4" align-items-center="~" transition="color duration-300"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer"><div class="a9VBM"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div><div class="yd31b"><button class=" eE8v3"><span class="pOzTZ"><span class="aD0WQ"></span><span class="GwaZ7"></span><span class="HyMv9"></span></span></button><div class="XAjwG " id="navScreen"><div class="VrSyn"><div class="YCP7r"><div w="full" class="LiNpS"><div text="sm" font="medium" m="x-3" class="text-brand-dark"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/guide/intro/welcome.html">Guide</a></div></div><div w="full" class="LiNpS"><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/api/index.html">API</a></div></div><div w="full" class="LiNpS"><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/plugins/guide/getting-started.html">Plugins</a></div></div><div w="full" class="LiNpS"><div m="x-3" last="mr-0"><div pos="relative" class=" FwXtz"><button class="YoOiJ"><span class="QFqBl">v2.7.0</span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" GPyuP "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="SEGAO"><div><div class="py-1" font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div><div flex="~"><span m="r-1">Changelog</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div><div><div class="py-1" font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div><div flex="~"><span m="r-1">Contributing</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div></div></div></div></div></div></div><div class="flex-center flex-col"><div class="mt-2 NeDxD" flex="~" justify="center"><button class="xSrUP undefined" id="" type="button" role="switch"><span class="CSfjI"><span class="zDdMk"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="nk0gt"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="A1HSI"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></span></span></button></div><div flex="~" text="sm" font="bold" justify="center"><div m="x-1.5 y-1"><div pos="relative" class=" FwXtz"><button class="YoOiJ"><span class="QFqBl"><svg width="32" height="32" viewBox="0 0 32 32" w="18px" h="18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6l2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" GPyuP "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="SEGAO"><div><div class="py-1" font="medium"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/zh"><div><div flex="~"><span m="r-1">简体中文</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div><div><div class="p-1"><span m="r-1" text="brand">English</span></div></div></div></div></div></div></div><div class="social-links WIILt flex-center" pos="relative"><div h="full" flex="~" gap="x-4" align-items-center="~" transition="color duration-300"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer"><div class="a9VBM"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div></div><div class="B7xTH"><button><svg width="18" height="24" viewBox="0 0 32 32" hight="18"><path fill="var(--modern-c-gray)" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg><p class="JFbLy">Search</p><div><span>⌘</span><span>K</span></div></button></div><div class="cqbI7"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--modern-c-gray)" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg></div></div></div></div></div></header><section><div p="t-0" m="md:t-14" class="NycN9"><div class="htA00"><button flex="~ center" class="i_YqX"><div text="md" m="r-2"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"></path></svg></div><span text="sm">Menu</span></button></div><aside class="modern-scrollbar WSh16 "><div m="t-1"><nav><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Introduction</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/intro/welcome.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Welcome to Module Tools</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/intro/why-module-engineering-solution.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Why module project solution</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/intro/getting-started.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Quick Start</div></a></div></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Basic Guide</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/before-getting-started.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Before you start</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/command-preview.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Command Preview</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/modify-output-product.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">modify-output-product</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/use-micro-generator.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Using the Microgenerator</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/using-storybook.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Using Storybook</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/test-your-project.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="DYqu8" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Testing Projects</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/publish-your-project.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Versioning and Publishing</div></a></div></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Advanced Guide</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/in-depth-about-build.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">In-depth understanding of build</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/in-depth-about-dev-command.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">In-depth understanding of the dev command</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/copy.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Use the Copy Tools</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/external-dependency.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">How to handle third-party dependencies</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/build-umd.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Build umd products</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/asset.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Handle static resource files</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/theme-config.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Theme Configuration</div></a></div></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Best practices</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/best-practices/components.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Developing Components</div></a></div></div></div></section></nav></div></aside><div flex="~ shrink-0" class="Attzr"><div w="full"><div class="modern-doc"><!--$--><h1 id="testing-projects"><a class="header-anchor" aria-hidden="true" href="#testing-projects">#</a>Testing Projects</h1>
+<p>This chapter will describe how to test modules.</p>
+<h2 id="prerequisites-and-conventions"><a class="header-anchor" aria-hidden="true" href="#prerequisites-and-conventions">#</a>Prerequisites and conventions</h2>
+<p>To use the testing features of the project, you need to make sure that the project contains the dependency: <code>&quot;@modern-js/plugin-testing&quot;</code> , which can be done with <a href="/module-tools/en/guide/basic/command-preview.html#modern-new">modern new</a>.</p>
+<p>In the module engineering scheme, the following conventions are in place for test cases, or files for writing tests:</p>
+<ul>
+<li>The <code>tests</code> directory in the project directory is the directory for test cases and test files, <strong>no support for changing the directory for running test cases</strong>.</li>
+<li>Files with the suffix <code>.test.[tj]sx?</code> are automatically recognized as test files by default.</li>
+<li>Other <code>. [tj]sx?</code> suffixes are recognized as normal files that can be used as test <code>utils</code> files or for other purposes.</li>
+</ul>
+<h2 id="run-the-tests"><a class="header-anchor" aria-hidden="true" href="#run-the-tests">#</a>Run the tests</h2>
+<p>Once the dependencies are prepared and we know where to write the test cases, we can execute the tests with the following command:</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>modern test</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>// Update snapshot</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>modern test --updateSnapshot</span></div></div><br/></code></div></div>
+<p>After execution, you will see the results of the test:</p>
+<p><img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/test-result.png" alt="test-result"/></p>
+<h2 id="usage-configuration"><a class="header-anchor" aria-hidden="true" href="#usage-configuration">#</a>Usage Configuration</h2>
+<p>The Module Engineering Program provides the following configurations for testing.</p>
+<ul>
+<li><a href="/module-tools/en/api/config/testing.html"><code>testing</code></a></li>
+</ul>
+<p>You can add it in <code>modern.config.(j|t)s</code>.</p>
+<h2 id="test-example"><a class="header-anchor" aria-hidden="true" href="#test-example">#</a>Test example</h2>
+<h3 id="common-modules"><a class="header-anchor" aria-hidden="true" href="#common-modules">#</a>Common modules</h3>
+<p>For common modules, we can use the test function as follows:</p>
+<section class="ch-spotlight  "><div class="ch-spotlight-tabs"><div></div><div class="ch-spotlight-tab"><p>First is the code of the module.</p></div><div class="ch-spotlight-tab"><p>Then in the test file, we can do this.</p><p>Where <code>@</code> points to the source directory, defined in <code>tests/tsconfig.json</code> in the initialization project.</p></div><div class="ch-spotlight-tab"><p>Finally we can execute <code>modern test</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="./src/index.ts" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-active" style="background:#3b4252;color:#d8dee9;border-right-color:#3b425200;border-bottom-color:#88c0d000"><div><span style="opacity:0.5">./src/</span>index.ts</div></div><div style="flex:1;min-width:0.8em"></div><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ch-editor-button"><title>Copy</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></div><div data-ch-panel="north" style="flex-grow:1;overflow:hidden"><div class="ch-code-wrapper" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto;height:100%"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>export default function () {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  return &#x27;hello world&#x27;;</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="components"><a class="header-anchor" aria-hidden="true" href="#components">#</a>Components</h3>
+<!-- -->
+<p>For components, Modern.js&#x27;s Runtime API provides functionality for testing UI components, which is provided by <code>@modern-js/runtime/testing</code>.</p>
+<div class="modern-directive tip"><p class="modern-directive-title">TIP</p><div class="modern-directive-content"><p>
+If you need to use the Runtime API, then you can turn it on via <a href="/module-tools/en/guide/basic/command-preview.html">microgenerator</a>.</p></div></div>
+<section class="ch-spotlight  "><div class="ch-spotlight-tabs"><div></div><div class="ch-spotlight-tab"><p>First is the code of the component.</p></div><div class="ch-spotlight-tab"><p>Then in the test file, we can do this.</p><p>Where <code>@</code> points to the source directory, defined in <code>tests/tsconfig.json</code> in the initialization project.</p></div><div class="ch-spotlight-tab"><p>Finally we can execute <code>modern test</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="./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>export const default () {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  return (</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &lt;div&gt;This is a UI Component&lt;/div&gt;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  );</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><br/></code></div></div></div></div></div></section><!--/$--><div><footer m="t-8"><div flex="~ col sm:row" justify="sm:around" gap="2" p="t-6"><div flex="~ col" class="zPHT1"><a class="qVky9 gMyXy" target="" cursor="pointer" href="/module-tools/en/guide/basic/using-storybook.html"><span class="pA5H9">Previous Page</span><span class="K2e43">Using Storybook</span></a></div><div flex="~ col" class="oflez"><a class="qVky9 gMyXy oflez" target="" cursor="pointer" href="/module-tools/en/guide/basic/publish-your-project.html"><span class="pA5H9">Next page</span><span class="K2e43">Versioning and Publishing</span></a></div></div></footer></div></div></div><div class="xH_Uj" style="min-height:calc(100vh - (var(--modern-nav-height) + 32px))"><div><div flex="~ col"><div class="&lt;lg:hidden"><div p="l-4" text="sm" font-medium="~" id="aside-container" style="border-left:1px solid var(--modern-c-divider-light)" class="relative"><div class="absolute" opacity="0" w="1px" h="18px" bg="brand" style="top:33px;left:-1px;transition:top 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s, opacity 0.25s" id="aside-marker"></div><div block="~" class="leading-7" text="sm" font="semibold">ON THIS PAGE</div><nav><ul class="relative"><li><a href="#prerequisites-and-conventions" 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">Prerequisites and conventions</a></li><li><a href="#run-the-tests" 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">Run the tests</a></li><li><a href="#usage-configuration" 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">Usage Configuration</a></li><li><a href="#test-example" 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">Test example</a></li><li><a href="#common-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">Common modules</a></li><li><a href="#components" 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">Components</a></li></ul></nav></div></div></div></div></div></div></div></section></div></div><div id="search-container"></div></body></html>

package/doc_build/en/guide/basic/use-micro-generator.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">Using the Microgenerator - Module Tools</title><meta data-rh="true" name="description" content="Module Engineering Solutions"/>
+<script id="check-dark-light">
+;(() => {
+  const saved = localStorage.getItem('modern-theme-appearance')
+  const prefereDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+  if (!saved || saved === 'auto' ? prefereDark : saved === 'dark') {
+    document.documentElement.classList.add('dark')
+  }
+})()
+</script>
+<link rel="icon" href="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/logo-1x-0104.png"><script>!function(){"use strict";var e,n,i,t,o,u={},r={};function a(e){var n=r[e];if(void 0!==n)return n.exports;var i=r[e]={exports:{}};return u[e].call(i.exports,i,i.exports,a),i.exports}a.m=u,e=[],a.O=function(n,i,t,o){if(!i){var u=1/0;for(d=0;d<e.length;d++){i=e[d][0],t=e[d][1],o=e[d][2];for(var r=!0,_=0;_<i.length;_++)(!1&o||u>=o)&&Object.keys(a.O).every((function(e){return a.O[e](i[_])}))?i.splice(_--,1):(r=!1,o<u&&(u=o));if(r){e.splice(d--,1);var c=t();void 0!==c&&(n=c)}}return n}o=o||0;for(var d=e.length;d>0&&e[d-1][2]>o;d--)e[d]=e[d-1];e[d]=[i,t,o]},a.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(n,{a:n}),n},i=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},a.t=function(e,t){if(1&t&&(e=this(e)),8&t)return e;if("object"==typeof e&&e){if(4&t&&e.__esModule)return e;if(16&t&&"function"==typeof e.then)return e}var o=Object.create(null);a.r(o);var u={};n=n||[null,i({}),i([]),i(i)];for(var r=2&t&&e;"object"==typeof r&&!~n.indexOf(r);r=i(r))Object.getOwnPropertyNames(r).forEach((function(n){u[n]=function(){return e[n]}}));return u.default=function(){return e},a.d(o,u),o},a.d=function(e,n){for(var i in n)a.o(n,i)&&!a.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},a.f={},a.e=function(e){return Promise.all(Object.keys(a.f).reduce((function(n,i){return a.f[i](e,n),n}),[]))},a.u=function(e){return"static/js/async/"+({229:"en_guide_intro_getting-started",237:"zh_api_config_build-config",262:"en_plugins_official-list_plugin-banner",315:"en_index",421:"zh_api_config_testing",727:"zh_guide_advance_in-depth-about-build",775:"zh_guide_basic_before-getting-started",1085:"en_api_index",1108:"zh_guide_intro_why-module-engineering-solution",1178:"zh_api_plugin-api_plugin-hooks",1180:"zh_guide_advance_theme-config",1189:"zh_api_index",1677:"en_api_plugin-api_plugin-hooks",1756:"zh_guide_basic_command-preview",1895:"zh_index",2013:"zh_guide_best-practices_components",2020:"zh_guide_basic_publish-your-project",2033:"en_guide_intro_welcome",2034:"zh_guide_intro_welcome",2097:"en_api_config_plugins",2477:"zh_plugins_official-list_plugin-import",2532:"en_guide_basic_use-micro-generator",2540:"zh_guide_advance_in-depth-about-dev-command",2556:"en_api_config_testing",2611:"zh_guide_advance_copy",2633:"zh_guide_intro_getting-started",2678:"en_guide_basic_before-getting-started",2821:"zh_guide_basic_modify-output-product",2892:"zh_plugins_guide_setup-function",3032:"en_guide_basic_publish-your-project",3415:"zh_plugins_official-list_plugin-banner",3741:"en_guide_basic_test-your-project",3806:"zh_api_config_plugins",4260:"en_guide_advance_external-dependency",4390:"zh_plugins_official-list_overview",4663:"en_guide_advance_build-umd",4695:"zh_api_config_design-system",4749:"en_plugins_guide_setup-function",4837:"zh_guide_advance_build-umd",5057:"en_guide_advance_copy",5107:"zh_guide_basic_using-storybook",5284:"zh_plugins_guide_plugin-object",5300:"en_plugins_guide_plugin-object",5532:"zh_guide_advance_external-dependency",5578:"en_guide_basic_modify-output-product",5654:"en_api_config_build-config",5723:"zh_guide_advance_asset",5966:"zh_guide_basic_test-your-project",6098:"en_guide_advance_theme-config",7241:"zh_api_config_build-preset",7294:"zh_guide_basic_use-micro-generator",7401:"en_guide_best-practices_components",7512:"en_guide_intro_why-module-engineering-solution",7571:"en_guide_basic_command-preview",8230:"en_guide_advance_asset",8687:"en_plugins_guide_getting-started",8782:"en_api_config_build-preset",8888:"en_plugins_official-list_plugin-import",8927:"en_guide_advance_in-depth-about-build",9220:"en_api_config_design-system",9479:"en_plugins_official-list_overview",9675:"en_guide_basic_using-storybook",9826:"en_guide_advance_in-depth-about-dev-command",9868:"zh_plugins_guide_getting-started"}[e]||e)+"."+{229:"fdf2a5e3",237:"e0239f0b",262:"c8fc2ef5",315:"9d8e7f26",421:"7af33726",727:"f74fb46b",775:"cb228032",1085:"e8c3584a",1108:"c5feb99d",1114:"d0e9a03f",1178:"54181e2b",1180:"9d46a256",1189:"83d48f6f",1677:"130c0839",1756:"d01b5121",1895:"bdf672c6",2013:"63e6ce1f",2020:"f1222d3a",2033:"e8402d15",2034:"e1854445",2097:"e2525188",2477:"d9e7fb77",2532:"1d9ade59",2540:"390bd229",2556:"bdfe73d2",2611:"0c87a269",2633:"ed054585",2678:"1da2f70c",2821:"511034ae",2892:"d79620be",3032:"6ffa1dcb",3415:"defbf67c",3741:"503389bd",3806:"bb32094e",4260:"21c368af",4390:"bded70c0",4663:"5912e38e",4695:"6f3e0d0a",4749:"bf63c2f5",4837:"cd0724c4",5057:"e73474a0",5107:"e684c97c",5284:"acf4be01",5300:"2799e64d",5532:"38ab900c",5578:"c1634e05",5654:"4b68a964",5723:"0abb6b82",5966:"bb4ee150",6098:"ed245a3c",7241:"af73b578",7294:"fbbfa670",7401:"db985beb",7512:"5b18a76a",7571:"16337618",8230:"29c82557",8687:"5c423f88",8782:"3c87d23b",8888:"dc5a5224",8927:"90beffab",9220:"bae5a6a4",9479:"226be4e5",9675:"2e1cf2bc",9826:"7be33ae4",9868:"d0775941"}[e]+".js"},a.miniCssF=function(e){},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t={},o="@modern-js/module-tools-docs:",a.l=function(e,n,i,u){if(t[e])t[e].push(n);else{var r,_;if(void 0!==i)for(var c=document.getElementsByTagName("script"),d=0;d<c.length;d++){var f=c[d];if(f.getAttribute("src")==e||f.getAttribute("data-webpack")==o+i){r=f;break}}r||(_=!0,(r=document.createElement("script")).charset="utf-8",r.timeout=120,a.nc&&r.setAttribute("nonce",a.nc),r.setAttribute("data-webpack",o+i),r.src=e),t[e]=[n];var s=function(n,i){r.onerror=r.onload=null,clearTimeout(g);var o=t[e];if(delete t[e],r.parentNode&&r.parentNode.removeChild(r),o&&o.forEach((function(e){return e(i)})),n)return n(i)},g=setTimeout(s.bind(null,void 0,{type:"timeout",target:r}),12e4);r.onerror=s.bind(null,r.onerror),r.onload=s.bind(null,r.onload),_&&document.head.appendChild(r)}},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.p="/module-tools/",function(){var e={6272:0};a.f.j=function(n,i){var t=a.o(e,n)?e[n]:void 0;if(0!==t)if(t)i.push(t[2]);else if(6272!=n){var o=new Promise((function(i,o){t=e[n]=[i,o]}));i.push(t[2]=o);var u=a.p+a.u(n),r=new Error;a.l(u,(function(i){if(a.o(e,n)&&(0!==(t=e[n])&&(e[n]=void 0),t)){var o=i&&("load"===i.type?"missing":i.type),u=i&&i.target&&i.target.src;r.message="Loading chunk "+n+" failed.\n("+o+": "+u+")",r.name="ChunkLoadError",r.type=o,r.request=u,t[1](r)}}),"chunk-"+n,n)}else e[n]=0},a.O.j=function(n){return 0===e[n]};var n=function(n,i){var t,o,u=i[0],r=i[1],_=i[2],c=0;if(u.some((function(n){return 0!==e[n]}))){for(t in r)a.o(r,t)&&(a.m[t]=r[t]);if(_)var d=_(a)}for(n&&n(i);c<u.length;c++)o=u[c],a.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return a.O(d)},i=self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[];i.forEach(n.bind(null,0)),i.push=n.bind(null,i.push.bind(i))}()}();</script><script defer="defer" src="/module-tools/static/js/lib-polyfill.0d49b811.js"></script><script defer="defer" src="/module-tools/static/js/lib-lodash.5ea7bf7d.js"></script><script defer="defer" src="/module-tools/static/js/lib-react.209d3da0.js"></script><script defer="defer" src="/module-tools/static/js/lib-router.6f1082f5.js"></script><script defer="defer" src="/module-tools/static/js/9061.555c88e4.js"></script><script defer="defer" src="/module-tools/static/js/main.457dc37f.js"></script><link href="/module-tools/static/css/main.0bdbae52.css" rel="stylesheet"></head><body ><div id="root"><div><header class="top-0 left-0 relative md:fixed w-full" style="z-index:var(--modern-z-index-nav);background:var(--modern-c-bg)"><div class="dHJzp
+          csOJo"></div><div class="z0Ov1 modern-doc-nav" p="x-6"><div flex="~" justify="between" align="items-center" h="full" class="bcLAe"><div class="undefined"><a href="/module-tools/en" w="full" h="full" text="1rem" font="semibold" transition="opacity duration-300" hover="opacity-60" class="flex items-center"><span>Module Tools</span></a></div><div flex="~ 1" justify="end" align-items-center="~"><div class="LPoOT"><div flex="~ sm:1" items="center" p="sm:l-4 sm:r-2"><div class="B7xTH"><button><svg width="18" height="24" viewBox="0 0 32 32" hight="18"><path fill="var(--modern-c-gray)" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg><p class="JFbLy">Search</p><div><span>⌘</span><span>K</span></div></button></div><div class="cqbI7"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--modern-c-gray)" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg></div></div><div class="menu" h="14"><div text="sm" font="medium" m="x-3" class="text-brand-dark"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/guide/intro/welcome.html">Guide</a></div><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/api/index.html">API</a></div><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/plugins/guide/getting-started.html">Plugins</a></div><div m="x-3" last="mr-0"><div h="14" class="relative" flex="~ center"><button flex="~ center" align="items-center" font="medium" text="sm text-1 hover:text-2" transition="color duration-200" class="nav-menu-group-button"><span m="r-1" text="sm" font="medium">v2.7.0</span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div pos="top-13 right-0" m="x-0.8" transition="opacity duration-300" class="nav-menu-group-content absolute" style="opacity:0;visibility:hidden"><div class="p-3 w-full h-full min-w-128px max-h-100vh rounded-xl whitespace-nowrap bg-white" style="box-shadow:var(--modern-shadow-3);margin-right:-1.5rem;z-index:100;border:1px solid var(--modern-c-divider-light)"><div><div font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">Changelog<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div></div><div><div font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">Contributing<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div></div></div></div></div></div></div><div class="flex-center flex-row"><div flex="~" text="sm" font="bold" align="items-center" class="translation sjQjZ"><div m="x-1.5"><div h="14" class="relative" flex="~ center"><button flex="~ center" align="items-center" font="medium" text="sm text-1 hover:text-2" transition="color duration-200" class="nav-menu-group-button"><span m="r-1" text="sm" font="medium"><svg width="32" height="32" viewBox="0 0 32 32" w="18px" h="18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6l2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div pos="top-13 right-0" m="x-0.8" transition="opacity duration-300" class="nav-menu-group-content absolute" style="opacity:0;visibility:hidden"><div class="p-3 w-full h-full min-w-128px max-h-100vh rounded-xl whitespace-nowrap bg-white" style="box-shadow:var(--modern-shadow-3);margin-right:-1.5rem;z-index:100;border:1px solid var(--modern-c-divider-light)"><div><div font="medium"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/guide/basic/use-micro-generator"><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">简体中文<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div></div><div><div class="rounded-md" p="y-1.6 l-3"><span m="r-1" text="brand">English</span></div></div></div></div></div></div></div><div class="sjQjZ modern-doc-appearance" align-items-center="center"><button class="xSrUP undefined" id="" type="button" role="switch"><span class="CSfjI"><span class="zDdMk"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="nk0gt"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="A1HSI"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></span></span></button></div><div class="social-links WIILt flex-center" pos="relative"><div h="full" flex="~" gap="x-4" align-items-center="~" transition="color duration-300"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer"><div class="a9VBM"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div><div class="yd31b"><button class=" eE8v3"><span class="pOzTZ"><span class="aD0WQ"></span><span class="GwaZ7"></span><span class="HyMv9"></span></span></button><div class="XAjwG " id="navScreen"><div class="VrSyn"><div class="YCP7r"><div w="full" class="LiNpS"><div text="sm" font="medium" m="x-3" class="text-brand-dark"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/guide/intro/welcome.html">Guide</a></div></div><div w="full" class="LiNpS"><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/api/index.html">API</a></div></div><div w="full" class="LiNpS"><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/plugins/guide/getting-started.html">Plugins</a></div></div><div w="full" class="LiNpS"><div m="x-3" last="mr-0"><div pos="relative" class=" FwXtz"><button class="YoOiJ"><span class="QFqBl">v2.7.0</span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" GPyuP "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="SEGAO"><div><div class="py-1" font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div><div flex="~"><span m="r-1">Changelog</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div><div><div class="py-1" font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div><div flex="~"><span m="r-1">Contributing</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div></div></div></div></div></div></div><div class="flex-center flex-col"><div class="mt-2 NeDxD" flex="~" justify="center"><button class="xSrUP undefined" id="" type="button" role="switch"><span class="CSfjI"><span class="zDdMk"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="nk0gt"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="A1HSI"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></span></span></button></div><div flex="~" text="sm" font="bold" justify="center"><div m="x-1.5 y-1"><div pos="relative" class=" FwXtz"><button class="YoOiJ"><span class="QFqBl"><svg width="32" height="32" viewBox="0 0 32 32" w="18px" h="18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6l2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" GPyuP "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="SEGAO"><div><div class="py-1" font="medium"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/zh"><div><div flex="~"><span m="r-1">简体中文</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div><div><div class="p-1"><span m="r-1" text="brand">English</span></div></div></div></div></div></div></div><div class="social-links WIILt flex-center" pos="relative"><div h="full" flex="~" gap="x-4" align-items-center="~" transition="color duration-300"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer"><div class="a9VBM"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div></div><div class="B7xTH"><button><svg width="18" height="24" viewBox="0 0 32 32" hight="18"><path fill="var(--modern-c-gray)" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg><p class="JFbLy">Search</p><div><span>⌘</span><span>K</span></div></button></div><div class="cqbI7"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--modern-c-gray)" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg></div></div></div></div></div></header><section><div p="t-0" m="md:t-14" class="NycN9"><div class="htA00"><button flex="~ center" class="i_YqX"><div text="md" m="r-2"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"></path></svg></div><span text="sm">Menu</span></button></div><aside class="modern-scrollbar WSh16 "><div m="t-1"><nav><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Introduction</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/intro/welcome.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Welcome to Module Tools</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/intro/why-module-engineering-solution.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Why module project solution</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/intro/getting-started.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Quick Start</div></a></div></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Basic Guide</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/before-getting-started.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Before you start</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/command-preview.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Command Preview</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/modify-output-product.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">modify-output-product</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/use-micro-generator.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="DYqu8" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Using the Microgenerator</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/using-storybook.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Using Storybook</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/test-your-project.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Testing Projects</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/publish-your-project.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Versioning and Publishing</div></a></div></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Advanced Guide</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/in-depth-about-build.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">In-depth understanding of build</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/in-depth-about-dev-command.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">In-depth understanding of the dev command</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/copy.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Use the Copy Tools</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/external-dependency.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">How to handle third-party dependencies</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/build-umd.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Build umd products</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/asset.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Handle static resource files</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/theme-config.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Theme Configuration</div></a></div></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Best practices</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/best-practices/components.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Developing Components</div></a></div></div></div></section></nav></div></aside><div flex="~ shrink-0" class="Attzr"><div w="full"><div class="modern-doc"><!--$--><h1 id="using-the-microgenerator"><a class="header-anchor" aria-hidden="true" href="#using-the-microgenerator">#</a>Using the Microgenerator</h1>
+<p>The Module Engineering solution provides the Microgenerator tool, which allows for the current project to.</p>
+<ul>
+<li>add new directories and files</li>
+<li>Modify the contents of the <code>package.json</code> file</li>
+<li>Execute commands</li>
+</ul>
+<p>Thus with these capabilities, <strong>Microgenerator can enable additional feature functionality for the project</strong>.</p>
+<p>The microgenerator can be started via <a href="/module-tools/en/guide/basic/command-preview.html"><code>modern new</code></a>. The current Microgenerator features supported by the Module Engineering program are:</p>
+<h2 id="test"><a class="header-anchor" aria-hidden="true" href="#test">#</a>Test</h2>
+<p>When we want to test some modules, we can enable the test feature. When this feature is enabled, <strong>a <code>tests</code> directory and related files will be created in the project directory, and a new <code>&quot;@modern-js/plugin-testing&quot;</code> dependency will be added to package.json</strong>.</p>
+<div class="modern-directive tip"><p class="modern-directive-title">TIP</p><div class="modern-directive-content"><p>
+After successfully enabling it, you will be prompted to manually add a code similar to the one below to the configuration.</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>import testPlugin from &#x27;@modern-js/plugin-testing&#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: [</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    moduleTools(),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    testPlugin(),</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>
+<h2 id="storybook"><a class="header-anchor" aria-hidden="true" href="#storybook">#</a>Storybook</h2>
+<p>The <strong>Storybook feature</strong> can be enabled when we want to debug a component or a common module. When this feature is enabled, <strong>the <code>stories</code> directory and related files are created in the project directory, and a new <code>&quot;@modern-js/plugin-storybook&quot;</code> dependency is added to package.json</strong>.</p>
+<div class="modern-directive tip"><p class="modern-directive-title">TIP</p><div class="modern-directive-content"><p>
+After successfully enabling it, you will be prompted to manually add a code similar to the one below to the configuration.</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>import storybookPlugin from &#x27;@modern-js/plugin-storybook&#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: [</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    moduleTools(),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    storybookPlugin(),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  ],</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br/></code></div></div></div></div>
+<p>For more information on how to start Storybook and how to use it, check out the following link.</p>
+<ul>
+<li><a href="/module-tools/en/guide/basic/command-preview.html#modern-dev"><code>modern dev</code></a></li>
+<li><a href="/module-tools/en/guide/basic/using-storybook.html"><code>using Storybook</code></a></li>
+</ul>
+<h2 id="tailwind-css-support"><a class="header-anchor" aria-hidden="true" href="#tailwind-css-support">#</a>Tailwind CSS support</h2>
+<p>This can be enabled when we want to add <a href="https://v2.tailwindcss.com/" target="_blank" rel="nofollow">Tailwind CSS</a> support to our project. Tailwind CSS is a CSS library that provides out-of-the-box styling.</p>
+<p>For more information on how to use Tailwind CSS in your module projects, check out.</p>
+<!-- -->
+<ul>
+<li>Using Tailwind CSS</li>
+</ul>
+<div class="modern-directive tip"><p class="modern-directive-title">TIP</p><div class="modern-directive-content"><p>
+After successfully enabling it, you will be prompted to manually add a code similar to the one below to the configuration.</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>import tailwindPlugin from &#x27;@modern-js/plugin-tailwindcss&#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: [</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    moduleTools(),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    tailwindPlugin(),</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>
+<h2 id="modernjs-runtime-api"><a class="header-anchor" aria-hidden="true" href="#modernjs-runtime-api">#</a>Modern.js Runtime API</h2>
+<!-- -->
+<p><strong>Modern.js provides Runtime API capabilities that can only be used in the Modern.js application project environment</strong>. If you need to develop a component for use in a Modern.js application environment, then you can turn on this feature and the microgenerator will add the <code>&quot;@modern-js/runtime&quot;</code> dependency.</p>
+<p>Also, the Storybook debugging tool will determine if the project needs to use the Runtime API by checking the project&#x27;s dependencies and providing the same Runtime API runtime environment as the Modern.js application project.</p>
+<div class="modern-directive tip"><p class="modern-directive-title">TIP</p><div class="modern-directive-content"><p>
+After successfully enabling it, you will be prompted to manually add a code similar to the one below to the configuration.</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>import runtime from &#x27;@modern-js/runtime/cli&#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: [</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    moduleTools(),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    runtime(),</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><footer m="t-8"><div flex="~ col sm:row" justify="sm:around" gap="2" p="t-6"><div flex="~ col" class="zPHT1"><a class="qVky9 gMyXy" target="" cursor="pointer" href="/module-tools/en/guide/basic/modify-output-product.html"><span class="pA5H9">Previous Page</span><span class="K2e43">modify-output-product</span></a></div><div flex="~ col" class="oflez"><a class="qVky9 gMyXy oflez" target="" cursor="pointer" href="/module-tools/en/guide/basic/using-storybook.html"><span class="pA5H9">Next page</span><span class="K2e43">Using Storybook</span></a></div></div></footer></div></div></div><div class="xH_Uj" style="min-height:calc(100vh - (var(--modern-nav-height) + 32px))"><div><div flex="~ col"><div class="&lt;lg:hidden"><div p="l-4" text="sm" font-medium="~" id="aside-container" style="border-left:1px solid var(--modern-c-divider-light)" class="relative"><div class="absolute" opacity="0" w="1px" h="18px" bg="brand" style="top:33px;left:-1px;transition:top 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s, opacity 0.25s" id="aside-marker"></div><div block="~" class="leading-7" text="sm" font="semibold">ON THIS PAGE</div><nav><ul class="relative"><li><a href="#test" 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">Test</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="#tailwind-css-support" 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">Tailwind CSS support</a></li><li><a href="#modernjs-runtime-api" 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">Modern.js Runtime API</a></li></ul></nav></div></div></div></div></div></div></div></section></div></div><div id="search-container"></div></body></html>