npm - @modern-js/module-tools-docs - Versions diffs - 2.2.0 → 2.3.0 - Mend

@modern-js/module-tools-docs 2.2.0 → 2.3.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 (156) hide show

package/doc_build/guide/advance/in-depth-about-dev-command.html DELETED Viewed

@@ -1,14 +0,0 @@
-<!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"><link rel="icon" href="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/logo-1x-0104.png" /><title data-rh="true">深入理解 dev 命令 - Module Tools</title><meta data-rh="true" name="description" content="模块工程解决方案"/><script>!function(){"use strict";var e,n,i,t,o,r={},u={};function _(e){var n=u[e];if(void 0!==n)return n.exports;var i=u[e]={exports:{}};return r[e].call(i.exports,i,i.exports,_),i.exports}_.m=r,e=[],_.O=function(n,i,t,o){if(!i){var r=1/0;for(a=0;a<e.length;a++){i=e[a][0],t=e[a][1],o=e[a][2];for(var u=!0,d=0;d<i.length;d++)(!1&o||r>=o)&&Object.keys(_.O).every((function(e){return _.O[e](i[d])}))?i.splice(d--,1):(u=!1,o<r&&(r=o));if(u){e.splice(a--,1);var c=t();void 0!==c&&(n=c)}}return n}o=o||0;for(var a=e.length;a>0&&e[a-1][2]>o;a--)e[a]=e[a-1];e[a]=[i,t,o]},_.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return _.d(n,{a:n}),n},i=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},_.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);_.r(o);var r={};n=n||[null,i({}),i([]),i(i)];for(var u=2&t&&e;"object"==typeof u&&!~n.indexOf(u);u=i(u))Object.getOwnPropertyNames(u).forEach((function(n){r[n]=function(){return e[n]}}));return r.default=function(){return e},_.d(o,r),o},_.d=function(e,n){for(var i in n)_.o(n,i)&&!_.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},_.f={},_.e=function(e){return Promise.all(Object.keys(_.f).reduce((function(n,i){return _.f[i](e,n),n}),[]))},_.u=function(e){return"static/js/async/"+({229:"en_guide_intro_getting-started",237:"zh_api_config_build-config",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",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",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",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:"f8682be3",237:"048fd5ec",315:"7bd869c4",421:"a9888eed",727:"64e795f3",775:"6b06b54a",1085:"669f0a56",1108:"6f8b5ff6",1178:"a4d81bf6",1180:"b9570109",1189:"22957707",1677:"60d0260c",1756:"1199124a",1895:"c19f9dcf",2013:"7454d916",2020:"bf11b1c4",2033:"9cc45924",2034:"71c3fe16",2097:"fc95fb77",2532:"56325139",2540:"168ce7dd",2556:"8bc7f316",2611:"21a1aea4",2633:"a4c00d9a",2678:"a22fc49a",2821:"8ccbc8d1",2892:"67d07b91",3032:"08c5112f",3741:"f5f6b204",3799:"e31e8293",3806:"c22dc4be",4260:"a52d3247",4390:"a7635714",4663:"c254ed46",4695:"1eecd474",4749:"80a2bd97",4837:"b6d541ff",5057:"45c0a51d",5107:"27829e44",5284:"963289d5",5300:"bf6c6221",5532:"c7cf5d4b",5578:"ad453d13",5654:"367a5701",5723:"5b936003",5966:"ae52c47a",6098:"db0ad9fc",7241:"7c13584d",7294:"a091d57d",7401:"45155af9",7512:"7f2dae5c",7571:"1707ed29",8230:"5ff1d623",8652:"6fbf1cb7",8687:"b850249c",8782:"0d78b268",8927:"51bf3569",9220:"b28d6723",9479:"84e5cea0",9675:"9d721554",9826:"aec0b4e1",9868:"099dfaea"}[e]+".js"},_.miniCssF=function(e){},_.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),_.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t={},o="@modern-js/module-tools-docs:",_.l=function(e,n,i,r){if(t[e])t[e].push(n);else{var u,d;if(void 0!==i)for(var c=document.getElementsByTagName("script"),a=0;a<c.length;a++){var f=c[a];if(f.getAttribute("src")==e||f.getAttribute("data-webpack")==o+i){u=f;break}}u||(d=!0,(u=document.createElement("script")).charset="utf-8",u.timeout=120,_.nc&&u.setAttribute("nonce",_.nc),u.setAttribute("data-webpack",o+i),u.src=e),t[e]=[n];var s=function(n,i){u.onerror=u.onload=null,clearTimeout(g);var o=t[e];if(delete t[e],u.parentNode&&u.parentNode.removeChild(u),o&&o.forEach((function(e){return e(i)})),n)return n(i)},g=setTimeout(s.bind(null,void 0,{type:"timeout",target:u}),12e4);u.onerror=s.bind(null,u.onerror),u.onload=s.bind(null,u.onload),d&&document.head.appendChild(u)}},_.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},_.p="/",function(){var e={6272:0};_.f.j=function(n,i){var t=_.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 r=_.p+_.u(n),u=new Error;_.l(r,(function(i){if(_.o(e,n)&&(0!==(t=e[n])&&(e[n]=void 0),t)){var o=i&&("load"===i.type?"missing":i.type),r=i&&i.target&&i.target.src;u.message="Loading chunk "+n+" failed.\n("+o+": "+r+")",u.name="ChunkLoadError",u.type=o,u.request=r,t[1](u)}}),"chunk-"+n,n)}else e[n]=0},_.O.j=function(n){return 0===e[n]};var n=function(n,i){var t,o,r=i[0],u=i[1],d=i[2],c=0;if(r.some((function(n){return 0!==e[n]}))){for(t in u)_.o(u,t)&&(_.m[t]=u[t]);if(d)var a=d(_)}for(n&&n(i);c<r.length;c++)o=r[c],_.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return _.O(a)},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="/static/js/lib-polyfill.b3038509.js"></script><script defer="defer" src="/static/js/lib-lodash.c5845536.js"></script><script defer="defer" src="/static/js/lib-react.d41ace5e.js"></script><script defer="defer" src="/static/js/1607.70af642a.js"></script><script defer="defer" src="/static/js/main.2d3257a4.js"></script><link href="/static/css/main.edaad072.css" rel="stylesheet"></head><body><div id="root"><div style="height:100%"><header class="top-0 left-0 relative md:fixed w-full" style="border-bottom:1px solid var(--modern-c-divider-light);z-index:var(--modern-z-index-nav)"><div class="J5RhI modern-doc-nav" p="x-6"><div flex="~" justify="between" align="items-center" h="full" class="Be7Bu"><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="fxz4T"><div class="search" flex="sm:1" p="sm:l-8"><div flex="~" align="items-center" pos="relative" m="r-2" font="semibold"><svg width="32" height="32" viewBox="0 0 32 32" w="5" h="5" fill="currentColor"><path fill="#888888" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg><input disabled="" cursor="text focus:auto" placeholder="Search" height="8" border="none" type="text" text="sm" p="t-0 r-2 b-0 l-2" transition="all duration-200 ease" class="rounded-sm SjSZ2 " aria-label="Search" autoComplete="off"/><div m="r-3" w="10" h="6" p="x-1.5" border="1px solid gray-light-3 rounded-md" text="xs gray-light-3" flex="~" align="items-center" justify="around" class="iUJv9"><span>⌘</span><span>K</span></div></div></div><div class="menu" h="14"><div text="sm" font="medium" m="x-3" class="text-brand"><a class="R5q4o " target="" cursor="pointer" href="/module-tools/guide/intro/welcome.html">指南</a></div><div text="sm" font="medium" m="x-3" class=""><a class="R5q4o " target="" cursor="pointer" href="/module-tools/api/index.html">API</a></div><div text="sm" font="medium" m="x-3" class=""><a class="R5q4o " 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.2.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 p="3" w="full" h="full" class="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 font="medium"><a href="https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="R5q4o "><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 font="medium"><a href="https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="R5q4o "><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 flex="~" text="sm" font="bold" align="items-center" class="translation WjR05"><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 p="3" w="full" h="full" class="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 class="rounded-md" p="y-1.6 l-3"><span m="r-1" text="brand">简体中文</span></div><div font="medium"><a class="R5q4o " target="" cursor="pointer" href="/module-tools/en/guide/advance/in-depth-about-dev-command"><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 class="WjR05 modern-doc-appearance" display="none sm:flex" align-items-center="center"><button class="DdK0_ undefined" id="" type="button" role="switch"><span class="WLpap"><span class="Q_Ula"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="JMkpU"><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="tgdgB"><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 FU7nx" nav-h="mobile sm:desktop" flex="~" align-items-center="~" pos="relative"><div h="full" flex="~" gap="x-4" align-items-center="~" transition="color duration-300"><a href="https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer"><div class="_8YjQ"><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><button class=" wzxr1"><span class="kECx4"><span class="wzOB6"></span><span class="coO8e"></span><span class="RrwJk"></span></span></button><div class="NeczB " id="navScreen"><div class="WLObZ"><div class="_3YuLy"><div w="full" class="osgV9"><div text="sm" font="medium" m="x-3" class="text-brand"><a class="R5q4o " target="" cursor="pointer" href="/module-tools/guide/intro/welcome.html">指南</a></div></div><div w="full" class="osgV9"><div text="sm" font="medium" m="x-3" class=""><a class="R5q4o " target="" cursor="pointer" href="/module-tools/api/index.html">API</a></div></div><div w="full" class="osgV9"><div text="sm" font="medium" m="x-3" class=""><a class="R5q4o " target="" cursor="pointer" href="/module-tools/plugins/guide/getting-started.html">插件</a></div></div><div w="full" class="osgV9"><div m="x-3" last="mr-0"><div pos="relative" class=" Tk5bz"><button class="X7ejb"><span class="IOfpr">v2.2.0</span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" uavm2 "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="ciUdc"><div class="pa-1" font="medium"><a href="https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="R5q4o "><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 class="pa-1" font="medium"><a href="https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="R5q4o "><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 class="rp9pY" flex="~" justify="center" align-items-center="center"><div class="align-items-center appearance pa-2 ctzdQ" flex="~" justify="center"><button class="DdK0_ undefined" id="" type="button" role="switch"><span class="WLpap"><span class="Q_Ula"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="JMkpU"><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="tgdgB"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></span></span></button></div></div><div flex="~" text="sm" font="bold" justify="center"><div m="x-1.5"><div pos="relative" class=" Tk5bz"><button class="X7ejb"><span class="IOfpr"><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=" uavm2 "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="ciUdc"><div class="pa-1"><span m="r-1" text="brand">简体中文</span></div><div class="pa-1" font="medium"><a class="R5q4o " 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 class="social-links FU7nx" nav-h="mobile sm:desktop" flex="~" align-items-center="~" pos="relative"><div h="full" flex="~" gap="x-4" align-items-center="~" transition="color duration-300"><a href="https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer"><div class="_8YjQ"><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></div></header><section><div p="t-0" m="md:t-14" class="Q34AI"><div class="_aGGP"><button flex="~ center" class="wNUbj"><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="UroNu "><nav m="t-1"><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center r3Oz1"><h2 p="y-1 x-2" text="sm" font="semibold">介绍</h2><div p="2" class="BgJSm"><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 style="transition:height 0.2s ease-in-out;overflow:hidden;height:96px"><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/intro/welcome.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">欢迎使用</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/intro/why-module-engineering-solution.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">为什么需要模块工程解决方案</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/intro/getting-started.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">快速开始</div></a></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center r3Oz1"><h2 p="y-1 x-2" text="sm" font="semibold">基础使用</h2><div p="2" class="BgJSm"><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 style="transition:height 0.2s ease-in-out;overflow:hidden;height:224px"><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/basic/before-getting-started.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">开始之前</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/basic/command-preview.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">命令预览</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/basic/modify-output-product.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">修改输出产物</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/basic/use-micro-generator.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">使用微生成器</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/basic/using-storybook.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">使用 Storybook</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/basic/test-your-project.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">测试项目</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/basic/publish-your-project.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">版本管理与发布</div></a></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center r3Oz1"><h2 p="y-1 x-2" text="sm" font="semibold">进阶指南</h2><div p="2" class="BgJSm"><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 style="transition:height 0.2s ease-in-out;overflow:hidden;height:224px"><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/advance/in-depth-about-build.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">深入理解构建</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/advance/in-depth-about-dev-command.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="RCb_U" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">深入理解 dev 命令</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/advance/copy.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">使用 Copy 工具</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/advance/external-dependency.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">如何处理第三方依赖</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/advance/build-umd.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">构建 umd 产物</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/advance/theme-config.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">主题配置</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/advance/asset.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">处理静态资源文件</div></a></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center r3Oz1"><h2 p="y-1 x-2" text="sm" font="semibold">最佳实践</h2><div p="2" class="BgJSm"><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 style="transition:height 0.2s ease-in-out;overflow:hidden;height:32px"><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/best-practices/components.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">开发组件</div></a></div></div></section></nav></aside><div flex="~ shrink-0" class="TP8A7"><div w="full"><div class="modern-doc"><!--$--><h1 id="深入理解-dev-命令"><a class="header-anchor" aria-hidden="true" href="#深入理解-dev-命令">#</a>深入理解 dev 命令</h1>
-<p>在【基础使用】的部分，我们已经知道可以通过 <code>buildConfig</code> 配置对项目的输出产物进行修改。<code>buildConfig</code> 不仅描述了产物的一些特性，同时还为构建产物提供了一些功能。</p>
-<div class="modern-directive tip"><p class="modern-directive-title">注意</p><div class="modern-directive-content"><p>
-如果你还不清楚 <code>buildConfig</code> 是什么，建议花一些时间通过下面的链接了解一下：</p><ul>
-<li>【<a href="/module-tools/guide/basic/modify-output-product.html">修改输出产物</a>】</li>
-</ul></div></div>
-<p>而在本章里我们将要深入理解某些构建配置的使用以及了解执行 <code>modern build</code> 命令的时候发生了什么。</p>
-<h2 id="深入理解-buildconfig"><a class="header-anchor" aria-hidden="true" href="#深入理解-buildconfig">#</a>深入理解 <code>buildConfig</code></h2>
-<h3 id="bundle-和-bundleless"><a class="header-anchor" aria-hidden="true" href="#bundle-和-bundleless">#</a>Bundle 和 Bundleless</h3>
-<p>那么首先我们来理解一下 Bundle 和 Bundleless。</p>
-<p>所谓 Bundle 是指对构建产物进行打包，构建产物可能是一个文件，也有可能是基于一定的<a href="https://esbuild.github.io/api/#splitting-2" target="_blank" rel="nofollow">代码拆分策略</a>得到的多个文件。</p>
-<p>而 Bundleless 则是指对每个源文件进行编译构建，但是并不将它们打包在一起。每一个产物文件都可以找到与之相对应的源码文件。</p>
-<h3 id="input-与-sourcedir-的关系"><a class="header-anchor" aria-hidden="true" href="#input-与-sourcedir-的关系">#</a>input 与 sourceDir 的关系</h3>
-<h2 id="构建过程"><a class="header-anchor" aria-hidden="true" href="#构建过程">#</a>构建过程</h2><!--/$--><div><footer m="t-8"><div flex="~ col sm:row" justify="sm:around" gap="2" p="t-6"><div flex="~ col" class="ajVjQ"><a class="R5q4o pAnzs" target="" cursor="pointer" href="/module-tools/guide/advance/in-depth-about-build.html"><span class="rVEMI">上一页</span><span class="jr5Zr">深入理解构建</span></a></div><div flex="~ col" class="A2aco"><a class="R5q4o pAnzs A2aco" target="" cursor="pointer" href="/module-tools/guide/advance/copy.html"><span class="rVEMI">下一页</span><span class="jr5Zr">使用 Copy 工具</span></a></div></div></footer></div></div></div><div class="RsCtL" 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="#深入理解-buildconfig" 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">深入理解 buildConfig</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:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Bundle 和 Bundleless</a></li><li><a href="#input-与-sourcedir-的关系" 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">input 与 sourceDir 的关系</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></body></html>

