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

@modern-js/module-tools-docs 2.25.2-beta.0 → 2.26.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 (211) hide show

package/doc_build/guide/best-practices/components.html DELETED Viewed

@@ -1,121 +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">
-<script id="check-dark-light">
-;(() => {
-  const saved = localStorage.getItem('modern-theme-appearance')
-  const prefereDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-  if (!saved || saved === 'auto' ? prefereDark : saved === 'dark') {
-    document.documentElement.classList.add('dark')
-  }
-})()
-</script>
-<link rel="icon" href="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/logo-1x-0104.png"><script defer="defer">!function(){var _,d,s,e,c,i,n,o,a,t,u={},g={};function f(_){var d=g[_];if(void 0!==d)return d.exports;var s=g[_]={exports:{}};return u[_](s,s.exports,f),s.exports}f.m=u,!function(){function _(d){if("function"!=typeof WeakMap)return null;var s=new WeakMap,e=new WeakMap;return(_=function(_){return _?e:s})(d)}f.ir=function(d,s){if(!s&&d&&d.__esModule)return d;if(null===d||"object"!=typeof d&&"function"!=typeof d)return{default:d};var e=_(s);if(e&&e.has(d))return e.get(d);var c={},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var n in d)if("default"!==n&&Object.prototype.hasOwnProperty.call(d,n)){var o=i?Object.getOwnPropertyDescriptor(d,n):null;o&&(o.get||o.set)?Object.defineProperty(c,n,o):c[n]=d[n]}return c.default=d,e&&e.set(d,c),c}}(),f.es=function(_,d){return Object.keys(_).forEach(function(s){"default"!==s&&!Object.prototype.hasOwnProperty.call(d,s)&&Object.defineProperty(d,s,{enumerable:!0,get:function(){return _[s]}})}),_},_={10138:[],10179:[],10299:[],10530:[],10825:[],10929:[],11096:[],11385:[],11413:[],1163:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_plugins_guide_plugin-object_mdx"],11665:[],11678:[],11696:[],12764:[],12784:[],1282:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_api_plugin-api_plugin-hooks_md"],12855:[],13139:[],13251:[],13259:[],13345:[],13397:[],13473:[],13487:["docs_en_api_index_md"],13507:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_api_config_build-preset_mdx"],13545:[],13637:[],13652:[],13835:[],13867:[],13915:[],14095:[],14115:[],14120:[],14309:[],14423:[],14641:[],14704:[],15028:[],15042:[],1509:[],15624:[],15710:[],15863:[],15880:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_advance_copy_md"],16726:[],16737:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_advance_build-umd_mdx"],17100:[],17190:[],17290:[],17331:[],17713:["docs_zh_index_md"],17816:[],17832:[],17912:[],18055:[],18456:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_basic_using-storybook_mdx"],18595:[],18673:[],18989:["default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29"],19054:[],19585:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_api_plugin-api_plugin-hooks_md"],19805:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_basic_command-preview_md"],20150:[],20250:[],20308:[],20345:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_advance_external-dependency_mdx"],20449:[],20551:[],2056:[],20590:[],20678:[],20758:[],20826:["default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29"],20976:[],21382:[],21397:[],21666:["docs_en_guide_intro_why-module-engineering-solution_md"],21699:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_advance_in-depth-about-dev-command_md"],21724:["docs_en_index_md"],21774:[],21829:[],21893:[],22101:[],2212:[],22124:[],22151:[],2225:[],22297:["default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29"],22326:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_api_config_testing_md"],22430:[],2250:[],22588:["docs_zh_guide_faq_index_md"],22947:[],23037:[],23095:[],23112:[],23148:[],23172:[],23205:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_plugins_official-list_plugin-import_mdx"],23279:[],23570:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_advance_asset_mdx"],23759:[],23931:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_basic_publish-your-project_md"],24198:[],24359:[],24622:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_basic_test-your-project_mdx"],24667:[],24786:[],25010:["default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29"],25355:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_api_config_design-system_md"],25483:[],25806:["default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29"],26201:[],26281:[],26367:[],2637:[],26443:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_basic_modify-output-product_md"],26444:[],2663:[],26693:[],26723:[],26825:[],27151:[],27267:[],2733:[],27610:[],27677:[],27732:[],27844:[],28020:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_best-practices_components_mdx"],28049:[],28117:[],28263:[],28268:[],28547:[],28840:[],28846:[],29203:[],29391:[],29608:[],29645:[],29874:[],30075:[],30108:[],30251:[],30354:[],30372:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_advance_theme-config_mdx"],30732:[],3105:[],3123:[],31250:[],31360:[],31601:[],31874:[],31958:[],3204:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_plugins_guide_getting-started_mdx"],32046:[],3247:[],32560:[],32573:["docs_zh_guide_intro_welcome_md"],32694:[],32908:[],32910:[],33232:[],33379:[],33588:[],33786:[],34165:[],34189:[],34243:[],34700:[],34724:[],34799:[],35179:[],35289:[],35393:[],35574:[],35605:[],35803:[],35944:[],36034:[],36333:[],36448:[],36797:[],36889:[],37036:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_best-practices_components_mdx"],37137:[],37359:[],37430:[],38058:[],38091:[],38113:[],38472:[],3860:[],39040:[],39108:[],39198:[],39235:[],39605:[],39802:[],40428:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_basic_command-preview_md"],41413:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_api_config_plugins_md"],41472:[],41538:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_advance_in-depth-about-build_md"],41541:[],41567:[],42271:[],42283:[],42292:[],42368:[],42483:[],42731:[],42882:[],43179:[],43290:[],43409:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_api_config_plugins_md"],44113:[],44491:[],44802:[],44855:[],45127:["docs_en_guide_faq_index_md"],45141:[],45213:[],45317:[],45457:[],45914:[],45995:[],46256:[],46285:[],46333:["docs_en_plugins_official-list_overview_md"],46485:[],46680:[],4669:[],46800:[],4697:[],46997:[],47166:[],47319:[],47425:[],47746:[],47750:[],47812:[],47874:[],47887:[],47966:[],48087:[],48350:[],48395:[],48407:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_plugins_guide_setup-function_mdx"],48947:[],4897:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_plugins_guide_setup-function_mdx"],49139:[],49317:[],49545:[],49597:[],49689:[],49828:[],49930:[],5011:[],50409:[],50598:[],50775:[],50811:[],50918:[],50967:[],51012:[],5134:[],51349:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_api_config_testing_md"],51563:[],51791:[],51811:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_plugins_official-list_plugin-babel_md"],52256:[],52326:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_intro_getting-started_md"],52534:[],53159:[],53325:[],5340:[],53472:[],53481:[],53600:[],53713:[],54008:[],54011:[],54070:[],54233:[],5442:["default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29"],54477:[],54555:[],5474:[],54905:[],54947:[],55190:[],55665:["default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29"],55962:[],55980:[],56022:[],56145:[],56231:[],56470:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_plugins_official-list_plugin-node-polyfill_md"],56747:[],56856:[],56979:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_plugins_official-list_plugin-banner_md"],58050:[],58220:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_advance_theme-config_mdx"],58598:[],5872:[],58795:[],58879:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_api_config_build-config_md"],59142:[],59195:[],59359:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_advance_external-dependency_mdx"],59513:[],59770:[],5978:[],59823:[],59882:[],59934:[],60035:["docs_zh_plugins_official-list_overview_md"],60241:[],60343:[],60455:[],60499:[],60564:[],60599:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_basic_test-your-project_mdx"],61034:[],61117:[],61313:[],61785:[],61820:[],61839:[],61919:[],61976:[],62157:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_advance_copy_md"],62191:[],62263:[],62450:[],62568:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29","docs_en_guide_faq_build_mdx"],62573:[],6263:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29","docs_en_guide_faq_storybook_mdx"],63159:[],63373:[],63604:[],63897:[],63981:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_plugins_official-list_plugin-polyfill_md"],64043:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29","docs_zh_guide_faq_storybook_mdx"],64314:[],64442:[],64846:[],64871:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_api_config_build-preset_mdx"],64934:[],64956:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_basic_using-storybook_mdx"],64977:[],6498:[],65167:[],65845:[],6601:[],66605:[],67363:[],67404:[],67417:[],67429:[],67684:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_advance_asset_mdx"],6798:["default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29"],67991:[],68279:[],68427:[],68537:[],69129:[],69183:["default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29"],69424:[],69561:[],69668:[],69870:[],70196:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_plugins_guide_getting-started_mdx"],70220:[],70365:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_plugins_official-list_plugin-banner_md"],70481:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_plugins_official-list_plugin-node-polyfill_md"],70555:[],70714:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_basic_before-getting-started_md"],70863:[],7093:[],71152:[],71203:[],71347:[],71527:[],71765:[],71815:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_intro_getting-started_md"],71870:[],72296:[],72758:[],73027:[],73196:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_plugins_official-list_plugin-polyfill_md"],73218:[],7342:[],73450:[],73514:[],73653:[],73789:[],73960:[],73987:[],74381:[],74457:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_basic_use-micro-generator_md"],7472:[],75191:[],75240:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_plugins_guide_plugin-object_mdx"],75271:[],75367:[],75639:[],757:[],75796:[],76280:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_api_config_dev_md"],76318:[],76550:[],76596:[],76629:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_basic_use-micro-generator_md"],76716:[],77075:[],77175:[],77247:[],7797:[],78153:[],78171:[],7830:[],7833:[],7836:[],78844:[],79018:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_plugins_official-list_plugin-babel_md"],79316:["docs_zh_api_index_md"],79561:[],79712:[],80051:[],80209:[],80260:[],80613:[],80748:[],80749:[],80785:[],80866:[],80955:[],81125:[],81150:["default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29","docs_zh_guide_faq_test_mdx"],8130:[],81680:[],82431:[],82739:[],82863:[],82970:[],83668:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_api_config_dev_md"],83746:[],83821:[],83834:[],83937:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29","docs_zh_guide_faq_build_mdx"],84386:[],8442:[],84623:[],84641:[],84642:[],84716:[],84755:[],8495:[],85015:[],85028:[],85221:[],85300:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_advance_build-umd_mdx"],85349:[],8572:[],85826:[],85844:[],85849:[],85894:[],85936:[],8607:[],86668:[],86967:["default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29","docs_en_guide_faq_test_mdx"],87442:[],87674:["docs_zh_guide_intro_why-module-engineering-solution_md"],8773:[],87894:[],8793:[],8837:["default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29"],88429:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_api_config_design-system_md"],88627:[],88628:[],88655:[],89053:[],89280:[],89455:[],89943:[],89967:[],90312:[],90323:[],90388:[],9044:[],90544:[],90573:[],90683:[],91032:[],91237:[],91259:[],913:[],91328:[],91345:[],91544:[],91862:[],91940:[],92077:[],92128:[],92484:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_advance_in-depth-about-dev-command_md"],9254:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_plugins_official-list_plugin-import_mdx"],92581:[],92646:[],92945:[],93231:[],93233:["docs_en_guide_intro_welcome_md"],93395:[],93696:[],93810:[],93871:[],93907:[],93965:[],9425:[],94369:[],94787:[],94958:[],95028:[],95060:[],95076:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_basic_before-getting-started_md"],9538:[],95588:[],95603:[],95737:[],95907:[],96051:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_api_config_build-config_md"],96072:[],96266:[],96349:[],96357:[],96558:[],9669:[],96826:[],96858:[],96918:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_advance_in-depth-about-build_md"],9700:[],9704:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_basic_modify-output-product_md"],9733:[],97359:[],97415:[],97699:[],97729:[],97766:[],97919:[],98207:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_basic_publish-your-project_md"],98217:[],98226:[],98326:[],99179:[],99408:[],99553:[],9968:[],99765:[]},f.el=function(d){var s=_[d];return void 0===s?Promise.resolve():s.length>1?Promise.all(s.map(f.e)):f.e(s[0])},f.f={},f.e=function(_){return Promise.all(Object.keys(f.f).reduce(function(d,s){return f.f[s](_,d),d},[]))},f.p="/module-tools/",f.u=function(_){return({"default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29":"static/js/async/default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29.a2443c41.js","docs_en_api_config_build-config_md":"static/js/async/docs_en_api_config_build-config_md.47c13184.js","docs_en_api_config_build-preset_mdx":"static/js/async/docs_en_api_config_build-preset_mdx.240d175b.js","docs_en_api_config_design-system_md":"static/js/async/docs_en_api_config_design-system_md.b2ec1ff7.js",docs_en_api_config_dev_md:"static/js/async/docs_en_api_config_dev_md.6ad208aa.js",docs_en_api_config_plugins_md:"static/js/async/docs_en_api_config_plugins_md.da21c1a9.js",docs_en_api_config_testing_md:"static/js/async/docs_en_api_config_testing_md.5655d56b.js",docs_en_api_index_md:"static/js/async/docs_en_api_index_md.b332bf64.js","docs_en_api_plugin-api_plugin-hooks_md":"static/js/async/docs_en_api_plugin-api_plugin-hooks_md.b0f73e0d.js",docs_en_guide_advance_asset_mdx:"static/js/async/docs_en_guide_advance_asset_mdx.d302e90c.js","docs_en_guide_advance_build-umd_mdx":"static/js/async/docs_en_guide_advance_build-umd_mdx.554fa073.js",docs_en_guide_advance_copy_md:"static/js/async/docs_en_guide_advance_copy_md.78b33f73.js","docs_en_guide_advance_external-dependency_mdx":"static/js/async/docs_en_guide_advance_external-dependency_mdx.507e4091.js","docs_en_guide_advance_in-depth-about-build_md":"static/js/async/docs_en_guide_advance_in-depth-about-build_md.207e8b25.js","docs_en_guide_advance_in-depth-about-dev-command_md":"static/js/async/docs_en_guide_advance_in-depth-about-dev-command_md.72d6b6fc.js","docs_en_guide_advance_theme-config_mdx":"static/js/async/docs_en_guide_advance_theme-config_mdx.168a5eec.js","docs_en_guide_basic_before-getting-started_md":"static/js/async/docs_en_guide_basic_before-getting-started_md.a00933ab.js","docs_en_guide_basic_command-preview_md":"static/js/async/docs_en_guide_basic_command-preview_md.5e63d7ad.js","docs_en_guide_basic_modify-output-product_md":"static/js/async/docs_en_guide_basic_modify-output-product_md.abd250e1.js","docs_en_guide_basic_publish-your-project_md":"static/js/async/docs_en_guide_basic_publish-your-project_md.3b098b03.js","docs_en_guide_basic_test-your-project_mdx":"static/js/async/docs_en_guide_basic_test-your-project_mdx.b86e9b69.js","docs_en_guide_basic_use-micro-generator_md":"static/js/async/docs_en_guide_basic_use-micro-generator_md.e03b16c8.js","docs_en_guide_basic_using-storybook_mdx":"static/js/async/docs_en_guide_basic_using-storybook_mdx.32e9b389.js","docs_en_guide_best-practices_components_mdx":"static/js/async/docs_en_guide_best-practices_components_mdx.a56e369b.js",docs_en_guide_faq_build_mdx:"static/js/async/docs_en_guide_faq_build_mdx.81c243c7.js",docs_en_guide_faq_index_md:"static/js/async/docs_en_guide_faq_index_md.85367f4a.js",docs_en_guide_faq_storybook_mdx:"static/js/async/docs_en_guide_faq_storybook_mdx.d6b26cfd.js",docs_en_guide_faq_test_mdx:"static/js/async/docs_en_guide_faq_test_mdx.a7a1c8b5.js","docs_en_guide_intro_getting-started_md":"static/js/async/docs_en_guide_intro_getting-started_md.7c901798.js",docs_en_guide_intro_welcome_md:"static/js/async/docs_en_guide_intro_welcome_md.69fe3324.js","docs_en_guide_intro_why-module-engineering-solution_md":"static/js/async/docs_en_guide_intro_why-module-engineering-solution_md.766afaee.js",docs_en_index_md:"static/js/async/docs_en_index_md.32415ad9.js","docs_en_plugins_guide_getting-started_mdx":"static/js/async/docs_en_plugins_guide_getting-started_mdx.c6631fd6.js","docs_en_plugins_guide_plugin-object_mdx":"static/js/async/docs_en_plugins_guide_plugin-object_mdx.0971cbdb.js","docs_en_plugins_guide_setup-function_mdx":"static/js/async/docs_en_plugins_guide_setup-function_mdx.388d92b1.js","docs_en_plugins_official-list_overview_md":"static/js/async/docs_en_plugins_official-list_overview_md.9390ed67.js","docs_en_plugins_official-list_plugin-babel_md":"static/js/async/docs_en_plugins_official-list_plugin-babel_md.0528b729.js","docs_en_plugins_official-list_plugin-banner_md":"static/js/async/docs_en_plugins_official-list_plugin-banner_md.c14f8599.js","docs_en_plugins_official-list_plugin-import_mdx":"static/js/async/docs_en_plugins_official-list_plugin-import_mdx.67bac7e1.js","docs_en_plugins_official-list_plugin-node-polyfill_md":"static/js/async/docs_en_plugins_official-list_plugin-node-polyfill_md.19819cf5.js","docs_en_plugins_official-list_plugin-polyfill_md":"static/js/async/docs_en_plugins_official-list_plugin-polyfill_md.473537df.js","docs_zh_api_config_build-config_md":"static/js/async/docs_zh_api_config_build-config_md.e52b0287.js","docs_zh_api_config_build-preset_mdx":"static/js/async/docs_zh_api_config_build-preset_mdx.8b874378.js","docs_zh_api_config_design-system_md":"static/js/async/docs_zh_api_config_design-system_md.ceae6914.js",docs_zh_api_config_dev_md:"static/js/async/docs_zh_api_config_dev_md.033094f8.js",docs_zh_api_config_plugins_md:"static/js/async/docs_zh_api_config_plugins_md.ab43b516.js",docs_zh_api_config_testing_md:"static/js/async/docs_zh_api_config_testing_md.2c1f171d.js",docs_zh_api_index_md:"static/js/async/docs_zh_api_index_md.5df1b9d0.js","docs_zh_api_plugin-api_plugin-hooks_md":"static/js/async/docs_zh_api_plugin-api_plugin-hooks_md.9f155180.js",docs_zh_guide_advance_asset_mdx:"static/js/async/docs_zh_guide_advance_asset_mdx.0b551e5e.js","docs_zh_guide_advance_build-umd_mdx":"static/js/async/docs_zh_guide_advance_build-umd_mdx.4c0a741d.js",docs_zh_guide_advance_copy_md:"static/js/async/docs_zh_guide_advance_copy_md.ff70ddd3.js","docs_zh_guide_advance_external-dependency_mdx":"static/js/async/docs_zh_guide_advance_external-dependency_mdx.64bae82a.js","docs_zh_guide_advance_in-depth-about-build_md":"static/js/async/docs_zh_guide_advance_in-depth-about-build_md.d16f07b4.js","docs_zh_guide_advance_in-depth-about-dev-command_md":"static/js/async/docs_zh_guide_advance_in-depth-about-dev-command_md.2eabb853.js","docs_zh_guide_advance_theme-config_mdx":"static/js/async/docs_zh_guide_advance_theme-config_mdx.5670e00b.js","docs_zh_guide_basic_before-getting-started_md":"static/js/async/docs_zh_guide_basic_before-getting-started_md.3e23f82e.js","docs_zh_guide_basic_command-preview_md":"static/js/async/docs_zh_guide_basic_command-preview_md.718669ed.js","docs_zh_guide_basic_modify-output-product_md":"static/js/async/docs_zh_guide_basic_modify-output-product_md.bea77add.js","docs_zh_guide_basic_publish-your-project_md":"static/js/async/docs_zh_guide_basic_publish-your-project_md.b0c63699.js","docs_zh_guide_basic_test-your-project_mdx":"static/js/async/docs_zh_guide_basic_test-your-project_mdx.b9ee0af4.js","docs_zh_guide_basic_use-micro-generator_md":"static/js/async/docs_zh_guide_basic_use-micro-generator_md.ad32d392.js","docs_zh_guide_basic_using-storybook_mdx":"static/js/async/docs_zh_guide_basic_using-storybook_mdx.2748f6f6.js","docs_zh_guide_best-practices_components_mdx":"static/js/async/docs_zh_guide_best-practices_components_mdx.e4450a3c.js",docs_zh_guide_faq_build_mdx:"static/js/async/docs_zh_guide_faq_build_mdx.470ca09d.js",docs_zh_guide_faq_index_md:"static/js/async/docs_zh_guide_faq_index_md.9c5738a8.js",docs_zh_guide_faq_storybook_mdx:"static/js/async/docs_zh_guide_faq_storybook_mdx.e1fb8e18.js",docs_zh_guide_faq_test_mdx:"static/js/async/docs_zh_guide_faq_test_mdx.d332b61f.js","docs_zh_guide_intro_getting-started_md":"static/js/async/docs_zh_guide_intro_getting-started_md.8af35ffc.js",docs_zh_guide_intro_welcome_md:"static/js/async/docs_zh_guide_intro_welcome_md.6169850d.js","docs_zh_guide_intro_why-module-engineering-solution_md":"static/js/async/docs_zh_guide_intro_why-module-engineering-solution_md.ff0f5ef0.js",docs_zh_index_md:"static/js/async/docs_zh_index_md.bc7e2f02.js","docs_zh_plugins_guide_getting-started_mdx":"static/js/async/docs_zh_plugins_guide_getting-started_mdx.6a2c07ee.js","docs_zh_plugins_guide_plugin-object_mdx":"static/js/async/docs_zh_plugins_guide_plugin-object_mdx.9a665baa.js","docs_zh_plugins_guide_setup-function_mdx":"static/js/async/docs_zh_plugins_guide_setup-function_mdx.a614b224.js","docs_zh_plugins_official-list_overview_md":"static/js/async/docs_zh_plugins_official-list_overview_md.bf4a7405.js","docs_zh_plugins_official-list_plugin-babel_md":"static/js/async/docs_zh_plugins_official-list_plugin-babel_md.7107a66b.js","docs_zh_plugins_official-list_plugin-banner_md":"static/js/async/docs_zh_plugins_official-list_plugin-banner_md.4443ae99.js","docs_zh_plugins_official-list_plugin-import_mdx":"static/js/async/docs_zh_plugins_official-list_plugin-import_mdx.e4923a9a.js","docs_zh_plugins_official-list_plugin-node-polyfill_md":"static/js/async/docs_zh_plugins_official-list_plugin-node-polyfill_md.26c9cb0d.js","docs_zh_plugins_official-list_plugin-polyfill_md":"static/js/async/docs_zh_plugins_official-list_plugin-polyfill_md.0bda701d.js"})[_]},f.k=function(_){return({"default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29":"static/css/async/default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29.d9ac876f.css","docs_en_api_config_build-config_md":"static/css/async/docs_en_api_config_build-config_md.d9ac876f.css","docs_en_api_config_build-preset_mdx":"static/css/async/docs_en_api_config_build-preset_mdx.d9ac876f.css","docs_en_api_config_design-system_md":"static/css/async/docs_en_api_config_design-system_md.d9ac876f.css",docs_en_api_config_dev_md:"static/css/async/docs_en_api_config_dev_md.d9ac876f.css",docs_en_api_config_plugins_md:"static/css/async/docs_en_api_config_plugins_md.d9ac876f.css",docs_en_api_config_testing_md:"static/css/async/docs_en_api_config_testing_md.d9ac876f.css",docs_en_api_index_md:"static/css/async/docs_en_api_index_md.d9ac876f.css","docs_en_api_plugin-api_plugin-hooks_md":"static/css/async/docs_en_api_plugin-api_plugin-hooks_md.d9ac876f.css",docs_en_guide_advance_asset_mdx:"static/css/async/docs_en_guide_advance_asset_mdx.d9ac876f.css","docs_en_guide_advance_build-umd_mdx":"static/css/async/docs_en_guide_advance_build-umd_mdx.d9ac876f.css",docs_en_guide_advance_copy_md:"static/css/async/docs_en_guide_advance_copy_md.d9ac876f.css","docs_en_guide_advance_external-dependency_mdx":"static/css/async/docs_en_guide_advance_external-dependency_mdx.d9ac876f.css","docs_en_guide_advance_in-depth-about-build_md":"static/css/async/docs_en_guide_advance_in-depth-about-build_md.d9ac876f.css","docs_en_guide_advance_in-depth-about-dev-command_md":"static/css/async/docs_en_guide_advance_in-depth-about-dev-command_md.d9ac876f.css","docs_en_guide_advance_theme-config_mdx":"static/css/async/docs_en_guide_advance_theme-config_mdx.d9ac876f.css","docs_en_guide_basic_before-getting-started_md":"static/css/async/docs_en_guide_basic_before-getting-started_md.d9ac876f.css","docs_en_guide_basic_command-preview_md":"static/css/async/docs_en_guide_basic_command-preview_md.d9ac876f.css","docs_en_guide_basic_modify-output-product_md":"static/css/async/docs_en_guide_basic_modify-output-product_md.d9ac876f.css","docs_en_guide_basic_publish-your-project_md":"static/css/async/docs_en_guide_basic_publish-your-project_md.d9ac876f.css","docs_en_guide_basic_test-your-project_mdx":"static/css/async/docs_en_guide_basic_test-your-project_mdx.d9ac876f.css","docs_en_guide_basic_use-micro-generator_md":"static/css/async/docs_en_guide_basic_use-micro-generator_md.d9ac876f.css","docs_en_guide_basic_using-storybook_mdx":"static/css/async/docs_en_guide_basic_using-storybook_mdx.d9ac876f.css","docs_en_guide_best-practices_components_mdx":"static/css/async/docs_en_guide_best-practices_components_mdx.d9ac876f.css",docs_en_guide_faq_build_mdx:"static/css/async/docs_en_guide_faq_build_mdx.d9ac876f.css",docs_en_guide_faq_index_md:"static/css/async/docs_en_guide_faq_index_md.d9ac876f.css",docs_en_guide_faq_storybook_mdx:"static/css/async/docs_en_guide_faq_storybook_mdx.d9ac876f.css",docs_en_guide_faq_test_mdx:"static/css/async/docs_en_guide_faq_test_mdx.d9ac876f.css","docs_en_guide_intro_getting-started_md":"static/css/async/docs_en_guide_intro_getting-started_md.d9ac876f.css",docs_en_guide_intro_welcome_md:"static/css/async/docs_en_guide_intro_welcome_md.d9ac876f.css","docs_en_guide_intro_why-module-engineering-solution_md":"static/css/async/docs_en_guide_intro_why-module-engineering-solution_md.d9ac876f.css",docs_en_index_md:"static/css/async/docs_en_index_md.d9ac876f.css","docs_en_plugins_guide_getting-started_mdx":"static/css/async/docs_en_plugins_guide_getting-started_mdx.d9ac876f.css","docs_en_plugins_guide_plugin-object_mdx":"static/css/async/docs_en_plugins_guide_plugin-object_mdx.d9ac876f.css","docs_en_plugins_guide_setup-function_mdx":"static/css/async/docs_en_plugins_guide_setup-function_mdx.d9ac876f.css","docs_en_plugins_official-list_overview_md":"static/css/async/docs_en_plugins_official-list_overview_md.d9ac876f.css","docs_en_plugins_official-list_plugin-babel_md":"static/css/async/docs_en_plugins_official-list_plugin-babel_md.d9ac876f.css","docs_en_plugins_official-list_plugin-banner_md":"static/css/async/docs_en_plugins_official-list_plugin-banner_md.d9ac876f.css","docs_en_plugins_official-list_plugin-import_mdx":"static/css/async/docs_en_plugins_official-list_plugin-import_mdx.d9ac876f.css","docs_en_plugins_official-list_plugin-node-polyfill_md":"static/css/async/docs_en_plugins_official-list_plugin-node-polyfill_md.d9ac876f.css","docs_en_plugins_official-list_plugin-polyfill_md":"static/css/async/docs_en_plugins_official-list_plugin-polyfill_md.d9ac876f.css","docs_zh_api_config_build-config_md":"static/css/async/docs_zh_api_config_build-config_md.d9ac876f.css","docs_zh_api_config_build-preset_mdx":"static/css/async/docs_zh_api_config_build-preset_mdx.d9ac876f.css","docs_zh_api_config_design-system_md":"static/css/async/docs_zh_api_config_design-system_md.d9ac876f.css",docs_zh_api_config_dev_md:"static/css/async/docs_zh_api_config_dev_md.d9ac876f.css",docs_zh_api_config_plugins_md:"static/css/async/docs_zh_api_config_plugins_md.d9ac876f.css",docs_zh_api_config_testing_md:"static/css/async/docs_zh_api_config_testing_md.d9ac876f.css",docs_zh_api_index_md:"static/css/async/docs_zh_api_index_md.d9ac876f.css","docs_zh_api_plugin-api_plugin-hooks_md":"static/css/async/docs_zh_api_plugin-api_plugin-hooks_md.d9ac876f.css",docs_zh_guide_advance_asset_mdx:"static/css/async/docs_zh_guide_advance_asset_mdx.d9ac876f.css","docs_zh_guide_advance_build-umd_mdx":"static/css/async/docs_zh_guide_advance_build-umd_mdx.d9ac876f.css",docs_zh_guide_advance_copy_md:"static/css/async/docs_zh_guide_advance_copy_md.d9ac876f.css","docs_zh_guide_advance_external-dependency_mdx":"static/css/async/docs_zh_guide_advance_external-dependency_mdx.d9ac876f.css","docs_zh_guide_advance_in-depth-about-build_md":"static/css/async/docs_zh_guide_advance_in-depth-about-build_md.d9ac876f.css","docs_zh_guide_advance_in-depth-about-dev-command_md":"static/css/async/docs_zh_guide_advance_in-depth-about-dev-command_md.d9ac876f.css","docs_zh_guide_advance_theme-config_mdx":"static/css/async/docs_zh_guide_advance_theme-config_mdx.d9ac876f.css","docs_zh_guide_basic_before-getting-started_md":"static/css/async/docs_zh_guide_basic_before-getting-started_md.d9ac876f.css","docs_zh_guide_basic_command-preview_md":"static/css/async/docs_zh_guide_basic_command-preview_md.d9ac876f.css","docs_zh_guide_basic_modify-output-product_md":"static/css/async/docs_zh_guide_basic_modify-output-product_md.d9ac876f.css","docs_zh_guide_basic_publish-your-project_md":"static/css/async/docs_zh_guide_basic_publish-your-project_md.d9ac876f.css","docs_zh_guide_basic_test-your-project_mdx":"static/css/async/docs_zh_guide_basic_test-your-project_mdx.d9ac876f.css","docs_zh_guide_basic_use-micro-generator_md":"static/css/async/docs_zh_guide_basic_use-micro-generator_md.d9ac876f.css","docs_zh_guide_basic_using-storybook_mdx":"static/css/async/docs_zh_guide_basic_using-storybook_mdx.d9ac876f.css","docs_zh_guide_best-practices_components_mdx":"static/css/async/docs_zh_guide_best-practices_components_mdx.d9ac876f.css",docs_zh_guide_faq_build_mdx:"static/css/async/docs_zh_guide_faq_build_mdx.d9ac876f.css",docs_zh_guide_faq_index_md:"static/css/async/docs_zh_guide_faq_index_md.d9ac876f.css",docs_zh_guide_faq_storybook_mdx:"static/css/async/docs_zh_guide_faq_storybook_mdx.d9ac876f.css",docs_zh_guide_faq_test_mdx:"static/css/async/docs_zh_guide_faq_test_mdx.d9ac876f.css","docs_zh_guide_intro_getting-started_md":"static/css/async/docs_zh_guide_intro_getting-started_md.d9ac876f.css",docs_zh_guide_intro_welcome_md:"static/css/async/docs_zh_guide_intro_welcome_md.d9ac876f.css","docs_zh_guide_intro_why-module-engineering-solution_md":"static/css/async/docs_zh_guide_intro_why-module-engineering-solution_md.d9ac876f.css",docs_zh_index_md:"static/css/async/docs_zh_index_md.d9ac876f.css","docs_zh_plugins_guide_getting-started_mdx":"static/css/async/docs_zh_plugins_guide_getting-started_mdx.d9ac876f.css","docs_zh_plugins_guide_plugin-object_mdx":"static/css/async/docs_zh_plugins_guide_plugin-object_mdx.d9ac876f.css","docs_zh_plugins_guide_setup-function_mdx":"static/css/async/docs_zh_plugins_guide_setup-function_mdx.d9ac876f.css","docs_zh_plugins_official-list_overview_md":"static/css/async/docs_zh_plugins_official-list_overview_md.d9ac876f.css","docs_zh_plugins_official-list_plugin-babel_md":"static/css/async/docs_zh_plugins_official-list_plugin-babel_md.d9ac876f.css","docs_zh_plugins_official-list_plugin-banner_md":"static/css/async/docs_zh_plugins_official-list_plugin-banner_md.d9ac876f.css","docs_zh_plugins_official-list_plugin-import_mdx":"static/css/async/docs_zh_plugins_official-list_plugin-import_mdx.d9ac876f.css","docs_zh_plugins_official-list_plugin-node-polyfill_md":"static/css/async/docs_zh_plugins_official-list_plugin-node-polyfill_md.d9ac876f.css","docs_zh_plugins_official-list_plugin-polyfill_md":"static/css/async/docs_zh_plugins_official-list_plugin-polyfill_md.d9ac876f.css"})[_]},d={},f.l=function(_,s,e,c){if(void 0!==e){for(var i,n,o=document.getElementsByTagName("script"),a=0;a<o.length;a++){var t=o[a];if(t.getAttribute("src")==_){i=t;break}}}!i&&(n=!0,(i=document.createElement("script")).charset="utf-8",i.timeout=120,i.src=_),d[_]=[s];var u=function(s,e){i.onerror=i.onload=null,clearTimeout(g);var c=d[_];if(delete d[_],i.parentNode&&i.parentNode.removeChild(i),c&&c.forEach(function(_){return _(e)}),s)return s(e)},g=setTimeout(u.bind(null,void 0,{type:"timeout",target:i}),12e4);i.onerror=u.bind(null,i.onerror),i.onload=u.bind(null,i.onload),n&&document.head.appendChild(i)},f.o=function(_,d){return Object.prototype.hasOwnProperty.call(_,d)},s=[],f.O=function(_,d,e,c){if(d){c=c||0;for(var i=s.length;i>0&&s[i-1][2]>c;i--)s[i]=s[i-1];s[i]=[d,e,c];return}for(var n=1/0,i=0;i<s.length;i++){for(var d=s[i][0],e=s[i][1],c=s[i][2],o=!0,a=0;a<d.length;a++)n>=c&&Object.keys(f.O).every(function(_){return f.O[_](d[a])})?d.splice(a--,1):(o=!1,c<n&&(n=c));if(o){s.splice(i--,1);var t=e();void 0!==t&&(_=t)}}return _},f.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||Function("return this")()}catch(_){if("object"==typeof window)return window}}(),e={"builder-runtime":0},f.f.j=function(_,d){var s=f.o(e,_)?e[_]:void 0;if(0!==s){if(s)d.push(s[2]);else if(_){var c=new Promise(function(d,c){s=e[_]=[d,c]});d.push(s[2]=c);var i=f.p+f.u(_),n=Error();f.l(i,function(d){if(f.o(e,_)&&(0!==(s=e[_])&&(e[_]=void 0),s)){var c=d&&("load"===d.type?"missing":d.type),i=d&&d.target&&d.target.src;n.message="Loading chunk "+_+" failed.\n("+c+": "+i+")",n.name="ChunkLoadError",n.type=c,n.request=i,s[1](n)}},"chunk-"+_,_)}else e[_]=0}},f.O.j=function(_){return 0===e[_]},c=function(_,d){var s=d[0],c=d[1],i=d[2],n,o,a=0;if(s.some(function(_){return 0!==e[_]})){for(n in c)f.o(c,n)&&(f.m[n]=c[n]);if(i)var t=i(f)}for(_&&_(d);a<s.length;a++)o=s[a],f.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return f.O(t)},i=self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[],i.forEach(c.bind(null,0)),i.push=c.bind(null,i.push.bind(i)),n={"defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be":0,main:0},o="webpack",a="data-webpack-loading",t=function(_,d,s,e){var c,i,n="chunk-"+_;if(!e){for(var t=document.getElementsByTagName("link"),u=0;u<t.length;u++){var g=t[u],l=g.getAttribute("href")||g.href;if(l&&!l.startsWith(f.p)&&(l=f.p+(l.startsWith("/")?l.slice(1):l)),"stylesheet"==g.rel&&(l&&l.startsWith(d)||g.getAttribute("data-webpack")==o+":"+n)){c=g;break}}if(!s)return c}!c&&(i=!0,(c=document.createElement("link")).setAttribute("data-webpack",o+":"+n),c.setAttribute(a,1),c.rel="stylesheet",c.href=d);var m=function(_,d){if(c.onerror=c.onload=null,c.removeAttribute(a),clearTimeout(p),d&&"load"!=d.type&&c.parentNode.removeChild(c),s(d),_)return _(d)};if(c.getAttribute(a)){var p=setTimeout(m.bind(null,void 0,{type:"timeout",target:c}),12e4);c.onerror=m.bind(null,c.onerror),c.onload=m.bind(null,c.onload)}else m(void 0,{type:"load",target:c});return e?document.head.insertBefore(c,e):i&&document.head.appendChild(c),c},f.f.css=function(_,d){var s=f.o(n,_)?n[_]:void 0;if(0!==s){if(s)d.push(s[2]);else if([].indexOf(_)>-1){var e=new Promise(function(d,e){s=n[_]=[d,e]});d.push(s[2]=e);var c=f.p+f.k(_),i=Error();t(_,c,function(d){if(f.o(n,_)&&(0!==(s=n[_])&&(n[_]=void 0),s)){if("load"!==d.type){var e=d&&d.type,c=d&&d.target&&d.target.src;i.message="Loading css chunk "+_+" failed.\n("+e+": "+c+")",i.name="ChunkLoadError",i.type=e,i.request=c,s[1](i)}else s[0]()}})}else n[_]=0}}}();</script><script defer="defer" src="/module-tools/static/js/lib-react.87879e53.js"></script><script defer="defer" src="/module-tools/static/js/lib-lodash.20527186.js"></script><script defer="defer" src="/module-tools/static/js/lib-polyfill.a99fdfae.js"></script><script defer="defer" src="/module-tools/static/js/lib-router.65b37e4a.js"></script><script defer="defer" src="/module-tools/static/js/defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be.7070a8dd.js"></script><script defer="defer" src="/module-tools/static/js/main.42725889.js"></script><link href="/module-tools/static/css/defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be.71af0621.css" rel="stylesheet"><link href="/module-tools/static/css/main.1e1c5ea3.css" rel="stylesheet"></head><body><div id="root"><div><header class="top-0 left-0 md:fixed w-full" style="z-index:var(--modern-z-index-nav);background:var(--modern-c-bg)"><div class="navContainer_cc721 modern-doc-nav px-6"><div class="container_cc721 flex justify-between items-center h-full"><div class="undefined"><a href="/module-tools/" class="flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><span>Module Tools</span></a></div><div class="undefined flex flex-1 justify-end items-center"><div class="leftNav_cc721"><div class="menu h-14"></div></div><div class="rightNav_cc721"><div class="flex sm:flex-1 items-center sm:pl-4 sm:pr-2"><div class="navSearchButton_22838"><button><svg width="18" height="24" viewBox="0 0 32 32" hight="18"><path fill="var(--modern-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9Z"></path></svg><p class="searchWord_22838">Search Docs</p><div><span>⌘</span><span>K</span></div></button></div><div class="mobileNavSearchButton_22838"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--modern-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9Z"></path></svg></div></div><div class="menu h-14"><a class="link_2a8f5  cursor-pointer" target="" href="/module-tools/guide/intro/welcome.html"><div class="singleItem_cc721 activeItem_cc721 text-sm font-medium mx-1.5 px-3 py-2">指南</div></a><a class="link_2a8f5  cursor-pointer" target="" href="/module-tools/api/index.html"><div class="singleItem_cc721  text-sm font-medium mx-1.5 px-3 py-2">API</div></a><a class="link_2a8f5  cursor-pointer" target="" href="/module-tools/plugins/guide/getting-started.html"><div class="singleItem_cc721  text-sm font-medium mx-1.5 px-3 py-2">插件</div></a><div class="mx-3 last:mr-0"><div class="relative flex-center h-14"><button class="nav-menu-group-button flex-center items-center font-medium text-sm text-text-1 hover:text-text-2 transition-colors duration-200"><span class="text-sm font-medium" style="margin-right:2px">v2.25.1</span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div class="nav-menu-group-content absolute mx-0.8 transition-opacity duration-300" style="opacity:0;visibility:hidden;right:0;top:52px"><div class="p-3 pr-2 w-full h-full max-h-100vh whitespace-nowrap" style="box-shadow:var(--modern-shadow-3);z-index:100;border:1px solid var(--modern-c-divider-light);border-radius:2rem;background:var(--modern-c-bg)"><div><div class="font-medium my-1"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="link_2a8f5 "><div class="rounded-2xl hover:bg-mute" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><div class="flex"><span>更新日志</span></div></div></a></div></div><div><div class="font-medium my-1"><a href="https://modernjs.dev/en/community/contributing-guide.html" target="_blank" rel="noopener noreferrer" class="link_2a8f5 "><div class="rounded-2xl hover:bg-mute" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><div class="flex"><span>贡献指南</span></div></div></a></div></div></div></div></div></div></div><div class="flex-center flex-row"><div class="translation menu-item_cc721 flex text-sm font-bold items-center px-3 py-2"><div><div class="relative flex-center h-14"><button class="nav-menu-group-button flex-center items-center font-medium text-sm text-text-1 hover:text-text-2 transition-colors duration-200"><span class="text-sm font-medium" style="margin-right:2px"><svg width="18" height="18" viewBox="0 0 32 32" style="with:18px;height:18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6 2.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 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div class="nav-menu-group-content absolute mx-0.8 transition-opacity duration-300" style="opacity:0;visibility:hidden;right:0;top:52px"><div class="p-3 pr-2 w-full h-full max-h-100vh whitespace-nowrap" style="box-shadow:var(--modern-shadow-3);z-index:100;border:1px solid var(--modern-c-divider-light);border-radius:2rem;background:var(--modern-c-bg)"><div><div class="rounded-2xl my-1" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><span class="text-brand">简体中文</span></div></div><div><div class="font-medium my-1"><a class="link_2a8f5  cursor-pointer" target="" href="/module-tools/en/guide/best-practices/components.html"><div class="rounded-2xl hover:bg-mute" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><div class="flex"><span>English</span></div></div></a></div></div></div></div></div></div></div><div class="mx-2"><div class="md:mr-2 modern-nav-appearance"><div class="p-1 border border-solid border-gray-300 text-gray-400  cursor-pointer rounded-md hover:border-gray-600 hover:text-gray-600 dark:hover:border-gray-200 dark:hover:text-gray-200 transition-all duration-300"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM12 4c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1zM12 24c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1zM5.6 6.6c-.3 0-.5-.1-.7-.3L3.5 4.9c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.1.2-.4.3-.7.3zM19.8 20.8c-.3 0-.5-.1-.7-.3l-1.4-1.4c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.2.2-.5.3-.7.3zM3 13H1c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1zM23 13h-2c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1zM4.2 20.8c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.4.3-.7.3zM18.4 6.6c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.5.3-.7.3z"></path></svg></div></div></div><div class="social-links menu-item_4e3f0 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_4e3f0"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div><div class="mobileNavMenu_cc721"><div class="navScreen_4eb57 " id="navScreen"><div class="container_4eb57"><div class="navMenu_4eb57"><div class="navMenuItem_4eb57 w-full"><a class="link_2a8f5  cursor-pointer" target="" href="/module-tools/guide/intro/welcome.html"><div class="singleItem_cc721 activeItem_cc721 text-sm font-medium mx-1.5 px-3 py-2">指南</div></a></div><div class="navMenuItem_4eb57 w-full"><a class="link_2a8f5  cursor-pointer" target="" href="/module-tools/api/index.html"><div class="singleItem_cc721  text-sm font-medium mx-1.5 px-3 py-2">API</div></a></div><div class="navMenuItem_4eb57 w-full"><a class="link_2a8f5  cursor-pointer" target="" href="/module-tools/plugins/guide/getting-started.html"><div class="singleItem_cc721  text-sm font-medium mx-1.5 px-3 py-2">插件</div></a></div><div class="navMenuItem_4eb57 w-full"><div class="mx-3 last:mr-0"><div class=" navScreenMenuGroup_169ad relative"><button class="button_169ad"><span class="buttonSpan_169ad">v2.25.1</span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" down_169ad "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div><div class="items_169ad"><div><div class="py-1 font-medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="link_2a8f5 "><div><div class="flex justify-center"><span>更新日志</span></div></div></a></div></div><div><div class="py-1 font-medium"><a href="https://modernjs.dev/en/community/contributing-guide.html" target="_blank" rel="noopener noreferrer" class="link_2a8f5 "><div><div class="flex justify-center"><span>贡献指南</span></div></div></a></div></div></div></div></div></div></div></div><div class="flex-center flex-col gap-2"><div class="mt-2 navAppearance_4eb57 flex justify-center"></div><div class="undefined flex text-sm font-bold justify-center"><div class="mx-1.5 my-1"><div class=" navScreenMenuGroup_169ad relative"><button class="button_169ad"><span class="buttonSpan_169ad"><svg width="18" height="18" viewBox="0 0 32 32" style="width:18px;height:18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6 2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" down_169ad "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div><div class="items_169ad"><div><div class="p-1"><span class="text-brand">简体中文</span></div></div><div><div class="py-1 font-medium"><a class="link_2a8f5  cursor-pointer" target="" href="/module-tools/en.html"><div><div class="flex justify-center"><span>English</span></div></div></a></div></div></div></div></div></div></div><div class="social-links menu-item_4e3f0 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_4e3f0"><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><button class=" navHamburger_41e74 text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor"><circle cx="8" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="24" cy="16" r="2" fill="currentColor"></circle></svg></button></div></div></div></div></header><section><div class="docLayout_12c7d pt-0 md:mt-14"><div class="localNav_159b7"><button class="menu_159b7 flex-center"><div class="text-md mr-2"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"></path></svg></div><span class="text-sm">Menu</span></button></div><aside class="sidebar_3b941 modern-sidebar "><div class="mt-1 sidebarContent_3b941"><div class="modern-scrollbar" style="max-height:calc(100vh - var(--modern-nav-height) - 8px);overflow:scroll"><nav class="pb-6"><section class="mt-1 block" style="margin-left:0"><div style="cursor:pointer" class="flex justify-between items-center rounded-xl menuItem_3b941"><h2 class="py-1 px-2 text-sm font-medium ml-1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">介绍</h2><div class="collapseContainer_3b941 p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/guide/intro/welcome.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">欢迎使用</div></a></div><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/guide/intro/why-module-engineering-solution.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">为什么需要模块工程解决方案</div></a></div><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/guide/intro/getting-started.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">快速开始</div></a></div></div></div></section><section class="mt-1 block" style="margin-left:0"><div style="cursor:pointer" class="flex justify-between items-center rounded-xl menuItem_3b941"><h2 class="py-1 px-2 text-sm font-medium ml-1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">基础使用</h2><div class="collapseContainer_3b941 p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/guide/basic/before-getting-started.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">开始之前</div></a></div><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/guide/basic/command-preview.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">CLI 命令</div></a></div><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/guide/basic/modify-output-product.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">修改输出产物</div></a></div><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/guide/basic/use-micro-generator.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">使用微生成器</div></a></div><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/guide/basic/using-storybook.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">使用 Storybook</div></a></div><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/guide/basic/test-your-project.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">测试项目</div></a></div><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/guide/basic/publish-your-project.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">版本管理与发布</div></a></div></div></div></section><section class="mt-1 block" style="margin-left:0"><div style="cursor:pointer" class="flex justify-between items-center rounded-xl menuItem_3b941"><h2 class="py-1 px-2 text-sm font-medium ml-1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">进阶指南</h2><div class="collapseContainer_3b941 p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/guide/advance/in-depth-about-build.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">深入理解构建</div></a></div><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/guide/advance/in-depth-about-dev-command.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">深入理解 dev 命令</div></a></div><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/guide/advance/copy.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">使用 Copy 工具</div></a></div><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/guide/advance/external-dependency.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">如何处理第三方依赖</div></a></div><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/guide/advance/build-umd.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">构建 umd 产物</div></a></div><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/guide/advance/theme-config.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">主题配置</div></a></div><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/guide/advance/asset.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">处理静态资源文件</div></a></div></div></div></section><section class="mt-1 block" style="margin-left:0"><div style="cursor:pointer" class="flex justify-between items-center rounded-xl menuItem_3b941"><h2 class="py-1 px-2 text-sm font-medium ml-1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">最佳实践</h2><div class="collapseContainer_3b941 p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/guide/best-practices/components.html"><div class="menuItemActive_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">开发组件</div></a></div></div></div></section><section class="mt-1 block" style="margin-left:0"><div style="cursor:pointer" class="flex justify-between items-center rounded-xl menuItem_3b941"><h2 class="py-1 px-2 text-sm font-medium ml-1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">常见问题</h2><div class="collapseContainer_3b941 p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/guide/faq/build.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">构建相关问题</div></a></div><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/guide/faq/storybook.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">Storybook 相关问题</div></a></div><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/guide/faq/test.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">测试相关问题</div></a></div></div></div></section></nav></div></div></aside><div class="content_12c7d flex flex-shrink-0"><div class="w-full"><div class="modern-doc"><!--$--><h1 id="开发组件" class="text-3xl mb-10 leading-10 tracking-tight title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#开发组件">#</a>开发组件</h1>
-<p class="my-4 leading-7">本章将要介绍如何使用模块工程解决方案开发组件项目。</p>
-<h2 id="初始化项目" class="mt-14 mb-6 text-2xl tracking-tight title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#初始化项目">#</a>初始化项目</h2>
-<section class="ch-spotlight  "><div class="ch-spotlight-tabs"><div></div><div class="ch-spotlight-tab"><p class="my-4 leading-7">推荐使用 <code>@modern-js/create</code> 命令来初始化一个 npm 项目。</p></div><div class="ch-spotlight-tab"><p class="my-4 leading-7">初始化的目录结构。</p></div><div class="ch-spotlight-tab"><p class="my-4 leading-7">修改 <code>./src/index.ts</code> 文件后缀和内容。</p><p class="my-4 leading-7">此时就初始化了一个组件项目。</p></div></div><div class="ch-spotlight-sticker"><div class="ch-codegroup not-prose "><div class="ch-editor-frame" style="background:#2e3440"><div class="ch-frame-title-bar" style="color:#C5C5C5;background:#2e3440"><div class="ch-frame-buttons"><div class="ch-frame-button ch-frame-button-left"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-middle"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-right"></div></div><div title="交互式问题" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-active" style="background:#3b4252;color:#d8dee9;border-right-color:#3b425200;border-bottom-color:#88c0d000"><div><span style="opacity:0.5"></span>交互式问题</div></div><div style="flex:1;min-width:0.8em"></div><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ch-editor-button"><title>Copy</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></div><div data-ch-panel="north" style="flex-grow:1;overflow:hidden"><div class="ch-code-wrapper" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto;height:100%"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>npx @modern-js/create@latest components-project</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>? 请选择你想创建的工程类型：Npm 模块</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>? 请填写项目名称：components-demo</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>? 请选择开发语言：TS</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>? 请选择包管理工具：pnpm</span></div></div><br/></code></div></div></div></div></div></section>
-<h2 id="使用-storybook-调试代码" class="mt-14 mb-6 text-2xl tracking-tight title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#使用-storybook-调试代码">#</a>使用 Storybook 调试代码</h2>
-<section class="ch-spotlight  "><div class="ch-spotlight-tabs"><div></div><div class="ch-spotlight-tab"><p class="my-4 leading-7">在项目根目录下执行 <code>new</code> 命令，可以开启 Storybook 功能。</p></div><div class="ch-spotlight-tab"><p class="my-4 leading-7">成功开启后，会看到 <code>package.json</code> 中新增了依赖。同时创建了 <code>stories</code> 目录和相关的初始化文件。</p></div><div class="ch-spotlight-tab"><p class="my-4 leading-7">初始化后，在 <code>./stories</code> 目录下的 <code>tsconfig.json</code> 文件中默认设置了与项目同名的 <code>paths</code> 配置。</p></div><div class="ch-spotlight-tab"><p class="my-4 leading-7">这样的配置可以让你在 Story 代码中直接使用项目的名称引入代码。</p></div><div class="ch-spotlight-tab"><p class="my-4 leading-7">此时 Storybook 会根据项目的 <code>package.json</code> 文件中的 <code>main</code>、<code>exports</code> 这样的字段确认导入代码的入口；
-根据 <code>types</code> 字段确定类型文件的位置。</p></div><div class="ch-spotlight-tab"><p class="my-4 leading-7">虽然也支持导入源代码进行调试，不过使用项目产物调试更加可靠。</p><p class="my-4 leading-7">使用源代码调试存在局限性：某些配置无法在 Storybook 和原本构建支持的配置等价使用。</p><p class="my-4 leading-7"><strong class="font-semibold">因此更推荐使用产物进行调试</strong>。</p></div></div><div class="ch-spotlight-sticker"><div class="ch-codegroup not-prose "><div class="ch-editor-frame" style="background:#2e3440"><div class="ch-frame-title-bar" style="color:#C5C5C5;background:#2e3440"><div class="ch-frame-buttons"><div class="ch-frame-button ch-frame-button-left"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-middle"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-right"></div></div><div title="终端" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-active" style="background:#3b4252;color:#d8dee9;border-right-color:#3b425200;border-bottom-color:#88c0d000"><div><span style="opacity:0.5"></span>终端</div></div><div style="flex:1;min-width:0.8em"></div><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ch-editor-button"><title>Copy</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></div><div data-ch-panel="north" style="flex-grow:1;overflow:hidden"><div class="ch-code-wrapper" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto;height:100%"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>pnpm run new</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>? 请选择你想要的操作 启用可选功能</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>? 请选择功能名称 启用「Storybook」</span></div></div><br/></code></div></div></div></div></div></section>
-<h2 id="开发样式" class="mt-14 mb-6 text-2xl tracking-tight title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#开发样式">#</a>开发样式</h2>
-<p class="my-4 leading-7">接下来我们可以给组件添加样式。</p>
-<p class="my-4 leading-7">目前支持开发样式的能力有：</p>
-<ul class="list-disc pl-5 my-4 leading-7">
-<li class="[&amp;:not(:first-child)]:mt-2">CSS/PostCSS</li>
-<li class="[&amp;:not(:first-child)]:mt-2">Less</li>
-<li class="[&amp;:not(:first-child)]:mt-2">Scss/Sass</li>
-<li class="[&amp;:not(:first-child)]:mt-2">Tailwind CSS</li>
-<li class="[&amp;:not(:first-child)]:mt-2">CSS Modules</li>
-</ul>
-<h3 id="csspostcss" class="mt-10 mb-2 leading-7 text-xl title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#csspostcss">#</a>CSS/PostCSS</h3>
-<p class="my-4 leading-7">模块工程支持 PostCSS，并且内置了以下 PostCSS 插件：</p>
-<ul class="list-disc pl-5 my-4 leading-7">
-<li class="[&amp;:not(:first-child)]:mt-2"><a href="https://github.com/luisrudge/postcss-flexbugs-fixes" target="_blank" rel="noopener noreferrer" class="link_2d294 undefined">flexbugs-fixes</a></li>
-<li class="[&amp;:not(:first-child)]:mt-2"><a href="https://github.com/postcss/postcss-custom-properties" target="_blank" rel="noopener noreferrer" class="link_2d294 undefined">custom-properties</a></li>
-<li class="[&amp;:not(:first-child)]:mt-2"><a href="https://github.com/maximkoretskiy/postcss-initial" target="_blank" rel="noopener noreferrer" class="link_2d294 undefined">initial</a></li>
-<li class="[&amp;:not(:first-child)]:mt-2"><a href="https://github.com/shrpne/postcss-page-break" target="_blank" rel="noopener noreferrer" class="link_2d294 undefined">page-break</a></li>
-<li class="[&amp;:not(:first-child)]:mt-2"><a href="https://github.com/postcss/postcss-font-variant" target="_blank" rel="noopener noreferrer" class="link_2d294 undefined">font-variant</a></li>
-<li class="[&amp;:not(:first-child)]:mt-2"><a href="https://github.com/postcss/postcss-media-minmax" target="_blank" rel="noopener noreferrer" class="link_2d294 undefined">media-minmax</a></li>
-<li class="[&amp;:not(:first-child)]:mt-2"><a href="https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting#readme" target="_blank" rel="noopener noreferrer" class="link_2d294 undefined">nesting</a></li>
-</ul>
-<p class="my-4 leading-7">因此我们可以在项目中创建 <code>.css</code> 文件，并且可以直接在 css 文件中使用这些插件提供的语法支持和能力。</p>
-<section class="ch-spotlight  "><div class="ch-spotlight-tabs"><div></div><div class="ch-spotlight-tab"><p class="my-4 leading-7">源代码。</p></div><div class="ch-spotlight-tab"><p class="my-4 leading-7">css 产物。</p></div></div><div class="ch-spotlight-sticker"><div class="ch-codegroup not-prose "><div class="ch-editor-frame" style="background:#2e3440"><div class="ch-frame-title-bar" style="color:#C5C5C5;background:#2e3440"><div class="ch-frame-buttons"><div class="ch-frame-button ch-frame-button-left"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-middle"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-right"></div></div><div title="./src/index.css" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-active" style="background:#3b4252;color:#d8dee9;border-right-color:#3b425200;border-bottom-color:#88c0d000"><div><span style="opacity:0.5">./src/</span>index.css</div></div><div style="flex:1;min-width:0.8em"></div><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ch-editor-button"><title>Copy</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></div><div data-ch-panel="north" style="flex-grow:1;overflow:hidden"><div class="ch-code-wrapper" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto;height:100%"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>a,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>b {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  color: red;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  /* &quot;&amp;&quot; comes first */</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  &amp; c,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  &amp; d {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    color: white;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  /* &quot;&amp;&quot; comes later, requiring &quot;@nest&quot; */</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  @nest e &amp; {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    color: yellow;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><br/></code></div></div></div></div></div></section>
-<h3 id="less" class="mt-10 mb-2 leading-7 text-xl title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#less">#</a>Less</h3>
-<p class="my-4 leading-7">模块工程支持使用 Less 开发样式。</p>
-<blockquote class="border-l-2 border-solid border-divider pl-4 my-6 transition-colors duration-500 blockquote_2d294">
-<p class="my-4 leading-7">目前内置的 Less 版本为 v4.1.3</p>
-</blockquote>
-<section class="ch-spotlight  "><div class="ch-spotlight-tabs"><div></div><div class="ch-spotlight-tab"><p class="my-4 leading-7">源代码。</p></div><div class="ch-spotlight-tab"><p class="my-4 leading-7">Less 产物。</p></div></div><div class="ch-spotlight-sticker"><div class="ch-codegroup not-prose "><div class="ch-editor-frame" style="background:#2e3440"><div class="ch-frame-title-bar" style="color:#C5C5C5;background:#2e3440"><div class="ch-frame-buttons"><div class="ch-frame-button ch-frame-button-left"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-middle"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-right"></div></div><div title="./src/common.less" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-active" style="background:#3b4252;color:#d8dee9;border-right-color:#3b425200;border-bottom-color:#88c0d000"><div><span style="opacity:0.5">./src/</span>common.less</div></div><div style="flex:1;min-width:0.8em"></div><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ch-editor-button"><title>Copy</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></div><div data-ch-panel="north" style="flex-grow:1;overflow:hidden"><div class="ch-code-wrapper" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto;height:100%"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>@bg: black;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>@bg-light: boolean(luma(@bg) &gt; 50%);</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>div {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  background: @bg;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  color: if(@bg-light, black, white);</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><br/></code></div></div></div></div></div></section>
-<h3 id="sassscss" class="mt-10 mb-2 leading-7 text-xl title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#sassscss">#</a>Sass/Scss</h3>
-<p class="my-4 leading-7">模块工程支持使用 Scss/Sass 开发样式。</p>
-<blockquote class="border-l-2 border-solid border-divider pl-4 my-6 transition-colors duration-500 blockquote_2d294">
-<p class="my-4 leading-7">目前内置的 Sass 版本为 v1.54.4</p>
-</blockquote>
-<section class="ch-spotlight  "><div class="ch-spotlight-tabs"><div></div><div class="ch-spotlight-tab"><p class="my-4 leading-7">源代码。</p></div><div class="ch-spotlight-tab"><p class="my-4 leading-7">Less 产物。</p></div></div><div class="ch-spotlight-sticker"><div class="ch-codegroup not-prose "><div class="ch-editor-frame" style="background:#2e3440"><div class="ch-frame-title-bar" style="color:#C5C5C5;background:#2e3440"><div class="ch-frame-buttons"><div class="ch-frame-button ch-frame-button-left"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-middle"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-right"></div></div><div title="./src/common.sass" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-active" style="background:#3b4252;color:#d8dee9;border-right-color:#3b425200;border-bottom-color:#88c0d000"><div><span style="opacity:0.5">./src/</span>common.sass</div></div><div style="flex:1;min-width:0.8em"></div><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ch-editor-button"><title>Copy</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></div><div data-ch-panel="north" style="flex-grow:1;overflow:hidden"><div class="ch-code-wrapper" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto;height:100%"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>$font-stack: Helvetica, sans-serif;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>$primary-color: #333;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>body {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  font: 100% $font-stack;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  color: $primary-color;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><br/></code></div></div></div></div></div></section>
-<h3 id="tailwind-css" class="mt-10 mb-2 leading-7 text-xl title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#tailwind-css">#</a>Tailwind CSS</h3>
-<p class="my-4 leading-7">模块工程支持使用 Tailwind CSS 开发组件样式。</p>
-<p class="my-4 leading-7">默认情况下，模块工程没有开启该功能，需要按照下面的方式开启它。</p>
-<section class="ch-spotlight  "><div class="ch-spotlight-tabs"><div></div><div class="ch-spotlight-tab"><p class="my-4 leading-7">在项目根目录下执行 <code>new</code> 命令，可以开启 Tailwind CSS 功能。</p></div><div class="ch-spotlight-tab"><p class="my-4 leading-7">成功开启后，会看到 <code>package.json</code> 中新增了依赖。</p></div></div><div class="ch-spotlight-sticker"><div class="ch-codegroup not-prose "><div class="ch-editor-frame" style="background:#2e3440"><div class="ch-frame-title-bar" style="color:#C5C5C5;background:#2e3440"><div class="ch-frame-buttons"><div class="ch-frame-button ch-frame-button-left"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-middle"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-right"></div></div><div title="终端" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-active" style="background:#3b4252;color:#d8dee9;border-right-color:#3b425200;border-bottom-color:#88c0d000"><div><span style="opacity:0.5"></span>终端</div></div><div style="flex:1;min-width:0.8em"></div><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ch-editor-button"><title>Copy</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></div><div data-ch-panel="north" style="flex-grow:1;overflow:hidden"><div class="ch-code-wrapper" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto;height:100%"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>pnpm run new</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>? 请选择你想要的操作 启用可选功能</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>? 请选择功能名称 启用「Storybook」</span></div></div><br/></code></div></div></div></div></div></section>
-<p class="my-4 leading-7">Tailwind CSS 提供了两种使用方式：</p>
-<h4 id="html-类名" class="mt-8 leading-6 text-base title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#html-类名">#</a>HTML 类名</h4>
-<section class="ch-spotlight  "><div class="ch-spotlight-tabs"><div></div><div class="ch-spotlight-tab"><p class="my-4 leading-7">Tailwind CSS 支持在 HTML 标签上使用类名的方式增加样式。</p></div><div class="ch-spotlight-tab"><p class="my-4 leading-7"><strong class="font-semibold">当使用 HTML 类名的时候，一定要注意导入 Tailwind CSS 相应的 css 文件。</strong></p></div><div class="ch-spotlight-tab"><p class="my-4 leading-7">样式产物。</p><blockquote class="border-l-2 border-solid border-divider pl-4 my-6 transition-colors duration-500 blockquote_2d294">
-<p class="my-4 leading-7">此时是 bundle 构建。</p>
-</blockquote></div></div><div class="ch-spotlight-sticker"><div class="ch-codegroup not-prose "><div class="ch-editor-frame" style="background:#2e3440"><div class="ch-frame-title-bar" style="color:#C5C5C5;background:#2e3440"><div class="ch-frame-buttons"><div class="ch-frame-button ch-frame-button-left"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-middle"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-right"></div></div><div title="./src/index.tsx" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-active" style="background:#3b4252;color:#d8dee9;border-right-color:#3b425200;border-bottom-color:#88c0d000"><div><span style="opacity:0.5">./src/</span>index.tsx</div></div><div style="flex:1;min-width:0.8em"></div><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ch-editor-button"><title>Copy</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></div><div data-ch-panel="north" style="flex-grow:1;overflow:hidden"><div class="ch-code-wrapper" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto;height:100%"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>import &#x27;tailwindcss/utilities.css&#x27;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default () =&gt; {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  return &lt;div className=&quot;bg-black text-white&quot;&gt;hello world&lt;/div&gt;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div></div></div></div></section>
-<h4 id="apply" class="mt-8 leading-6 text-base title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#apply">#</a><code>@apply</code></h4>
-<p class="my-4 leading-7">Tailwind CSS 提供了 <a href="https://v2.tailwindcss.com/docs/functions-and-directives#apply" target="_blank" rel="noopener noreferrer" class="link_2d294 undefined"><code>@apply</code></a> 指令，可以通过它将 Tailwind CSS 提供的样式内联到我们编写的样式中。</p>
-<p class="my-4 leading-7"><code>@apply</code> 可以用于 CSS、Less、Sass 中。</p>
-<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>.btn {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  @apply font-bold py-2 px-4 rounded;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><br/></code></div></div>
-<p class="my-4 leading-7">但是使用过程中，对于 Less 和 Sass 有些情况需要注意：</p>
-<h5 id="sass" class="title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#sass">#</a>Sass</h5>
-<p class="my-4 leading-7">当将 Tailwind 与 Sass 一起使用时，<code>@apply</code> 后面存在 <code>!important</code> 的时候，需要使用插值来让 Sass 正确编译。</p>
-<section class="ch-spotlight  "><div class="ch-spotlight-tabs"><div></div><div class="ch-spotlight-tab"><p class="my-4 leading-7">不能正常工作。</p></div><div class="ch-spotlight-tab"><p class="my-4 leading-7">能够正常工作。</p></div></div><div class="ch-spotlight-sticker"><div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>.alert {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  @apply bg-red-500 !important;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><br/></code></div></div></div></section>
-<h5 id="less-1" class="title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#less-1">#</a>Less</h5>
-<p class="my-4 leading-7">在与 Less 一起使用 Tailwind 时，你不能嵌套 Tailwind 的 <code>@screen</code> 指令。</p>
-<section class="ch-spotlight  "><div class="ch-spotlight-tabs"><div></div><div class="ch-spotlight-tab"><p class="my-4 leading-7">不能正常工作。</p></div><div class="ch-spotlight-tab"><p class="my-4 leading-7">相反，使用常规的媒体查询和 <code>theme()</code> 函数来引用你的屏幕尺寸，或者干脆不要嵌套你的 <code>@screen</code> 指令。</p></div></div><div class="ch-spotlight-sticker"><div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>.card {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  @apply rounded-none;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  @screen sm {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    @apply rounded-lg;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><br/></code></div></div></div></section>
-<h4 id="推荐方式" class="mt-8 leading-6 text-base title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#推荐方式">#</a>推荐方式</h4>
-<p class="my-4 leading-7"><strong class="font-semibold">推荐使用 <code>@apply</code> 指定的方式开发样式，这样在样式产物中仅包含通过指令内联的样式。</strong></p>
-<p class="my-4 leading-7">当使用 HTML 类名的方式添加样式的时候，默认情况下 Tailwind 不仅会将本身类名对应的样式加入产物中，同时还会有额外的样式代码存在，虽然这些代码可能不会对本身的样式产生影响。</p>
-<h4 id="bundle-和-bundleless-构建产物区别" class="mt-8 leading-6 text-base title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#bundle-和-bundleless-构建产物区别">#</a>bundle 和 bundleless 构建产物区别</h4>
-<p class="my-4 leading-7">对于以下代码，在 bundle 和 bundleless 两种模式下，构建产物会有很大区别。</p>
-<blockquote class="border-l-2 border-solid border-divider pl-4 my-6 transition-colors duration-500 blockquote_2d294">
-<p class="my-4 leading-7">所谓 bundle 和 bundleless 可以查看 <a href="/module-tools/guide/advance/in-depth-about-build.html#bundle-%E5%92%8C-bundleless" class="link_2d294 undefined">「Bundle 和 Bundleless」</a></p>
-</blockquote>
-<div class="ch-codegroup not-prose "><div class="ch-editor-frame" style="background:#2e3440"><div class="ch-frame-title-bar" style="color:#C5C5C5;background:#2e3440"><div class="ch-frame-buttons"><div class="ch-frame-button ch-frame-button-left"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-middle"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-right"></div></div><div title="./src/index.tsx" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-active" style="background:#3b4252;color:#d8dee9;border-right-color:#3b425200;border-bottom-color:#88c0d000"><div><span style="opacity:0.5">./src/</span>index.tsx</div></div><div style="flex:1;min-width:0.8em"></div><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ch-editor-button"><title>Copy</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></div><div data-ch-panel="north" style="flex-grow:1;overflow:hidden"><div class="ch-code-wrapper" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto;height:100%"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>import &#x27;tailwindcss/utilities.css&#x27;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default () =&gt; {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  return &lt;div className=&quot;bg-black text-white&quot;&gt;hello world11&lt;/div&gt;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div></div></div>
-<p class="my-4 leading-7">Bundle 模式下，会将第三方依赖打包进来。</p>
-<p class="my-4 leading-7">对于样式则会生成一份单独的产物文件，并且在 JS 产物文件中并不会存在导入样式的相关代码。</p>
-<p class="my-4 leading-7">如果需要将样式注入 JS 产物中，可以开启 <a href="/module-tools/api/config/build-config.html#styleinject" class="link_2d294 undefined"><code>style.inject</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="./dist/es/index.css" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-active" style="background:#3b4252;color:#d8dee9;border-right-color:#3b425200;border-bottom-color:#88c0d000"><div><span style="opacity:0.5">./dist/es/</span>index.css</div></div><div style="flex:1;min-width:0.8em"></div><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ch-editor-button"><title>Copy</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></div><div data-ch-panel="north" style="flex-grow:1;overflow:hidden"><div class="ch-code-wrapper" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto;height:100%"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>/* ../../node_modules/.pnpm/tailwindcss@2.2.19/node_modules/tailwindcss/utilities.css */</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>.table {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  display: table;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>@keyframes spin {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  to {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    transform: rotate(360deg);</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>@keyframes ping {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  75%, 100% {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    transform: scale(2);</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    opacity: 0;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>@keyframes pulse {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  50% {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    opacity: .5;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>@keyframes bounce {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  0%, 100% {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    transform: translateY(-25%);</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  50% {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    transform: none;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>.bg-black {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  --tw-bg-opacity: 1;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>.text-white {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  --tw-text-opacity: 1;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  color: rgba(255, 255, 255, var(--tw-text-opacity));</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>*,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>::before,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>::after {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  --tw-shadow: 0 0 #0000 ;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>*,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>::before,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>::after {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  --tw-ring-inset: var(--tw-empty, );</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  --tw-ring-offset-width: 0px;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  --tw-ring-offset-color: #fff;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  --tw-ring-color: rgba(59, 130, 246, 0.5);</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  --tw-ring-offset-shadow: 0 0 #0000;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  --tw-ring-shadow: 0 0 #0000 ;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>@media (min-width: 640px) {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>@media (min-width: 768px) {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>@media (min-width: 1024px) {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>@media (min-width: 1280px) {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>@media (min-width: 1536px) {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><br/></code></div></div><div class="ch-frame-title-bar" style="color:#C5C5C5;background:#2e3440"><div style="position:absolute;height:1px;background:#3b425201;width:100%;top:0;z-index:1"></div><div></div><div title="./dist/es/index.js" data-ch-tab="south" class="ch-editor-tab ch-editor-tab-active" style="background:#3b4252;color:#d8dee9;border-right-color:#3b425200;border-bottom-color:#88c0d000"><div><span style="opacity:0.5">./dist/es/</span>index.js</div></div><div style="flex:1;min-width:0.8em"></div><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ch-editor-button"><title>Copy</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></div><div data-ch-panel="south" style="flex-grow:1;overflow:hidden"><div class="ch-code-wrapper" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto;height:100%"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>// src/index.tsx</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>import { jsx } from &quot;react/jsx-runtime&quot;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>var src_default = () =&gt; {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  return /* @__PURE__ */ jsx(&quot;div&quot;, {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    className: &quot;bg-black text-white&quot;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    children: &quot;hello world11&quot;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  });</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  src_default as default</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div></div></div>
-<p class="my-4 leading-7">Bundleless 模式下，并不会将第三方依赖打包进来，此时不会有样式产物生成。</p>
-<div class="ch-codegroup not-prose "><div class="ch-editor-frame" style="background:#2e3440"><div class="ch-frame-title-bar" style="color:#C5C5C5;background:#2e3440"><div class="ch-frame-buttons"><div class="ch-frame-button ch-frame-button-left"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-middle"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-right"></div></div><div title="./dist/es/index.js" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-active" style="background:#3b4252;color:#d8dee9;border-right-color:#3b425200;border-bottom-color:#88c0d000"><div><span style="opacity:0.5">./dist/es/</span>index.js</div></div><div style="flex:1;min-width:0.8em"></div><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ch-editor-button"><title>Copy</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></div><div data-ch-panel="north" style="flex-grow:1;overflow:hidden"><div class="ch-code-wrapper" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto;height:100%"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>import { jsx } from &#x27;react/jsx-runtime&#x27;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>import &#x27;tailwindcss/utilities.css&#x27;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>var src_default = () =&gt; {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  return /* @__PURE__ */ jsx(&#x27;div&#x27;, {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    className: &#x27;bg-black text-white&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    children: &#x27;hello world11&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  });</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export { src_default as default };</span></div></div><br/></code></div></div></div></div>
-<h3 id="css-modules" class="mt-10 mb-2 leading-7 text-xl title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#css-modules">#</a>CSS Modules</h3>
-<p class="my-4 leading-7">模块工程支持使用 CSS Module 开发样式。默认情况下会将以下文件识别为 CSS Module 文件：</p>
-<ul class="list-disc pl-5 my-4 leading-7">
-<li class="[&amp;:not(:first-child)]:mt-2"><code>.module.css</code></li>
-<li class="[&amp;:not(:first-child)]:mt-2"><code>.module.less</code></li>
-<li class="[&amp;:not(:first-child)]:mt-2"><code>.module.scss</code></li>
-<li class="[&amp;:not(:first-child)]:mt-2"><code>.module.sass</code></li>
-</ul>
-<p class="my-4 leading-7">如果需要对 CSS Modules 进行配置，可以查看以下 API：</p>
-<ul class="list-disc pl-5 my-4 leading-7">
-<li class="[&amp;:not(:first-child)]:mt-2"><a href="/module-tools/api/config/build-config.html#styleautomodules" class="link_2d294 undefined">style.autoModules</a></li>
-<li class="[&amp;:not(:first-child)]:mt-2"><a href="/module-tools/api/config/build-config.html#stylemodules" class="link_2d294 undefined">style.modules</a></li>
-</ul>
-<p class="my-4 leading-7">下面是一个代码示例：</p>
-<div class="ch-codegroup not-prose "><div class="ch-editor-frame" style="background:#2e3440"><div class="ch-frame-title-bar" style="color:#C5C5C5;background:#2e3440"><div class="ch-frame-buttons"><div class="ch-frame-button ch-frame-button-left"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-middle"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-right"></div></div><div title="./src/index.tsx" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-active" style="background:#3b4252;color:#d8dee9;border-right-color:#3b425200;border-bottom-color:#88c0d000"><div><span style="opacity:0.5">./src/</span>index.tsx</div></div><div title="./src/index.module.css" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-inactive" style="background:#2e3440;color:#d8dee966;border-right-color:#3b425200;border-bottom-color:#2e3440"><div><span style="opacity:0.5">./src/</span>index.module.css</div></div><div style="flex:1;min-width:0.8em"></div><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ch-editor-button"><title>Copy</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></div><div data-ch-panel="north" style="flex-grow:1;overflow:hidden"><div class="ch-code-wrapper" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto;height:100%"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>import style from &#x27;./index.module.css&#x27;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default () =&gt; {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  return &lt;div className={style.btn}&gt;hello world&lt;/div&gt;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div></div></div>
-<h2 id="配置构建产物" class="mt-14 mb-6 text-2xl tracking-tight title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#配置构建产物">#</a>配置构建产物</h2>
-<p class="my-4 leading-7">根据组件项目使用的多数场景，<strong class="font-semibold">推荐使用 <code>npm-component</code> 构建预设</strong>。该预设得到的产物目录结构为：</p>
-<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>.</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>├── dist</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>│   ├── es</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>│   ├── lib</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>│   └── types</span></div></div><br/></code></div></div>
-<ul class="list-disc pl-5 my-4 leading-7">
-<li class="[&amp;:not(:first-child)]:mt-2"><code>./dist/es</code>: 包含了支持 es6 语法的 ES modules 格式的 bundleless 产物。</li>
-<li class="[&amp;:not(:first-child)]:mt-2"><code>./dist/lib</code>: 包含了支持 es6 语法的 CommonJS 格式的 bundleless 产物。</li>
-<li class="[&amp;:not(:first-child)]:mt-2"><code>./dist/types</code>: 包含了类型文件。</li>
-</ul>
-<p class="my-4 leading-7">如果对使用语法支持有要求，可以手动配置 <a href="/module-tools/api/config/build-preset.html" class="link_2d294 undefined"><code>buildPreset</code></a>，并且支持在 <code>npm-component</code> 基础上增加后缀的方式修改支持的语法：</p>
-<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>export default defineConfig({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  buildPreset: &#x27;npm-component-es2019&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br/></code></div></div>
-<p class="my-4 leading-7">如果对构建产物目录结构有特殊需求，则可以使用 <a href="/module-tools/api/config/build-config.html" class="link_2d294 undefined"><code>buildConfig</code> API</a>，可以通过以下文档来了解使用方式：</p>
-<ul class="list-disc pl-5 my-4 leading-7">
-<li class="[&amp;:not(:first-child)]:mt-2"><a href="/module-tools/guide/basic/modify-output-product.html#%E6%9E%84%E5%BB%BA%E9%85%8D%E7%BD%AE%E5%AF%B9%E8%B1%A1" class="link_2d294 undefined">修改输出产物</a></li>
-<li class="[&amp;:not(:first-child)]:mt-2"><a href="/module-tools/guide/advance/in-depth-about-build.html" class="link_2d294 undefined">深入理解构建</a></li>
-</ul>
-<h2 id="测试组件" class="mt-14 mb-6 text-2xl tracking-tight title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#测试组件">#</a>测试组件</h2>
-<p class="my-4 leading-7">关于如何对组件进行测试，可以参考 <a href="/module-tools/guide/basic/test-your-project.html" class="link_2d294 undefined">「测试项目」</a>。</p>
-<h2 id="发布组件" class="mt-14 mb-6 text-2xl tracking-tight title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#发布组件">#</a>发布组件</h2>
-<p class="my-4 leading-7">推荐使用模块工程提供版本发布功能，可以参考 <a href="/module-tools/guide/basic/publish-your-project.html" class="link_2d294 undefined">「版本管理与发布」</a>。</p><!--/$--><div><footer class="mt-8"><div class="xs:flex pb-5 px-2 justify-end items-center"></div><div class="flex flex-col"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/document/module-doc/docs/zh/guide/best-practices/components.mdx" target="_blank" class="editLink_469b1"><svg width="18" height="18" viewBox="0 0 32 32" class="h-5.5 mr-2 inline-block" style="vertical-align:-5px"><path fill="currentColor" d="M2 26h28v2H2zM25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10 3.6 3.6-10 10H6z"></path></svg>Edit this page on GitHub</a></div><div class="flex flex-col sm:flex-row sm:justify-around gap-4 pt-6"><div class="prev_021f9 flex flex-col"><a class="link_2a8f5 pager-link_021f9 cursor-pointer" target="" href="/module-tools/guide/advance/asset.html"><span class="desc_021f9">上一页</span><span class="title_021f9">处理静态资源文件</span></a></div><div class="next_021f9 flex flex-col"><a class="link_2a8f5 pager-link_021f9 next_021f9 cursor-pointer" target="" href="/module-tools/guide/faq/index.html"><span class="desc_021f9">下一页</span><span class="title_021f9">常见问题</span></a></div></div></footer></div></div></div><div class="aside-container_12c7d" style="max-height:calc(100vh - (var(--modern-nav-height) + 32px));overflow:scroll"><div><div class="flex flex-col"><div class="&lt;lg:hidden"><div id="aside-container" class="relative pl-4 text-sm font-medium"><div class="leading-7 block text-sm font-semibold">目录</div><nav class="mt-1"><ul class="relative"><li><a href="#初始化项目" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:semibold">初始化项目</a></li><li><a href="#使用-storybook-调试代码" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:semibold">使用 Storybook 调试代码</a></li><li><a href="#开发样式" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:semibold">开发样式</a></li><li><a href="#css/postcss" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:normal">CSS/PostCSS</a></li><li><a href="#less" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:normal">Less</a></li><li><a href="#sass/scss" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:normal">Sass/Scss</a></li><li><a href="#tailwind-css" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:normal">Tailwind CSS</a></li><li><a href="#html-类名" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:normal">HTML 类名</a></li><li><a href="#@apply" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:normal">@apply</a></li><li><a href="#推荐方式" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:normal">推荐方式</a></li><li><a href="#bundle-和-bundleless-构建产物区别" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:normal">bundle 和 bundleless 构建产物区别</a></li><li><a href="#css-modules" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:normal">CSS Modules</a></li><li><a href="#配置构建产物" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:semibold">配置构建产物</a></li><li><a href="#测试组件" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:semibold">测试组件</a></li><li><a href="#发布组件" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:semibold">发布组件</a></li></ul></nav></div></div></div></div></div></div></div></section></div></div><div id="search-container"></div></body></html>