@modern-js/module-tools-docs 2.7.0 → 2.7.1-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/doc_build/api/config/build-config.html +363 -0
- package/doc_build/api/config/build-preset.html +72 -0
- package/doc_build/api/config/design-system.html +114 -0
- package/doc_build/api/config/plugins.html +18 -0
- package/doc_build/api/config/testing.html +32 -0
- package/doc_build/api/index.html +12 -0
- package/doc_build/api/plugin-api/plugin-hooks.html +123 -0
- package/doc_build/en/api/config/build-config.html +347 -0
- package/doc_build/en/api/config/build-preset.html +72 -0
- package/doc_build/en/api/config/design-system.html +128 -0
- package/doc_build/en/api/config/plugins.html +18 -0
- package/doc_build/en/api/config/testing.html +32 -0
- package/doc_build/en/api/index.html +12 -0
- package/doc_build/en/api/plugin-api/plugin-hooks.html +123 -0
- package/doc_build/en/guide/advance/asset.html +36 -0
- package/doc_build/en/guide/advance/build-umd.html +43 -0
- package/doc_build/en/guide/advance/copy.html +53 -0
- package/doc_build/en/guide/advance/external-dependency.html +46 -0
- package/doc_build/en/guide/advance/in-depth-about-build.html +123 -0
- package/doc_build/en/guide/advance/in-depth-about-dev-command.html +33 -0
- package/doc_build/en/guide/advance/theme-config.html +40 -0
- package/doc_build/en/guide/basic/before-getting-started.html +98 -0
- package/doc_build/en/guide/basic/command-preview.html +74 -0
- package/doc_build/en/guide/basic/modify-output-product.html +109 -0
- package/doc_build/en/guide/basic/publish-your-project.html +61 -0
- package/doc_build/en/guide/basic/test-your-project.html +42 -0
- package/doc_build/en/guide/basic/use-micro-generator.html +48 -0
- package/doc_build/en/guide/basic/using-storybook.html +77 -0
- package/doc_build/en/guide/best-practices/components.html +122 -0
- package/doc_build/en/guide/intro/getting-started.html +51 -0
- package/doc_build/en/guide/intro/welcome.html +24 -0
- package/doc_build/en/guide/intro/why-module-engineering-solution.html +20 -0
- package/doc_build/en/index.html +12 -0
- package/doc_build/en/plugins/guide/getting-started.html +26 -0
- package/doc_build/en/plugins/guide/plugin-object.html +25 -0
- package/doc_build/en/plugins/guide/setup-function.html +41 -0
- package/doc_build/en/plugins/official-list/overview.html +17 -0
- package/doc_build/en/plugins/official-list/plugin-banner.html +41 -0
- package/doc_build/en/plugins/official-list/plugin-import.html +43 -0
- package/doc_build/guide/advance/asset.html +36 -0
- package/doc_build/guide/advance/build-umd.html +43 -0
- package/doc_build/guide/advance/copy.html +53 -0
- package/doc_build/guide/advance/external-dependency.html +46 -0
- package/doc_build/guide/advance/in-depth-about-build.html +123 -0
- package/doc_build/guide/advance/in-depth-about-dev-command.html +33 -0
- package/doc_build/guide/advance/theme-config.html +39 -0
- package/doc_build/guide/basic/before-getting-started.html +98 -0
- package/doc_build/guide/basic/command-preview.html +74 -0
- package/doc_build/guide/basic/modify-output-product.html +109 -0
- package/doc_build/guide/basic/publish-your-project.html +63 -0
- package/doc_build/guide/basic/test-your-project.html +44 -0
- package/doc_build/guide/basic/use-micro-generator.html +46 -0
- package/doc_build/guide/basic/using-storybook.html +75 -0
- package/doc_build/guide/best-practices/components.html +122 -0
- package/doc_build/guide/intro/getting-started.html +48 -0
- package/doc_build/guide/intro/welcome.html +24 -0
- package/doc_build/guide/intro/why-module-engineering-solution.html +20 -0
- package/doc_build/index.html +12 -0
- package/doc_build/plugins/guide/getting-started.html +26 -0
- package/doc_build/plugins/guide/plugin-object.html +25 -0
- package/doc_build/plugins/guide/setup-function.html +41 -0
- package/doc_build/plugins/official-list/overview.html +17 -0
- package/doc_build/plugins/official-list/plugin-banner.html +41 -0
- package/doc_build/plugins/official-list/plugin-import.html +43 -0
- package/doc_build/static/css/main.0bdbae52.css +1 -0
- package/doc_build/static/js/9061.555c88e4.js +2 -0
- package/doc_build/static/js/9061.555c88e4.js.LICENSE.txt +25 -0
- package/doc_build/static/js/async/1114.d0e9a03f.js +1 -0
- package/doc_build/static/js/async/en_api_config_build-config.4b68a964.js +1 -0
- package/doc_build/static/js/async/en_api_config_build-preset.3c87d23b.js +1 -0
- package/doc_build/static/js/async/en_api_config_design-system.bae5a6a4.js +1 -0
- package/doc_build/static/js/async/en_api_config_plugins.e2525188.js +1 -0
- package/doc_build/static/js/async/en_api_config_testing.bdfe73d2.js +1 -0
- package/doc_build/static/js/async/en_api_index.e8c3584a.js +1 -0
- package/doc_build/static/js/async/en_api_plugin-api_plugin-hooks.130c0839.js +1 -0
- package/doc_build/static/js/async/en_guide_advance_asset.29c82557.js +1 -0
- package/doc_build/static/js/async/en_guide_advance_build-umd.5912e38e.js +1 -0
- package/doc_build/static/js/async/en_guide_advance_copy.e73474a0.js +1 -0
- package/doc_build/static/js/async/en_guide_advance_external-dependency.21c368af.js +1 -0
- package/doc_build/static/js/async/en_guide_advance_in-depth-about-build.90beffab.js +1 -0
- package/doc_build/static/js/async/en_guide_advance_in-depth-about-dev-command.7be33ae4.js +1 -0
- package/doc_build/static/js/async/en_guide_advance_theme-config.ed245a3c.js +1 -0
- package/doc_build/static/js/async/en_guide_basic_before-getting-started.1da2f70c.js +1 -0
- package/doc_build/static/js/async/en_guide_basic_command-preview.16337618.js +1 -0
- package/doc_build/static/js/async/en_guide_basic_modify-output-product.c1634e05.js +1 -0
- package/doc_build/static/js/async/en_guide_basic_publish-your-project.6ffa1dcb.js +1 -0
- package/doc_build/static/js/async/en_guide_basic_test-your-project.503389bd.js +1 -0
- package/doc_build/static/js/async/en_guide_basic_use-micro-generator.1d9ade59.js +1 -0
- package/doc_build/static/js/async/en_guide_basic_using-storybook.2e1cf2bc.js +1 -0
- package/doc_build/static/js/async/en_guide_best-practices_components.db985beb.js +1 -0
- package/doc_build/static/js/async/en_guide_intro_getting-started.fdf2a5e3.js +1 -0
- package/doc_build/static/js/async/en_guide_intro_welcome.e8402d15.js +1 -0
- package/doc_build/static/js/async/en_guide_intro_why-module-engineering-solution.5b18a76a.js +1 -0
- package/doc_build/static/js/async/en_index.9d8e7f26.js +1 -0
- package/doc_build/static/js/async/en_plugins_guide_getting-started.5c423f88.js +1 -0
- package/doc_build/static/js/async/en_plugins_guide_plugin-object.2799e64d.js +1 -0
- package/doc_build/static/js/async/en_plugins_guide_setup-function.bf63c2f5.js +1 -0
- package/doc_build/static/js/async/en_plugins_official-list_overview.226be4e5.js +1 -0
- package/doc_build/static/js/async/en_plugins_official-list_plugin-banner.c8fc2ef5.js +1 -0
- package/doc_build/static/js/async/en_plugins_official-list_plugin-import.dc5a5224.js +1 -0
- package/doc_build/static/js/async/zh_api_config_build-config.e0239f0b.js +1 -0
- package/doc_build/static/js/async/zh_api_config_build-preset.af73b578.js +1 -0
- package/doc_build/static/js/async/zh_api_config_design-system.6f3e0d0a.js +1 -0
- package/doc_build/static/js/async/zh_api_config_plugins.bb32094e.js +1 -0
- package/doc_build/static/js/async/zh_api_config_testing.7af33726.js +1 -0
- package/doc_build/static/js/async/zh_api_index.83d48f6f.js +1 -0
- package/doc_build/static/js/async/zh_api_plugin-api_plugin-hooks.54181e2b.js +1 -0
- package/doc_build/static/js/async/zh_guide_advance_asset.0abb6b82.js +1 -0
- package/doc_build/static/js/async/zh_guide_advance_build-umd.cd0724c4.js +1 -0
- package/doc_build/static/js/async/zh_guide_advance_copy.0c87a269.js +1 -0
- package/doc_build/static/js/async/zh_guide_advance_external-dependency.38ab900c.js +1 -0
- package/doc_build/static/js/async/zh_guide_advance_in-depth-about-build.f74fb46b.js +1 -0
- package/doc_build/static/js/async/zh_guide_advance_in-depth-about-dev-command.390bd229.js +1 -0
- package/doc_build/static/js/async/zh_guide_advance_theme-config.9d46a256.js +1 -0
- package/doc_build/static/js/async/zh_guide_basic_before-getting-started.cb228032.js +1 -0
- package/doc_build/static/js/async/zh_guide_basic_command-preview.d01b5121.js +1 -0
- package/doc_build/static/js/async/zh_guide_basic_modify-output-product.511034ae.js +1 -0
- package/doc_build/static/js/async/zh_guide_basic_publish-your-project.f1222d3a.js +1 -0
- package/doc_build/static/js/async/zh_guide_basic_test-your-project.bb4ee150.js +1 -0
- package/doc_build/static/js/async/zh_guide_basic_use-micro-generator.fbbfa670.js +1 -0
- package/doc_build/static/js/async/zh_guide_basic_using-storybook.e684c97c.js +1 -0
- package/doc_build/static/js/async/zh_guide_best-practices_components.63e6ce1f.js +1 -0
- package/doc_build/static/js/async/zh_guide_intro_getting-started.ed054585.js +1 -0
- package/doc_build/static/js/async/zh_guide_intro_welcome.e1854445.js +1 -0
- package/doc_build/static/js/async/zh_guide_intro_why-module-engineering-solution.c5feb99d.js +1 -0
- package/doc_build/static/js/async/zh_index.bdf672c6.js +1 -0
- package/doc_build/static/js/async/zh_plugins_guide_getting-started.d0775941.js +1 -0
- package/doc_build/static/js/async/zh_plugins_guide_plugin-object.acf4be01.js +1 -0
- package/doc_build/static/js/async/zh_plugins_guide_setup-function.d79620be.js +1 -0
- package/doc_build/static/js/async/zh_plugins_official-list_overview.bded70c0.js +1 -0
- package/doc_build/static/js/async/zh_plugins_official-list_plugin-banner.defbf67c.js +1 -0
- package/doc_build/static/js/async/zh_plugins_official-list_plugin-import.d9e7fb77.js +1 -0
- package/doc_build/static/js/lib-lodash.5ea7bf7d.js +1 -0
- package/doc_build/static/js/lib-polyfill.0d49b811.js +1 -0
- package/doc_build/static/js/lib-react.209d3da0.js +2 -0
- package/doc_build/static/js/lib-react.209d3da0.js.LICENSE.txt +29 -0
- package/doc_build/static/js/lib-router.6f1082f5.js +1 -0
- package/doc_build/static/js/main.457dc37f.js +1 -0
- package/doc_build/static/search_index.c9c50254.json +1 -0
- package/docs/en/guide/basic/command-preview.md +1 -1
- package/docs/en/guide/intro/getting-started.md +1 -1
- package/docs/en/plugins/official-list/overview.md +3 -1
- package/docs/en/plugins/official-list/plugin-banner.md +103 -0
- package/docs/en/plugins/official-list/plugin-import.mdx +177 -0
- package/docs/zh/guide/basic/command-preview.md +1 -1
- package/docs/zh/guide/basic/use-micro-generator.md +2 -2
- package/docs/zh/guide/intro/getting-started.md +1 -1
- package/docs/zh/plugins/official-list/overview.md +2 -1
- package/docs/zh/plugins/official-list/plugin-banner.md +103 -0
- package/docs/zh/plugins/official-list/plugin-import.mdx +176 -0
- package/modern.config.ts +3 -3
- package/package.json +3 -3
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title data-rh="true">Banner 插件 - Module Tools</title><meta data-rh="true" name="description" content="模块工程解决方案"/>
|
|
2
|
+
<script id="check-dark-light">
|
|
3
|
+
;(() => {
|
|
4
|
+
const saved = localStorage.getItem('modern-theme-appearance')
|
|
5
|
+
const prefereDark = window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
6
|
+
if (!saved || saved === 'auto' ? prefereDark : saved === 'dark') {
|
|
7
|
+
document.documentElement.classList.add('dark')
|
|
8
|
+
}
|
|
9
|
+
})()
|
|
10
|
+
</script>
|
|
11
|
+
<link rel="icon" href="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/logo-1x-0104.png"><script>!function(){"use strict";var e,n,i,t,o,u={},r={};function a(e){var n=r[e];if(void 0!==n)return n.exports;var i=r[e]={exports:{}};return u[e].call(i.exports,i,i.exports,a),i.exports}a.m=u,e=[],a.O=function(n,i,t,o){if(!i){var u=1/0;for(d=0;d<e.length;d++){i=e[d][0],t=e[d][1],o=e[d][2];for(var r=!0,_=0;_<i.length;_++)(!1&o||u>=o)&&Object.keys(a.O).every((function(e){return a.O[e](i[_])}))?i.splice(_--,1):(r=!1,o<u&&(u=o));if(r){e.splice(d--,1);var c=t();void 0!==c&&(n=c)}}return n}o=o||0;for(var d=e.length;d>0&&e[d-1][2]>o;d--)e[d]=e[d-1];e[d]=[i,t,o]},a.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(n,{a:n}),n},i=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},a.t=function(e,t){if(1&t&&(e=this(e)),8&t)return e;if("object"==typeof e&&e){if(4&t&&e.__esModule)return e;if(16&t&&"function"==typeof e.then)return e}var o=Object.create(null);a.r(o);var u={};n=n||[null,i({}),i([]),i(i)];for(var r=2&t&&e;"object"==typeof r&&!~n.indexOf(r);r=i(r))Object.getOwnPropertyNames(r).forEach((function(n){u[n]=function(){return e[n]}}));return u.default=function(){return e},a.d(o,u),o},a.d=function(e,n){for(var i in n)a.o(n,i)&&!a.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},a.f={},a.e=function(e){return Promise.all(Object.keys(a.f).reduce((function(n,i){return a.f[i](e,n),n}),[]))},a.u=function(e){return"static/js/async/"+({229:"en_guide_intro_getting-started",237:"zh_api_config_build-config",262:"en_plugins_official-list_plugin-banner",315:"en_index",421:"zh_api_config_testing",727:"zh_guide_advance_in-depth-about-build",775:"zh_guide_basic_before-getting-started",1085:"en_api_index",1108:"zh_guide_intro_why-module-engineering-solution",1178:"zh_api_plugin-api_plugin-hooks",1180:"zh_guide_advance_theme-config",1189:"zh_api_index",1677:"en_api_plugin-api_plugin-hooks",1756:"zh_guide_basic_command-preview",1895:"zh_index",2013:"zh_guide_best-practices_components",2020:"zh_guide_basic_publish-your-project",2033:"en_guide_intro_welcome",2034:"zh_guide_intro_welcome",2097:"en_api_config_plugins",2477:"zh_plugins_official-list_plugin-import",2532:"en_guide_basic_use-micro-generator",2540:"zh_guide_advance_in-depth-about-dev-command",2556:"en_api_config_testing",2611:"zh_guide_advance_copy",2633:"zh_guide_intro_getting-started",2678:"en_guide_basic_before-getting-started",2821:"zh_guide_basic_modify-output-product",2892:"zh_plugins_guide_setup-function",3032:"en_guide_basic_publish-your-project",3415:"zh_plugins_official-list_plugin-banner",3741:"en_guide_basic_test-your-project",3806:"zh_api_config_plugins",4260:"en_guide_advance_external-dependency",4390:"zh_plugins_official-list_overview",4663:"en_guide_advance_build-umd",4695:"zh_api_config_design-system",4749:"en_plugins_guide_setup-function",4837:"zh_guide_advance_build-umd",5057:"en_guide_advance_copy",5107:"zh_guide_basic_using-storybook",5284:"zh_plugins_guide_plugin-object",5300:"en_plugins_guide_plugin-object",5532:"zh_guide_advance_external-dependency",5578:"en_guide_basic_modify-output-product",5654:"en_api_config_build-config",5723:"zh_guide_advance_asset",5966:"zh_guide_basic_test-your-project",6098:"en_guide_advance_theme-config",7241:"zh_api_config_build-preset",7294:"zh_guide_basic_use-micro-generator",7401:"en_guide_best-practices_components",7512:"en_guide_intro_why-module-engineering-solution",7571:"en_guide_basic_command-preview",8230:"en_guide_advance_asset",8687:"en_plugins_guide_getting-started",8782:"en_api_config_build-preset",8888:"en_plugins_official-list_plugin-import",8927:"en_guide_advance_in-depth-about-build",9220:"en_api_config_design-system",9479:"en_plugins_official-list_overview",9675:"en_guide_basic_using-storybook",9826:"en_guide_advance_in-depth-about-dev-command",9868:"zh_plugins_guide_getting-started"}[e]||e)+"."+{229:"fdf2a5e3",237:"e0239f0b",262:"c8fc2ef5",315:"9d8e7f26",421:"7af33726",727:"f74fb46b",775:"cb228032",1085:"e8c3584a",1108:"c5feb99d",1114:"d0e9a03f",1178:"54181e2b",1180:"9d46a256",1189:"83d48f6f",1677:"130c0839",1756:"d01b5121",1895:"bdf672c6",2013:"63e6ce1f",2020:"f1222d3a",2033:"e8402d15",2034:"e1854445",2097:"e2525188",2477:"d9e7fb77",2532:"1d9ade59",2540:"390bd229",2556:"bdfe73d2",2611:"0c87a269",2633:"ed054585",2678:"1da2f70c",2821:"511034ae",2892:"d79620be",3032:"6ffa1dcb",3415:"defbf67c",3741:"503389bd",3806:"bb32094e",4260:"21c368af",4390:"bded70c0",4663:"5912e38e",4695:"6f3e0d0a",4749:"bf63c2f5",4837:"cd0724c4",5057:"e73474a0",5107:"e684c97c",5284:"acf4be01",5300:"2799e64d",5532:"38ab900c",5578:"c1634e05",5654:"4b68a964",5723:"0abb6b82",5966:"bb4ee150",6098:"ed245a3c",7241:"af73b578",7294:"fbbfa670",7401:"db985beb",7512:"5b18a76a",7571:"16337618",8230:"29c82557",8687:"5c423f88",8782:"3c87d23b",8888:"dc5a5224",8927:"90beffab",9220:"bae5a6a4",9479:"226be4e5",9675:"2e1cf2bc",9826:"7be33ae4",9868:"d0775941"}[e]+".js"},a.miniCssF=function(e){},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t={},o="@modern-js/module-tools-docs:",a.l=function(e,n,i,u){if(t[e])t[e].push(n);else{var r,_;if(void 0!==i)for(var c=document.getElementsByTagName("script"),d=0;d<c.length;d++){var f=c[d];if(f.getAttribute("src")==e||f.getAttribute("data-webpack")==o+i){r=f;break}}r||(_=!0,(r=document.createElement("script")).charset="utf-8",r.timeout=120,a.nc&&r.setAttribute("nonce",a.nc),r.setAttribute("data-webpack",o+i),r.src=e),t[e]=[n];var s=function(n,i){r.onerror=r.onload=null,clearTimeout(g);var o=t[e];if(delete t[e],r.parentNode&&r.parentNode.removeChild(r),o&&o.forEach((function(e){return e(i)})),n)return n(i)},g=setTimeout(s.bind(null,void 0,{type:"timeout",target:r}),12e4);r.onerror=s.bind(null,r.onerror),r.onload=s.bind(null,r.onload),_&&document.head.appendChild(r)}},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.p="/module-tools/",function(){var e={6272:0};a.f.j=function(n,i){var t=a.o(e,n)?e[n]:void 0;if(0!==t)if(t)i.push(t[2]);else if(6272!=n){var o=new Promise((function(i,o){t=e[n]=[i,o]}));i.push(t[2]=o);var u=a.p+a.u(n),r=new Error;a.l(u,(function(i){if(a.o(e,n)&&(0!==(t=e[n])&&(e[n]=void 0),t)){var o=i&&("load"===i.type?"missing":i.type),u=i&&i.target&&i.target.src;r.message="Loading chunk "+n+" failed.\n("+o+": "+u+")",r.name="ChunkLoadError",r.type=o,r.request=u,t[1](r)}}),"chunk-"+n,n)}else e[n]=0},a.O.j=function(n){return 0===e[n]};var n=function(n,i){var t,o,u=i[0],r=i[1],_=i[2],c=0;if(u.some((function(n){return 0!==e[n]}))){for(t in r)a.o(r,t)&&(a.m[t]=r[t]);if(_)var d=_(a)}for(n&&n(i);c<u.length;c++)o=u[c],a.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return a.O(d)},i=self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[];i.forEach(n.bind(null,0)),i.push=n.bind(null,i.push.bind(i))}()}();</script><script defer="defer" src="/module-tools/static/js/lib-polyfill.0d49b811.js"></script><script defer="defer" src="/module-tools/static/js/lib-lodash.5ea7bf7d.js"></script><script defer="defer" src="/module-tools/static/js/lib-react.209d3da0.js"></script><script defer="defer" src="/module-tools/static/js/lib-router.6f1082f5.js"></script><script defer="defer" src="/module-tools/static/js/9061.555c88e4.js"></script><script defer="defer" src="/module-tools/static/js/main.457dc37f.js"></script><link href="/module-tools/static/css/main.0bdbae52.css" rel="stylesheet"></head><body ><div id="root"><div><header class="top-0 left-0 relative md:fixed w-full" style="z-index:var(--modern-z-index-nav);background:var(--modern-c-bg)"><div class="dHJzp
|
|
12
|
+
csOJo"></div><div class="z0Ov1 modern-doc-nav" p="x-6"><div flex="~" justify="between" align="items-center" h="full" class="bcLAe"><div class="undefined"><a href="/module-tools/" w="full" h="full" text="1rem" font="semibold" transition="opacity duration-300" hover="opacity-60" class="flex items-center"><span>Module Tools</span></a></div><div flex="~ 1" justify="end" align-items-center="~"><div class="LPoOT"><div flex="~ sm:1" items="center" p="sm:l-4 sm:r-2"><div class="B7xTH"><button><svg width="18" height="24" viewBox="0 0 32 32" hight="18"><path fill="var(--modern-c-gray)" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg><p class="JFbLy">Search</p><div><span>⌘</span><span>K</span></div></button></div><div class="cqbI7"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--modern-c-gray)" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg></div></div><div class="menu" h="14"><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/guide/intro/welcome.html">指南</a></div><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/api/index.html">API</a></div><div text="sm" font="medium" m="x-3" class="text-brand-dark"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/plugins/guide/getting-started.html">插件</a></div><div m="x-3" last="mr-0"><div h="14" class="relative" flex="~ center"><button flex="~ center" align="items-center" font="medium" text="sm text-1 hover:text-2" transition="color duration-200" class="nav-menu-group-button"><span m="r-1" text="sm" font="medium">v2.7.0</span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div pos="top-13 right-0" m="x-0.8" transition="opacity duration-300" class="nav-menu-group-content absolute" style="opacity:0;visibility:hidden"><div class="p-3 w-full h-full min-w-128px max-h-100vh rounded-xl whitespace-nowrap bg-white" style="box-shadow:var(--modern-shadow-3);margin-right:-1.5rem;z-index:100;border:1px solid var(--modern-c-divider-light)"><div><div font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">更新日志<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div></div><div><div font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">贡献指南<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div></div></div></div></div></div></div><div class="flex-center flex-row"><div flex="~" text="sm" font="bold" align="items-center" class="translation sjQjZ"><div m="x-1.5"><div h="14" class="relative" flex="~ center"><button flex="~ center" align="items-center" font="medium" text="sm text-1 hover:text-2" transition="color duration-200" class="nav-menu-group-button"><span m="r-1" text="sm" font="medium"><svg width="32" height="32" viewBox="0 0 32 32" w="18px" h="18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6l2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div pos="top-13 right-0" m="x-0.8" transition="opacity duration-300" class="nav-menu-group-content absolute" style="opacity:0;visibility:hidden"><div class="p-3 w-full h-full min-w-128px max-h-100vh rounded-xl whitespace-nowrap bg-white" style="box-shadow:var(--modern-shadow-3);margin-right:-1.5rem;z-index:100;border:1px solid var(--modern-c-divider-light)"><div><div class="rounded-md" p="y-1.6 l-3"><span m="r-1" text="brand">简体中文</span></div></div><div><div font="medium"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/plugins/official-list/plugin-banner"><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">English<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div></div></div></div></div></div></div><div class="sjQjZ modern-doc-appearance" align-items-center="center"><button class="xSrUP undefined" id="" type="button" role="switch"><span class="CSfjI"><span class="zDdMk"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="nk0gt"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="A1HSI"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></span></span></button></div><div class="social-links WIILt flex-center" pos="relative"><div h="full" flex="~" gap="x-4" align-items-center="~" transition="color duration-300"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer"><div class="a9VBM"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div><div class="yd31b"><button class=" eE8v3"><span class="pOzTZ"><span class="aD0WQ"></span><span class="GwaZ7"></span><span class="HyMv9"></span></span></button><div class="XAjwG " id="navScreen"><div class="VrSyn"><div class="YCP7r"><div w="full" class="LiNpS"><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/guide/intro/welcome.html">指南</a></div></div><div w="full" class="LiNpS"><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/api/index.html">API</a></div></div><div w="full" class="LiNpS"><div text="sm" font="medium" m="x-3" class="text-brand-dark"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/plugins/guide/getting-started.html">插件</a></div></div><div w="full" class="LiNpS"><div m="x-3" last="mr-0"><div pos="relative" class=" FwXtz"><button class="YoOiJ"><span class="QFqBl">v2.7.0</span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" GPyuP "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="SEGAO"><div><div class="py-1" font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div><div flex="~"><span m="r-1">更新日志</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div><div><div class="py-1" font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div><div flex="~"><span m="r-1">贡献指南</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div></div></div></div></div></div></div><div class="flex-center flex-col"><div class="mt-2 NeDxD" flex="~" justify="center"><button class="xSrUP undefined" id="" type="button" role="switch"><span class="CSfjI"><span class="zDdMk"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="nk0gt"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="A1HSI"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></span></span></button></div><div flex="~" text="sm" font="bold" justify="center"><div m="x-1.5 y-1"><div pos="relative" class=" FwXtz"><button class="YoOiJ"><span class="QFqBl"><svg width="32" height="32" viewBox="0 0 32 32" w="18px" h="18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6l2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" GPyuP "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="SEGAO"><div><div class="p-1"><span m="r-1" text="brand">简体中文</span></div></div><div><div class="py-1" font="medium"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en"><div><div flex="~"><span m="r-1">English</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div></div></div></div></div></div><div class="social-links WIILt flex-center" pos="relative"><div h="full" flex="~" gap="x-4" align-items-center="~" transition="color duration-300"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer"><div class="a9VBM"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div></div><div class="B7xTH"><button><svg width="18" height="24" viewBox="0 0 32 32" hight="18"><path fill="var(--modern-c-gray)" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg><p class="JFbLy">Search</p><div><span>⌘</span><span>K</span></div></button></div><div class="cqbI7"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--modern-c-gray)" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg></div></div></div></div></div></header><section><div p="t-0" m="md:t-14" class="NycN9"><div class="htA00"><button flex="~ center" class="i_YqX"><div text="md" m="r-2"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"></path></svg></div><span text="sm">Menu</span></button></div><aside class="modern-scrollbar WSh16 "><div m="t-1"><nav><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">指南</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/plugins/guide/getting-started.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">快速开始</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/plugins/guide/plugin-object.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">插件对象</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/plugins/guide/setup-function.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Setup 函数</div></a></div></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">插件列表</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/plugins/official-list/overview.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">总览</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/plugins/official-list/plugin-banner.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="DYqu8" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Banner 插件</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/plugins/official-list/plugin-import.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Import 插件</div></a></div></div></div></section></nav></div></aside><div flex="~ shrink-0" class="Attzr"><div w="full"><div class="modern-doc"><!--$--><h1 id="banner-插件"><a class="header-anchor" aria-hidden="true" href="#banner-插件">#</a>Banner 插件</h1>
|
|
13
|
+
<p>提供为每个 JS 和 CSS 文件的顶部和底部注入内容的能力。</p>
|
|
14
|
+
<h2 id="快速开始"><a class="header-anchor" aria-hidden="true" href="#快速开始">#</a>快速开始</h2>
|
|
15
|
+
<h3 id="安装"><a class="header-anchor" aria-hidden="true" href="#安装">#</a>安装</h3>
|
|
16
|
+
<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span># npm</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>npm install @modern-js/plugin-module-banner -D</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># yarn</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>yarn add @modern-js/plugin-module-banner -D</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span># pnpm</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>pnpm add @modern-js/plugin-module-banner -D</span></div></div><br/></code></div></div>
|
|
17
|
+
<h3 id="注册插件"><a class="header-anchor" aria-hidden="true" href="#注册插件">#</a>注册插件</h3>
|
|
18
|
+
<p>在 Module Tools 中,你可以按照如下方式注册插件:</p>
|
|
19
|
+
<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>import moduleTools, defineConfig from '@modern-js/module-tools';</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>import pluginBanner from '@modern-js/plugin-module-banner';</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default defineConfig({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> plugins: [</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> moduleTools(),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> pluginBanner({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> banner: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> js: '//comment',</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> css: '/*comment*/',</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> }),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> ],</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br/></code></div></div>
|
|
20
|
+
<div class="modern-directive tip"><p class="modern-directive-title">TIP</p><div class="modern-directive-content"><p>
|
|
21
|
+
注意:CSS 的注释不支持 <code>//comment</code> 这样的写法。详见<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Comments" target="_blank" rel="nofollow">【CSS 注释】</a></p></div></div>
|
|
22
|
+
<h2 id="示例"><a class="header-anchor" aria-hidden="true" href="#示例">#</a>示例</h2>
|
|
23
|
+
<h3 id="在-js-文件顶部增加版权信息"><a class="header-anchor" aria-hidden="true" href="#在-js-文件顶部增加版权信息">#</a>在 JS 文件顶部增加版权信息</h3>
|
|
24
|
+
<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>import pluginBanner from '@modern-js/plugin-module-banner';</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>const copyRight = `/*</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> © Copyright 2020 xxx.com or one of its affiliates.</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> * Some Sample Copyright Text Line</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> * Some Sample Copyright Text Line</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> * Some Sample Copyright Text Line</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> * Some Sample Copyright Text Line</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> * Some Sample Copyright Text Line</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> * Some Sample Copyright Text Line</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 default defineConfig({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> plugins: [</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> pluginBanner({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> banner: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> js: copyRight,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> }),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> ],</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br/></code></div></div>
|
|
25
|
+
<h2 id="配置"><a class="header-anchor" aria-hidden="true" href="#配置">#</a>配置</h2>
|
|
26
|
+
<ul>
|
|
27
|
+
<li>类型:</li>
|
|
28
|
+
</ul>
|
|
29
|
+
<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>type BannerOptions = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> banner: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> js?: string;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> css?: string;</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> footer?: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> js?: string;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> css?: string;</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>
|
|
30
|
+
<h3 id="banner"><a class="header-anchor" aria-hidden="true" href="#banner">#</a>banner</h3>
|
|
31
|
+
<p>在顶部增加内容。</p>
|
|
32
|
+
<ul>
|
|
33
|
+
<li><code>banner.js</code>:在 JS 文件顶部增加内容。</li>
|
|
34
|
+
<li><code>banner.css</code>:在 CSS 文件顶部增加内容。</li>
|
|
35
|
+
</ul>
|
|
36
|
+
<h3 id="footer"><a class="header-anchor" aria-hidden="true" href="#footer">#</a>footer</h3>
|
|
37
|
+
<p>在底部增加内容。</p>
|
|
38
|
+
<ul>
|
|
39
|
+
<li><code>footer.js</code>:在 JS 文件底部增加内容。</li>
|
|
40
|
+
<li><code>footer.css</code>:在 CSS 文件底部增加内容。</li>
|
|
41
|
+
</ul><!--/$--><div><footer m="t-8"><div flex="~ col sm:row" justify="sm:around" gap="2" p="t-6"><div flex="~ col" class="zPHT1"><a class="qVky9 gMyXy" target="" cursor="pointer" href="/module-tools/plugins/official-list/overview.html"><span class="pA5H9">上一页</span><span class="K2e43">总览</span></a></div><div flex="~ col" class="oflez"><a class="qVky9 gMyXy oflez" target="" cursor="pointer" href="/module-tools/plugins/official-list/plugin-import.html"><span class="pA5H9">下一页</span><span class="K2e43">Import 插件</span></a></div></div></footer></div></div></div><div class="xH_Uj" style="min-height:calc(100vh - (var(--modern-nav-height) + 32px))"><div><div flex="~ col"><div class="<lg:hidden"><div p="l-4" text="sm" font-medium="~" id="aside-container" style="border-left:1px solid var(--modern-c-divider-light)" class="relative"><div class="absolute" opacity="0" w="1px" h="18px" bg="brand" style="top:33px;left:-1px;transition:top 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s, opacity 0.25s" id="aside-marker"></div><div block="~" class="leading-7" text="sm" font="semibold">目录</div><nav><ul class="relative"><li><a href="#快速开始" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">快速开始</a></li><li><a href="#安装" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">安装</a></li><li><a href="#注册插件" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">注册插件</a></li><li><a href="#示例" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">示例</a></li><li><a href="#在-js-文件顶部增加版权信息" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">在 JS 文件顶部增加版权信息</a></li><li><a href="#配置" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">配置</a></li><li><a href="#banner" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">banner</a></li><li><a href="#footer" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">footer</a></li></ul></nav></div></div></div></div></div></div></div></section></div></div><div id="search-container"></div></body></html>
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title data-rh="true">Import 插件 - Module Tools</title><meta data-rh="true" name="description" content="模块工程解决方案"/>
|
|
2
|
+
<script id="check-dark-light">
|
|
3
|
+
;(() => {
|
|
4
|
+
const saved = localStorage.getItem('modern-theme-appearance')
|
|
5
|
+
const prefereDark = window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
6
|
+
if (!saved || saved === 'auto' ? prefereDark : saved === 'dark') {
|
|
7
|
+
document.documentElement.classList.add('dark')
|
|
8
|
+
}
|
|
9
|
+
})()
|
|
10
|
+
</script>
|
|
11
|
+
<link rel="icon" href="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/logo-1x-0104.png"><script>!function(){"use strict";var e,n,i,t,o,u={},r={};function a(e){var n=r[e];if(void 0!==n)return n.exports;var i=r[e]={exports:{}};return u[e].call(i.exports,i,i.exports,a),i.exports}a.m=u,e=[],a.O=function(n,i,t,o){if(!i){var u=1/0;for(d=0;d<e.length;d++){i=e[d][0],t=e[d][1],o=e[d][2];for(var r=!0,_=0;_<i.length;_++)(!1&o||u>=o)&&Object.keys(a.O).every((function(e){return a.O[e](i[_])}))?i.splice(_--,1):(r=!1,o<u&&(u=o));if(r){e.splice(d--,1);var c=t();void 0!==c&&(n=c)}}return n}o=o||0;for(var d=e.length;d>0&&e[d-1][2]>o;d--)e[d]=e[d-1];e[d]=[i,t,o]},a.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(n,{a:n}),n},i=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},a.t=function(e,t){if(1&t&&(e=this(e)),8&t)return e;if("object"==typeof e&&e){if(4&t&&e.__esModule)return e;if(16&t&&"function"==typeof e.then)return e}var o=Object.create(null);a.r(o);var u={};n=n||[null,i({}),i([]),i(i)];for(var r=2&t&&e;"object"==typeof r&&!~n.indexOf(r);r=i(r))Object.getOwnPropertyNames(r).forEach((function(n){u[n]=function(){return e[n]}}));return u.default=function(){return e},a.d(o,u),o},a.d=function(e,n){for(var i in n)a.o(n,i)&&!a.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},a.f={},a.e=function(e){return Promise.all(Object.keys(a.f).reduce((function(n,i){return a.f[i](e,n),n}),[]))},a.u=function(e){return"static/js/async/"+({229:"en_guide_intro_getting-started",237:"zh_api_config_build-config",262:"en_plugins_official-list_plugin-banner",315:"en_index",421:"zh_api_config_testing",727:"zh_guide_advance_in-depth-about-build",775:"zh_guide_basic_before-getting-started",1085:"en_api_index",1108:"zh_guide_intro_why-module-engineering-solution",1178:"zh_api_plugin-api_plugin-hooks",1180:"zh_guide_advance_theme-config",1189:"zh_api_index",1677:"en_api_plugin-api_plugin-hooks",1756:"zh_guide_basic_command-preview",1895:"zh_index",2013:"zh_guide_best-practices_components",2020:"zh_guide_basic_publish-your-project",2033:"en_guide_intro_welcome",2034:"zh_guide_intro_welcome",2097:"en_api_config_plugins",2477:"zh_plugins_official-list_plugin-import",2532:"en_guide_basic_use-micro-generator",2540:"zh_guide_advance_in-depth-about-dev-command",2556:"en_api_config_testing",2611:"zh_guide_advance_copy",2633:"zh_guide_intro_getting-started",2678:"en_guide_basic_before-getting-started",2821:"zh_guide_basic_modify-output-product",2892:"zh_plugins_guide_setup-function",3032:"en_guide_basic_publish-your-project",3415:"zh_plugins_official-list_plugin-banner",3741:"en_guide_basic_test-your-project",3806:"zh_api_config_plugins",4260:"en_guide_advance_external-dependency",4390:"zh_plugins_official-list_overview",4663:"en_guide_advance_build-umd",4695:"zh_api_config_design-system",4749:"en_plugins_guide_setup-function",4837:"zh_guide_advance_build-umd",5057:"en_guide_advance_copy",5107:"zh_guide_basic_using-storybook",5284:"zh_plugins_guide_plugin-object",5300:"en_plugins_guide_plugin-object",5532:"zh_guide_advance_external-dependency",5578:"en_guide_basic_modify-output-product",5654:"en_api_config_build-config",5723:"zh_guide_advance_asset",5966:"zh_guide_basic_test-your-project",6098:"en_guide_advance_theme-config",7241:"zh_api_config_build-preset",7294:"zh_guide_basic_use-micro-generator",7401:"en_guide_best-practices_components",7512:"en_guide_intro_why-module-engineering-solution",7571:"en_guide_basic_command-preview",8230:"en_guide_advance_asset",8687:"en_plugins_guide_getting-started",8782:"en_api_config_build-preset",8888:"en_plugins_official-list_plugin-import",8927:"en_guide_advance_in-depth-about-build",9220:"en_api_config_design-system",9479:"en_plugins_official-list_overview",9675:"en_guide_basic_using-storybook",9826:"en_guide_advance_in-depth-about-dev-command",9868:"zh_plugins_guide_getting-started"}[e]||e)+"."+{229:"fdf2a5e3",237:"e0239f0b",262:"c8fc2ef5",315:"9d8e7f26",421:"7af33726",727:"f74fb46b",775:"cb228032",1085:"e8c3584a",1108:"c5feb99d",1114:"d0e9a03f",1178:"54181e2b",1180:"9d46a256",1189:"83d48f6f",1677:"130c0839",1756:"d01b5121",1895:"bdf672c6",2013:"63e6ce1f",2020:"f1222d3a",2033:"e8402d15",2034:"e1854445",2097:"e2525188",2477:"d9e7fb77",2532:"1d9ade59",2540:"390bd229",2556:"bdfe73d2",2611:"0c87a269",2633:"ed054585",2678:"1da2f70c",2821:"511034ae",2892:"d79620be",3032:"6ffa1dcb",3415:"defbf67c",3741:"503389bd",3806:"bb32094e",4260:"21c368af",4390:"bded70c0",4663:"5912e38e",4695:"6f3e0d0a",4749:"bf63c2f5",4837:"cd0724c4",5057:"e73474a0",5107:"e684c97c",5284:"acf4be01",5300:"2799e64d",5532:"38ab900c",5578:"c1634e05",5654:"4b68a964",5723:"0abb6b82",5966:"bb4ee150",6098:"ed245a3c",7241:"af73b578",7294:"fbbfa670",7401:"db985beb",7512:"5b18a76a",7571:"16337618",8230:"29c82557",8687:"5c423f88",8782:"3c87d23b",8888:"dc5a5224",8927:"90beffab",9220:"bae5a6a4",9479:"226be4e5",9675:"2e1cf2bc",9826:"7be33ae4",9868:"d0775941"}[e]+".js"},a.miniCssF=function(e){},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t={},o="@modern-js/module-tools-docs:",a.l=function(e,n,i,u){if(t[e])t[e].push(n);else{var r,_;if(void 0!==i)for(var c=document.getElementsByTagName("script"),d=0;d<c.length;d++){var f=c[d];if(f.getAttribute("src")==e||f.getAttribute("data-webpack")==o+i){r=f;break}}r||(_=!0,(r=document.createElement("script")).charset="utf-8",r.timeout=120,a.nc&&r.setAttribute("nonce",a.nc),r.setAttribute("data-webpack",o+i),r.src=e),t[e]=[n];var s=function(n,i){r.onerror=r.onload=null,clearTimeout(g);var o=t[e];if(delete t[e],r.parentNode&&r.parentNode.removeChild(r),o&&o.forEach((function(e){return e(i)})),n)return n(i)},g=setTimeout(s.bind(null,void 0,{type:"timeout",target:r}),12e4);r.onerror=s.bind(null,r.onerror),r.onload=s.bind(null,r.onload),_&&document.head.appendChild(r)}},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.p="/module-tools/",function(){var e={6272:0};a.f.j=function(n,i){var t=a.o(e,n)?e[n]:void 0;if(0!==t)if(t)i.push(t[2]);else if(6272!=n){var o=new Promise((function(i,o){t=e[n]=[i,o]}));i.push(t[2]=o);var u=a.p+a.u(n),r=new Error;a.l(u,(function(i){if(a.o(e,n)&&(0!==(t=e[n])&&(e[n]=void 0),t)){var o=i&&("load"===i.type?"missing":i.type),u=i&&i.target&&i.target.src;r.message="Loading chunk "+n+" failed.\n("+o+": "+u+")",r.name="ChunkLoadError",r.type=o,r.request=u,t[1](r)}}),"chunk-"+n,n)}else e[n]=0},a.O.j=function(n){return 0===e[n]};var n=function(n,i){var t,o,u=i[0],r=i[1],_=i[2],c=0;if(u.some((function(n){return 0!==e[n]}))){for(t in r)a.o(r,t)&&(a.m[t]=r[t]);if(_)var d=_(a)}for(n&&n(i);c<u.length;c++)o=u[c],a.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return a.O(d)},i=self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[];i.forEach(n.bind(null,0)),i.push=n.bind(null,i.push.bind(i))}()}();</script><script defer="defer" src="/module-tools/static/js/lib-polyfill.0d49b811.js"></script><script defer="defer" src="/module-tools/static/js/lib-lodash.5ea7bf7d.js"></script><script defer="defer" src="/module-tools/static/js/lib-react.209d3da0.js"></script><script defer="defer" src="/module-tools/static/js/lib-router.6f1082f5.js"></script><script defer="defer" src="/module-tools/static/js/9061.555c88e4.js"></script><script defer="defer" src="/module-tools/static/js/main.457dc37f.js"></script><link href="/module-tools/static/css/main.0bdbae52.css" rel="stylesheet"></head><body ><div id="root"><div><header class="top-0 left-0 relative md:fixed w-full" style="z-index:var(--modern-z-index-nav);background:var(--modern-c-bg)"><div class="dHJzp
|
|
12
|
+
csOJo"></div><div class="z0Ov1 modern-doc-nav" p="x-6"><div flex="~" justify="between" align="items-center" h="full" class="bcLAe"><div class="undefined"><a href="/module-tools/" w="full" h="full" text="1rem" font="semibold" transition="opacity duration-300" hover="opacity-60" class="flex items-center"><span>Module Tools</span></a></div><div flex="~ 1" justify="end" align-items-center="~"><div class="LPoOT"><div flex="~ sm:1" items="center" p="sm:l-4 sm:r-2"><div class="B7xTH"><button><svg width="18" height="24" viewBox="0 0 32 32" hight="18"><path fill="var(--modern-c-gray)" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg><p class="JFbLy">Search</p><div><span>⌘</span><span>K</span></div></button></div><div class="cqbI7"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--modern-c-gray)" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg></div></div><div class="menu" h="14"><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/guide/intro/welcome.html">指南</a></div><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/api/index.html">API</a></div><div text="sm" font="medium" m="x-3" class="text-brand-dark"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/plugins/guide/getting-started.html">插件</a></div><div m="x-3" last="mr-0"><div h="14" class="relative" flex="~ center"><button flex="~ center" align="items-center" font="medium" text="sm text-1 hover:text-2" transition="color duration-200" class="nav-menu-group-button"><span m="r-1" text="sm" font="medium">v2.7.0</span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div pos="top-13 right-0" m="x-0.8" transition="opacity duration-300" class="nav-menu-group-content absolute" style="opacity:0;visibility:hidden"><div class="p-3 w-full h-full min-w-128px max-h-100vh rounded-xl whitespace-nowrap bg-white" style="box-shadow:var(--modern-shadow-3);margin-right:-1.5rem;z-index:100;border:1px solid var(--modern-c-divider-light)"><div><div font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">更新日志<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div></div><div><div font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">贡献指南<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div></div></div></div></div></div></div><div class="flex-center flex-row"><div flex="~" text="sm" font="bold" align="items-center" class="translation sjQjZ"><div m="x-1.5"><div h="14" class="relative" flex="~ center"><button flex="~ center" align="items-center" font="medium" text="sm text-1 hover:text-2" transition="color duration-200" class="nav-menu-group-button"><span m="r-1" text="sm" font="medium"><svg width="32" height="32" viewBox="0 0 32 32" w="18px" h="18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6l2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div pos="top-13 right-0" m="x-0.8" transition="opacity duration-300" class="nav-menu-group-content absolute" style="opacity:0;visibility:hidden"><div class="p-3 w-full h-full min-w-128px max-h-100vh rounded-xl whitespace-nowrap bg-white" style="box-shadow:var(--modern-shadow-3);margin-right:-1.5rem;z-index:100;border:1px solid var(--modern-c-divider-light)"><div><div class="rounded-md" p="y-1.6 l-3"><span m="r-1" text="brand">简体中文</span></div></div><div><div font="medium"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/plugins/official-list/plugin-import"><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">English<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div></div></div></div></div></div></div><div class="sjQjZ modern-doc-appearance" align-items-center="center"><button class="xSrUP undefined" id="" type="button" role="switch"><span class="CSfjI"><span class="zDdMk"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="nk0gt"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="A1HSI"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></span></span></button></div><div class="social-links WIILt flex-center" pos="relative"><div h="full" flex="~" gap="x-4" align-items-center="~" transition="color duration-300"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer"><div class="a9VBM"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div><div class="yd31b"><button class=" eE8v3"><span class="pOzTZ"><span class="aD0WQ"></span><span class="GwaZ7"></span><span class="HyMv9"></span></span></button><div class="XAjwG " id="navScreen"><div class="VrSyn"><div class="YCP7r"><div w="full" class="LiNpS"><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/guide/intro/welcome.html">指南</a></div></div><div w="full" class="LiNpS"><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/api/index.html">API</a></div></div><div w="full" class="LiNpS"><div text="sm" font="medium" m="x-3" class="text-brand-dark"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/plugins/guide/getting-started.html">插件</a></div></div><div w="full" class="LiNpS"><div m="x-3" last="mr-0"><div pos="relative" class=" FwXtz"><button class="YoOiJ"><span class="QFqBl">v2.7.0</span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" GPyuP "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="SEGAO"><div><div class="py-1" font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div><div flex="~"><span m="r-1">更新日志</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div><div><div class="py-1" font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div><div flex="~"><span m="r-1">贡献指南</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div></div></div></div></div></div></div><div class="flex-center flex-col"><div class="mt-2 NeDxD" flex="~" justify="center"><button class="xSrUP undefined" id="" type="button" role="switch"><span class="CSfjI"><span class="zDdMk"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="nk0gt"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="A1HSI"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></span></span></button></div><div flex="~" text="sm" font="bold" justify="center"><div m="x-1.5 y-1"><div pos="relative" class=" FwXtz"><button class="YoOiJ"><span class="QFqBl"><svg width="32" height="32" viewBox="0 0 32 32" w="18px" h="18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6l2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" GPyuP "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="SEGAO"><div><div class="p-1"><span m="r-1" text="brand">简体中文</span></div></div><div><div class="py-1" font="medium"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en"><div><div flex="~"><span m="r-1">English</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div></div></div></div></div></div><div class="social-links WIILt flex-center" pos="relative"><div h="full" flex="~" gap="x-4" align-items-center="~" transition="color duration-300"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer"><div class="a9VBM"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div></div><div class="B7xTH"><button><svg width="18" height="24" viewBox="0 0 32 32" hight="18"><path fill="var(--modern-c-gray)" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg><p class="JFbLy">Search</p><div><span>⌘</span><span>K</span></div></button></div><div class="cqbI7"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--modern-c-gray)" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg></div></div></div></div></div></header><section><div p="t-0" m="md:t-14" class="NycN9"><div class="htA00"><button flex="~ center" class="i_YqX"><div text="md" m="r-2"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"></path></svg></div><span text="sm">Menu</span></button></div><aside class="modern-scrollbar WSh16 "><div m="t-1"><nav><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">指南</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/plugins/guide/getting-started.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">快速开始</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/plugins/guide/plugin-object.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">插件对象</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/plugins/guide/setup-function.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Setup 函数</div></a></div></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">插件列表</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/plugins/official-list/overview.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">总览</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/plugins/official-list/plugin-banner.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Banner 插件</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/plugins/official-list/plugin-import.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="DYqu8" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Import 插件</div></a></div></div></div></section></nav></div></aside><div flex="~ shrink-0" class="Attzr"><div w="full"><div class="modern-doc"><!--$--><h1 id="import-插件"><a class="header-anchor" aria-hidden="true" href="#import-插件">#</a>Import 插件</h1>
|
|
13
|
+
<p>使用 <a href="https://swc.rs/" target="_blank" rel="nofollow">SWC</a> 提供了与 <a href="https://github.com/umijs/babel-plugin-import" target="_blank" rel="nofollow">babel-plugin-import</a> 一样的能力和配置。</p>
|
|
14
|
+
<h2 id="快速开始"><a class="header-anchor" aria-hidden="true" href="#快速开始">#</a>快速开始</h2>
|
|
15
|
+
<h3 id="安装"><a class="header-anchor" aria-hidden="true" href="#安装">#</a>安装</h3>
|
|
16
|
+
<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span># npm</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>npm install @modern-js/plugin-module-import -D</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># yarn</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>yarn add @modern-js/plugin-module-import -D</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span># pnpm</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>pnpm add @modern-js/plugin-module-import -D</span></div></div><br/></code></div></div>
|
|
17
|
+
<h3 id="注册插件"><a class="header-anchor" aria-hidden="true" href="#注册插件">#</a>注册插件</h3>
|
|
18
|
+
<p>在 Module Tools 中,你可以按照如下方式注册插件:</p>
|
|
19
|
+
<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>import moduleTools, defineConfig from '@modern-js/module-tools';</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>import moduleImport from '@modern-js/plugin-module-import';</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default defineConfig({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> plugins: [</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> moduleTools(),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> moduleImport({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> pluginImport: [{</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> libraryName: 'antd',</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> style: true,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> }],</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> }),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> ],</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br/></code></div></div>
|
|
20
|
+
<p>这样我们就可以在 Module Tools 中使用自动导入的能力了。</p>
|
|
21
|
+
<h2 id="配置"><a class="header-anchor" aria-hidden="true" href="#配置">#</a>配置</h2>
|
|
22
|
+
<ul>
|
|
23
|
+
<li>类型:</li>
|
|
24
|
+
</ul>
|
|
25
|
+
<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>type Options = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> pluginImport?: ImportItem[];</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><br/></code></div></div>
|
|
26
|
+
<h3 id="pluginimport"><a class="header-anchor" aria-hidden="true" href="#pluginimport">#</a>pluginImport</h3>
|
|
27
|
+
<ul>
|
|
28
|
+
<li>类型:<code>Array</code></li>
|
|
29
|
+
</ul>
|
|
30
|
+
<p>其中数组元素为一个 babel-plugin-import 的配置对象。配置对象可以参考 <a href="https://github.com/umijs/babel-plugin-import#options" target="_blank" rel="nofollow">options</a>。</p>
|
|
31
|
+
<p>使用示例:</p>
|
|
32
|
+
<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>import moduleImport from '@modern-js/plugin-module-import';</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default defineConfig({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> plugins: [</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> moduleImport({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> pluginImport: [</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> // babel-plugin-import 的 options 配置</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> libraryName: 'foo',</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> style: true,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> ],</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> }),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> ],</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br/></code></div></div>
|
|
33
|
+
<h2 id="注意事项"><a class="header-anchor" aria-hidden="true" href="#注意事项">#</a>注意事项</h2>
|
|
34
|
+
<p><a href="https://swc.rs/" target="_blank" rel="nofollow">SWC</a> (Speedy Web Compiler) 是基于 Rust 语言编写的,而该插件是基于 SWC,移植自 <a href="https://github.com/umijs/babel-plugin-import" target="_blank" rel="nofollow">babel-plugin-import</a>,配置选项保持了一致。</p>
|
|
35
|
+
<p>一些配置可以传入函数,例如 <code>customName</code>,<code>customStyleName</code> 等,这些 JavaScript 函数会由 Rust 通过 Node-API 调用,这种调用会造成一些性能劣化。</p>
|
|
36
|
+
<p>简单的函数逻辑其实可以通过模版语言来代替,因此 <code>customName</code>,<code>customStyleName</code> 等这些配置除了可以传入函数,也可以传入字符串作为模版来代替函数,提高性能。</p>
|
|
37
|
+
<section class="ch-spotlight "><div class="ch-spotlight-tabs"><div></div><div class="ch-spotlight-tab"><p>我们以这段代码进行说明。</p></div><div class="ch-spotlight-tab"><p>添加右侧的配置:</p></div><div class="ch-spotlight-tab"><p>其中的 <code>{{ member }}</code> 会被替换为相应的引入成员</p></div><div class="ch-spotlight-tab"><p>转换后:</p></div></div><div class="ch-spotlight-sticker"><div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>import { MyButton as Btn } from 'foo';</span></div></div><br/></code></div></div></div></section>
|
|
38
|
+
<p>可以看出配置 <code>customName: "foo/es/{{ member }}"</code> 的效果等同于配置 <code>customName: (member) => `foo/es/${member}` </code> ,但是不会有 Node-API 的调用开销。</p>
|
|
39
|
+
<p>这里使用到的模版是 <a href="https://handlebarsjs.com" target="_blank" rel="nofollow">handlebars</a>,模版配置中还内置了一些有用的辅助工具,还是以上面的导入语句为例,配置成:</p>
|
|
40
|
+
<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>import moduleImport from '@modern-js/plugin-module-import';</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default defineConfig({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> plugins: [</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> moduleImport({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> pluginImport: [{</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> libraryName: 'foo',</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> customName: 'foo/es/{{ kebabCase member }}',</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> }],</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> }),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> ],</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br/></code></div></div>
|
|
41
|
+
<p>会转换成下面的结果:</p>
|
|
42
|
+
<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>import Btn from 'foo/es/my-button';</span></div></div><br/></code></div></div>
|
|
43
|
+
<p>除了 <code>kebabCase</code> 以外还有 <code>camelCase</code>,<code>snakeCase</code>,<code>upperCase</code>,<code>lowerCase</code> 可以使用。</p><!--/$--><div><footer m="t-8"><div flex="~ col sm:row" justify="sm:around" gap="2" p="t-6"><div flex="~ col" class="zPHT1"><a class="qVky9 gMyXy" target="" cursor="pointer" href="/module-tools/plugins/official-list/plugin-banner.html"><span class="pA5H9">上一页</span><span class="K2e43">Banner 插件</span></a></div><div flex="~ col" class="oflez"></div></div></footer></div></div></div><div class="xH_Uj" style="min-height:calc(100vh - (var(--modern-nav-height) + 32px))"><div><div flex="~ col"><div class="<lg:hidden"><div p="l-4" text="sm" font-medium="~" id="aside-container" style="border-left:1px solid var(--modern-c-divider-light)" class="relative"><div class="absolute" opacity="0" w="1px" h="18px" bg="brand" style="top:33px;left:-1px;transition:top 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s, opacity 0.25s" id="aside-marker"></div><div block="~" class="leading-7" text="sm" font="semibold">目录</div><nav><ul class="relative"><li><a href="#快速开始" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">快速开始</a></li><li><a href="#安装" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">安装</a></li><li><a href="#注册插件" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">注册插件</a></li><li><a href="#配置" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">配置</a></li><li><a href="#pluginimport" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">pluginImport</a></li><li><a href="#注意事项" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">注意事项</a></li></ul></nav></div></div></div></div></div></div></div></section></div></div><div id="search-container"></div></body></html>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.ch-terminal{background:#1e1e1e;box-sizing:border-box;color:#fafafa;font-family:Ubuntu,Droid Sans,-apple-system,BlinkMacSystemFont,Segoe WPC,Segoe UI,sans-serif;font-size:14px;height:100%;overflow:hidden;padding:0 8px 8px}.ch-terminal-container .ch-frame-content{background-color:inherit}.ch-terminal-prompt{color:#8fa2db;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ch-terminal-content{margin:0}.ch-terminal-output{opacity:.66}.ch-code-line-number{box-sizing:border-box;display:inline-block;font-variant-numeric:tabular-nums;padding-right:1.5ch;text-align:right;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ch-code-scroll-parent{background-color:unset;border:none;border-radius:0;box-sizing:content-box;color:unset;display:block;font-size:14px;font-weight:400;letter-spacing:0;line-height:19px;padding:0}.ch-code-scroll-parent ::-moz-selection{background-color:var(--ch-selection-background);color:inherit}.ch-code-scroll-parent ::selection{background-color:var(--ch-selection-background);color:inherit}.ch-code-button{cursor:pointer;height:1.1em;position:absolute;right:10px;top:10px;width:1.1em}.ch-no-scroll{overflow:hidden}.ch-expand-dialog{background-color:transparent;border:0;height:100vh;max-width:900px;width:100vw}.ch-expand-dialog::-webkit-backdrop{background-color:rgba(0,0,0,.8)}.ch-expand-dialog::backdrop{background-color:rgba(0,0,0,.8)}.ch-expand-close{color:#fff;cursor:pointer;height:26px;position:absolute;right:10px;top:10px;width:26px}.ch-expand-dialog-content{border:1px solid;border-radius:8px;color:#fff;inset:40px;overflow:hidden;position:absolute}.ch-code-browser{display:flex;font-family:Ubuntu,Droid Sans,-apple-system,BlinkMacSystemFont,Segoe WPC,Segoe UI,sans-serif;height:100%}.ch-code-browser-sidebar{border-right:1px solid;font-size:.95rem;min-width:100px;padding:1em 0}.ch-code-browser-content{flex:1 1;font-family:monospace;font-size:1rem;font-weight:400;letter-spacing:0;line-height:1.2rem;overflow:auto;padding:1em;position:relative;white-space:pre}.ch-code-browser-content ::-moz-selection{background-color:var(--ch-selection-background);color:inherit}.ch-code-browser-content ::selection{background-color:var(--ch-selection-background);color:inherit}.ch-code-browser-sidebar-file,.ch-code-browser-sidebar-folder{padding:.1em 1em}.ch-code-browser-sidebar-file{cursor:pointer}.ch-code-browser-sidebar-file:hover{background-color:var(--ch-hover-background);color:var(--ch-hover-foreground)}.ch-code-browser-button{cursor:pointer;height:1.5em;min-height:1.5em;min-width:1.5em;position:absolute;right:.8em;top:.8em;width:1.5em}.ch-editor-tab{background-color:#2d2d2d;border-bottom:1px solid;border-right:1px solid #252526;box-sizing:border-box;color:hsla(0,0%,100%,.5);cursor:pointer;display:flex;flex-shrink:1;height:100%;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;min-width:0;padding-left:15px;padding-right:15px;position:relative;white-space:nowrap}.ch-editor-tab-active{background-color:#1e1e1e;color:#fff;min-width:unset}.ch-editor-tab>div{font-size:12px;line-height:1.4em;margin-bottom:auto;margin-top:auto;overflow:hidden;text-overflow:ellipsis}.ch-editor-frame{--ch-title-bar-height:30px;break-inside:avoid;display:flex;flex-direction:column;font-family:Ubuntu,Droid Sans,-apple-system,BlinkMacSystemFont,Segoe WPC,Segoe UI,sans-serif;height:100%;overflow:hidden;page-break-inside:avoid;position:relative}.ch-editor-frame .ch-frame-title-bar{background:none}.ch-editor-terminal{background-color:#1e1e1e;border-top:1px solid hsla(0,0%,50%,.35);bottom:0;box-sizing:border-box;color:#e7e7e7;overflow:hidden;padding:0 8px;position:absolute;width:100%}.ch-editor-terminal-tab{display:flex;font-size:11px;line-height:24px;padding:4px 10px 3px;text-transform:uppercase}.ch-editor-terminal-tab>span{border-bottom:1px solid #e7e7e7}.ch-editor-terminal-content{box-sizing:border-box;height:calc(100% - 40px);margin-top:8px}.ch-editor-terminal-content .ch-terminal{font-size:12px;margin:0}.ch-editor-button{cursor:pointer;height:1.5em;margin-right:.8em;min-height:1.5em;min-width:1.5em;width:1.5em}.ch-frame{display:flex;flex-direction:column;height:100%}.ch-frame,.ch-simple-frame{--ch-title-bar-height:30px;break-inside:avoid;font-family:Ubuntu,Droid Sans,-apple-system,BlinkMacSystemFont,Segoe WPC,Segoe UI,sans-serif;page-break-inside:avoid}.ch-simple-frame{border-radius:6px;box-shadow:0 13px 27px -5px rgba(50,50,93,.25),0 8px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025);overflow:hidden}.ch-frame-content{background-color:var(--ch-content-background,#fafafa);flex-basis:0;flex-grow:1;flex-shrink:1;min-height:0}.ch-frame-zoom{--ch-frame-zoom:1;height:calc(100%/var(--ch-frame-zoom));overflow:auto;position:relative;transform:scale(var(--ch-frame-zoom));transform-origin:left top;width:calc(100%/var(--ch-frame-zoom))}.ch-frame-title-bar{align-items:center;background-color:var(--ch-content-background,#252526);color:#ebebed;display:flex;flex-grow:0;flex-shrink:0;font-size:12px;height:var(--ch-title-bar-height);min-height:var(--ch-title-bar-height);position:relative;width:100%}.ch-frame-middle-bar{font-size:1.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ch-frame-left-bar,.ch-frame-right-bar{align-items:center;display:flex;flex-basis:1em;flex-grow:1;height:100%;width:-webkit-max-content;width:-moz-max-content;width:max-content}.ch-frame-buttons{display:flex;flex-shrink:0;height:1em;margin:0 .8em;width:4.16em}.ch-frame-button{border:.08em solid;border-radius:50%;box-sizing:border-box;display:inline-block;height:1em;width:1em}.ch-frame-button-space{width:.56em}.ch-frame-button-left{background-color:#ed6b60;border-color:#ce5347}.ch-frame-button-middle{background-color:#f5be4f;border-color:#d6a243}.ch-frame-button-right{background-color:#62c554;border-color:#58a942}.ch-mini-browser{height:100%}.ch-mini-browser .ch-frame-content iframe,.ch-mini-browser .ch-frame-content video{border:none;height:100%;position:absolute;width:100%}.ch-mini-browser .ch-frame-title-bar input{border:none;border-radius:.5em;box-shadow:none;color:#544;flex:1 1;font-size:1em;height:1.4em;min-width:5px;padding:0 10px;width:5px}.ch-browser-button{color:#999;margin:0 1em}.ch-browser-back-button{margin-left:.2em}.ch-browser-forward-button{margin-left:0}.ch-browser-open-button{color:inherit}.ch-browser-open-icon{display:block}.ch-spotlight{display:flex;gap:1.1rem;margin:1rem 0}.ch-spotlight-tabs{align-items:stretch;display:flex;flex:1 1;flex-flow:column;gap:.5rem}.ch-spotlight-tab{border:1px solid #e3e3e3;border-radius:.25rem;margin:0 -.5rem;padding:0 .5rem}.ch-spotlight-tab:hover{border-color:#222}.ch-spotlight-tab[data-selected]{border-color:#0070f3}.ch-spotlight-sticker{align-self:stretch;display:flex;flex-flow:column;justify-content:center;max-height:80vh;min-height:min(100%,80vh);position:-webkit-sticky;position:sticky;top:10vh;width:420px}.ch-spotlight-sticker .ch-codeblock,.ch-spotlight-sticker .ch-codegroup{flex:1 1;margin-bottom:0;margin-top:0;max-height:80vh;min-height:min(100%,80vh);min-width:100%;width:100%}.ch-spotlight-with-preview .ch-spotlight-sticker{gap:.5rem;height:80vh}.ch-spotlight-with-preview .ch-spotlight-sticker .ch-codeblock,.ch-spotlight-with-preview .ch-spotlight-sticker .ch-codegroup{flex:1 1;min-height:0}.ch-spotlight-with-preview .ch-spotlight-preview{height:280px}.ch-scrollycoding{display:flex;gap:1rem;margin:1rem 0;position:relative}.ch-scrollycoding-content{box-sizing:border-box;flex:1 1}.ch-scrollycoding-step-content{border:1.5px solid transparent;border-radius:8px;margin:0 -.5rem;min-height:180px;padding:1rem .5rem}.ch-scrollycoding-step-content[data-selected]{border-color:#0070f3}.ch-scrollycoding-step-content>:first-child{margin-top:0}.ch-scrollycoding-step-content>:last-child{margin-bottom:0}.ch-scrollycoding-sticker{align-self:start;display:flex;flex-flow:column;justify-content:center;max-height:80vh;position:-webkit-sticky;position:sticky;top:10vh;width:var(--ch-scrollycoding-sticker-width,420px)}.ch-scrollycoding-with-preview .ch-scrollycoding-sticker{gap:.5rem;height:80vh}.ch-scrollycoding-with-preview .ch-scrollycoding-sticker .ch-codeblock,.ch-scrollycoding-with-preview .ch-scrollycoding-sticker .ch-codegroup{flex:1 1}.ch-scrollycoding-with-preview .ch-scrollycoding-preview{height:280px}.ch-scrollycoding-sticker .ch-codeblock,.ch-scrollycoding-sticker .ch-codegroup{margin-bottom:0;margin-top:0;max-height:80vh;min-height:var(--ch-scrollycoding-code-min-height,200px);min-width:100%;width:100%}.ch-scrollycoding-static .ch-preview{height:150px}.ch-slideshow{margin:1rem 0}.ch-slideshow-slide{align-items:stretch;aspect-ratio:16/9;display:flex;flex-flow:row;gap:.5rem}.ch-slideshow-slide .ch-codeblock,.ch-slideshow-slide .ch-codegroup{flex:2 1;height:auto;margin-bottom:0;margin-top:0}.ch-slideshow .ch-slideshow-preview{flex:1 1;height:auto;min-width:0}.ch-slideshow-range{display:flex;flex-flow:row;gap:.5rem}.ch-slideshow-range input{flex:1 1}.ch-slideshow-notes{border:1px solid #e3e3e3;border-radius:.25rem;margin-top:1rem;padding:1rem}.ch-slideshow-note{max-height:140px;min-height:140px;overflow:auto;padding:.05px}.ch-codeblock,.ch-codegroup,.ch-preview{color-adjust:exact;border-radius:6px;box-shadow:0 13px 27px -5px rgba(50,50,93,.25),0 8px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025);height:-webkit-max-content;height:-moz-max-content;height:max-content;overflow:hidden;-webkit-print-color-adjust:exact;print-color-adjust:exact}.ch-codeblock>*,.ch-codegroup>*,.ch-preview>*{height:100%;max-height:inherit;min-height:inherit}.ch-codeblock,.ch-codegroup{margin-bottom:1.25em;margin-top:1.25em}.ch-inline-code>code{border-radius:.25em;font-size:.9rem;margin:.1em -.05em;padding:.2em .15em}.ch-section-link,.ch-section-link *{text-decoration:underline;-webkit-text-decoration-color:var(--ch-code-foreground,currentColor);text-decoration-color:var(--ch-code-foreground,currentColor);-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-decoration-thickness:1px}.ch-section-link[data-active=true]{background-color:rgba(186,230,253,.4)}.ch-section-link[data-active=true],.ch-section-link[data-active=true] *{text-decoration-thickness:1.5px}.ch-code-inline-mark{border-radius:.25rem;margin:0 -.15rem;padding:.2rem .15rem .1rem}.ch-code-multiline-mark-border{height:100%;left:0;position:absolute;width:3px}.ch-code-inline-link,.ch-code-link :not(span)>span{color:inherit;text-decoration:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted}.ch-scrollycoding .header-anchor,.ch-spotlight .header-anchor{display:none}.bcLAe{margin:auto;max-width:1440px}.LPoOT{display:none}.z0Ov1 :deep(*){pointer-events:all}.LLBTC{fill:currentColor;color:var(--modern-c-text-2);display:flex;height:100%;width:20px}.LLBTC:hover{color:var(--modern-c-text-1)}.sjQjZ{display:none}.sjQjZ:before{background-color:var(--modern-c-divider-light);content:" ";height:24px;margin-left:12px;margin-right:12px;width:1px}@media(max-width:768px){.sjQjZ:before{display:none}.yd31b{display:flex}}@media(min-width:768px){.LPoOT,.sjQjZ{display:flex}.LPoOT{align-items:center}.yd31b{display:none}}@media(min-width:960px){.dHJzp{bottom:-30px;height:30px;position:absolute;right:0;width:100vw}.dHJzp.csOJo{width:calc(100vw - var(--modern-sidebar-width) - 48px)}.dHJzp:before{background:linear-gradient(var(--modern-c-bg),transparent 60%);content:"";display:block;height:30px;width:100%}}.qVky9:hover{color:var(--modern-c-brand);transition:color .2s}.qVky9{display:block;font-size:14px;font-weight:500}.nk0gt{opacity:1}.A1HSI,.dark .nk0gt{opacity:0}.dark .A1HSI{opacity:1}.xSrUP{background-color:var(--modern-c-bg-mute);border:1px solid var(--modern-c-divider);border-radius:11px;display:block;flex-shrink:0;height:22px;position:relative;transition:border-color .25s,background-color .25s;width:40px}.xSrUP:hover{border-color:var(--modern-c-gray)}.CSfjI{background-color:var(--modern-c-white);border-radius:50%;box-shadow:var(--modern-shadow-1);height:18px;left:1px;position:absolute;top:1px;transition:background-color .25s,transform .25s;width:18px}.dark .CSfjI{background-color:var(--modern-c-black);transform:translateX(18px)}.zDdMk{border-radius:50%;display:block;height:18px;overflow:hidden;position:relative;width:18px}.zDdMk svg{fill:var(--modern-c-text-2);height:12px;left:3px;position:absolute;top:3px;width:12px}.QkXR4 .zDdMk svg{fill:var(--modern-c-text-1);transition:opacity .25s}.a9VBM{fill:currentColor;color:var(--modern-c-text-2);display:flex;height:100%;width:20px}.a9VBM:hover{color:var(--modern-c-text-1)}.WIILt:before{background-color:var(--modern-c-divider-light);content:" ";height:24px;margin-left:12px;margin-right:12px;width:1px}@media(max-width:768px){.WIILt:before{display:none}}.eE8v3{align-items:center;display:flex;height:56px;justify-content:center;width:48px}@media(min-width:768px){.eE8v3{display:none}}.pOzTZ{height:14px;overflow:hidden;position:relative;width:16px}.eE8v3:hover .aD0WQ{left:0;top:0;transform:translateX(4px)}.eE8v3:hover .GwaZ7{left:0;top:6px;transform:translateX(0)}.eE8v3:hover .HyMv9{left:0;top:12px;transform:translateX(8px)}.eE8v3.jC2sB .aD0WQ{top:6px;transform:translateX(0) rotate(225deg)}.eE8v3.jC2sB .GwaZ7{top:6px;transform:translateX(16px)}.eE8v3.jC2sB .HyMv9{top:6px;transform:translateX(0) rotate(135deg)}.eE8v3.jC2sB:hover .GwaZ7,.eE8v3.jC2sB:hover .HyMv9,.eE8v3.jC2sB:hover .aD0WQ{transition:top .25s,background-color .25s,transform .25s}.GwaZ7,.HyMv9,.aD0WQ{background-color:var(--modern-c-text-2);height:1.5px;position:absolute;transition:top .25s,background-color .5s,transform .25s;width:16px}.aD0WQ{left:0;top:0;transform:translateX(0)}.GwaZ7{left:0;top:6px;transform:translateX(8px)}.HyMv9{left:0;top:12px;transform:translateX(4px)}.XAjwG{background-color:var(--modern-c-bg);bottom:0;display:none;left:0;overflow-y:auto;padding:0 32px;pointer-events:auto;position:fixed;right:0;top:var(--modern-nav-height);width:100%;z-index:20}.dKztc{display:block}.VrSyn{margin:0 auto;max-width:248px;padding:24px 0 96px}.YCP7r{align-items:center;flex-direction:column}.LiNpS,.YCP7r{display:flex;justify-content:center}.LiNpS{border-bottom:1px solid var(--modern-c-divider-light);color:var(--modern-c-text-1);font-size:14px;font-weight:500;line-height:24px;padding:12px 0 11px;transition:border-color .5s,color .25s}.NeDxD{padding-right:0}.afhvm{padding:8px 0 7px}.FwXtz{height:39px;overflow:hidden;transition:border-color .5s}.FwXtz.UZg3B{height:auto;padding-bottom:10px}.YoOiJ{color:var(--modern-c-text-1);font-size:14px;font-weight:500;justify-content:center;line-height:24px;padding:8px 4px 7px 0;transition:color .25s;width:100%}.QFqBl,.YoOiJ{align-items:center;display:flex}.QFqBl{height:24px;padding-right:4px}.FwXtz .SEGAO{visibility:hidden}.FwXtz.UZg3B .SEGAO{visibility:visible}.GPyuP{transition:all .5s}.UZg3B.GPyuP{transform:rotate(180deg)}.EYta0{background:rgba(84,84,84,.702);bottom:0;left:0;position:fixed;right:0;top:0;z-index:100}.oezc2{background-color:var(--modern-c-bg-alt);border-radius:6px;height:auto;margin:80px auto auto;max-width:560px;padding:12px;padding-bottom:20px;position:relative}.HLuHQ{align-items:center;background-color:var(--modern-c-bg);border:1px solid var(--modern-c-brand);border-radius:4px;display:flex;height:55px;padding:0 12px;width:100%}.HLuHQ .vyAI5{flex:1 1;font-size:20px;font-weight:500;height:100%;outline:none;padding-left:8px;width:80%}.dark .HLuHQ .vyAI5{color:var(--modern-c-text)}.QlJZb:hover{color:var(--modern-c-brand);cursor:pointer;transition:color .3s}.P4P7P{max-height:calc(100vh - 230px);overflow:scroll;padding-right:2px}.P4P7P .fOKRX{color:var(--modern-c-brand-dark);font-size:13px;font-weight:600;left:0;margin:0;padding-bottom:6px;padding-left:2px;padding-top:6px;position:-webkit-sticky;position:sticky;top:0}.B7xTH,.P4P7P .fOKRX{background-color:var(--modern-c-bg-alt)}.B7xTH{border:1px solid transparent;border-radius:8px;display:flex;height:40px;padding:0 10px;transition:border-color .3s;width:100%}.B7xTH>button{align-items:center;cursor:pointer;display:flex;font-size:13px;justify-content:space-around}.B7xTH>button .JFbLy{color:var(--modern-c-text-2);font-weight:500;margin-left:5px;margin-right:40px;transition:all .3s}.B7xTH>button>div{border-radius:4px;color:var(--modern-c-gray);font-weight:500}.B7xTH>button>div>span{margin-left:5px}.B7xTH>button>div>span+span{margin-right:5px}.B7xTH:hover{border:1px solid var(--modern-c-brand)}.B7xTH:hover>button .JFbLy{color:var(--modern-c-text-1)}.BjaHS{box-shadow:0 1px 3px 0 #d4d9e1;box-sizing:border-box;list-style:none;margin:5px 2px}.BjaHS>a{background-color:var(--modern-c-white);border-radius:4px;color:var(--modern-c-black-soft);display:flex;padding-left:12px;width:100%}.BjaHS>a .P3cjR{align-items:center;display:flex;font-weight:500;min-height:56px;padding-right:12px;width:100%}.BjaHS>a .P3cjR .gCuYo{font-size:14px;line-height:1.5;padding:6px 8px 6px;width:100%}.BjaHS>a .P3cjR .gCuYo .HTpBZ{color:var(--modern-c-brand)}.BjaHS>a .P3cjR .gCuYo .Olght{font-size:12px;font-weight:600}.BjaHS>a .P3cjR .gCuYo .Olght,.BjaHS>a .P3cjR svg{color:var(--modern-c-gray-light-1)}.BjaHS>a .P3cjR .rGP9R{opacity:0}.BjaHS.EE0Uj>a,.BjaHS:hover>a{background-color:var(--modern-c-brand);color:var(--modern-c-white);cursor:pointer}.BjaHS.EE0Uj .P3cjR svg,.BjaHS:hover .P3cjR svg{color:var(--modern-c-white)}.BjaHS.EE0Uj .P3cjR .rGP9R,.BjaHS:hover .P3cjR .rGP9R{opacity:1}.BjaHS.EE0Uj .P3cjR .gCuYo .HTpBZ,.BjaHS:hover .P3cjR .gCuYo .HTpBZ{color:var(--modern-c-white);text-decoration:underline}.BjaHS.EE0Uj .P3cjR .gCuYo .Olght,.BjaHS:hover .P3cjR .gCuYo .Olght{color:var(--modern-c-white)}.ugebZ{background-color:var(--modern-c-bg-alt);padding-bottom:6px;position:-webkit-sticky;position:sticky;top:36px}.cqbI7{align-items:center;cursor:pointer;display:none;font-weight:500;justify-content:center}@media(max-width:768px){.B7xTH{display:none}.cqbI7{display:flex}.oezc2{margin-top:0}.HLuHQ{height:40px}.HLuHQ svg{height:16px;width:16px}.HLuHQ .vyAI5{font-size:16px}}.BKnKN{border-bottom:2px solid transparent;box-sizing:border-box;color:var(--modern-c-text-2);margin-bottom:-1px;margin-right:10px;padding:4px;transition:colors .2s;transition:all .25s ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.BKnKN:last-child{margin-right:0}.Xd0ob:hover{border-color:var(--modern-c-gray-light-2);border-radius:2px;color:var(--modern-c-text-1)}.sR6MT{border-color:var(--modern-c-brand-dark);color:var(--modern-c-brand-dark)}*,:after,:before{border-color:#e5e7eb;border-style:solid;border-width:0}*{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;tab-size:4}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::moz-focus-inner{border-style:none;padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}body{line-height:inherit}body,button,input{font-family:inherit}button,input{color:inherit;font-size:100%;line-height:1.15;line-height:inherit;margin:0;padding:0}button{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}h1,h2,h3,p{margin:0}h1,h2,h3{font-size:inherit;font-weight:inherit}img{border-style:solid;height:auto;max-width:100%}input::placeholder{color:#9ca3af;opacity:1}input::webkit-input-placeholder{color:#9ca3af;opacity:1}input::-moz-placeholder{color:#9ca3af;opacity:1}input:-ms-input-placeholder{color:#9ca3af;opacity:1}input::-ms-input-placeholder{color:#9ca3af;opacity:1}img,svg{display:block;vertical-align:middle}ul{list-style:none;margin:0;padding:0}.flex-center,[flex~=center]{align-items:center;display:flex;justify-content:center}.menu{align-items:center;display:flex;font-size:.875rem;font-weight:700;justify-content:space-around;line-height:1.25rem}@media (min-width:768px){.md\:flex-center{align-items:center;display:flex;justify-content:center}}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bg-mute{background-color:var(--modern-c-bg-mute)}.bg-white{background-color:var(--modern-c-bg)}[hover~=bg-mute]:hover{background-color:var(--modern-c-bg-mute)}[bg~=brand]{background-color:var(--modern-c-brand)}[bg~=white]{background-color:var(--modern-c-bg)}[bg~=gray-light-1]{background-color:var(--modern-c-gray-light-1)}.border-transparent{border-color:transparent}.border-gray-200{--tw-border-opacity:1;border-color:rgba(229,231,235,var(--tw-border-opacity))}.dark .dark\:border-dark-200{--tw-border-opacity:1;border-color:rgba(50,50,50,var(--tw-border-opacity))}[border~=divider-light]{border-color:var(--modern-c-divider-light)}[border~=brand]{border-color:var(--modern-c-brand)}.border-color-brand-dark,[hover~=border-color-brand-dark]:hover{border-*-color:var(--modern-c-brand-dark)}.rounded{border-radius:.25rem}.rounded-4xl{border-radius:2rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}[border~=rounded-md]{border-radius:.375rem}[border~=rounded-xl]{border-radius:.75rem}[border~=solid]{border-style:solid}[border~="1px"]{border-width:1px}.border-b{border-bottom-width:1px}[border~=t-1]{border-top-width:1px}[border~=b-0]{border-bottom-width:0}.cursor-pointer,[cursor~=pointer]{cursor:pointer}[block~="~"]{display:block}.inline-block{display:inline-block}.flex,[flex~="~"]{display:flex}.hidden{display:none}.flex-row{flex-direction:row}.flex-col,[flex~=col]{flex-direction:column}.flex-wrap,[flex~=wrap]{flex-wrap:wrap}.items-center,[align~=items-center],[items~=center]{align-items:center}[justify~=end]{justify-content:flex-end}.justify-center,[justify~=center]{justify-content:center}.justify-between,[justify~=between]{justify-content:space-between}[flex~="1"]{flex:1 1}.flex-shrink-0,[flex~=shrink-0]{flex-shrink:0}.order-2{order:2}.order-1{order:1}.font-bold{font-weight:700}.font-medium{font-weight:500}[font~=semibold]{font-weight:600}[font~=medium]{font-weight:500}[font~=bold]{font-weight:700}.h-full{height:100%}.h-12{height:3rem}.h-8{height:2rem}[h~="14"]{height:3.5rem}[h~=full]{height:100%}[h~="18px"]{height:18px}[h~="11px"]{height:11px}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-sm,[text~=sm]{font-size:.875rem;line-height:1.25rem}[text~="6xl"]{font-size:3.75rem;line-height:1}[text~=xl]{font-size:1.25rem;line-height:1.75rem}[text~="1rem"]{font-size:1rem;line-height:1}.leading-7{line-height:1.75rem}.leading-6{line-height:1.5rem}.leading-tight{line-height:1.25}.leading-5{line-height:1.25rem}[list~=none]{list-style-type:none}.m-auto{margin:auto}.m--1\.5{margin:.375rem}[m~=auto]{margin:auto}.mx-auto{margin-left:auto;margin-right:auto}.my-1{margin-bottom:.25rem;margin-top:.25rem}[m~="x-0.8"]{margin-left:.2rem;margin-right:.2rem}[m~=x-3]{margin-left:.75rem;margin-right:.75rem}[m~="x-1.5"]{margin-left:.375rem;margin-right:.375rem}[m~=y-1]{margin-bottom:.25rem;margin-top:.25rem}[m~=x-auto]{margin-left:auto;margin-right:auto}.mr-0{margin-right:0}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.ml-2{margin-left:.5rem}.mt-1{margin-top:.25rem}.ml-1{margin-left:.25rem}.mt-14{margin-top:3.5rem}[m~=t-8]{margin-top:2rem}[m~=t-12]{margin-top:3rem}[m~=r-2]{margin-right:.5rem}[m~=r-1]{margin-right:.25rem}[m~=t-1]{margin-top:.25rem}[m~=l-1]{margin-left:.25rem}[m~=r-4]{margin-right:1rem}[m~=b-16]{margin-bottom:4rem}[m~="first:t-2"]:first-child{margin-top:.5rem}[m~=l-4]{margin-left:1rem}[m~=t-50]{margin-top:12.5rem}[m~=t-6]{margin-top:1.5rem}[m~="b-4.5"]{margin-bottom:1.125rem}[last~=mr-0]:last-child{margin-right:0}.max-h-100vh{max-height:100vh}.max-w-1152px{max-width:1152px}.max-w-592px{max-width:592px}.max-w-392px{max-width:392px}.min-w-full{min-width:100%}.min-w-128px{min-width:128px}.opacity-60,[hover~=opacity-60]:hover{opacity:.6}[opacity~="0"]{opacity:0}.outline{outline-style:solid}.overflow-hidden{overflow:hidden}.p-2{padding:.5rem}.p-8{padding:2rem}.p-1{padding:.25rem}.p-3{padding:.75rem}[p~="2"]{padding:.5rem}[p~=h-8]{padding:2rem}[p~="3"]{padding:.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}[p~=y-8]{padding-bottom:2rem;padding-top:2rem}[p~=x-6]{padding-left:1.5rem;padding-right:1.5rem}[p~="y-1.6"]{padding-bottom:.4rem;padding-top:.4rem}[p~=x-8]{padding-left:2rem;padding-right:2rem}[p~="y-1.5"]{padding-bottom:.375rem;padding-top:.375rem}[p~=x-2]{padding-left:.5rem;padding-right:.5rem}[p~=y-1]{padding-bottom:.25rem;padding-top:.25rem}[p~=y-2]{padding-bottom:.5rem;padding-top:.5rem}[p~=x-4]{padding-left:1rem;padding-right:1rem}.pt-2{padding-top:.5rem}.pt-0{padding-top:0}.pb-12{padding-bottom:3rem}.pb-2{padding-bottom:.5rem}.pt-4{padding-top:1rem}.pt-8{padding-top:2rem}[p~=l-4]{padding-left:1rem}[p~=t-6]{padding-top:1.5rem}[p~=l-3]{padding-left:.75rem}[p~=r-6]{padding-right:1.5rem}[p~=t-0]{padding-top:0}[p~=t-16]{padding-top:4rem}[p~=b-24]{padding-bottom:6rem}[p~=b-40]{padding-bottom:10rem}[p~=t-3]{padding-top:.75rem}[p~=t-5]{padding-top:1.25rem}.absolute,[pos~=absolute]{position:absolute}.relative,[pos~=relative]{position:relative}.bottom-0{bottom:0}.top-13{top:3.25rem}.right-0{right:0}.top-0{top:0}.left-0{left:0}[pos~=top-13]{top:3.25rem}[pos~=right-0]{right:0}.text-center,[text~=center]{text-align:center}.text-text-1{color:var(--modern-c-text-1)}.text-text-2{color:var(--modern-c-text-2)}.text-gray-400{--tw-text-opacity:1;color:rgba(156,163,175,var(--tw-text-opacity))}.text-brand-dark{color:var(--modern-c-brand-dark)}.text-brand{color:var(--modern-c-brand)}[text~=text-2]{color:var(--modern-c-text-2)}[text~=brand]{color:var(--modern-c-brand)}[text~=text-3]{color:var(--modern-c-text-3)}[hover~=text-text-1]:hover{color:var(--modern-c-text-1)}.align-text-top{vertical-align:text-top}.visible{visibility:visible}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-all{word-break:break-all}.w-full{width:100%}.w-12{width:3rem}.w-24{width:6rem}[w~=full]{width:100%}[w~="32"]{width:8rem}[w~="16"]{width:4rem}.w-max{width:-webkit-max-content;width:-moz-max-content;width:max-content}[w~="1px"]{width:1px}[w~="11px"]{width:11px}[w~="18px"]{width:18px}[w~="50"]{width:12.5rem}.z-10{z-index:10}[z~="1"]{z-index:1}.gap-3{grid-gap:.75rem;gap:.75rem}[gap~="2"]{grid-gap:.5rem;gap:.5rem}[gap~="4"]{grid-gap:1rem;gap:1rem}[gap~=x-4]{grid-column-gap:1rem;-webkit-column-gap:1rem;-moz-column-gap:1rem;column-gap:1rem}.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate:0;--tw-rotate-x:0;--tw-rotate-y:0;--tw-rotate-z:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotate(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z))}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity,[transition~=opacity]{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.duration-200{transition-duration:.2s}.duration-500{transition-duration:.5s}[transition~=duration-300]{transition-duration:.3s}@media (min-width:640px){.sm\:flex{display:flex}.sm\:hidden{display:none}[flex~="sm:row"]{flex-direction:row}[justify~="sm:around"]{justify-content:space-around}[flex~="sm:1"]{flex:1 1}.sm\:text-6xl{font-size:3.75rem;line-height:1}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:m-4{margin:1rem}.sm\:max-h-60{max-height:15rem}.sm\:max-w-60{max-width:15rem}.sm\:max-w-768px{max-width:768px}.sm\:max-w-576px{max-width:576px}[p~="sm:8"]{padding:2rem}.sm\:px-16{padding-left:4rem;padding-right:4rem}.sm\:pt-10{padding-top:2.5rem}[p~="sm:l-4"]{padding-left:1rem}[p~="sm:r-2"]{padding-right:.5rem}[p~="sm:t-24"]{padding-top:6rem}}@media (min-width:768px){.md\:flex-row{flex-direction:row}.md\:order-1{order:1}.md\:order-2{order:2}.md\:text-7xl{font-size:4.5rem;line-height:1}.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:m-0{margin:0}[m~="md:t-14"]{margin-top:3.5rem}.md\:px-16{padding-left:4rem;padding-right:4rem}.md\:pt-20{padding-top:5rem}.md\:pb-16{padding-bottom:4rem}.md\:pb-3{padding-bottom:.75rem}.md\:fixed{position:fixed}}@media (min-width:1024px){.lg\:flex{display:flex}.lg\:pb-5{padding-bottom:1.25rem}}@media (max-width:1023.9px){.\<lg\:hidden{display:none}}#nprogress{pointer-events:none}#nprogress .bar{background:#29d;z-index:1031}#nprogress .peg{box-shadow:0 0 10px #29d,0 0 5px #29d;display:block;height:100%;opacity:1;position:absolute;right:0;transform:rotate(3deg) translateY(-4px);width:100px}#nprogress .spinner{display:block;position:fixed;right:15px;top:15px;z-index:1031}#nprogress .spinner-icon{animation:nprogress-spinner .4s linear infinite;border:2px solid transparent;border-left-color:#29d;border-radius:50%;border-top-color:#29d;box-sizing:border-box;height:18px;width:18px}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}:root{--modern-c-white:#fff;--modern-c-white-soft:#f9f9f9;--modern-c-white-mute:#f1f1f1;--modern-c-black:#1a1a1a;--modern-c-black-pure:#000;--modern-c-black-soft:#242424;--modern-c-black-mute:#2f2f2f;--modern-c-gray:#8e8e8e;--modern-c-gray-light-1:#aeaeae;--modern-c-gray-light-2:#c7c7c7;--modern-c-gray-light-3:#d1d1d1;--modern-c-gray-light-4:#e5e5e5;--modern-c-gray-light-5:#f2f2f2;--modern-c-gray-dark-1:#636363;--modern-c-gray-dark-2:#484848;--modern-c-gray-dark-3:#3a3a3a;--modern-c-gray-dark-4:#282828;--modern-c-gray-dark-5:#202020;--modern-c-divider-light-1:rgba(60,60,60,.29);--modern-c-divider-light-2:rgba(60,60,60,.12);--modern-c-divider-dark-1:rgba(84,84,84,.65);--modern-c-divider-dark-2:rgba(84,84,84,.48);--modern-c-indigo:#213547;--modern-c-indigo-soft:#476582;--modern-c-indigo-light:#aac8e4;--modern-c-indigo-lighter:#c9def1;--modern-c-indigo-dark:#1d2f3f;--modern-c-indigo-darker:#14212e;--modern-c-text-light-1:var(--modern-c-indigo);--modern-c-text-light-2:rgba(60,60,60,.7);--modern-c-text-light-3:rgba(60,60,60,.33);--modern-c-text-light-4:rgba(60,60,60,.18);--modern-c-text-dark-1:hsla(0,0%,100%,.87);--modern-c-text-dark-2:hsla(0,0%,92%,.6);--modern-c-text-dark-3:hsla(0,0%,92%,.38);--modern-c-text-dark-4:hsla(0,0%,92%,.18);--modern-c-green:#21b8a3;--modern-c-green-light:#41c6b0;--modern-c-green-lighter:#41c6b0;--modern-c-green-dark:#149684;--modern-c-green-darker:#149684;--modern-c-green-dimm:#062521;--modern-c-green-dimm-1:rgba(66,184,131,.5);--modern-c-green-dimm-2:rgba(66,184,131,.25);--modern-c-green-dimm-3:rgba(66,184,131,.05);--modern-c-blue:#0095ff;--modern-c-blue-light:#0af;--modern-c-blue-lighter:#ecf4ff;--modern-c-blue-dark:#07f;--modern-c-blue-darker:#3367af;--modern-c-blue-dimm-1:rgba(0,149,255,.5);--modern-c-blue-dimm-2:rgba(0,149,255,.25);--modern-c-blue-dimm-3:rgba(0,149,255,.05);--modern-c-yellow:#ffc517;--modern-c-yellow-light:#fcd253;--modern-c-yellow-lighter:#fcfc7c;--modern-c-yellow-darker:#ad850e;--modern-c-yellow-dimm-1:rgba(255,197,23,.5);--modern-c-yellow-dimm-2:rgba(255,197,23,.25);--modern-c-yellow-dimm-3:rgba(255,197,23,.05);--modern-c-red:#ed3c50;--modern-c-red-light:#f54e82;--modern-c-red-lighter:#fd1d7c;--modern-c-red-darker:#ab2131;--modern-c-red-dimm-1:rgba(237,60,80,.5);--modern-c-red-dimm-2:rgba(237,60,80,.25);--modern-c-red-dimm-3:rgba(237,60,80,.05);--modern-c-bg:var(--modern-c-white);--modern-c-bg-soft:var(--modern-c-white-soft);--modern-c-bg-mute:var(--modern-c-white-mute);--modern-c-bg-alt:var(--modern-c-white-soft);--modern-c-divider:var(--modern-c-divider-light-1);--modern-c-divider-light:var(--modern-c-divider-light-2);--modern-c-text-1:var(--modern-c-text-light-1);--modern-c-text-2:var(--modern-c-text-light-2);--modern-c-text-3:var(--modern-c-text-light-3);--modern-c-text-4:var(--modern-c-text-light-4);--modern-c-text-code:var(--modern-c-indigo-soft);--modern-c-brand:var(--modern-c-blue);--modern-c-brand-light:var(--modern-c-blue-light);--modern-c-brand-lighter:var(--modern-c-blue-lighter);--modern-c-brand-dark:var(--modern-c-blue-dark);--modern-c-brand-darker:var(--modern-c-blue-darker);--modern-c-brand-tint:rgba(127,163,255,.16)}.dark{--modern-c-bg:var(--modern-c-black-pure);--modern-c-bg-soft:var(--modern-c-black-mute);--modern-c-bg-mute:var(--modern-c-gray-dark-3);--modern-c-bg-alt:var(--modern-c-black);--modern-c-divider:var(--modern-c-divider-dark-1);--modern-c-divider-light:var(--modern-c-divider-dark-2);--modern-c-divider-inverse:var(--modern-c-divider-light-1);--modern-c-divider-inverse-light:var(--modern-c-divider-light-2);--modern-c-text-1:var(--modern-c-text-dark-1);--modern-c-text-2:var(--modern-c-text-dark-2);--modern-c-text-3:var(--modern-c-text-dark-3);--modern-c-text-4:var(--modern-c-text-dark-4);--modern-c-text-inverse-1:var(--modern-c-text-light-1);--modern-c-text-inverse-2:var(--modern-c-text-light-2);--modern-c-text-inverse-3:var(--modern-c-text-light-3);--modern-c-text-inverse-4:var(--modern-c-text-light-4);--modern-c-text-code:var(--modern-c-indigo-lighter)}:root{--modern-font-family-base:"Inter var experimental","Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;--modern-font-family-mono:Menlo,Monaco,Consolas,"Courier New",monospace;--modern-layout-max-width:1440px;--modern-code-line-height:1.7;--modern-code-font-size:0.875em;--modern-code-block-color:#2e3440;--modern-code-title-bg:rgba(0,99,199,.05);--modern-code-block-bg:#f6f8fa;--modern-code-line-highlight-color:rgba(0,0,0,.5);--modern-code-line-number-color:var(--modern-c-text-dark-3);--modern-code-copy-code-hover-bg:hsla(0,0%,100%,.05);--modern-code-copy-code-active-text:var(--modern-c-text-dark-2)}.dark{--modern-code-block-color:#e5e7eb;--modern-code-block-bg:var(--modern-c-black-soft);--modern-code-title-bg:var(--modern-c-black);--modern-code-line-highlight-color:hsla(0,0%,100%,.5);--modern-code-line-number-color:var(--modern-c-text-light-3)}:root{--modern-icon-copy:url("data:image/svg+xml;charset=utf-8,%3Csvg width='32' height='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z' fill='%23ccc'/%3E%3Cpath d='M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z' fill='%23ccc'/%3E%3C/svg%3E");--modern-icon-copied:url("data:image/svg+xml;charset=utf-8,%3Csvg width='32' height='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m13 24-9-9 1.41-1.41L13 21.17 26.59 7.59 28 9 13 24z' fill='%2360c054'/%3E%3C/svg%3E");--modern-icon-tip:url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512 960C264.58 960 64 759.42 64 512S264.58 64 512 64s448 200.58 448 448-200.58 448-448 448zm0-832c-212.08 0-384 171.92-384 384s171.92 384 384 384 384-171.92 384-384-171.92-384-384-384zm0 112c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm0 160c-17.67 0-32 14.33-32 32v320c0 17.67 14.33 32 32 32s32-14.33 32-32V432c0-17.67-14.33-32-32-32z' fill='%2321b8a3'/%3E%3C/svg%3E");--modern-z-index-local-nav:10;--modern-z-index-nav:20;--modern-z-index-layout-top:30;--modern-z-index-backdrop:40;--modern-z-index-sidebar:50;--modern-z-index-footer:60;--modern-button-brand-border:var(--modern-c-brand-light);--modern-button-brand-text:var(--modern-c-text-dark-1);--modern-button-brand-bg:var(--modern-c-brand);--modern-button-brand-hover-border:var(--modern-c-brand-light);--modern-button-brand-hover-text:var(--modern-c-text-dark-1);--modern-button-brand-hover-bg:var(--modern-c-brand-light);--modern-button-brand-active-border:var(--modern-c-brand-light);--modern-button-brand-active-text:var(--modern-c-text-dark-1);--modern-button-brand-active-bg:var(--modern-button-brand-bg);--modern-button-alt-border:var(--modern-c-gray-light-3);--modern-button-alt-text:var(--modern-c-text-light-1);--modern-button-alt-bg:var(--modern-c-gray-light-5);--modern-button-alt-hover-border:var(--modern-c-gray-light-3);--modern-button-alt-hover-text:var(--modern-c-text-light-1);--modern-button-alt-hover-bg:var(--modern-c-gray-light-4);--modern-button-alt-active-border:var(--modern-c-gray-light-3);--modern-button-alt-active-text:var(--modern-c-text-light-1);--modern-button-alt-active-bg:var(--modern-c-gray-light-3);--modern-button-sponsor-border:var(--modern-c-gray-light-3);--modern-button-sponsor-text:var(--modern-c-text-light-2);--modern-button-sponsor-bg:transparent;--modern-button-sponsor-hover-border:var(--modern-c-sponsor);--modern-button-sponsor-hover-text:var(--modern-c-sponsor);--modern-button-sponsor-hover-bg:transparent;--modern-button-sponsor-active-border:var(--modern-c-sponsor);--modern-button-sponsor-active-text:var(--modern-c-sponsor);--modern-button-sponsor-active-bg:transparent}.dark{--modern-button-brand-border:var(--modern-c-brand-light);--modern-button-brand-text:var(--modern-c-text-dark-1);--modern-button-brand-bg:var(--modern-c-brand-dark);--modern-button-brand-hover-border:var(--modern-c-brand-lighter);--modern-button-brand-hover-text:var(--modern-c-text-dark-1);--modern-button-brand-hover-bg:var(--modern-c-brand);--modern-button-brand-active-border:var(--modern-c-brand-lighter);--modern-button-brand-active-text:var(--modern-c-text-dark-1);--modern-button-brand-active-bg:var(--modern-button-brand-bg);--modern-button-alt-border:var(--modern-c-gray-dark-2);--modern-button-alt-text:var(--modern-c-text-dark-1);--modern-button-alt-bg:var(--modern-c-bg-mute);--modern-button-alt-hover-border:var(--modern-c-gray-dark-2);--modern-button-alt-hover-text:var(--modern-c-text-dark-1);--modern-button-alt-hover-bg:var(--modern-c-gray-dark-2);--modern-button-alt-active-border:var(--modern-c-gray-dark-2);--modern-button-alt-active-text:var(--modern-c-text-dark-1);--modern-button-alt-active-bg:var(--modern-button-alt-bg);--modern-button-sponsor-border:var(--modern-c-gray-dark-1);--modern-button-sponsor-text:var(--modern-c-text-dark-2)}:root{--modern-custom-block-code-font-size:13px;--modern-custom-block-info-border:var(--modern-c-blue-dimm-1);--modern-custom-block-info-text:var(--modern-c-brand);--modern-custom-block-info-bg:var(--modern-c-blue-dimm-3);--modern-custom-block-info-code-bg:var(--modern-custom-block-info-bg);--modern-custom-block-tip-border:var(--modern-c-green-dimm-1);--modern-custom-block-tip-text:var(--modern-c-green-darker);--modern-custom-block-tip-bg:var(--modern-c-green-dimm-3);--modern-custom-block-tip-code-bg:var(--modern-custom-block-tip-bg);--modern-custom-block-warning-border:var(--modern-c-yellow-dimm-1);--modern-custom-block-warning-text:var(--modern-c-yellow-darker);--modern-custom-block-warning-bg:var(--modern-c-yellow-dimm-3);--modern-custom-block-warning-code-bg:var(--modern-custom-block-warning-bg);--modern-custom-block-danger-border:var(--modern-c-red-dimm-1);--modern-custom-block-danger-text:var(--modern-c-red-darker);--modern-custom-block-danger-bg:var(--modern-c-red-dimm-3);--modern-custom-block-danger-code-bg:var(--modern-custom-block-danger-bg)}.dark{--modern-custom-block-info-border:var(--modern-c-divider-light);--modern-custom-block-info-bg:var(--modern-c-black-mute);--modern-custom-block-info-code-bg:var(--modern-c-gray-dark-4);--modern-custom-block-tip-border:var(--modern-c-green-dimm-2);--modern-custom-block-tip-text:var(--modern-c-green-light);--modern-custom-block-warning-border:var(--modern-c-yellow-dimm-2);--modern-custom-block-warning-text:var(--modern-c-yellow-light);--modern-custom-block-danger-border:var(--modern-c-red-dimm-2);--modern-custom-block-danger-text:var(--modern-c-red-light)}:root{--modern-nav-height:56px;--modern-sidebar-width:280px;--modern-aside-width:256px;--modern-home-bg:#var(--modern-c-bg-white);--modern-home-hero-name-color:transparent;--modern-home-hero-name-background:-webkit-linear-gradient(120deg,var(--modern-c-brand) 30%,#42d392);--modern-home-hero-image-background-image:none;--modern-home-hero-image-filter:none;--modern-home-feature-bg:var(--modern-c-bg-soft);--modern-home-feature-hover-bg:linear-gradient(180deg,#ededed,#f9f9f9)}.dark{--modern-home-bg:var(--modern-c-black);--modern-home-feature-bg:var(--modern-c-black-mute);--modern-home-feature-hover-bg:var(--modern-c-black-mute)}:root{--modern-shadow-1:0 1px 4px rgba(0,0,0,.02),0 1px 0 rgba(0,0,0,.06);--modern-shadow-2:0 3px 12px rgba(0,0,0,.07),0 1px 4px rgba(0,0,0,.07);--modern-shadow-3:0 12px 32px rgba(0,0,0,.1),0 2px 6px rgba(0,0,0,.08);--modern-shadow-4:0 14px 44px rgba(0,0,0,.12),0 3px 9px rgba(0,0,0,.12);--modern-shadow-5:0 18px 56px rgba(0,0,0,.16),0 4px 12px rgba(0,0,0,.16);--shiki-color-text:#414141;--shiki-color-background:transparent;--shiki-token-constant:#1976d2;--shiki-token-string:#31a94d;--shiki-token-comment:#b6b4b4;--shiki-token-keyword:#cf2727;--shiki-token-parameter:#f59403;--shiki-token-function:#7041c8;--shiki-token-string-expression:#218438;--shiki-token-punctuation:#242323;--shiki-token-link:#22863a}.dark{--shiki-color-text:#cac7c7;--shiki-token-constant:#6fb0fa;--shiki-token-string:#f9a86e;--shiki-token-comment:#6a727b;--shiki-token-keyword:#f47481;--shiki-token-parameter:#ff9800;--shiki-token-function:#ae8eeb;--shiki-token-string-expression:#4fb74d;--shiki-token-punctuation:#bbb;--shiki-token-link:#f9a76d}*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;font-size:16px;line-height:1.4}html.dark{color-scheme:dark}body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--modern-c-bg);color:var(--modern-c-text-1);direction:ltr;font-family:var(--modern-font-family-base);font-size:16px;font-synthesis:none;font-weight:400;margin:0;min-width:320px;width:100%}main{display:block}h1,h2,h3,h4,h5,h6{font-size:16px;font-weight:400;line-height:24px;margin:0}p{margin:0}b,strong{font-weight:600}[role=button],a,area,button,input,label,select,summary,textarea{touch-action:manipulation}a{color:inherit;text-decoration:inherit}ol,ul{list-style:none;padding:0}blockquote,ol,ul{margin:0}code,kbd,pre,samp{font-family:var(--modern-font-family-mono)}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}figure{margin:0}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{border:0;color:inherit;line-height:inherit;padding:0}button{background-color:transparent;background-image:none;font-family:inherit;padding:0}[role=button],button{cursor:pointer}button:focus,button:focus-visible{outline:1px dotted;outline:4px auto -webkit-focus-ring-color}button:focus:not(:focus-visible){outline:none!important}input:focus,select:focus,textarea:focus{outline:none}table{border-collapse:collapse}input{background-color:transparent}input::-ms-input-placeholder,textarea::-ms-input-placeholder{color:var(--modern-c-text-3)}input::placeholder,textarea::placeholder{color:var(--modern-c-text-3)}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}textarea{resize:vertical}select{-webkit-appearance:none}fieldset{margin:0;padding:0}button select{text-transform:none}button:focus,button:focus-visible{outline:none}.visually-hidden{visibility:hidden}#nprogress .bar{background:var(--modern-c-brand);height:2px;left:0;position:fixed;top:0;width:100%}.medium-zoom-image--opened,.medium-zoom-overlay{z-index:999}.modern-doc h1,.modern-doc h2,.modern-doc h3,.modern-doc h4,.modern-doc h5,.modern-doc h6{font-weight:600;outline:none;position:relative}.modern-doc h1{font-size:28px;letter-spacing:-.02em;line-height:40px;margin-bottom:40px}.modern-doc h2{font-size:25px;letter-spacing:-.02em;line-height:32px;margin:56px 0 16px}.modern-doc h3{font-size:20px;letter-spacing:-.01em;line-height:28px;margin:32px 0 0}.modern-doc h4{font-size:16px;line-height:24px;margin:24px 0 0}.modern-doc .header-anchor{float:left;font-weight:500;margin-left:-.87em;opacity:0;padding-right:.23em;transition:color .25s,opacity .25s}.modern-doc h1 .header-anchor:focus,.modern-doc h1:hover .header-anchor,.modern-doc h2 .header-anchor:focus,.modern-doc h2:hover .header-anchor,.modern-doc h3 .header-anchor:focus,.modern-doc h3:hover .header-anchor,.modern-doc h4 .header-anchor:focus,.modern-doc h4:hover .header-anchor,.modern-doc h5 .header-anchor:focus,.modern-doc h5:hover .header-anchor,.modern-doc h6 .header-anchor:focus,.modern-doc h6:hover .header-anchor{opacity:1}@media (min-width:768px){.modern-doc h1{font-size:36px;letter-spacing:-.02em;line-height:1.4}}.modern-doc p,.modern-doc summary{margin:16px 0}.modern-doc p{line-height:28px;z-index:2}.modern-doc blockquote{border-left:2px solid var(--modern-c-divider);margin:16px 0;padding-left:16px;transition:border-color .5s}.modern-doc blockquote>p{color:var(--modern-c-text-2);font-size:16px;margin:0;transition:color .5s}.modern-doc a{color:var(--modern-c-brand);font-weight:500;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;transition:color .25s}.modern-doc a:hover{color:var(--modern-c-brand-dark)}.modern-doc strong{font-weight:600}.modern-doc ol,.modern-doc ul{line-height:28px;margin:16px 0;padding-left:1.25rem}.modern-doc ul{list-style:disc}.modern-doc ol{list-style:decimal}.modern-doc li+li{margin-top:8px}.modern-doc li>ol,.modern-doc li>ul{margin:8px 0 0}.modern-doc table{border-collapse:collapse;display:block;font-size:15px;line-height:28px;margin:20px 0;overflow-x:auto}.modern-doc tr{border-top:1px solid var(--modern-c-divider-light);transition:background-color .5s}.modern-doc tr:nth-child(2n){background-color:var(--modern-c-bg-soft)}.modern-doc td,.modern-doc th{border:1px solid var(--modern-c-divider-light);padding:12px 16px}.modern-doc th{background-color:var(--modern-c-white-soft);font-size:16px;font-weight:600}.dark .modern-doc th{background-color:var(--modern-c-black)}.modern-doc hr{border:none;border-top:1px solid var(--modern-c-divider-light);margin:16px 0}.modern-doc .custom-block{margin:16px 0}.modern-doc .custom-block p{line-height:24px;margin:8px 0}.modern-doc .custom-block p:first-child{margin:0}.modern-doc .custom-block a{color:inherit;font-weight:600;text-decoration:underline;transition:opacity .25s}.modern-doc .custom-block a:hover{opacity:.6}.modern-doc .custom-block code{color:inherit;font-size:var(--modern-custom-block-code-font-size);font-weight:700}.modern-doc .custom-block div[class*=language-]{margin:8px 0}.modern-doc .custom-block div[class*=language-] code{background-color:transparent;font-weight:400}.modern-doc :not(pre,h1,h2,h3,h4,h5,h6)>code{font-size:var(--modern-code-font-size)}.modern-doc :not(pre,div)>code{background-color:var(--modern-c-bg-mute);border-radius:4px;color:var(--modern-c-text-code);padding:3px 6px}.modern-doc h1>code,.modern-doc h2>code,.modern-doc h3>code{font-size:.9em}.modern-doc a>code{color:var(--modern-c-brand);transition:color .25s}.modern-doc a:hover>code{color:var(--modern-c-brand-dark)}.modern-doc div[class*=language-]{background-color:var(--modern-code-block-bg);margin:16px 0;overflow-x:auto;position:relative;transition:background-color .5s}.modern-doc .modern-code-title{background-color:var(--modern-code-title-bg);font-size:var(--modern-code-font-size);padding:12px 16px;transition:background-color .5s}@media (min-width:640px){.modern-doc div[class*=language-]{border-radius:8px;margin:24px 0}}@media (max-width:639px){.modern-doc li div[class*=language-]{border-radius:8px 0 0 8px}}.modern-doc div[class$=-api]+div[class*=language-],.modern-doc div[class*=language-]+div[class$=-api]>div[class*=language-],.modern-doc div[class*=language-]+div[class*=language-]{margin-top:-8px}.modern-doc [class*=language-] code,.modern-doc [class*=language-] pre{word-wrap:normal;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;-moz-tab-size:4;tab-size:4;text-align:left;white-space:pre;word-break:normal;word-spacing:normal}.modern-doc [class*=language-] pre{background:transparent;margin:0;overflow-x:auto;position:relative;z-index:1}.modern-doc [class*=language-] code{background-color:var(--modern-code-block-bg);color:var(--modern-code-block-color);display:block;font-size:var(--modern-code-font-size);line-height:var(--modern-code-line-height);min-width:100%;padding:12px 16px;transition:color .5s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.modern-doc [class*=language-] code .highlighted{background-color:var(--modern-code-line-highlight-color);display:inline-block;margin:0 -24px;padding:0 24px;transition:background-color .5s;width:calc(100% + 48px)}.modern-doc div[class*=language-].line-numbers-mode{padding-left:32px}.modern-doc.line-number-disable div[class*=language-].line-numbers-mode{padding-left:0}.modern-doc .line-numbers-wrapper{bottom:0;color:var(--modern-code-line-number-color);display:flex;flex-direction:column;font-family:var(--modern-font-family-mono);font-size:var(--modern-code-font-size);left:0;line-height:var(--modern-code-line-height);padding-top:16px;position:absolute;text-align:center;top:0;transition:border-color .5s,color .5s;width:36px;z-index:3}.modern-doc.line-number-disable .line-numbers-wrapper{display:none}.modern-doc [class*=language-] .modern-code-content{position:relative}.modern-doc [class*=language-] .modern-code-content>button.copy{align-items:center;background-color:var(--modern-code-block-bg);background-image:var(--modern-icon-copy);background-position:50%;background-repeat:no-repeat;background-size:20px;border-radius:4px;cursor:pointer;display:block;height:20px;justify-content:center;opacity:0;position:absolute;right:12px;top:12px;transition:all .16s;width:20px;z-index:3}.modern-doc [class*=language-] .modern-code-content>button.copy:focus,.modern-doc [class*=language-]:hover .modern-code-content>button.copy{opacity:1}.modern-doc [class*=language-] .modern-code-content>button.copy:hover{background-color:var(--modern-code-copy-code-hover-bg)}.modern-doc [class*=language-] .modern-code-content>button.copy.copied,.modern-doc [class*=language-] .modern-code-content>button.copy:hover.copied{background-image:var(--modern-icon-copied);border-radius:0 4px 4px 0;opacity:1;transform:scale(1)}.modern-doc [class*=language-]>span.lang{color:var(--modern-c-text-dark-3);font-size:12px;font-weight:500;position:absolute;right:12px;top:6px;transition:color .4s,opacity .4s;z-index:2}.modern-doc [class*=language-]:hover>button.copy+span.lang,.modern-doc [class*=language-]>button.copy:focus+span.lang{opacity:0}.modern-doc .modern-directive{border:1px solid transparent;border-radius:8px;font-size:14px;line-height:24px;margin:24px 0;padding:16px 20px 8px}.modern-doc .modern-directive .modern-directive-title{font-weight:700;margin:0}.modern-doc .modern-directive .modern-directive-content p{margin:8px 0}.modern-doc .modern-directive .modern-directive-icon{background-image:var(--modern-icon-tip);display:inline-block;height:20px;margin-right:3px;width:20px}.modern-doc .modern-directive code{color:inherit;font-size:13px;font-weight:700}.modern-doc .modern-directive.note,.modern-doc .modern-directive.tip{background-color:var(--modern-custom-block-tip-bg);border-color:var(--modern-custom-block-tip-border);color:var(--modern-custom-block-tip-text)}.modern-doc .modern-directive.note code,.modern-doc .modern-directive.tip code{background-color:var(--modern-custom-block-tip-code-bg)}.modern-doc .modern-directive.info{background-color:var(--modern-custom-block-info-bg);border-color:var(--modern-custom-block-info-border);color:var(--modern-custom-block-info-text)}.modern-doc .modern-directive.info code{background-color:var(--modern-custom-block-info-code-bg)}.modern-doc .modern-directive.warning{background-color:var(--modern-custom-block-warning-bg);border-color:var(--modern-custom-block-warning-border);color:var(--modern-custom-block-warning-text)}.modern-doc .modern-directive.warning code{background-color:var(--modern-custom-block-warning-code-bg)}.modern-doc .modern-directive.caution,.modern-doc .modern-directive.danger{background-color:var(--modern-custom-block-danger-bg);border-color:var(--modern-custom-block-danger-border);color:var(--modern-custom-block-danger-text)}.modern-doc .modern-directive.caution code,.modern-doc .modern-directive.danger code{background-color:var(--modern-custom-block-danger-code-bg)}.aside-active,.aside-active:hover{color:var(--modern-c-brand-dark);font-weight:700}@media (max-width:768px){.header-anchor{display:none}}.modern-scrollbar{scrollbar-gutter:stable}.modern-scrollbar::-webkit-scrollbar{height:8px;-webkit-transition:all .3s;transition:all .3s;width:12px}.modern-scrollbar::-webkit-scrollbar-track{background:transparent}.modern-scrollbar::-webkit-scrollbar-thumb{border-radius:10px}.modern-scrollbar:hover::-webkit-scrollbar-thumb{background-clip:content-box;background-color:var(--modern-c-text-4);border:3px solid transparent}.modern-scrollbar::-webkit-scrollbar-corner{background:transparent}.xH_Uj{display:none;height:100vh;margin-top:calc(var(--modern-nav-height)*-1 - 32px);overflow-x:hidden;overflow-y:auto;padding-top:calc(var(--modern-nav-height) + 32px);position:-webkit-sticky;position:sticky;scrollbar-width:none;top:0;width:0}.xH_Uj::-webkit-scrollbar{display:none}@media(min-width:768px){.xH_Uj{display:block}}@media(max-width:960px){.NycN9{position:relative}.Attzr{margin:12px}}@media(min-width:960px){.NycN9{width:100%}.Attzr{margin-left:var(--modern-sidebar-width);padding:48px;width:calc(100vw - var(--modern-sidebar-width))}.Attzr .modern-doc{padding-right:48px;width:calc(100vw - var(--modern-sidebar-width) - var(--modern-aside-width))}.xH_Uj{width:var(--modern-aside-width)}}@media(min-width:1440px){.NycN9{margin-left:calc(50vw - 720px);width:1440px}.Attzr{margin-left:var(--modern-sidebar-width);padding:48px 64px;width:calc(1440px - var(--modern-sidebar-width))}.Attzr .modern-doc{padding-right:64px;width:calc(1312px - var(--modern-sidebar-width) - var(--modern-aside-width))}}.htA00{align-items:center;background-color:var(--modern-c-bg);border-bottom:1px solid var(--modern-c-divider-light);color:var(--modern-c-text-1);display:flex;justify-content:space-between;left:0;padding-left:10px;position:-webkit-sticky;position:sticky;top:0;transition:border-color .5s,background-color .5s,color .5s;width:100%;z-index:2}.htA00 .i_YqX{padding:12px;transition:color .5s}.htA00 .i_YqX:hover{color:var(--modern-c-text-3)}@media(min-width:960px){.htA00,.xv4OW{display:none}}.xv4OW{background:rgba(0,0,0,.6);right:0;z-index:var(--modern-z-index-backdrop)}.WSh16,.xv4OW{bottom:0;left:0;position:fixed;top:0}.WSh16{background-color:var(--modern-c-bg);max-width:320px;opacity:0;overflow-x:hidden;overflow-y:auto;padding:12px 12px 96px 16px;transform:translateX(-100%);transition:opacity .5s,transform .25s ease;width:calc(100vw - 64px);z-index:var(--modern-z-index-sidebar)}.dark .WSh16{box-shadow:var(--modern-shadow-1)}.WSh16.Lkd4W{opacity:1;transform:translateX(0);transition:opacity .25s,transform .5s cubic-bezier(.19,1,.22,1);visibility:visible}@media(min-width:960px){.WSh16{--webkit-mask-image:linear-gradient(270deg,#000 10px,transparent 0);box-shadow:var(--modern-c-shadow-3);margin-top:calc(var(--modern-nav-height));-webkit-mask-image:linear-gradient(transparent,#000 20px),linear-gradient(270deg,#000 10px,transparent 0);mask-image:linear-gradient(transparent,#000 20px),linear-gradient(270deg,#000 10px,transparent 0);opacity:1;padding-bottom:128px;transform:translateX(0);visibility:visible;width:var(--modern-sidebar-width);z-index:0}}@media(min-width:1440px){.WSh16{margin-left:calc(50vw - 720px);padding-left:16px;width:var(--modern-sidebar-width)}}.eKj7t{opacity:1}.eKj7t:hover{color:inherit;transition:all .2s}.SCFOX:hover{background-color:var(--modern-c-bg-mute);transition:all .2s}.DO2xf:hover{background-color:hsla(0,0%,90%,.4);transition:all .2s}.dark .DO2xf:hover,.dark .SCFOX:hover{background-color:var(--modern-c-black-mute);transition:all .2s}.DYqu8,.SCFOX,.rHOIq{font-size:13px;line-height:19px}.SCFOX,.rHOIq{color:var(--modern-c-text-2);transition:all .2s}.DYqu8{background-color:var(--modern-c-brand-tint);color:var(--modern-c-brand);font-weight:bolder}.overview-index h1,.overview-index h2,.overview-index h3{font-weight:600;line-height:1}.overview-index h1,.overview-index h2{letter-spacing:-.02em}.overview-index h1{font-size:38px}.overview-index h2{border-top:1px solid var(--modern-c-divider-light);color:var(--modern-c-text-1);font-size:24px;margin:36px 0;padding-top:36px;transition:color .5s}.overview-index h3,.overview-index h3>a{color:var(--modern-c-brand);font-size:18px;font-weight:600;letter-spacing:-.01em;margin-bottom:1em;transition:color .5s}.overview-index h3>a{line-height:1.3;margin:0}.overview-index h3>a:hover{color:var(--modern-c-brand-dark);transition:color .5s}.overview-index h3:before{display:none}.overview-index h1:focus .hIraj,.overview-index h1:hover .hIraj,.overview-index h2:focus .hIraj,.overview-index h2:hover .hIraj,.overview-index h3:focus .hIraj,.overview-index h3:hover .hIraj,.overview-index h4:focus .hIraj,.overview-index h4:hover .hIraj,.overview-index h5:focus .hIraj,.overview-index h5:hover .hIraj,.overview-index h6:focus .hIraj,.overview-index h6:hover .hIraj{opacity:1}.overview-index a.hIraj{color:var(--modern-c-brand);float:left;font-size:.85em;font-weight:500;margin-left:-.87em;margin-top:.125em;opacity:0;padding-right:.23em;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;transition:color .25s}.overview-index a.hIraj:focus,.overview-index a.hIraj:hover{text-decoration:none}.PYbcS a{color:var(--modern-c-text-code);font-size:15px;font-weight:500;line-height:1.6;margin-top:8px;transition:color .5s;word-break:break-all}.pc1Vm{position:relative}.pc1Vm.N6k6V{padding-left:1px}.pc1Vm.N6k6V:before{left:-.25rem}.dark overview-groups a{font-weight:400}.y0LZK{background-color:var(--modern-c-bg-soft);border-radius:12px;break-inside:avoid;margin-bottom:28px;padding:28px 32px;page-break-inside:avoid;transition:background-color .5s}@media(max-width:768px){.overview-index{padding:42px 24px}.overview-index h1{font-size:32px;margin-bottom:24px}.overview-index h2{font-size:22px;margin:42px 0 32px;padding-top:32px}.PYbcS a{font-size:14px}.Qpm_8{display:block}}@media(min-width:768px){.PYbcS{columns:2}}@media(min-width:1024px){.PYbcS{columns:3}}@media(min-width:640px){._2UdXo{display:flex;flex-direction:column;width:50%}._2UdXo.YMaiU{padding-left:16px;padding-top:0}}.gMyXy,.oflez,.zPHT1{width:100%}.gMyXy{border:1px solid var(--modern-c-divider-light);border-radius:8px;display:block;height:100%;padding:16px;transition:border-color .25s}.gMyXy:hover{border-color:var(--modern-c-brand)}.gMyXy:hover .K2e43{color:var(--modern-c-brand-dark)}.gMyXy.oflez{margin-left:auto;text-align:right}.pA5H9{color:var(--modern-c-text-2);font-size:12px}.K2e43,.pA5H9{display:block;font-weight:500;line-height:20px}.K2e43{color:var(--modern-c-brand);font-size:14px;transition:color .25s}.w0GC1{-webkit-text-fill-color:var(--modern-home-hero-name-color);background:var(--modern-home-hero-name-background);-webkit-background-clip:text;background-clip:text}.YyQLN{borderradius:100%;mixblendmode:normal;zindex:0;background-image:conic-gradient(from 180deg at 50% 50%,var(--modern-c-brand) 0deg,180deg,#42d392 1turn);filter:blur(80px);height:500px;opacity:.05;position:absolute;top:-100px;transform:translateX(-50%);width:500px}.dark .YyQLN{opacity:.15}.mlLdd{border:1px solid transparent;display:inline-block;font-weight:500;text-align:center;transition:color .25s,border-color .25s,background-color .25s;white-space:nowrap}.mlLdd:active{transition:color .1s,border-color .1s,background-color .1s}.mlLdd.eGvPP{border-radius:20px;font-size:14px;line-height:38px;padding:0 20px}.mlLdd.JcYAx{border-radius:24px;font-size:16px;line-height:46px;padding:0 24px}.mlLdd.QYc8D{background-color:var(--modern-button-brand-bg);border-color:var(--modern-button-brand-border);color:var(--modern-button-brand-text)}.mlLdd.QYc8D:hover{background-color:var(--modern-button-brand-hover-bg);border-color:var(--modern-button-brand-hover-border);color:var(--modern-button-brand-hover-text);opacity:1}.mlLdd.QYc8D:active{background-color:var(--modern-button-brand-active-bg);border-color:var(--modern-button-brand-active-border);color:var(--modern-button-brand-active-text)}.mlLdd.WRLbd{background-color:var(--modern-button-alt-bg);border-color:var(--modern-button-alt-border);color:var(--modern-button-alt-text)}.mlLdd.WRLbd:hover{background-color:var(--modern-button-alt-hover-bg);border-color:var(--modern-button-alt-hover-border);color:var(--modern-button-alt-hover-text)}.mlLdd.WRLbd:active{background-color:var(--modern-button-alt-active-bg);border-color:var(--modern-button-alt-active-border);color:var(--modern-button-alt-active-text)}@media(max-width:768px){.mlLdd.JcYAx{font-size:14px;line-height:40px}}@media(max-width:640px){.Ew_v3,.QxfvN,.xBRav{width:100%}}@media(min-width:640px){.Ew_v3,.QxfvN,.xBRav{width:50%}}@media(min-width:768px){.QxfvN,.xBRav{width:50%}.Ew_v3,.hAF7W{width:33.3333333333%}}@media(min-width:960px){.hAF7W{width:25%}.xBRav{width:33.3333333333%}.Ew_v3{width:50%}}.owuiJ{background:var(--modern-home-feature-bg);border:1px solid transparent;transition:all .3s}.owuiJ:hover{background:var(--modern-home-feature-hover-bg);border:1px solid var(--modern-c-brand)}
|