package/doc_build/guide/advance/theme-config.html DELETED Viewed

@@ -1,28 +0,0 @@
-<!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"><link rel="icon" href="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/logo-1x-0104.png" /><title data-rh="true">主题配置 - Module Tools</title><meta data-rh="true" name="description" content="模块工程解决方案"/><script>!function(){"use strict";var e,n,i,t,o,r={},u={};function _(e){var n=u[e];if(void 0!==n)return n.exports;var i=u[e]={exports:{}};return r[e].call(i.exports,i,i.exports,_),i.exports}_.m=r,e=[],_.O=function(n,i,t,o){if(!i){var r=1/0;for(a=0;a<e.length;a++){i=e[a][0],t=e[a][1],o=e[a][2];for(var u=!0,d=0;d<i.length;d++)(!1&o||r>=o)&&Object.keys(_.O).every((function(e){return _.O[e](i[d])}))?i.splice(d--,1):(u=!1,o<r&&(r=o));if(u){e.splice(a--,1);var c=t();void 0!==c&&(n=c)}}return n}o=o||0;for(var a=e.length;a>0&&e[a-1][2]>o;a--)e[a]=e[a-1];e[a]=[i,t,o]},_.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return _.d(n,{a:n}),n},i=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},_.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);_.r(o);var r={};n=n||[null,i({}),i([]),i(i)];for(var u=2&t&&e;"object"==typeof u&&!~n.indexOf(u);u=i(u))Object.getOwnPropertyNames(u).forEach((function(n){r[n]=function(){return e[n]}}));return r.default=function(){return e},_.d(o,r),o},_.d=function(e,n){for(var i in n)_.o(n,i)&&!_.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},_.f={},_.e=function(e){return Promise.all(Object.keys(_.f).reduce((function(n,i){return _.f[i](e,n),n}),[]))},_.u=function(e){return"static/js/async/"+({229:"en_guide_intro_getting-started",237:"zh_api_config_build-config",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",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",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",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:"f8682be3",237:"048fd5ec",315:"7bd869c4",421:"a9888eed",727:"64e795f3",775:"6b06b54a",1085:"669f0a56",1108:"6f8b5ff6",1178:"a4d81bf6",1180:"b9570109",1189:"22957707",1677:"60d0260c",1756:"1199124a",1895:"c19f9dcf",2013:"7454d916",2020:"bf11b1c4",2033:"9cc45924",2034:"71c3fe16",2097:"fc95fb77",2532:"56325139",2540:"168ce7dd",2556:"8bc7f316",2611:"21a1aea4",2633:"a4c00d9a",2678:"a22fc49a",2821:"8ccbc8d1",2892:"67d07b91",3032:"08c5112f",3741:"f5f6b204",3799:"e31e8293",3806:"c22dc4be",4260:"a52d3247",4390:"a7635714",4663:"c254ed46",4695:"1eecd474",4749:"80a2bd97",4837:"b6d541ff",5057:"45c0a51d",5107:"27829e44",5284:"963289d5",5300:"bf6c6221",5532:"c7cf5d4b",5578:"ad453d13",5654:"367a5701",5723:"5b936003",5966:"ae52c47a",6098:"db0ad9fc",7241:"7c13584d",7294:"a091d57d",7401:"45155af9",7512:"7f2dae5c",7571:"1707ed29",8230:"5ff1d623",8652:"6fbf1cb7",8687:"b850249c",8782:"0d78b268",8927:"51bf3569",9220:"b28d6723",9479:"84e5cea0",9675:"9d721554",9826:"aec0b4e1",9868:"099dfaea"}[e]+".js"},_.miniCssF=function(e){},_.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),_.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t={},o="@modern-js/module-tools-docs:",_.l=function(e,n,i,r){if(t[e])t[e].push(n);else{var u,d;if(void 0!==i)for(var c=document.getElementsByTagName("script"),a=0;a<c.length;a++){var f=c[a];if(f.getAttribute("src")==e||f.getAttribute("data-webpack")==o+i){u=f;break}}u||(d=!0,(u=document.createElement("script")).charset="utf-8",u.timeout=120,_.nc&&u.setAttribute("nonce",_.nc),u.setAttribute("data-webpack",o+i),u.src=e),t[e]=[n];var s=function(n,i){u.onerror=u.onload=null,clearTimeout(g);var o=t[e];if(delete t[e],u.parentNode&&u.parentNode.removeChild(u),o&&o.forEach((function(e){return e(i)})),n)return n(i)},g=setTimeout(s.bind(null,void 0,{type:"timeout",target:u}),12e4);u.onerror=s.bind(null,u.onerror),u.onload=s.bind(null,u.onload),d&&document.head.appendChild(u)}},_.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},_.p="/",function(){var e={6272:0};_.f.j=function(n,i){var t=_.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 r=_.p+_.u(n),u=new Error;_.l(r,(function(i){if(_.o(e,n)&&(0!==(t=e[n])&&(e[n]=void 0),t)){var o=i&&("load"===i.type?"missing":i.type),r=i&&i.target&&i.target.src;u.message="Loading chunk "+n+" failed.\n("+o+": "+r+")",u.name="ChunkLoadError",u.type=o,u.request=r,t[1](u)}}),"chunk-"+n,n)}else e[n]=0},_.O.j=function(n){return 0===e[n]};var n=function(n,i){var t,o,r=i[0],u=i[1],d=i[2],c=0;if(r.some((function(n){return 0!==e[n]}))){for(t in u)_.o(u,t)&&(_.m[t]=u[t]);if(d)var a=d(_)}for(n&&n(i);c<r.length;c++)o=r[c],_.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return _.O(a)},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="/static/js/lib-polyfill.b3038509.js"></script><script defer="defer" src="/static/js/lib-lodash.c5845536.js"></script><script defer="defer" src="/static/js/lib-react.d41ace5e.js"></script><script defer="defer" src="/static/js/1607.70af642a.js"></script><script defer="defer" src="/static/js/main.2d3257a4.js"></script><link href="/static/css/main.edaad072.css" rel="stylesheet"></head><body><div id="root"><div style="height:100%"><header class="top-0 left-0 relative md:fixed w-full" style="border-bottom:1px solid var(--modern-c-divider-light);z-index:var(--modern-z-index-nav)"><div class="J5RhI modern-doc-nav" p="x-6"><div flex="~" justify="between" align="items-center" h="full" class="Be7Bu"><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="fxz4T"><div class="search" flex="sm:1" p="sm:l-8"><div flex="~" align="items-center" pos="relative" m="r-2" font="semibold"><svg width="32" height="32" viewBox="0 0 32 32" w="5" h="5" fill="currentColor"><path fill="#888888" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg><input disabled="" cursor="text focus:auto" placeholder="Search" height="8" border="none" type="text" text="sm" p="t-0 r-2 b-0 l-2" transition="all duration-200 ease" class="rounded-sm SjSZ2 " aria-label="Search" autoComplete="off"/><div m="r-3" w="10" h="6" p="x-1.5" border="1px solid gray-light-3 rounded-md" text="xs gray-light-3" flex="~" align="items-center" justify="around" class="iUJv9"><span>⌘</span><span>K</span></div></div></div><div class="menu" h="14"><div text="sm" font="medium" m="x-3" class="text-brand"><a class="R5q4o " target="" cursor="pointer" href="/module-tools/guide/intro/welcome.html">指南</a></div><div text="sm" font="medium" m="x-3" class=""><a class="R5q4o " target="" cursor="pointer" href="/module-tools/api/index.html">API</a></div><div text="sm" font="medium" m="x-3" class=""><a class="R5q4o " 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.2.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 p="3" w="full" h="full" class="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 font="medium"><a href="https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="R5q4o "><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 font="medium"><a href="https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="R5q4o "><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 flex="~" text="sm" font="bold" align="items-center" class="translation WjR05"><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 p="3" w="full" h="full" class="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 class="rounded-md" p="y-1.6 l-3"><span m="r-1" text="brand">简体中文</span></div><div font="medium"><a class="R5q4o " target="" cursor="pointer" href="/module-tools/en/guide/advance/theme-config"><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 class="WjR05 modern-doc-appearance" display="none sm:flex" align-items-center="center"><button class="DdK0_ undefined" id="" type="button" role="switch"><span class="WLpap"><span class="Q_Ula"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="JMkpU"><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="tgdgB"><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 FU7nx" nav-h="mobile sm:desktop" flex="~" align-items-center="~" pos="relative"><div h="full" flex="~" gap="x-4" align-items-center="~" transition="color duration-300"><a href="https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer"><div class="_8YjQ"><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><button class=" wzxr1"><span class="kECx4"><span class="wzOB6"></span><span class="coO8e"></span><span class="RrwJk"></span></span></button><div class="NeczB " id="navScreen"><div class="WLObZ"><div class="_3YuLy"><div w="full" class="osgV9"><div text="sm" font="medium" m="x-3" class="text-brand"><a class="R5q4o " target="" cursor="pointer" href="/module-tools/guide/intro/welcome.html">指南</a></div></div><div w="full" class="osgV9"><div text="sm" font="medium" m="x-3" class=""><a class="R5q4o " target="" cursor="pointer" href="/module-tools/api/index.html">API</a></div></div><div w="full" class="osgV9"><div text="sm" font="medium" m="x-3" class=""><a class="R5q4o " target="" cursor="pointer" href="/module-tools/plugins/guide/getting-started.html">插件</a></div></div><div w="full" class="osgV9"><div m="x-3" last="mr-0"><div pos="relative" class=" Tk5bz"><button class="X7ejb"><span class="IOfpr">v2.2.0</span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" uavm2 "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="ciUdc"><div class="pa-1" font="medium"><a href="https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="R5q4o "><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 class="pa-1" font="medium"><a href="https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="R5q4o "><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 class="rp9pY" flex="~" justify="center" align-items-center="center"><div class="align-items-center appearance pa-2 ctzdQ" flex="~" justify="center"><button class="DdK0_ undefined" id="" type="button" role="switch"><span class="WLpap"><span class="Q_Ula"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="JMkpU"><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="tgdgB"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></span></span></button></div></div><div flex="~" text="sm" font="bold" justify="center"><div m="x-1.5"><div pos="relative" class=" Tk5bz"><button class="X7ejb"><span class="IOfpr"><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=" uavm2 "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="ciUdc"><div class="pa-1"><span m="r-1" text="brand">简体中文</span></div><div class="pa-1" font="medium"><a class="R5q4o " 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 class="social-links FU7nx" nav-h="mobile sm:desktop" flex="~" align-items-center="~" pos="relative"><div h="full" flex="~" gap="x-4" align-items-center="~" transition="color duration-300"><a href="https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer"><div class="_8YjQ"><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></div></header><section><div p="t-0" m="md:t-14" class="Q34AI"><div class="_aGGP"><button flex="~ center" class="wNUbj"><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="UroNu "><nav m="t-1"><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center r3Oz1"><h2 p="y-1 x-2" text="sm" font="semibold">介绍</h2><div p="2" class="BgJSm"><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 style="transition:height 0.2s ease-in-out;overflow:hidden;height:96px"><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/intro/welcome.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">欢迎使用</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/intro/why-module-engineering-solution.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">为什么需要模块工程解决方案</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/intro/getting-started.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">快速开始</div></a></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center r3Oz1"><h2 p="y-1 x-2" text="sm" font="semibold">基础使用</h2><div p="2" class="BgJSm"><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 style="transition:height 0.2s ease-in-out;overflow:hidden;height:224px"><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/basic/before-getting-started.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">开始之前</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/basic/command-preview.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">命令预览</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/basic/modify-output-product.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">修改输出产物</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/basic/use-micro-generator.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">使用微生成器</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/basic/using-storybook.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">使用 Storybook</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/basic/test-your-project.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">测试项目</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/basic/publish-your-project.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">版本管理与发布</div></a></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center r3Oz1"><h2 p="y-1 x-2" text="sm" font="semibold">进阶指南</h2><div p="2" class="BgJSm"><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 style="transition:height 0.2s ease-in-out;overflow:hidden;height:224px"><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/advance/in-depth-about-build.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">深入理解构建</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/advance/in-depth-about-dev-command.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">深入理解 dev 命令</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/advance/copy.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">使用 Copy 工具</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/advance/external-dependency.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">如何处理第三方依赖</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/advance/build-umd.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">构建 umd 产物</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/advance/theme-config.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="RCb_U" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">主题配置</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/advance/asset.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">处理静态资源文件</div></a></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center r3Oz1"><h2 p="y-1 x-2" text="sm" font="semibold">最佳实践</h2><div p="2" class="BgJSm"><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 style="transition:height 0.2s ease-in-out;overflow:hidden;height:32px"><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/best-practices/components.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">开发组件</div></a></div></div></section></nav></aside><div flex="~ shrink-0" class="TP8A7"><div w="full"><div class="modern-doc"><!--$--><h1 id="主题配置"><a class="header-anchor" aria-hidden="true" href="#主题配置">#</a>主题配置</h1>
-<p>模块工程通过 <a href="/module-tools/api/config/design-system.html"><code>designSystem</code></a> API，提供了配置主题的能力。</p>
-<h2 id="动机和原理"><a class="header-anchor" aria-hidden="true" href="#动机和原理">#</a>动机和原理</h2>
-<p>主题配置有些类似组件库中的定制主题功能，主要用于样式开发中使用。我们可以通过 <code>designSystem</code> 配置在不同的样式开发环境下使用由它生成的 <code>designToken</code>。</p>
-<p>所谓 <code>designToken</code> 在不同的样式开发环境下对应不同的东西：</p>
-<ul>
-<li>tailwindcss: 以 <code>designSystem</code> 作为 tailwindcss 的 <code>theme</code> 配置。因此可以使用：<!-- -->
-<ul>
-<li>tailwindcss 支持的 HTML 类名。</li>
-<li>在 css/less/sass 下通过 <code>@apply</code> 自定义指令使用与 tailwindcss 支持的 HTML 类名同名的字符串。</li>
-</ul>
-</li>
-<li>css/less/scss: 通过 <code>designSystem</code> 生成全局的样式变量。</li>
-</ul>
-<p><code>designSystem</code> API 的数据结构借鉴了 <code>tailwindcss</code> 配置对象中的 <a href="https://tailwindcss.com/docs/theme" target="_blank" rel="nofollow">theme API</a>，因此存在默认的一套 <code>designToken</code>。关于默认值，可以查看 <a href="/module-tools/api/config/design-system.html"><code>designSystem</code> API</a>。</p>
-<div class="modern-directive info"><p class="modern-directive-title">INFO</p><div class="modern-directive-content"><p>
-目前暂时还未支持 css/less/sass 全局变量。</p></div></div>
-<h2 id="使用示例"><a class="header-anchor" aria-hidden="true" href="#使用示例">#</a>使用示例</h2>
-<h3 id="tailwindcss"><a class="header-anchor" aria-hidden="true" href="#tailwindcss">#</a>tailwindcss</h3>
-<p>在使用 tailwindcss 的时候，可以通过 <code>designSystem</code> 来设置它的 <a href="https://v2.tailwindcss.com/docs/theme#extending-the-default-theme-1" target="_blank" rel="nofollow"><code>theme</code></a> 配置。</p>
-<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="./modern.config.ts" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-active" style="background:#3b4252;color:#d8dee9;border-right-color:#3b425200;border-bottom-color:#88c0d000"><div><span style="opacity:0.5">./</span>modern.config.ts</div></div><div style="flex:1;min-width:0.8em"></div><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ch-editor-button"><title>Copy</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></div><div data-ch-panel="north" style="flex-grow:1;overflow:hidden"><div class="ch-code-wrapper" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto;height:100%"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>export default {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  designSystem: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    extend: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      colors: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>        primary: &#x27;#1677ff&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div></div></div>
-<p>我们可以在代码中有两种使用 tailwindcss 的方式。</p>
-<h4 id="html-类名"><a class="header-anchor" aria-hidden="true" href="#html-类名">#</a>HTML 类名。</h4>
-<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-primary&quot;&gt;&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>
-<h4 id="apply-指令"><a class="header-anchor" aria-hidden="true" href="#apply-指令">#</a><code>@apply</code> 指令</h4>
-<p>关于 <a href="https://tailwindcss.com/docs/functions-and-directives#apply-2" target="_blank" rel="nofollow"><code>@apply</code></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="./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.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.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 &#x27;./index.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;btn-primary&quot;&gt;&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><footer m="t-8"><div flex="~ col sm:row" justify="sm:around" gap="2" p="t-6"><div flex="~ col" class="ajVjQ"><a class="R5q4o pAnzs" target="" cursor="pointer" href="/module-tools/guide/advance/build-umd.html"><span class="rVEMI">上一页</span><span class="jr5Zr">构建 umd 产物</span></a></div><div flex="~ col" class="A2aco"><a class="R5q4o pAnzs A2aco" target="" cursor="pointer" href="/module-tools/guide/advance/asset.html"><span class="rVEMI">下一页</span><span class="jr5Zr">处理静态资源文件</span></a></div></div></footer></div></div></div><div class="RsCtL" 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><li><a href="#tailwindcss" 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">tailwindcss</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></ul></nav></div></div></div></div></div></div></div></section></div></div></body></html>

package/doc_build/guide/basic/before-getting-started.html DELETED Viewed

@@ -1,89 +0,0 @@
-<!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"><link rel="icon" href="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/logo-1x-0104.png" /><title data-rh="true">开始之前 - Module Tools</title><meta data-rh="true" name="description" content="模块工程解决方案"/><script>!function(){"use strict";var e,n,i,t,o,r={},u={};function _(e){var n=u[e];if(void 0!==n)return n.exports;var i=u[e]={exports:{}};return r[e].call(i.exports,i,i.exports,_),i.exports}_.m=r,e=[],_.O=function(n,i,t,o){if(!i){var r=1/0;for(a=0;a<e.length;a++){i=e[a][0],t=e[a][1],o=e[a][2];for(var u=!0,d=0;d<i.length;d++)(!1&o||r>=o)&&Object.keys(_.O).every((function(e){return _.O[e](i[d])}))?i.splice(d--,1):(u=!1,o<r&&(r=o));if(u){e.splice(a--,1);var c=t();void 0!==c&&(n=c)}}return n}o=o||0;for(var a=e.length;a>0&&e[a-1][2]>o;a--)e[a]=e[a-1];e[a]=[i,t,o]},_.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return _.d(n,{a:n}),n},i=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},_.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);_.r(o);var r={};n=n||[null,i({}),i([]),i(i)];for(var u=2&t&&e;"object"==typeof u&&!~n.indexOf(u);u=i(u))Object.getOwnPropertyNames(u).forEach((function(n){r[n]=function(){return e[n]}}));return r.default=function(){return e},_.d(o,r),o},_.d=function(e,n){for(var i in n)_.o(n,i)&&!_.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},_.f={},_.e=function(e){return Promise.all(Object.keys(_.f).reduce((function(n,i){return _.f[i](e,n),n}),[]))},_.u=function(e){return"static/js/async/"+({229:"en_guide_intro_getting-started",237:"zh_api_config_build-config",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",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",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",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:"f8682be3",237:"048fd5ec",315:"7bd869c4",421:"a9888eed",727:"64e795f3",775:"6b06b54a",1085:"669f0a56",1108:"6f8b5ff6",1178:"a4d81bf6",1180:"b9570109",1189:"22957707",1677:"60d0260c",1756:"1199124a",1895:"c19f9dcf",2013:"7454d916",2020:"bf11b1c4",2033:"9cc45924",2034:"71c3fe16",2097:"fc95fb77",2532:"56325139",2540:"168ce7dd",2556:"8bc7f316",2611:"21a1aea4",2633:"a4c00d9a",2678:"a22fc49a",2821:"8ccbc8d1",2892:"67d07b91",3032:"08c5112f",3741:"f5f6b204",3799:"e31e8293",3806:"c22dc4be",4260:"a52d3247",4390:"a7635714",4663:"c254ed46",4695:"1eecd474",4749:"80a2bd97",4837:"b6d541ff",5057:"45c0a51d",5107:"27829e44",5284:"963289d5",5300:"bf6c6221",5532:"c7cf5d4b",5578:"ad453d13",5654:"367a5701",5723:"5b936003",5966:"ae52c47a",6098:"db0ad9fc",7241:"7c13584d",7294:"a091d57d",7401:"45155af9",7512:"7f2dae5c",7571:"1707ed29",8230:"5ff1d623",8652:"6fbf1cb7",8687:"b850249c",8782:"0d78b268",8927:"51bf3569",9220:"b28d6723",9479:"84e5cea0",9675:"9d721554",9826:"aec0b4e1",9868:"099dfaea"}[e]+".js"},_.miniCssF=function(e){},_.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),_.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t={},o="@modern-js/module-tools-docs:",_.l=function(e,n,i,r){if(t[e])t[e].push(n);else{var u,d;if(void 0!==i)for(var c=document.getElementsByTagName("script"),a=0;a<c.length;a++){var f=c[a];if(f.getAttribute("src")==e||f.getAttribute("data-webpack")==o+i){u=f;break}}u||(d=!0,(u=document.createElement("script")).charset="utf-8",u.timeout=120,_.nc&&u.setAttribute("nonce",_.nc),u.setAttribute("data-webpack",o+i),u.src=e),t[e]=[n];var s=function(n,i){u.onerror=u.onload=null,clearTimeout(g);var o=t[e];if(delete t[e],u.parentNode&&u.parentNode.removeChild(u),o&&o.forEach((function(e){return e(i)})),n)return n(i)},g=setTimeout(s.bind(null,void 0,{type:"timeout",target:u}),12e4);u.onerror=s.bind(null,u.onerror),u.onload=s.bind(null,u.onload),d&&document.head.appendChild(u)}},_.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},_.p="/",function(){var e={6272:0};_.f.j=function(n,i){var t=_.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 r=_.p+_.u(n),u=new Error;_.l(r,(function(i){if(_.o(e,n)&&(0!==(t=e[n])&&(e[n]=void 0),t)){var o=i&&("load"===i.type?"missing":i.type),r=i&&i.target&&i.target.src;u.message="Loading chunk "+n+" failed.\n("+o+": "+r+")",u.name="ChunkLoadError",u.type=o,u.request=r,t[1](u)}}),"chunk-"+n,n)}else e[n]=0},_.O.j=function(n){return 0===e[n]};var n=function(n,i){var t,o,r=i[0],u=i[1],d=i[2],c=0;if(r.some((function(n){return 0!==e[n]}))){for(t in u)_.o(u,t)&&(_.m[t]=u[t]);if(d)var a=d(_)}for(n&&n(i);c<r.length;c++)o=r[c],_.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return _.O(a)},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="/static/js/lib-polyfill.b3038509.js"></script><script defer="defer" src="/static/js/lib-lodash.c5845536.js"></script><script defer="defer" src="/static/js/lib-react.d41ace5e.js"></script><script defer="defer" src="/static/js/1607.70af642a.js"></script><script defer="defer" src="/static/js/main.2d3257a4.js"></script><link href="/static/css/main.edaad072.css" rel="stylesheet"></head><body><div id="root"><div style="height:100%"><header class="top-0 left-0 relative md:fixed w-full" style="border-bottom:1px solid var(--modern-c-divider-light);z-index:var(--modern-z-index-nav)"><div class="J5RhI modern-doc-nav" p="x-6"><div flex="~" justify="between" align="items-center" h="full" class="Be7Bu"><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="fxz4T"><div class="search" flex="sm:1" p="sm:l-8"><div flex="~" align="items-center" pos="relative" m="r-2" font="semibold"><svg width="32" height="32" viewBox="0 0 32 32" w="5" h="5" fill="currentColor"><path fill="#888888" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg><input disabled="" cursor="text focus:auto" placeholder="Search" height="8" border="none" type="text" text="sm" p="t-0 r-2 b-0 l-2" transition="all duration-200 ease" class="rounded-sm SjSZ2 " aria-label="Search" autoComplete="off"/><div m="r-3" w="10" h="6" p="x-1.5" border="1px solid gray-light-3 rounded-md" text="xs gray-light-3" flex="~" align="items-center" justify="around" class="iUJv9"><span>⌘</span><span>K</span></div></div></div><div class="menu" h="14"><div text="sm" font="medium" m="x-3" class="text-brand"><a class="R5q4o " target="" cursor="pointer" href="/module-tools/guide/intro/welcome.html">指南</a></div><div text="sm" font="medium" m="x-3" class=""><a class="R5q4o " target="" cursor="pointer" href="/module-tools/api/index.html">API</a></div><div text="sm" font="medium" m="x-3" class=""><a class="R5q4o " 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.2.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 p="3" w="full" h="full" class="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 font="medium"><a href="https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="R5q4o "><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 font="medium"><a href="https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="R5q4o "><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 flex="~" text="sm" font="bold" align="items-center" class="translation WjR05"><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 p="3" w="full" h="full" class="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 class="rounded-md" p="y-1.6 l-3"><span m="r-1" text="brand">简体中文</span></div><div font="medium"><a class="R5q4o " target="" cursor="pointer" href="/module-tools/en/guide/basic/before-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 class="WjR05 modern-doc-appearance" display="none sm:flex" align-items-center="center"><button class="DdK0_ undefined" id="" type="button" role="switch"><span class="WLpap"><span class="Q_Ula"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="JMkpU"><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="tgdgB"><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 FU7nx" nav-h="mobile sm:desktop" flex="~" align-items-center="~" pos="relative"><div h="full" flex="~" gap="x-4" align-items-center="~" transition="color duration-300"><a href="https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer"><div class="_8YjQ"><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><button class=" wzxr1"><span class="kECx4"><span class="wzOB6"></span><span class="coO8e"></span><span class="RrwJk"></span></span></button><div class="NeczB " id="navScreen"><div class="WLObZ"><div class="_3YuLy"><div w="full" class="osgV9"><div text="sm" font="medium" m="x-3" class="text-brand"><a class="R5q4o " target="" cursor="pointer" href="/module-tools/guide/intro/welcome.html">指南</a></div></div><div w="full" class="osgV9"><div text="sm" font="medium" m="x-3" class=""><a class="R5q4o " target="" cursor="pointer" href="/module-tools/api/index.html">API</a></div></div><div w="full" class="osgV9"><div text="sm" font="medium" m="x-3" class=""><a class="R5q4o " target="" cursor="pointer" href="/module-tools/plugins/guide/getting-started.html">插件</a></div></div><div w="full" class="osgV9"><div m="x-3" last="mr-0"><div pos="relative" class=" Tk5bz"><button class="X7ejb"><span class="IOfpr">v2.2.0</span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" uavm2 "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="ciUdc"><div class="pa-1" font="medium"><a href="https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="R5q4o "><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 class="pa-1" font="medium"><a href="https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="R5q4o "><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 class="rp9pY" flex="~" justify="center" align-items-center="center"><div class="align-items-center appearance pa-2 ctzdQ" flex="~" justify="center"><button class="DdK0_ undefined" id="" type="button" role="switch"><span class="WLpap"><span class="Q_Ula"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="JMkpU"><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="tgdgB"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></span></span></button></div></div><div flex="~" text="sm" font="bold" justify="center"><div m="x-1.5"><div pos="relative" class=" Tk5bz"><button class="X7ejb"><span class="IOfpr"><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=" uavm2 "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="ciUdc"><div class="pa-1"><span m="r-1" text="brand">简体中文</span></div><div class="pa-1" font="medium"><a class="R5q4o " 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 class="social-links FU7nx" nav-h="mobile sm:desktop" flex="~" align-items-center="~" pos="relative"><div h="full" flex="~" gap="x-4" align-items-center="~" transition="color duration-300"><a href="https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer"><div class="_8YjQ"><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></div></header><section><div p="t-0" m="md:t-14" class="Q34AI"><div class="_aGGP"><button flex="~ center" class="wNUbj"><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="UroNu "><nav m="t-1"><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center r3Oz1"><h2 p="y-1 x-2" text="sm" font="semibold">介绍</h2><div p="2" class="BgJSm"><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 style="transition:height 0.2s ease-in-out;overflow:hidden;height:96px"><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/intro/welcome.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">欢迎使用</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/intro/why-module-engineering-solution.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">为什么需要模块工程解决方案</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/intro/getting-started.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">快速开始</div></a></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center r3Oz1"><h2 p="y-1 x-2" text="sm" font="semibold">基础使用</h2><div p="2" class="BgJSm"><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 style="transition:height 0.2s ease-in-out;overflow:hidden;height:224px"><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/basic/before-getting-started.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="RCb_U" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">开始之前</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/basic/command-preview.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">命令预览</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/basic/modify-output-product.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">修改输出产物</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/basic/use-micro-generator.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">使用微生成器</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/basic/using-storybook.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">使用 Storybook</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/basic/test-your-project.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">测试项目</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/basic/publish-your-project.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">版本管理与发布</div></a></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center r3Oz1"><h2 p="y-1 x-2" text="sm" font="semibold">进阶指南</h2><div p="2" class="BgJSm"><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 style="transition:height 0.2s ease-in-out;overflow:hidden;height:224px"><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/advance/in-depth-about-build.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">深入理解构建</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/advance/in-depth-about-dev-command.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">深入理解 dev 命令</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/advance/copy.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">使用 Copy 工具</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/advance/external-dependency.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">如何处理第三方依赖</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/advance/build-umd.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">构建 umd 产物</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/advance/theme-config.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">主题配置</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/advance/asset.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">处理静态资源文件</div></a></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center r3Oz1"><h2 p="y-1 x-2" text="sm" font="semibold">最佳实践</h2><div p="2" class="BgJSm"><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 style="transition:height 0.2s ease-in-out;overflow:hidden;height:32px"><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/guide/best-practices/components.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">开发组件</div></a></div></div></section></nav></aside><div flex="~ shrink-0" class="TP8A7"><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>为了使用 Modern.js 模块工程解决方案，首先需要 <a href="https://nodejs.org/zh/" target="_blank" rel="nofollow">NodeJS</a>，我们推荐最新的<a href="https://github.com/nodejs/Release" target="_blank" rel="nofollow">长期维护版本</a>，并确保 Node 版本大于等于 <strong>14.18.0</strong>。因为非稳定的 NodeJS 时常有一些 Bug，你可以使用 <a href="https://github.com/coreybutler/nvm-windows" target="_blank" rel="nofollow">nvm-windows</a> 和 <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="nofollow">nvm</a>（Mac/linux）安装，这样你就可以方便地切换到不同的 NodeJS 版本，这些版本可能会用于不同的项目。</p>
-<h2 id="初识-npm"><a class="header-anchor" aria-hidden="true" href="#初识-npm">#</a>初识 npm</h2>
-<p>当 NodeJS 被安装后，你不仅可以在命令行中访问 <code>node</code> 可执行程序，同时你也可以执行 <code>npm</code> 命令。</p>
-<p>npm 是 NodeJS 的标准软件包管理器。它一开始的用途是用于下载和管理 NodeJS 包的依赖关系，但后来它逐渐变成为一个用于前端 JavaScript 的工具。</p>
-<p><strong>如果你已经对 npm 和 npm 包的使用方式有所了解，那么可以直接跳到<a href="/module-tools/guide/basic/before-getting-started.html#npm-%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8">【npm 包管理器】</a>部分。</strong></p>
-<h2 id="npm-包类型项目"><a class="header-anchor" aria-hidden="true" href="#npm-包类型项目">#</a>npm 包类型项目</h2>
-<p>那么什么是 npm 包类型的项目呢？当我们在一个空的项目目录下执行 <code>npm init</code> 命令的时候，它会在当前目录下面创建一个文件名为 <code>package.json</code> 的 JSON 文件。在创建过程中，我们需要填写包括但不限于 npm 包的名称、版本号、描述等等内容，这些填写的内容都会在生成的 <code>package.json</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;name&quot;: &quot;npm-demo&quot;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  &quot;version&quot;: &quot;1.0.0&quot;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  &quot;description&quot;: &quot;&quot;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  &quot;main&quot;: &quot;index.js&quot;,</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;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&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>  &quot;author&quot;: &quot;&quot;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  &quot;license&quot;: &quot;ISC&quot;</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> 文件的项目就是一个 npm 包类型的项目，你可以执行 <code>npm publish</code> 命令将这个项目发布到 <a href="https://www.npmjs.com/" target="_blank" rel="nofollow">npm Registry</a>。</p>
-<p>npm Registry 是一个 <a href="https://docs.npmjs.com/about-the-public-npm-registry" target="_blank" rel="nofollow">npm 包存储的地方</a>，开发者们不仅可以将他们自己的 npm 包发布到 npm Registry，还可以通过 npm Registry 使用其他开发者发布的 npm 包。</p>
-<p>优质的 npm 包会有更多的人去使用，因为它不仅节省了很多代码实现的工作，同时也不容易让项目出现问题。</p>
-<h2 id="使用第三方-npm-包"><a class="header-anchor" aria-hidden="true" href="#使用第三方-npm-包">#</a>使用第三方 npm 包</h2>
-<p>当要为初始化的项目增加第三方的 npm 包的时候，我们可以把这一过程叫做“为项目安装依赖”或是“为项目增加依赖”。在增加依赖之前，首先我们要特别了解一件事情 —— <strong>npm 依赖的软件包类型</strong>：</p>
-<ul>
-<li><code>&quot;dependencies&quot;</code>：一种是你的应用程序在生产环境中需要的软件包。</li>
-<li><code>&quot;devDependencies&quot;</code>：另一种是仅在本地开发和测试中需要的软件包。<!-- -->
-<blockquote>
-<p>软件包可以理解为是第三方的 npm 包。</p>
-</blockquote>
-</li>
-</ul>
-<p>你可以通过执行 <code>npm install npm-package-name</code> 或者 <code>npm add npm-package-name</code> 的方式来安装在<strong>生产环境中需要的软件包</strong>，或者也可以在 <code>package.json</code> 文件中手动的将需要安装的包和对应的<a href="https://docs.npmjs.com/about-semantic-versioning" target="_blank" rel="nofollow">语义化版本</a>写在 <code>&quot;dependencies&quot;</code> 里，并执行 <code>npm install</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;name&quot;: &quot;your-npm-project&quot;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  &quot;dependencies&quot;: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &quot;npm-package-name&quot;: &quot;0.1.0&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>npm install npm-package-name --save-dev</code> 或 <code>npm add npm-package-name --save-dev</code> 的方式来安装<strong>仅在本地开发和测试中需要的软件包</strong>，或者也可以在 <code>package.json</code> 文件中手动的将需要安装的包和对应的<a href="https://docs.npmjs.com/about-semantic-versioning" target="_blank" rel="nofollow">语义化版本</a>写在 <code>&quot;devDependencies&quot;</code> 里，并执行 <code>npm install</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;name&quot;: &quot;your-npm-project&quot;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  &quot;devDependencies&quot;: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &quot;npm-package-name&quot;: &quot;0.1.0&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><strong>在安装或者使用第三方 npm 包的时候一定要确定它们的用途，以及通过区分它们的类型确定好它们应该放在 <code>&quot;dependencies&quot;</code> 还是 <code>&quot;devDependencies&quot;</code> 中。</strong></p>
-<div class="modern-directive tip"><p class="modern-directive-title">TIP</p><div class="modern-directive-content"><p>
-一般来说，需要在源代码中使用到的包都属于 <code>dependencies</code> 依赖。除非你通过打包的方式将依赖的代码输出到本地，那么这种情况可以将它作为 <code>devDependencies</code>依赖。</p></div></div>
-<h2 id="还需要了解的-npm-零碎知识"><a class="header-anchor" aria-hidden="true" href="#还需要了解的-npm-零碎知识">#</a>还需要了解的 npm 零碎知识</h2>
-<h3 id="npm-包的程序入口"><a class="header-anchor" aria-hidden="true" href="#npm-包的程序入口">#</a>npm 包的程序入口</h3>
-<p>在 <code>package.json</code> 中存在一个 <code>&quot;main&quot;</code> 属性，它对应的值是一个模块 ID，或者更直观的说是一个 NodeJS 文件路径，它是你程序的主要入口。</p>
-<p>例如你的包名为 <code>foo</code>，并且用户安装了它，然后执行 <code>require(&quot;foo&quot;)</code> 代码，那么 <code>foo</code> 这个 npm 包的 <code>&quot;main&quot;</code> 字段对应的文件将会被导出。</p>
-<p><strong>推荐在你的 npm 包里一定要设置 <code>&quot;main&quot;</code> 字段</strong>。如果没有设置 <code>&quot;main&quot;</code>，则默认入口为包的根目录下的 <code>index.js</code> 文件。</p>
-<p>除了需要设置 <code>&quot;main&quot;</code> 属性以外，一般还会设置 <code>&quot;module&quot;</code> 属性。它与 <code>&quot;main&quot;</code> 属性的用途类似，它主要是用于在 webpack 场景下使用。webpack 在大多数情况下，会以 <strong>&quot;module&quot; -&gt; &quot;main&quot;</strong> 这个顺序读取 npm 包的入口（文件）。</p>
-<blockquote>
-<p>想要了解关于 webpack 如何做这件事，可以查看这个<a href="https://webpack.js.org/configuration/resolve/#resolvemainfields-1" target="_blank" rel="nofollow">链接</a>。</p>
-</blockquote>
-<h3 id="scripts"><a class="header-anchor" aria-hidden="true" href="#scripts">#</a><code>&quot;scripts&quot;</code></h3>
-<p><code>package.json</code> 文件的 <code>&quot;scripts&quot;</code> 属性支持一些内置的脚本和 npm 预设的生命周期事件，以及任意的脚本。</p>
-<p>这些都可以通过运行 <code>npm run-script &lt;stage&gt;</code> 或简称 <code>npm run &lt;stage&gt;</code> 来执行。</p>
-<p>名称匹配的<a href="https://docs.npmjs.com/cli/v9/using-npm/scripts#pre--post-scripts-1" target="_blank" rel="nofollow">前置命令和后置命令</a>也会被运行（例如 <code>premyscript</code>、<code>myscript</code>、<code>postmyscript</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;premyscript&quot;: &quot;&quot;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &quot;myscript&quot;: &quot;&quot;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &quot;postmyscript&quot;: &quot;&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>npm run myscripts</code> 的时候，<code>premyscripts</code> 对应的脚本会在它之前执行，<code>postmyscripts</code> 对应的脚本会在它之后执行。</p>
-<p>来自依赖的脚本命令可以用 <code>npm explore &lt;pkg&gt; -- npm run &lt;stage&gt;</code> 运行。</p>
-<p>还有一些特殊的生命周期脚本（Life Scripts），只在某些情况下发生。这里介绍几个通常需要了解的情况。</p>
-<h4 id="npm-install"><a class="header-anchor" aria-hidden="true" href="#npm-install">#</a><code>npm install</code></h4>
-<p>当你运行 <code>npm install -g &lt;pkg-name&gt;</code> 时，以下脚本会运行。</p>
-<ul>
-<li><code>preinstall</code></li>
-<li><code>install</code></li>
-<li><code>postinstall</code></li>
-<li><code>prepublish</code></li>
-<li><code>preprepare</code></li>
-<li><code>prepare</code></li>
-<li><code>postprepare</code></li>
-</ul>
-<p>如果你的软件包根目录有一个 <code>binding.gyp</code> 文件，而你没有定义 <code>install</code> 或 <code>preinstall</code> 脚本，那么 npm 将以 <code>node-gyp rebuild</code> 作为默认的 install 命令，使用 <a href="https://github.com/nodejs/node-gyp" target="_blank" rel="nofollow">node-gyp</a> 进行编译。</p>
-<h4 id="npm-publish"><a class="header-anchor" aria-hidden="true" href="#npm-publish">#</a><code>npm publish</code></h4>
-<p>当发布项目的时候，执行该命令会触发以下脚本：</p>
-<ul>
-<li><code>prepublishOnly</code></li>
-<li><code>prepack</code></li>
-<li><code>prepare</code></li>
-<li><code>postpack</code></li>
-<li><code>publish</code></li>
-<li><code>postpublish</code></li>
-</ul>
-<p>当以 <a href="https://docs.npmjs.com/cli/v7/commands/npm-publish#dry-run-1" target="_blank" rel="nofollow"><code>--dry-run</code></a> 模式运行的时候，<code>prepare</code> 对应的脚本将不会执行。</p>
-<h3 id="peerdependencies"><a class="header-anchor" aria-hidden="true" href="#peerdependencies">#</a>peerDependencies</h3>
-<p>在某些情况下，你的 npm 项目与它的宿主工具或者库之间存在某种兼容关系（例如一个 webpack 插件项目和 webpack），同时你的 npm 项目不想将宿主作为必要的依赖，这个时候通常说明你的项目可能是这个宿主工具或者库的插件。你的 npm 项目会对宿主包的版本有一定的要求，因为只有在特定的版本下才会暴露出 npm 项目所需要的 API。</p>
-<p>关于更多 <code>peerDependencies</code> 的解释，可以通过下面的链接了解 npm、pnpm、Yarn 对于它的不同处理方式：</p>
-<ul>
-<li><a href="https://docs.npmjs.com/cli/v9/configuring-npm/package-json#peerdependencies-3" target="_blank" rel="nofollow">npm 对 peerDependencies 的解释</a></li>
-<li><a href="https://pnpm.io/feature-comparison" target="_blank" rel="nofollow">pnpm vs npm VS Yarn</a></li>
-</ul>
-<h2 id="npm-包管理器"><a class="header-anchor" aria-hidden="true" href="#npm-包管理器">#</a>npm 包管理器</h2>
-<p>除了 npm 这种标准的包管理器以外，目前主流的还有 <strong>pnpm</strong> 和 <strong>Yarn</strong>，它们都是不错的 npm cli 替代品。</p>
-<p>推荐使用 <a href="https://pnpm.io/installation" target="_blank" rel="nofollow">pnpm</a> 来管理项目依赖，可以通过下面的方式安装它：</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>npm install -g pnpm</span></div></div><br/></code></div></div>
-<h2 id="module-tools-配置文件"><a class="header-anchor" aria-hidden="true" href="#module-tools-配置文件">#</a>Module Tools 配置文件</h2>
-<p>通过<code>@modern-js/create</code>创建的模块工程项目目录下提供了 Module Tools 的配置文件 —— <code>modern.config.(j|t)s</code>。但 <code>modern.config</code> 配置文件不是必须存在的。</p>
-<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>// modern.config.ts</span></div></div><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>  buildPreset: &#x27;npm-library&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br/></code></div></div>
-<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.config.js</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>import moduleTools 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 {</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>  buildPreset: &#x27;npm-library&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
-<p><strong>我们推荐使用 <code>defineConfig</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>// modern.config.ts</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default {};</span></div></div><br/></code></div></div>
-<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.config.js</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default {};</span></div></div><br/></code></div></div><!--/$--><div><footer m="t-8"><div flex="~ col sm:row" justify="sm:around" gap="2" p="t-6"><div flex="~ col" class="ajVjQ"><a class="R5q4o pAnzs" target="" cursor="pointer" href="/module-tools/guide/intro/getting-started.html"><span class="rVEMI">上一页</span><span class="jr5Zr">快速开始</span></a></div><div flex="~ col" class="A2aco"><a class="R5q4o pAnzs A2aco" target="" cursor="pointer" href="/module-tools/guide/basic/command-preview.html"><span class="rVEMI">下一页</span><span class="jr5Zr">命令预览</span></a></div></div></footer></div></div></div><div class="RsCtL" 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="#初识-npm" 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">初识 npm</a></li><li><a href="#npm-包类型项目" 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">npm 包类型项目</a></li><li><a href="#使用第三方-npm-包" 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">使用第三方 npm 包</a></li><li><a href="#还需要了解的-npm-零碎知识" 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">还需要了解的 npm 零碎知识</a></li><li><a href="#npm-包的程序入口" 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">npm 包的程序入口</a></li><li><a href="#scripts" 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">&quot;scripts&quot;</a></li><li><a href="#npm-install" 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">npm install</a></li><li><a href="#npm-publish" 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">npm publish</a></li><li><a href="#peerdependencies" 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">peerDependencies</a></li><li><a href="#npm-包管理器" 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">npm 包管理器</a></li><li><a href="#module-tools-配置文件" 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">Module Tools 配置文件</a></li></ul></nav></div></div></div></div></div></div></div></section></div></div></body></html>