@modern-js/module-tools-docs 2.25.2-beta.0 → 2.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/docs/en/api/config/build-config.md +10 -10
- package/docs/en/api/config/build-preset.mdx +4 -4
- package/docs/en/guide/advance/asset.mdx +2 -2
- package/docs/en/guide/advance/build-umd.mdx +9 -9
- package/docs/en/guide/advance/copy.md +1 -1
- package/docs/en/guide/advance/external-dependency.mdx +2 -2
- package/docs/en/guide/advance/in-depth-about-build.md +11 -11
- package/docs/en/guide/advance/in-depth-about-dev-command.md +1 -1
- package/docs/en/guide/basic/before-getting-started.md +1 -1
- package/docs/en/guide/basic/command-preview.md +5 -5
- package/docs/en/guide/basic/modify-output-product.md +18 -18
- package/docs/en/guide/basic/using-storybook.mdx +1 -1
- package/docs/en/guide/best-practices/components.mdx +10 -10
- package/docs/en/guide/faq/build.mdx +1 -1
- package/docs/en/guide/intro/welcome.md +2 -2
- package/docs/en/plugins/guide/getting-started.mdx +1 -1
- package/docs/en/plugins/guide/plugin-object.mdx +2 -2
- package/docs/en/plugins/guide/setup-function.mdx +1 -1
- package/docs/zh/api/config/build-config.md +1 -1
- package/docs/zh/guide/faq/build.mdx +1 -1
- package/package.json +3 -3
- package/doc_build/api/config/build-config.html +0 -522
- package/doc_build/api/config/build-preset.html +0 -71
- package/doc_build/api/config/design-system.html +0 -113
- package/doc_build/api/config/dev.html +0 -40
- package/doc_build/api/config/plugins.html +0 -31
- package/doc_build/api/config/testing.html +0 -31
- package/doc_build/api/index.html +0 -11
- package/doc_build/api/plugin-api/plugin-hooks.html +0 -122
- package/doc_build/components/faq-build-exception.html +0 -11
- package/doc_build/components/faq-build-other.html +0 -11
- package/doc_build/components/faq-build-product.html +0 -11
- package/doc_build/components/faq-storybook.html +0 -11
- package/doc_build/components/faq-test.html +0 -11
- package/doc_build/en/api/config/build-config.html +0 -443
- package/doc_build/en/api/config/build-preset.html +0 -71
- package/doc_build/en/api/config/design-system.html +0 -127
- package/doc_build/en/api/config/dev.html +0 -40
- package/doc_build/en/api/config/plugins.html +0 -31
- package/doc_build/en/api/config/testing.html +0 -31
- package/doc_build/en/api/index.html +0 -11
- package/doc_build/en/api/plugin-api/plugin-hooks.html +0 -122
- package/doc_build/en/components/faq-build-exception.html +0 -11
- package/doc_build/en/components/faq-build-other.html +0 -11
- package/doc_build/en/components/faq-build-product.html +0 -11
- package/doc_build/en/components/faq-storybook.html +0 -11
- package/doc_build/en/components/faq-test.html +0 -11
- package/doc_build/en/guide/advance/asset.html +0 -31
- package/doc_build/en/guide/advance/build-umd.html +0 -42
- package/doc_build/en/guide/advance/copy.html +0 -52
- package/doc_build/en/guide/advance/external-dependency.html +0 -32
- package/doc_build/en/guide/advance/in-depth-about-build.html +0 -123
- package/doc_build/en/guide/advance/in-depth-about-dev-command.html +0 -32
- package/doc_build/en/guide/advance/theme-config.html +0 -39
- package/doc_build/en/guide/basic/before-getting-started.html +0 -97
- package/doc_build/en/guide/basic/command-preview.html +0 -73
- package/doc_build/en/guide/basic/modify-output-product.html +0 -113
- package/doc_build/en/guide/basic/publish-your-project.html +0 -60
- package/doc_build/en/guide/basic/test-your-project.html +0 -41
- package/doc_build/en/guide/basic/use-micro-generator.html +0 -47
- package/doc_build/en/guide/basic/using-storybook.html +0 -76
- package/doc_build/en/guide/best-practices/components.html +0 -121
- package/doc_build/en/guide/faq/build.html +0 -91
- package/doc_build/en/guide/faq/index.html +0 -17
- package/doc_build/en/guide/faq/storybook.html +0 -53
- package/doc_build/en/guide/faq/test.html +0 -16
- package/doc_build/en/guide/intro/getting-started.html +0 -53
- package/doc_build/en/guide/intro/welcome.html +0 -23
- package/doc_build/en/guide/intro/why-module-engineering-solution.html +0 -19
- package/doc_build/en/index.html +0 -11
- package/doc_build/en/plugins/guide/getting-started.html +0 -25
- package/doc_build/en/plugins/guide/plugin-object.html +0 -24
- package/doc_build/en/plugins/guide/setup-function.html +0 -40
- package/doc_build/en/plugins/official-list/overview.html +0 -19
- package/doc_build/en/plugins/official-list/plugin-babel.html +0 -23
- package/doc_build/en/plugins/official-list/plugin-banner.html +0 -40
- package/doc_build/en/plugins/official-list/plugin-import.html +0 -44
- package/doc_build/en/plugins/official-list/plugin-node-polyfill.html +0 -88
- package/doc_build/en/plugins/official-list/plugin-polyfill.html +0 -28
- package/doc_build/guide/advance/asset.html +0 -31
- package/doc_build/guide/advance/build-umd.html +0 -42
- package/doc_build/guide/advance/copy.html +0 -52
- package/doc_build/guide/advance/external-dependency.html +0 -31
- package/doc_build/guide/advance/in-depth-about-build.html +0 -123
- package/doc_build/guide/advance/in-depth-about-dev-command.html +0 -32
- package/doc_build/guide/advance/theme-config.html +0 -38
- package/doc_build/guide/basic/before-getting-started.html +0 -97
- package/doc_build/guide/basic/command-preview.html +0 -73
- package/doc_build/guide/basic/modify-output-product.html +0 -110
- package/doc_build/guide/basic/publish-your-project.html +0 -62
- package/doc_build/guide/basic/test-your-project.html +0 -43
- package/doc_build/guide/basic/use-micro-generator.html +0 -45
- package/doc_build/guide/basic/using-storybook.html +0 -74
- package/doc_build/guide/best-practices/components.html +0 -121
- package/doc_build/guide/faq/build.html +0 -91
- package/doc_build/guide/faq/index.html +0 -17
- package/doc_build/guide/faq/storybook.html +0 -53
- package/doc_build/guide/faq/test.html +0 -16
- package/doc_build/guide/intro/getting-started.html +0 -50
- package/doc_build/guide/intro/welcome.html +0 -23
- package/doc_build/guide/intro/why-module-engineering-solution.html +0 -19
- package/doc_build/index.html +0 -11
- package/doc_build/plugins/guide/getting-started.html +0 -25
- package/doc_build/plugins/guide/plugin-object.html +0 -24
- package/doc_build/plugins/guide/setup-function.html +0 -40
- package/doc_build/plugins/official-list/overview.html +0 -19
- package/doc_build/plugins/official-list/plugin-babel.html +0 -23
- package/doc_build/plugins/official-list/plugin-banner.html +0 -40
- package/doc_build/plugins/official-list/plugin-import.html +0 -44
- package/doc_build/plugins/official-list/plugin-node-polyfill.html +0 -88
- package/doc_build/plugins/official-list/plugin-polyfill.html +0 -28
- package/doc_build/route.json +0 -10
- package/doc_build/ssr/bundles/main.js +0 -30
- package/doc_build/ssr/bundles/main.js.LICENSE.txt +0 -103
- package/doc_build/static/css/defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be.71af0621.css +0 -1
- package/doc_build/static/css/main.1e1c5ea3.css +0 -17
- package/doc_build/static/js/async/default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29.a2443c41.js +0 -1
- package/doc_build/static/js/async/docs_en_api_config_build-config_md.47c13184.js +0 -1
- package/doc_build/static/js/async/docs_en_api_config_build-preset_mdx.240d175b.js +0 -1
- package/doc_build/static/js/async/docs_en_api_config_design-system_md.b2ec1ff7.js +0 -1
- package/doc_build/static/js/async/docs_en_api_config_dev_md.6ad208aa.js +0 -1
- package/doc_build/static/js/async/docs_en_api_config_plugins_md.da21c1a9.js +0 -1
- package/doc_build/static/js/async/docs_en_api_config_testing_md.5655d56b.js +0 -1
- package/doc_build/static/js/async/docs_en_api_index_md.b332bf64.js +0 -1
- package/doc_build/static/js/async/docs_en_api_plugin-api_plugin-hooks_md.b0f73e0d.js +0 -1
- package/doc_build/static/js/async/docs_en_guide_advance_asset_mdx.d302e90c.js +0 -1
- package/doc_build/static/js/async/docs_en_guide_advance_build-umd_mdx.554fa073.js +0 -1
- package/doc_build/static/js/async/docs_en_guide_advance_copy_md.78b33f73.js +0 -1
- package/doc_build/static/js/async/docs_en_guide_advance_external-dependency_mdx.507e4091.js +0 -1
- package/doc_build/static/js/async/docs_en_guide_advance_in-depth-about-build_md.207e8b25.js +0 -1
- package/doc_build/static/js/async/docs_en_guide_advance_in-depth-about-dev-command_md.72d6b6fc.js +0 -1
- package/doc_build/static/js/async/docs_en_guide_advance_theme-config_mdx.168a5eec.js +0 -1
- package/doc_build/static/js/async/docs_en_guide_basic_before-getting-started_md.a00933ab.js +0 -1
- package/doc_build/static/js/async/docs_en_guide_basic_command-preview_md.5e63d7ad.js +0 -1
- package/doc_build/static/js/async/docs_en_guide_basic_modify-output-product_md.abd250e1.js +0 -1
- package/doc_build/static/js/async/docs_en_guide_basic_publish-your-project_md.3b098b03.js +0 -1
- package/doc_build/static/js/async/docs_en_guide_basic_test-your-project_mdx.b86e9b69.js +0 -1
- package/doc_build/static/js/async/docs_en_guide_basic_use-micro-generator_md.e03b16c8.js +0 -1
- package/doc_build/static/js/async/docs_en_guide_basic_using-storybook_mdx.32e9b389.js +0 -1
- package/doc_build/static/js/async/docs_en_guide_best-practices_components_mdx.a56e369b.js +0 -1
- package/doc_build/static/js/async/docs_en_guide_faq_build_mdx.81c243c7.js +0 -1
- package/doc_build/static/js/async/docs_en_guide_faq_index_md.85367f4a.js +0 -1
- package/doc_build/static/js/async/docs_en_guide_faq_storybook_mdx.d6b26cfd.js +0 -1
- package/doc_build/static/js/async/docs_en_guide_faq_test_mdx.a7a1c8b5.js +0 -1
- package/doc_build/static/js/async/docs_en_guide_intro_getting-started_md.7c901798.js +0 -1
- package/doc_build/static/js/async/docs_en_guide_intro_welcome_md.69fe3324.js +0 -1
- package/doc_build/static/js/async/docs_en_guide_intro_why-module-engineering-solution_md.766afaee.js +0 -1
- package/doc_build/static/js/async/docs_en_index_md.32415ad9.js +0 -1
- package/doc_build/static/js/async/docs_en_plugins_guide_getting-started_mdx.c6631fd6.js +0 -1
- package/doc_build/static/js/async/docs_en_plugins_guide_plugin-object_mdx.0971cbdb.js +0 -1
- package/doc_build/static/js/async/docs_en_plugins_guide_setup-function_mdx.388d92b1.js +0 -1
- package/doc_build/static/js/async/docs_en_plugins_official-list_overview_md.9390ed67.js +0 -1
- package/doc_build/static/js/async/docs_en_plugins_official-list_plugin-babel_md.0528b729.js +0 -1
- package/doc_build/static/js/async/docs_en_plugins_official-list_plugin-banner_md.c14f8599.js +0 -1
- package/doc_build/static/js/async/docs_en_plugins_official-list_plugin-import_mdx.67bac7e1.js +0 -1
- package/doc_build/static/js/async/docs_en_plugins_official-list_plugin-node-polyfill_md.19819cf5.js +0 -1
- package/doc_build/static/js/async/docs_en_plugins_official-list_plugin-polyfill_md.473537df.js +0 -1
- package/doc_build/static/js/async/docs_zh_api_config_build-config_md.e52b0287.js +0 -1
- package/doc_build/static/js/async/docs_zh_api_config_build-preset_mdx.8b874378.js +0 -1
- package/doc_build/static/js/async/docs_zh_api_config_design-system_md.ceae6914.js +0 -1
- package/doc_build/static/js/async/docs_zh_api_config_dev_md.033094f8.js +0 -1
- package/doc_build/static/js/async/docs_zh_api_config_plugins_md.ab43b516.js +0 -1
- package/doc_build/static/js/async/docs_zh_api_config_testing_md.2c1f171d.js +0 -1
- package/doc_build/static/js/async/docs_zh_api_index_md.5df1b9d0.js +0 -1
- package/doc_build/static/js/async/docs_zh_api_plugin-api_plugin-hooks_md.9f155180.js +0 -1
- package/doc_build/static/js/async/docs_zh_guide_advance_asset_mdx.0b551e5e.js +0 -1
- package/doc_build/static/js/async/docs_zh_guide_advance_build-umd_mdx.4c0a741d.js +0 -1
- package/doc_build/static/js/async/docs_zh_guide_advance_copy_md.ff70ddd3.js +0 -1
- package/doc_build/static/js/async/docs_zh_guide_advance_external-dependency_mdx.64bae82a.js +0 -1
- package/doc_build/static/js/async/docs_zh_guide_advance_in-depth-about-build_md.d16f07b4.js +0 -1
- package/doc_build/static/js/async/docs_zh_guide_advance_in-depth-about-dev-command_md.2eabb853.js +0 -1
- package/doc_build/static/js/async/docs_zh_guide_advance_theme-config_mdx.5670e00b.js +0 -1
- package/doc_build/static/js/async/docs_zh_guide_basic_before-getting-started_md.3e23f82e.js +0 -1
- package/doc_build/static/js/async/docs_zh_guide_basic_command-preview_md.718669ed.js +0 -1
- package/doc_build/static/js/async/docs_zh_guide_basic_modify-output-product_md.bea77add.js +0 -1
- package/doc_build/static/js/async/docs_zh_guide_basic_publish-your-project_md.b0c63699.js +0 -1
- package/doc_build/static/js/async/docs_zh_guide_basic_test-your-project_mdx.b9ee0af4.js +0 -1
- package/doc_build/static/js/async/docs_zh_guide_basic_use-micro-generator_md.ad32d392.js +0 -1
- package/doc_build/static/js/async/docs_zh_guide_basic_using-storybook_mdx.2748f6f6.js +0 -1
- package/doc_build/static/js/async/docs_zh_guide_best-practices_components_mdx.e4450a3c.js +0 -1
- package/doc_build/static/js/async/docs_zh_guide_faq_build_mdx.470ca09d.js +0 -1
- package/doc_build/static/js/async/docs_zh_guide_faq_index_md.9c5738a8.js +0 -1
- package/doc_build/static/js/async/docs_zh_guide_faq_storybook_mdx.e1fb8e18.js +0 -1
- package/doc_build/static/js/async/docs_zh_guide_faq_test_mdx.d332b61f.js +0 -1
- package/doc_build/static/js/async/docs_zh_guide_intro_getting-started_md.8af35ffc.js +0 -1
- package/doc_build/static/js/async/docs_zh_guide_intro_welcome_md.6169850d.js +0 -1
- package/doc_build/static/js/async/docs_zh_guide_intro_why-module-engineering-solution_md.ff0f5ef0.js +0 -1
- package/doc_build/static/js/async/docs_zh_index_md.bc7e2f02.js +0 -1
- package/doc_build/static/js/async/docs_zh_plugins_guide_getting-started_mdx.6a2c07ee.js +0 -1
- package/doc_build/static/js/async/docs_zh_plugins_guide_plugin-object_mdx.9a665baa.js +0 -1
- package/doc_build/static/js/async/docs_zh_plugins_guide_setup-function_mdx.a614b224.js +0 -1
- package/doc_build/static/js/async/docs_zh_plugins_official-list_overview_md.bf4a7405.js +0 -1
- package/doc_build/static/js/async/docs_zh_plugins_official-list_plugin-babel_md.7107a66b.js +0 -1
- package/doc_build/static/js/async/docs_zh_plugins_official-list_plugin-banner_md.4443ae99.js +0 -1
- package/doc_build/static/js/async/docs_zh_plugins_official-list_plugin-import_mdx.e4923a9a.js +0 -1
- package/doc_build/static/js/async/docs_zh_plugins_official-list_plugin-node-polyfill_md.26c9cb0d.js +0 -1
- package/doc_build/static/js/async/docs_zh_plugins_official-list_plugin-polyfill_md.0bda701d.js +0 -1
- package/doc_build/static/js/defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be.7070a8dd.js +0 -1
- package/doc_build/static/js/defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be.7070a8dd.js.LICENSE.txt +0 -20
- package/doc_build/static/js/lib-lodash.20527186.js +0 -1
- package/doc_build/static/js/lib-polyfill.a99fdfae.js +0 -1
- package/doc_build/static/js/lib-react.87879e53.js +0 -1
- package/doc_build/static/js/lib-react.87879e53.js.LICENSE.txt +0 -29
- package/doc_build/static/js/lib-router.65b37e4a.js +0 -1
- package/doc_build/static/js/lib-router.65b37e4a.js.LICENSE.txt +0 -32
- package/doc_build/static/js/main.42725889.js +0 -1
- package/doc_build/static/search_index.en.6f4165d1.json +0 -1
- package/doc_build/static/search_index.en.8cd54797.json +0 -1
- package/doc_build/static/search_index.zh.7ed3054c.json +0 -1
- package/doc_build/static/search_index.zh.97edcc6e.json +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
(self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[]).push([["docs_en_api_config_build-config_md"],{96051:function(o,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0});!function(o,e){for(var t in e)Object.defineProperty(o,t,{enumerable:!0,get:e[t]})}(e,{CH:function(){return l},chCodeConfig:function(){return p},default:function(){return a}});var n,s=t("9880"),r=t("23169"),c=t("98691");(n=globalThis).__RSPRESS_PAGE_META||(n.__RSPRESS_PAGE_META={}),globalThis.__RSPRESS_PAGE_META["%2FUsers%2Fbytedance%2Fgithub%2Ftargeral%2Fmodern-js%2Fpackages%2Fdocument%2Fmodule-doc%2Fdocs%2Fen%2Fapi%2Fconfig%2Fbuild-config.md"]={toc:[{id:"alias",text:"alias",depth:2},{id:"asset",text:"asset",depth:2},{id:"assetpath",text:"asset.path",depth:2},{id:"assetlimit",text:"asset.limit",depth:2},{id:"assetpublicpath",text:"asset.publicPath",depth:2},{id:"assetsvgr",text:"asset.svgr",depth:2},{id:"assetsvgrinclude",text:"asset.svgr.include",depth:2},{id:"assetsvgrexclude",text:"asset.svgr.exclude",depth:2},{id:"autoexternal",text:"autoExternal",depth:2},{id:"autoexternaldependencies",text:"autoExternal.dependencies",depth:2},{id:"autoexternalpeerdependencies",text:"autoExternal.peerDependencies",depth:2},{id:"buildtype",text:"buildType",depth:2},{id:"copy",text:"copy",depth:2},{id:"copypatterns",text:"copy.patterns",depth:2},{id:"copyoptions",text:"copy.options",depth:2},{id:"define",text:"define",depth:2},{id:"dts",text:"dts",depth:2},{id:"dtsabortonerror",text:"dts.abortOnError",depth:2},{id:"dtsdistpath",text:"dts.distPath",depth:2},{id:"dtsonly",text:"dts.only",depth:2},{id:"dtsrespectexternal",text:"dts.respectExternal",depth:2},{id:"dtstsconfigpath",text:"dts.tsconfigPath",depth:2},{id:"esbuildoptions",text:"esbuildOptions",depth:2},{id:"externalhelpers",text:"externalHelpers",depth:2},{id:"externals",text:"externals",depth:2},{id:"format",text:"format",depth:2},{id:"format-esm",text:"format: 'esm'",depth:3},{id:"format-cjs",text:"format: 'cjs'",depth:3},{id:"format-iife",text:"format: 'iife'",depth:3},{id:"format-umd",text:"format: 'umd'",depth:3},{id:"input",text:"input",depth:2},{id:"jsx",text:"jsx",depth:2},{id:"sourcedir",text:"sourceDir",depth:2},{id:"sourcemap",text:"sourceMap",depth:2},{id:"sourcetype",text:"sourceType",depth:2},{id:"splitting",text:"splitting",depth:2},{id:"style",text:"style",depth:2},{id:"styleless",text:"style.less",depth:2},{id:"stylelesslessoptions",text:"style.less.lessOptions",depth:2},{id:"stylelessadditionaldata",text:"style.less.additionalData",depth:2},{id:"stylelessimplementation",text:"style.less.implementation",depth:2},{id:"stylesass",text:"style.sass",depth:2},{id:"stylesasssassoptions",text:"style.sass.sassOptions",depth:2},{id:"stylesassadditionaldata",text:"style.sass.additionalData",depth:2},{id:"stylesassimplementation",text:"style.sass.implementation",depth:2},{id:"stylepostcss",text:"style.postcss",depth:2},{id:"styleinject",text:"style.inject",depth:2}],title:"buildConfig",frontmatter:{sidebar_position:1}};var l={annotations:c.annotations,Code:c.Code},p={staticMediaQuery:"not screen, (max-width: 768px)",theme:{name:"nord",type:"dark",semanticHighlighting:!0,colors:{focusBorder:"#3b4252",foreground:"#d8dee9","activityBar.background":"#2e3440","activityBar.dropBackground":"#3b4252","activityBar.foreground":"#d8dee9","activityBar.activeBorder":"#88c0d0","activityBar.activeBackground":"#3b4252","activityBarBadge.background":"#88c0d0","activityBarBadge.foreground":"#2e3440","badge.foreground":"#2e3440","badge.background":"#88c0d0","button.background":"#88c0d0ee","button.foreground":"#2e3440","button.hoverBackground":"#88c0d0","button.secondaryBackground":"#434c5e","button.secondaryForeground":"#d8dee9","button.secondaryHoverBackground":"#4c566a","charts.red":"#bf616a","charts.blue":"#81a1c1","charts.yellow":"#ebcb8b","charts.orange":"#d08770","charts.green":"#a3be8c","charts.purple":"#b48ead","charts.foreground":"#d8dee9","charts.lines":"#88c0d0","debugConsole.infoForeground":"#88c0d0","debugConsole.warningForeground":"#ebcb8b","debugConsole.errorForeground":"#bf616a","debugConsole.sourceForeground":"#616e88","debugConsoleInputIcon.foreground":"#81a1c1","debugExceptionWidget.background":"#4c566a","debugExceptionWidget.border":"#2e3440","debugToolBar.background":"#3b4252",descriptionForeground:"#d8dee9e6","diffEditor.insertedTextBackground":"#81a1c133","diffEditor.removedTextBackground":"#bf616a4d","dropdown.background":"#3b4252","dropdown.border":"#3b4252","dropdown.foreground":"#d8dee9","editorActiveLineNumber.foreground":"#d8dee9cc","editorCursor.foreground":"#d8dee9","editorHint.border":"#ebcb8b00","editorHint.foreground":"#ebcb8b","editorIndentGuide.background":"#434c5eb3","editorIndentGuide.activeBackground":"#4c566a","editorInlayHint.background":"#434c5e","editorInlayHint.foreground":"#d8dee9","editorLineNumber.foreground":"#4c566a","editorLineNumber.activeForeground":"#d8dee9","editorWhitespace.foreground":"#4c566ab3","editorWidget.background":"#2e3440","editorWidget.border":"#3b4252","editor.background":"#2e3440","editor.foreground":"#d8dee9","editor.hoverHighlightBackground":"#3b4252","editor.findMatchBackground":"#88c0d066","editor.findMatchHighlightBackground":"#88c0d033","editor.findRangeHighlightBackground":"#88c0d033","editor.lineHighlightBackground":"#3b4252","editor.lineHighlightBorder":"#3b4252","editor.inactiveSelectionBackground":"#434c5ecc","editor.inlineValuesBackground":"#4c566a","editor.inlineValuesForeground":"#eceff4","editor.selectionBackground":"#434c5ecc","editor.selectionHighlightBackground":"#434c5ecc","editor.rangeHighlightBackground":"#434c5e52","editor.wordHighlightBackground":"#81a1c166","editor.wordHighlightStrongBackground":"#81a1c199","editor.stackFrameHighlightBackground":"#5e81ac","editor.focusedStackFrameHighlightBackground":"#5e81ac","editorError.foreground":"#bf616a","editorError.border":"#bf616a00","editorWarning.foreground":"#ebcb8b","editorWarning.border":"#ebcb8b00","editorBracketMatch.background":"#2e344000","editorBracketMatch.border":"#88c0d0","editorBracketHighlight.foreground1":"#8fbcbb","editorBracketHighlight.foreground2":"#88c0d0","editorBracketHighlight.foreground3":"#81a1c1","editorBracketHighlight.foreground4":"#5e81ac","editorBracketHighlight.foreground5":"#8fbcbb","editorBracketHighlight.foreground6":"#88c0d0","editorBracketHighlight.unexpectedBracket.foreground":"#bf616a","editorCodeLens.foreground":"#4c566a","editorGroup.background":"#2e3440","editorGroup.border":"#3b425201","editorGroup.dropBackground":"#3b425299","editorGroupHeader.border":"#3b425200","editorGroupHeader.noTabsBackground":"#2e3440","editorGroupHeader.tabsBackground":"#2e3440","editorGroupHeader.tabsBorder":"#3b425200","editorGutter.background":"#2e3440","editorGutter.modifiedBackground":"#ebcb8b","editorGutter.addedBackground":"#a3be8c","editorGutter.deletedBackground":"#bf616a","editorHoverWidget.background":"#3b4252","editorHoverWidget.border":"#3b4252","editorLink.activeForeground":"#88c0d0","editorMarkerNavigation.background":"#5e81acc0","editorMarkerNavigationError.background":"#bf616ac0","editorMarkerNavigationWarning.background":"#ebcb8bc0","editorOverviewRuler.border":"#3b4252","editorOverviewRuler.currentContentForeground":"#3b4252","editorOverviewRuler.incomingContentForeground":"#3b4252","editorOverviewRuler.findMatchForeground":"#88c0d066","editorOverviewRuler.rangeHighlightForeground":"#88c0d066","editorOverviewRuler.selectionHighlightForeground":"#88c0d066","editorOverviewRuler.wordHighlightForeground":"#88c0d066","editorOverviewRuler.wordHighlightStrongForeground":"#88c0d066","editorOverviewRuler.modifiedForeground":"#ebcb8b","editorOverviewRuler.addedForeground":"#a3be8c","editorOverviewRuler.deletedForeground":"#bf616a","editorOverviewRuler.errorForeground":"#bf616a","editorOverviewRuler.warningForeground":"#ebcb8b","editorOverviewRuler.infoForeground":"#81a1c1","editorRuler.foreground":"#434c5e","editorSuggestWidget.background":"#2e3440","editorSuggestWidget.border":"#3b4252","editorSuggestWidget.foreground":"#d8dee9","editorSuggestWidget.focusHighlightForeground":"#88c0d0","editorSuggestWidget.highlightForeground":"#88c0d0","editorSuggestWidget.selectedBackground":"#434c5e","editorSuggestWidget.selectedForeground":"#d8dee9","extensionButton.prominentForeground":"#d8dee9","extensionButton.prominentBackground":"#434c5e","extensionButton.prominentHoverBackground":"#4c566a",errorForeground:"#bf616a","gitDecoration.modifiedResourceForeground":"#ebcb8b","gitDecoration.deletedResourceForeground":"#bf616a","gitDecoration.untrackedResourceForeground":"#a3be8c","gitDecoration.ignoredResourceForeground":"#d8dee966","gitDecoration.conflictingResourceForeground":"#5e81ac","gitDecoration.submoduleResourceForeground":"#8fbcbb","gitDecoration.stageDeletedResourceForeground":"#bf616a","gitDecoration.stageModifiedResourceForeground":"#ebcb8b","input.background":"#3b4252","input.foreground":"#d8dee9","input.placeholderForeground":"#d8dee999","input.border":"#3b4252","inputOption.activeBackground":"#5e81ac","inputOption.activeBorder":"#5e81ac","inputOption.activeForeground":"#eceff4","inputValidation.errorBackground":"#bf616a","inputValidation.errorBorder":"#bf616a","inputValidation.infoBackground":"#81a1c1","inputValidation.infoBorder":"#81a1c1","inputValidation.warningBackground":"#d08770","inputValidation.warningBorder":"#d08770","keybindingLabel.background":"#4c566a","keybindingLabel.border":"#4c566a","keybindingLabel.bottomBorder":"#4c566a","keybindingLabel.foreground":"#d8dee9","list.activeSelectionBackground":"#88c0d0","list.activeSelectionForeground":"#2e3440","list.inactiveSelectionBackground":"#434c5e","list.inactiveSelectionForeground":"#d8dee9","list.inactiveFocusBackground":"#434c5ecc","list.hoverForeground":"#eceff4","list.focusForeground":"#d8dee9","list.focusBackground":"#88c0d099","list.focusHighlightForeground":"#eceff4","list.hoverBackground":"#3b4252","list.dropBackground":"#88c0d099","list.highlightForeground":"#88c0d0","list.errorForeground":"#bf616a","list.warningForeground":"#ebcb8b","merge.currentHeaderBackground":"#81a1c166","merge.currentContentBackground":"#81a1c14d","merge.incomingHeaderBackground":"#8fbcbb66","merge.incomingContentBackground":"#8fbcbb4d","merge.border":"#3b425200","minimap.background":"#2e3440","minimap.errorHighlight":"#bf616acc","minimap.findMatchHighlight":"#88c0d0","minimap.selectionHighlight":"#88c0d0cc","minimap.warningHighlight":"#ebcb8bcc","minimapGutter.addedBackground":"#a3be8c","minimapGutter.deletedBackground":"#bf616a","minimapGutter.modifiedBackground":"#ebcb8b","minimapSlider.activeBackground":"#434c5eaa","minimapSlider.background":"#434c5e99","minimapSlider.hoverBackground":"#434c5eaa","notification.background":"#3b4252","notification.buttonBackground":"#434c5e","notification.buttonForeground":"#d8dee9","notification.buttonHoverBackground":"#4c566a","notification.errorBackground":"#bf616a","notification.errorForeground":"#2e3440","notification.foreground":"#d8dee9","notification.infoBackground":"#88c0d0","notification.infoForeground":"#2e3440","notification.warningBackground":"#ebcb8b","notification.warningForeground":"#2e3440","notificationCenter.border":"#3b425200","notificationCenterHeader.background":"#2e3440","notificationCenterHeader.foreground":"#88c0d0","notificationLink.foreground":"#88c0d0","notifications.background":"#3b4252","notifications.border":"#2e3440","notifications.foreground":"#d8dee9","notificationToast.border":"#3b425200","panel.background":"#2e3440","panel.border":"#3b4252","panelTitle.activeBorder":"#88c0d000","panelTitle.activeForeground":"#88c0d0","panelTitle.inactiveForeground":"#d8dee9","peekView.border":"#4c566a","peekViewEditor.background":"#2e3440","peekViewEditorGutter.background":"#2e3440","peekViewEditor.matchHighlightBackground":"#88c0d04d","peekViewResult.background":"#2e3440","peekViewResult.fileForeground":"#88c0d0","peekViewResult.lineForeground":"#d8dee966","peekViewResult.matchHighlightBackground":"#88c0d0cc","peekViewResult.selectionBackground":"#434c5e","peekViewResult.selectionForeground":"#d8dee9","peekViewTitle.background":"#3b4252","peekViewTitleDescription.foreground":"#d8dee9","peekViewTitleLabel.foreground":"#88c0d0","pickerGroup.border":"#3b4252","pickerGroup.foreground":"#88c0d0","progressBar.background":"#88c0d0","quickInputList.focusBackground":"#88c0d0","quickInputList.focusForeground":"#2e3440","sash.hoverBorder":"#88c0d0","scrollbar.shadow":"#00000066","scrollbarSlider.activeBackground":"#434c5eaa","scrollbarSlider.background":"#434c5e99","scrollbarSlider.hoverBackground":"#434c5eaa","selection.background":"#88c0d099","sideBar.background":"#2e3440","sideBar.foreground":"#d8dee9","sideBar.border":"#3b4252","sideBarSectionHeader.background":"#3b4252","sideBarSectionHeader.foreground":"#d8dee9","sideBarTitle.foreground":"#d8dee9","statusBar.background":"#3b4252","statusBar.debuggingBackground":"#5e81ac","statusBar.debuggingForeground":"#d8dee9","statusBar.noFolderForeground":"#d8dee9","statusBar.noFolderBackground":"#3b4252","statusBar.foreground":"#d8dee9","statusBarItem.activeBackground":"#4c566a","statusBarItem.hoverBackground":"#434c5e","statusBarItem.prominentBackground":"#3b4252","statusBarItem.prominentHoverBackground":"#434c5e","statusBarItem.errorBackground":"#3b4252","statusBarItem.errorForeground":"#bf616a","statusBarItem.warningBackground":"#ebcb8b","statusBarItem.warningForeground":"#2e3440","statusBar.border":"#3b425200","tab.activeBackground":"#3b4252","tab.activeForeground":"#d8dee9","tab.border":"#3b425200","tab.activeBorder":"#88c0d000","tab.unfocusedActiveBorder":"#88c0d000","tab.inactiveBackground":"#2e3440","tab.inactiveForeground":"#d8dee966","tab.unfocusedActiveForeground":"#d8dee999","tab.unfocusedInactiveForeground":"#d8dee966","tab.hoverBackground":"#3b4252cc","tab.unfocusedHoverBackground":"#3b4252b3","tab.hoverBorder":"#88c0d000","tab.unfocusedHoverBorder":"#88c0d000","tab.activeBorderTop":"#88c0d000","tab.unfocusedActiveBorderTop":"#88c0d000","tab.lastPinnedBorder":"#4c566a","terminal.background":"#2e3440","terminal.foreground":"#d8dee9","terminal.ansiBlack":"#3b4252","terminal.ansiRed":"#bf616a","terminal.ansiGreen":"#a3be8c","terminal.ansiYellow":"#ebcb8b","terminal.ansiBlue":"#81a1c1","terminal.ansiMagenta":"#b48ead","terminal.ansiCyan":"#88c0d0","terminal.ansiWhite":"#e5e9f0","terminal.ansiBrightBlack":"#4c566a","terminal.ansiBrightRed":"#bf616a","terminal.ansiBrightGreen":"#a3be8c","terminal.ansiBrightYellow":"#ebcb8b","terminal.ansiBrightBlue":"#81a1c1","terminal.ansiBrightMagenta":"#b48ead","terminal.ansiBrightCyan":"#8fbcbb","terminal.ansiBrightWhite":"#eceff4","terminal.tab.activeBorder":"#88c0d0","textBlockQuote.background":"#3b4252","textBlockQuote.border":"#81a1c1","textCodeBlock.background":"#4c566a","textLink.activeForeground":"#88c0d0","textLink.foreground":"#88c0d0","textPreformat.foreground":"#8fbcbb","textSeparator.foreground":"#eceff4","titleBar.activeBackground":"#2e3440","titleBar.activeForeground":"#d8dee9","titleBar.border":"#2e344000","titleBar.inactiveBackground":"#2e3440","titleBar.inactiveForeground":"#d8dee966","tree.indentGuidesStroke":"#616e88","walkThrough.embeddedEditorBackground":"#2e3440","welcomePage.buttonBackground":"#434c5e","welcomePage.buttonHoverBackground":"#4c566a","widget.shadow":"#00000066"},tokenColors:[{settings:{foreground:"#d8dee9ff",background:"#2e3440ff"}},{scope:"emphasis",settings:{fontStyle:"italic"}},{scope:"strong",settings:{fontStyle:"bold"}},{name:"Comment",scope:"comment",settings:{foreground:"#616E88"}},{name:"Constant Character",scope:"constant.character",settings:{foreground:"#EBCB8B"}},{name:"Constant Character Escape",scope:"constant.character.escape",settings:{foreground:"#EBCB8B"}},{name:"Constant Language",scope:"constant.language",settings:{foreground:"#81A1C1"}},{name:"Constant Numeric",scope:"constant.numeric",settings:{foreground:"#B48EAD"}},{name:"Constant Regexp",scope:"constant.regexp",settings:{foreground:"#EBCB8B"}},{name:"Entity Name Class/Type",scope:["entity.name.class","entity.name.type.class"],settings:{foreground:"#8FBCBB"}},{name:"Entity Name Function",scope:"entity.name.function",settings:{foreground:"#88C0D0"}},{name:"Entity Name Tag",scope:"entity.name.tag",settings:{foreground:"#81A1C1"}},{name:"Entity Other Attribute Name",scope:"entity.other.attribute-name",settings:{foreground:"#8FBCBB"}},{name:"Entity Other Inherited Class",scope:"entity.other.inherited-class",settings:{fontStyle:"bold",foreground:"#8FBCBB"}},{name:"Invalid Deprecated",scope:"invalid.deprecated",settings:{foreground:"#D8DEE9",background:"#EBCB8B"}},{name:"Invalid Illegal",scope:"invalid.illegal",settings:{foreground:"#D8DEE9",background:"#BF616A"}},{name:"Keyword",scope:"keyword",settings:{foreground:"#81A1C1"}},{name:"Keyword Operator",scope:"keyword.operator",settings:{foreground:"#81A1C1"}},{name:"Keyword Other New",scope:"keyword.other.new",settings:{foreground:"#81A1C1"}},{name:"Markup Bold",scope:"markup.bold",settings:{fontStyle:"bold"}},{name:"Markup Changed",scope:"markup.changed",settings:{foreground:"#EBCB8B"}},{name:"Markup Deleted",scope:"markup.deleted",settings:{foreground:"#BF616A"}},{name:"Markup Inserted",scope:"markup.inserted",settings:{foreground:"#A3BE8C"}},{name:"Meta Preprocessor",scope:"meta.preprocessor",settings:{foreground:"#5E81AC"}},{name:"Punctuation",scope:"punctuation",settings:{foreground:"#ECEFF4"}},{name:"Punctuation Definition Parameters",scope:["punctuation.definition.method-parameters","punctuation.definition.function-parameters","punctuation.definition.parameters"],settings:{foreground:"#ECEFF4"}},{name:"Punctuation Definition Tag",scope:"punctuation.definition.tag",settings:{foreground:"#81A1C1"}},{name:"Punctuation Definition Comment",scope:["punctuation.definition.comment","punctuation.end.definition.comment","punctuation.start.definition.comment"],settings:{foreground:"#616E88"}},{name:"Punctuation Section",scope:"punctuation.section",settings:{foreground:"#ECEFF4"}},{name:"Punctuation Section Embedded",scope:["punctuation.section.embedded.begin","punctuation.section.embedded.end"],settings:{foreground:"#81A1C1"}},{name:"Punctuation Terminator",scope:"punctuation.terminator",settings:{foreground:"#81A1C1"}},{name:"Punctuation Variable",scope:"punctuation.definition.variable",settings:{foreground:"#81A1C1"}},{name:"Storage",scope:"storage",settings:{foreground:"#81A1C1"}},{name:"String",scope:"string",settings:{foreground:"#A3BE8C"}},{name:"String Regexp",scope:"string.regexp",settings:{foreground:"#EBCB8B"}},{name:"Support Class",scope:"support.class",settings:{foreground:"#8FBCBB"}},{name:"Support Constant",scope:"support.constant",settings:{foreground:"#81A1C1"}},{name:"Support Function",scope:"support.function",settings:{foreground:"#88C0D0"}},{name:"Support Function Construct",scope:"support.function.construct",settings:{foreground:"#81A1C1"}},{name:"Support Type",scope:"support.type",settings:{foreground:"#8FBCBB"}},{name:"Support Type Exception",scope:"support.type.exception",settings:{foreground:"#8FBCBB"}},{name:"Token Debug",scope:"token.debug-token",settings:{foreground:"#b48ead"}},{name:"Token Error",scope:"token.error-token",settings:{foreground:"#bf616a"}},{name:"Token Info",scope:"token.info-token",settings:{foreground:"#88c0d0"}},{name:"Token Warning",scope:"token.warn-token",settings:{foreground:"#ebcb8b"}},{name:"Variable",scope:"variable.other",settings:{foreground:"#D8DEE9"}},{name:"Variable Language",scope:"variable.language",settings:{foreground:"#81A1C1"}},{name:"Variable Parameter",scope:"variable.parameter",settings:{foreground:"#D8DEE9"}},{name:"[C/CPP] Punctuation Separator Pointer-Access",scope:"punctuation.separator.pointer-access.c",settings:{foreground:"#81A1C1"}},{name:"[C/CPP] Meta Preprocessor Include",scope:["source.c meta.preprocessor.include","source.c string.quoted.other.lt-gt.include"],settings:{foreground:"#8FBCBB"}},{name:"[C/CPP] Conditional Directive",scope:["source.cpp keyword.control.directive.conditional","source.cpp punctuation.definition.directive","source.c keyword.control.directive.conditional","source.c punctuation.definition.directive"],settings:{foreground:"#5E81AC",fontStyle:"bold"}},{name:"[CSS] Constant Other Color RGB Value",scope:"source.css constant.other.color.rgb-value",settings:{foreground:"#B48EAD"}},{name:"[CSS](Function) Meta Property-Value",scope:"source.css meta.property-value",settings:{foreground:"#88C0D0"}},{name:"[CSS] Media Queries",scope:["source.css keyword.control.at-rule.media","source.css keyword.control.at-rule.media punctuation.definition.keyword"],settings:{foreground:"#D08770"}},{name:"[CSS] Punctuation Definition Keyword",scope:"source.css punctuation.definition.keyword",settings:{foreground:"#81A1C1"}},{name:"[CSS] Support Type Property Name",scope:"source.css support.type.property-name",settings:{foreground:"#D8DEE9"}},{name:"[diff] Meta Range Context",scope:"source.diff meta.diff.range.context",settings:{foreground:"#8FBCBB"}},{name:"[diff] Meta Header From-File",scope:"source.diff meta.diff.header.from-file",settings:{foreground:"#8FBCBB"}},{name:"[diff] Punctuation Definition From-File",scope:"source.diff punctuation.definition.from-file",settings:{foreground:"#8FBCBB"}},{name:"[diff] Punctuation Definition Range",scope:"source.diff punctuation.definition.range",settings:{foreground:"#8FBCBB"}},{name:"[diff] Punctuation Definition Separator",scope:"source.diff punctuation.definition.separator",settings:{foreground:"#81A1C1"}},{name:"[Elixir](JakeBecker.elixir-ls) module names",scope:"entity.name.type.module.elixir",settings:{foreground:"#8FBCBB"}},{name:"[Elixir](JakeBecker.elixir-ls) module attributes",scope:"variable.other.readwrite.module.elixir",settings:{foreground:"#D8DEE9",fontStyle:"bold"}},{name:"[Elixir](JakeBecker.elixir-ls) atoms",scope:"constant.other.symbol.elixir",settings:{foreground:"#D8DEE9",fontStyle:"bold"}},{name:"[Elixir](JakeBecker.elixir-ls) modules",scope:"variable.other.constant.elixir",settings:{foreground:"#8FBCBB"}},{name:"[Go] String Format Placeholder",scope:"source.go constant.other.placeholder.go",settings:{foreground:"#EBCB8B"}},{name:"[Java](JavaDoc) Comment Block Documentation HTML Entities",scope:"source.java comment.block.documentation.javadoc punctuation.definition.entity.html",settings:{foreground:"#81A1C1"}},{name:"[Java](JavaDoc) Constant Other",scope:"source.java constant.other",settings:{foreground:"#D8DEE9"}},{name:"[Java](JavaDoc) Keyword Other Documentation",scope:"source.java keyword.other.documentation",settings:{foreground:"#8FBCBB"}},{name:"[Java](JavaDoc) Keyword Other Documentation Author",scope:"source.java keyword.other.documentation.author.javadoc",settings:{foreground:"#8FBCBB"}},{name:"[Java](JavaDoc) Keyword Other Documentation Directive/Custom",scope:["source.java keyword.other.documentation.directive","source.java keyword.other.documentation.custom"],settings:{foreground:"#8FBCBB"}},{name:"[Java](JavaDoc) Keyword Other Documentation See",scope:"source.java keyword.other.documentation.see.javadoc",settings:{foreground:"#8FBCBB"}},{name:"[Java] Meta Method-Call",scope:"source.java meta.method-call meta.method",settings:{foreground:"#88C0D0"}},{name:"[Java](JavaDoc) Meta Tag Template Link",scope:["source.java meta.tag.template.link.javadoc","source.java string.other.link.title.javadoc"],settings:{foreground:"#8FBCBB"}},{name:"[Java](JavaDoc) Meta Tag Template Value",scope:"source.java meta.tag.template.value.javadoc",settings:{foreground:"#88C0D0"}},{name:"[Java](JavaDoc) Punctuation Definition Keyword",scope:"source.java punctuation.definition.keyword.javadoc",settings:{foreground:"#8FBCBB"}},{name:"[Java](JavaDoc) Punctuation Definition Tag",scope:["source.java punctuation.definition.tag.begin.javadoc","source.java punctuation.definition.tag.end.javadoc"],settings:{foreground:"#616E88"}},{name:"[Java] Storage Modifier Import",scope:"source.java storage.modifier.import",settings:{foreground:"#8FBCBB"}},{name:"[Java] Storage Modifier Package",scope:"source.java storage.modifier.package",settings:{foreground:"#8FBCBB"}},{name:"[Java] Storage Type",scope:"source.java storage.type",settings:{foreground:"#8FBCBB"}},{name:"[Java] Storage Type Annotation",scope:"source.java storage.type.annotation",settings:{foreground:"#D08770"}},{name:"[Java] Storage Type Generic",scope:"source.java storage.type.generic",settings:{foreground:"#8FBCBB"}},{name:"[Java] Storage Type Primitive",scope:"source.java storage.type.primitive",settings:{foreground:"#81A1C1"}},{name:"[JavaScript] Decorator",scope:["source.js punctuation.decorator","source.js meta.decorator variable.other.readwrite","source.js meta.decorator entity.name.function"],settings:{foreground:"#D08770"}},{name:"[JavaScript] Meta Object-Literal Key",scope:"source.js meta.object-literal.key",settings:{foreground:"#88C0D0"}},{name:"[JavaScript](JSDoc) Storage Type Class",scope:"source.js storage.type.class.jsdoc",settings:{foreground:"#8FBCBB"}},{name:"[JavaScript] String Template Literals Punctuation",scope:["source.js string.quoted.template punctuation.quasi.element.begin","source.js string.quoted.template punctuation.quasi.element.end","source.js string.template punctuation.definition.template-expression"],settings:{foreground:"#81A1C1"}},{name:"[JavaScript] Interpolated String Template Punctuation Functions",scope:"source.js string.quoted.template meta.method-call.with-arguments",settings:{foreground:"#ECEFF4"}},{name:"[JavaScript] String Template Literal Variable",scope:["source.js string.template meta.template.expression support.variable.property","source.js string.template meta.template.expression variable.other.object"],settings:{foreground:"#D8DEE9"}},{name:"[JavaScript] Support Type Primitive",scope:"source.js support.type.primitive",settings:{foreground:"#81A1C1"}},{name:"[JavaScript] Variable Other Object",scope:"source.js variable.other.object",settings:{foreground:"#D8DEE9"}},{name:"[JavaScript] Variable Other Read-Write Alias",scope:"source.js variable.other.readwrite.alias",settings:{foreground:"#8FBCBB"}},{name:"[JavaScript] Parentheses in Template Strings",scope:["source.js meta.embedded.line meta.brace.square","source.js meta.embedded.line meta.brace.round","source.js string.quoted.template meta.brace.square","source.js string.quoted.template meta.brace.round"],settings:{foreground:"#ECEFF4"}},{name:"[HTML] Constant Character Entity",scope:"text.html.basic constant.character.entity.html",settings:{foreground:"#EBCB8B"}},{name:"[HTML] Constant Other Inline-Data",scope:"text.html.basic constant.other.inline-data",settings:{foreground:"#D08770",fontStyle:"italic"}},{name:"[HTML] Meta Tag SGML Doctype",scope:"text.html.basic meta.tag.sgml.doctype",settings:{foreground:"#5E81AC"}},{name:"[HTML] Punctuation Definition Entity",scope:"text.html.basic punctuation.definition.entity",settings:{foreground:"#81A1C1"}},{name:"[INI] Entity Name Section Group-Title",scope:"source.properties entity.name.section.group-title.ini",settings:{foreground:"#88C0D0"}},{name:"[INI] Punctuation Separator Key-Value",scope:"source.properties punctuation.separator.key-value.ini",settings:{foreground:"#81A1C1"}},{name:"[Markdown] Markup Fenced Code Block",scope:["text.html.markdown markup.fenced_code.block","text.html.markdown markup.fenced_code.block punctuation.definition"],settings:{foreground:"#8FBCBB"}},{name:"[Markdown] Markup Heading",scope:"markup.heading",settings:{foreground:"#88C0D0"}},{name:"[Markdown] Markup Inline",scope:["text.html.markdown markup.inline.raw","text.html.markdown markup.inline.raw punctuation.definition.raw"],settings:{foreground:"#8FBCBB"}},{name:"[Markdown] Markup Italic",scope:"text.html.markdown markup.italic",settings:{fontStyle:"italic"}},{name:"[Markdown] Markup Link",scope:"text.html.markdown markup.underline.link",settings:{fontStyle:"underline"}},{name:"[Markdown] Markup List Numbered/Unnumbered",scope:"text.html.markdown beginning.punctuation.definition.list",settings:{foreground:"#81A1C1"}},{name:"[Markdown] Markup Quote Punctuation Definition",scope:"text.html.markdown beginning.punctuation.definition.quote",settings:{foreground:"#8FBCBB"}},{name:"[Markdown] Markup Quote Punctuation Definition",scope:"text.html.markdown markup.quote",settings:{foreground:"#616E88"}},{name:"[Markdown] Markup Math Constant",scope:"text.html.markdown constant.character.math.tex",settings:{foreground:"#81A1C1"}},{name:"[Markdown] Markup Math Definition Marker",scope:["text.html.markdown punctuation.definition.math.begin","text.html.markdown punctuation.definition.math.end"],settings:{foreground:"#5E81AC"}},{name:"[Markdown] Markup Math Function Definition Marker",scope:"text.html.markdown punctuation.definition.function.math.tex",settings:{foreground:"#88C0D0"}},{name:"[Markdown] Markup Math Operator",scope:"text.html.markdown punctuation.math.operator.latex",settings:{foreground:"#81A1C1"}},{name:"[Markdown] Punctuation Definition Heading",scope:"text.html.markdown punctuation.definition.heading",settings:{foreground:"#81A1C1"}},{name:"[Markdown] Punctuation Definition Constant/String",scope:["text.html.markdown punctuation.definition.constant","text.html.markdown punctuation.definition.string"],settings:{foreground:"#81A1C1"}},{name:"[Markdown] String Other Link Description/Title",scope:["text.html.markdown constant.other.reference.link","text.html.markdown string.other.link.description","text.html.markdown string.other.link.title"],settings:{foreground:"#88C0D0"}},{name:"[Perl] Perl Sigils",scope:"source.perl punctuation.definition.variable",settings:{foreground:"#D8DEE9"}},{name:"[PHP] Meta Function-Call Object",scope:["source.php meta.function-call","source.php meta.function-call.object"],settings:{foreground:"#88C0D0"}},{name:"[Python] Decorator",scope:["source.python entity.name.function.decorator","source.python meta.function.decorator support.type"],settings:{foreground:"#D08770"}},{name:"[Python] Function Call",scope:"source.python meta.function-call.generic",settings:{foreground:"#88C0D0"}},{name:"[Python] Support Type",scope:"source.python support.type",settings:{foreground:"#88C0D0"}},{name:"[Python] Function Parameter",scope:["source.python variable.parameter.function.language"],settings:{foreground:"#D8DEE9"}},{name:"[Python] Function Parameter Special",scope:["source.python meta.function.parameters variable.parameter.function.language.special.self"],settings:{foreground:"#81A1C1"}},{name:"[Rust] Entity types",scope:"source.rust entity.name.type",settings:{foreground:"#8FBCBB"}},{name:"[Rust] Macro",scope:"source.rust meta.macro entity.name.function",settings:{fontStyle:"bold",foreground:"#88C0D0"}},{name:"[Rust] Attributes",scope:["source.rust meta.attribute","source.rust meta.attribute punctuation","source.rust meta.attribute keyword.operator"],settings:{foreground:"#5E81AC"}},{name:"[Rust] Traits",scope:"source.rust entity.name.type.trait",settings:{fontStyle:"bold"}},{name:"[Rust] Interpolation Bracket Curly",scope:"source.rust punctuation.definition.interpolation",settings:{foreground:"#EBCB8B"}},{name:"[SCSS] Punctuation Definition Interpolation Bracket Curly",scope:["source.css.scss punctuation.definition.interpolation.begin.bracket.curly","source.css.scss punctuation.definition.interpolation.end.bracket.curly"],settings:{foreground:"#81A1C1"}},{name:"[SCSS] Variable Interpolation",scope:"source.css.scss variable.interpolation",settings:{foreground:"#D8DEE9",fontStyle:"italic"}},{name:"[TypeScript] Decorators",scope:["source.ts punctuation.decorator","source.ts meta.decorator variable.other.readwrite","source.ts meta.decorator entity.name.function","source.tsx punctuation.decorator","source.tsx meta.decorator variable.other.readwrite","source.tsx meta.decorator entity.name.function"],settings:{foreground:"#D08770"}},{name:"[TypeScript] Object-literal keys",scope:["source.ts meta.object-literal.key","source.tsx meta.object-literal.key"],settings:{foreground:"#D8DEE9"}},{name:"[TypeScript] Object-literal functions",scope:["source.ts meta.object-literal.key entity.name.function","source.tsx meta.object-literal.key entity.name.function"],settings:{foreground:"#88C0D0"}},{name:"[TypeScript] Type/Class",scope:["source.ts support.class","source.ts support.type","source.ts entity.name.type","source.ts entity.name.class","source.tsx support.class","source.tsx support.type","source.tsx entity.name.type","source.tsx entity.name.class"],settings:{foreground:"#8FBCBB"}},{name:"[TypeScript] Static Class Support",scope:["source.ts support.constant.math","source.ts support.constant.dom","source.ts support.constant.json","source.tsx support.constant.math","source.tsx support.constant.dom","source.tsx support.constant.json"],settings:{foreground:"#8FBCBB"}},{name:"[TypeScript] Variables",scope:["source.ts support.variable","source.tsx support.variable"],settings:{foreground:"#D8DEE9"}},{name:"[TypeScript] Parentheses in Template Strings",scope:["source.ts meta.embedded.line meta.brace.square","source.ts meta.embedded.line meta.brace.round","source.tsx meta.embedded.line meta.brace.square","source.tsx meta.embedded.line meta.brace.round"],settings:{foreground:"#ECEFF4"}},{name:"[XML] Entity Name Tag Namespace",scope:"text.xml entity.name.tag.namespace",settings:{foreground:"#8FBCBB"}},{name:"[XML] Keyword Other Doctype",scope:"text.xml keyword.other.doctype",settings:{foreground:"#5E81AC"}},{name:"[XML] Meta Tag Preprocessor",scope:"text.xml meta.tag.preprocessor entity.name.tag",settings:{foreground:"#5E81AC"}},{name:"[XML] Entity Name Tag Namespace",scope:["text.xml string.unquoted.cdata","text.xml string.unquoted.cdata punctuation.definition.string"],settings:{foreground:"#D08770",fontStyle:"italic"}},{name:"[YAML] Entity Name Tag",scope:"source.yaml entity.name.tag",settings:{foreground:"#8FBCBB"}}]},autoImport:!0,showCopyButton:!0,skipLanguages:[],filepath:"/Users/bytedance/github/targeral/modern-js/packages/document/module-doc/docs/en/api/config/build-config.md"};function i(o){var e=Object.assign({h1:"h1",a:"a",p:"p",code:"code",ul:"ul",li:"li",strong:"strong",div:"div",h2:"h2",ol:"ol",h3:"h3"},(0,r.useMDXComponents)(),o.components);return!l&&d("CH",!1),!l.Code&&d("CH.Code",!0),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(e.h1,{id:"buildconfig",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#buildconfig",children:"#"}),"buildConfig"]}),"\n",(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.code,{children:"buildConfig"})," is a configuration option that describes how to compile and generate build artifacts. It contains all the configurations related to the build process."]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"object | object[]"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"undefined"})]}),"\n"]}),"\n",(0,s.jsxs)(e.div,{className:"modern-directive tip",children:[(0,s.jsx)(e.div,{className:"modern-directive-title",children:"TIP"}),(0,s.jsxs)(e.div,{className:"modern-directive-content",children:[(0,s.jsxs)(e.p,{children:["\nBefore start using ",(0,s.jsx)(e.code,{children:"buildConfig"}),", please read the following documentation to understand its purpose:"]}),(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsx)(e.li,{children:(0,s.jsx)(e.a,{href:"/module-tools/en/guide/basic/modify-output-product.html",children:"Modifying Output Artifacts"})}),"\n",(0,s.jsx)(e.li,{children:(0,s.jsx)(e.a,{href:"/module-tools/en/guide/advance/in-depth-about-build.html",children:"In-Depth Understanding of the Build Process"})}),"\n"]})]})]}),"\n",(0,s.jsxs)(e.h2,{id:"alias",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#alias",children:"#"}),"alias"]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"Record<string, string> | Function"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"{'@': 'src',}"})]}),"\n"]}),"\n",(0,s.jsxs)(e.div,{className:"modern-directive tip",children:[(0,s.jsx)(e.div,{className:"modern-directive-title",children:"TIP"}),(0,s.jsx)(e.div,{className:"modern-directive-content",children:(0,s.jsxs)(e.p,{children:["\nFor TypeScript projects, you only need to configure ",(0,s.jsx)(e.a,{href:"https://www.typescriptlang.org/tsconfig#paths",target:"_blank",rel:"noopener noreferrer",children:"compilerOptions.paths"})," in ",(0,s.jsx)(e.code,{children:"tsconfig.json"}),", Module Tools will automatically recognize the alias in ",(0,s.jsx)(e.code,{children:"tsconfig.json"}),", so there is no need to configure the ",(0,s.jsx)(e.code,{children:"alias"}),"field additionally."]})})]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"alias",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"@common",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:". /src/common",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.p,{children:["After the above configuration is done, if ",(0,s.jsx)(e.code,{children:"@common/Foo.tsx"})," is referenced in the code, it will map to the ",(0,s.jsx)(e.code,{children:"<root>/src/common/Foo.tsx"})," path."]}),"\n",(0,s.jsxs)(e.p,{children:["When the value of ",(0,s.jsx)(e.code,{children:"alias"})," is defined as a function, you can accept the pre-defined alias object and modify it."]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"alias",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"alias",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"alias",props:{style:{color:"#D8DEE9"}}},{content:"[",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"@common",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"] ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:". /src/common",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsx)(e.p,{children:"It is also possible to return a new object as the final result in the function, which will override the pre-defined alias object."}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"alias",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"alias",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"@common",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:". /src/common",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.h2,{id:"asset",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#asset",children:"#"}),"asset"]}),"\n",(0,s.jsx)(e.p,{children:"Contains configuration related to static assets."}),"\n",(0,s.jsxs)(e.h2,{id:"assetpath",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#assetpath",children:"#"}),"asset.path"]}),"\n",(0,s.jsxs)(e.p,{children:["Static resource output path, will be based on ",(0,s.jsx)(e.a,{href:"/module-tools/en/api/config/build-config.html#outDir",children:"outDir"})]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"string"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"assets"})]}),"\n"]}),"\n",(0,s.jsxs)(e.h2,{id:"assetlimit",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#assetlimit",children:"#"}),"asset.limit"]}),"\n",(0,s.jsx)(e.p,{children:"Used to set the threshold for static assets to be automatically inlined as base64."}),"\n",(0,s.jsx)(e.p,{children:"By default, Module Tools will inline assets such as images, fonts and media smaller than 10KB during bundling. They are Base64 encoded and inlined in the bundles, eliminating the need for separate HTTP requests."}),"\n",(0,s.jsxs)(e.p,{children:["You can adjust this threshold by modifying the ",(0,s.jsx)(e.code,{children:"limit"})," config."]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"number"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"10 * 1024"})]}),"\n"]}),"\n",(0,s.jsxs)(e.p,{children:["For example, set ",(0,s.jsx)(e.code,{children:"limit"})," to ",(0,s.jsx)(e.code,{children:"0"})," to avoid assets inlining:"]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"defineConfig",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"asset",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"limit",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"0",props:{style:{color:"#B48EAD"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.h2,{id:"assetpublicpath",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#assetpublicpath",children:"#"}),"asset.publicPath"]}),"\n",(0,s.jsx)(e.p,{children:"The CDN prefix given to unlinked resources when packaging"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"string"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"undefined"})]}),"\n"]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"asset",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"publicPath",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"https://xxx/",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.p,{children:["At this point, all static resources will be prefixed with ",(0,s.jsx)(e.code,{children:"https://xxx/"})]}),"\n",(0,s.jsxs)(e.h2,{id:"assetsvgr",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#assetsvgr",children:"#"}),"asset.svgr"]}),"\n",(0,s.jsxs)(e.p,{children:["Packaged to handle svg as a React component, options reference ",(0,s.jsx)(e.a,{href:"https://react-svgr.com/docs/options/",target:"_blank",rel:"noopener noreferrer",children:"svgr"}),", plus support for two configuration items ",(0,s.jsx)(e.code,{children:"include"})," and ",(0,s.jsx)(e.code,{children:"exclude"})," to match the svg file to be handled"]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"boolean | object"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"false"})]}),"\n"]}),"\n",(0,s.jsx)(e.p,{children:"When svgr feature is enabled, you can use svg as a component using the default export."}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["index.ts"],active:"index.ts",heightRatio:1},files:[{name:"index.ts",focus:"",code:{lines:[{tokens:[{content:"// true",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"Logo",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"from",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"./logo.svg",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"<",props:{style:{color:"#81A1C1"}}},{content:"Logo",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"/>;",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.div,{className:"modern-directive warning",children:[(0,s.jsx)(e.div,{className:"modern-directive-title",children:"WARNING"}),(0,s.jsxs)(e.div,{className:"modern-directive-content",children:[(0,s.jsx)(e.p,{children:"\nThe following usage is not currently supported:"}),(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["index.ts"],active:"index.ts",heightRatio:1},files:[{name:"index.ts",focus:"",code:{lines:[{tokens:[{content:"import",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"ReactComponent",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"from",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"./logo.svg",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]})]})]}),"\n",(0,s.jsxs)(e.p,{children:["When enabled, the type of svg used can be modified by adding a type definition to the ",(0,s.jsx)(e.code,{children:"modern-app-env.d.ts"})," file:"]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern-app-env.d.ts"],active:"modern-app-env.d.ts",heightRatio:1},files:[{name:"modern-app-env.d.ts",focus:"1:3",code:{lines:[{tokens:[{content:"declare",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"module",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"*.svg",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"const",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"src",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"React",props:{style:{color:"#8FBCBB"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"FunctionComponent",props:{style:{color:"#8FBCBB"}}},{content:"<",props:{style:{color:"#ECEFF4"}}},{content:"React",props:{style:{color:"#8FBCBB"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"SVGProps",props:{style:{color:"#8FBCBB"}}},{content:"<",props:{style:{color:"#ECEFF4"}}},{content:"SVGSVGElement",props:{style:{color:"#8FBCBB"}}},{content:">>",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"src",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[]},{tokens:[{content:"/// ",props:{style:{color:"#616E88"}}},{content:"<reference",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#616E88"}}},{content:"types",props:{style:{color:"#8FBCBB"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"@modern-js/module-tools/types",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#616E88"}}},{content:"/>",props:{style:{color:"#81A1C1"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,s.jsxs)(e.h2,{id:"assetsvgrinclude",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#assetsvgrinclude",children:"#"}),"asset.svgr.include"]}),"\n",(0,s.jsx)(e.p,{children:"Set the matching svg file"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"string | RegExp | (string | RegExp)[]"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"/\\.svg$/"})]}),"\n"]}),"\n",(0,s.jsxs)(e.h2,{id:"assetsvgrexclude",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#assetsvgrexclude",children:"#"}),"asset.svgr.exclude"]}),"\n",(0,s.jsx)(e.p,{children:"Set unmatched svg files"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"string | RegExp | (string | RegExp)[]"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"undefined"})]}),"\n"]}),"\n",(0,s.jsxs)(e.h2,{id:"autoexternal",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#autoexternal",children:"#"}),"autoExternal"]}),"\n",(0,s.jsx)(e.p,{children:"Automatically externalize project dependencies and peerDependencies and not package them into the final bundle"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"boolean | object"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"true"})]}),"\n"]}),"\n",(0,s.jsx)(e.p,{children:"When we want to turn off the default handling behavior for third-party dependencies, we can do so by:"}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"defineConfig",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"autoExternal",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"false",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.p,{children:["This way the dependencies under ",(0,s.jsx)(e.code,{children:'"dependencies"'})," and ",(0,s.jsx)(e.code,{children:'"peerDependencies"'})," will be packaged. If you want to turn off the processing of only one of these dependencies, you can use the\n",(0,s.jsx)(e.code,{children:"buildConfig.autoExternal"})," in the form of an object."]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"defineConfig",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"autoExternal",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"dependencies",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"false",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"peerDependencies",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"false",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.h2,{id:"autoexternaldependencies",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#autoexternaldependencies",children:"#"}),"autoExternal.dependencies"]}),"\n",(0,s.jsx)(e.p,{children:"Whether or not the dep dependencies of the external project are needed"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"boolean"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"true"})]}),"\n"]}),"\n",(0,s.jsxs)(e.h2,{id:"autoexternalpeerdependencies",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#autoexternalpeerdependencies",children:"#"}),"autoExternal.peerDependencies"]}),"\n",(0,s.jsx)(e.p,{children:"Whether to require peerDep dependencies for external projects"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"boolean"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"true"})]}),"\n"]}),"\n",(0,s.jsxs)(e.h2,{id:"buildtype",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#buildtype",children:"#"}),"buildType"]}),"\n",(0,s.jsxs)(e.p,{children:["The build type, ",(0,s.jsx)(e.code,{children:"bundle"})," will package your code, ",(0,s.jsx)(e.code,{children:"bundleless"})," will only do the code conversion"]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"'bundle' | 'bundleless'"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"bundle"})]}),"\n"]}),"\n",(0,s.jsxs)(e.h2,{id:"copy",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#copy",children:"#"}),"copy"]}),"\n",(0,s.jsx)(e.p,{children:"Copies the specified file or directory into the build output directory"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"object[]"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"[]"})]}),"\n"]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"copy",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" [",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"from",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:". /src/assets",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"to",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"''",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.p,{children:["Reference for array settings: ",(0,s.jsx)(e.a,{href:"https://github.com/webpack-contrib/copy-webpack-plugin#patterns",target:"_blank",rel:"noopener noreferrer",children:"copy-webpack-plugin patterns"})]}),"\n",(0,s.jsxs)(e.h2,{id:"copypatterns",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#copypatterns",children:"#"}),"copy.patterns"]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"CopyPattern[]"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"[]"})]}),"\n"]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"interface",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"CopyPattern",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" from",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"string",props:{style:{color:"#8FBCBB"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" to",props:{style:{color:"#D8DEE9FF"}}},{content:"?:",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"string",props:{style:{color:"#8FBCBB"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" context",props:{style:{color:"#D8DEE9FF"}}},{content:"?:",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"string",props:{style:{color:"#8FBCBB"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" globOptions",props:{style:{color:"#D8DEE9FF"}}},{content:"?:",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"globby",props:{style:{color:"#8FBCBB"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"GlobbyOptions",props:{style:{color:"#8FBCBB"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,s.jsxs)(e.h2,{id:"copyoptions",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#copyoptions",children:"#"}),"copy.options"]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),":"]}),"\n"]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"type",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"Options",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" concurrency",props:{style:{color:"#D8DEE9FF"}}},{content:"?:",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"number",props:{style:{color:"#8FBCBB"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" enableCopySync",props:{style:{color:"#D8DEE9FF"}}},{content:"?:",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"boolean",props:{style:{color:"#8FBCBB"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["\n",(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"{ concurrency: 100, enableCopySync: false }"})]}),"\n"]}),"\n",(0,s.jsxs)(e.li,{children:["\n",(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.code,{children:"concurrency"}),": Specifies how many copy tasks to execute in parallel."]}),"\n"]}),"\n",(0,s.jsxs)(e.li,{children:["\n",(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.code,{children:"enableCopySync"}),": Uses ",(0,s.jsx)(e.a,{href:"https://github.com/jprichardson/node-fs-extra/blob/master/lib/copy/copy-sync.js",target:"_blank",rel:"noopener noreferrer",children:(0,s.jsx)(e.code,{children:"fs.copySync"})})," by default, instead of ",(0,s.jsx)(e.a,{href:"https://github.com/jprichardson/node-fs-extra/blob/master/lib/copy/copy.js",target:"_blank",rel:"noopener noreferrer",children:(0,s.jsx)(e.code,{children:"fs.copy"})}),"."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(e.h2,{id:"define",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#define",children:"#"}),"define"]}),"\n",(0,s.jsx)(e.p,{children:"Define global variables that will be injected into the code"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"Record<string, string>"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"{}"})]}),"\n"]}),"\n",(0,s.jsxs)(e.p,{children:["Since the ",(0,s.jsx)(e.code,{children:"define"})," function is implemented by global text replacement, you need to ensure that the global variable values are strings. A safer approach is to convert the value of each global variable to a string, using ",(0,s.jsx)(e.code,{children:"JSON.stringify"}),", as follows."]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"define",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"VERSION",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"JSON",props:{style:{color:"#81A1C1"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"stringify",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"1.0",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.div,{className:"modern-directive tip",children:[(0,s.jsx)(e.div,{className:"modern-directive-title",children:"TIP"}),(0,s.jsxs)(e.div,{className:"modern-directive-content",children:[(0,s.jsx)(e.p,{children:"\nTo prevent excessive global replacement substitution, it is recommended that the following two principles be followed when using"}),(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsx)(e.li,{children:"Use upper case for global constants"}),"\n",(0,s.jsx)(e.li,{children:"Customize the prefix and suffix of global constants to ensure uniqueness"}),"\n"]})]})]}),"\n","\n",(0,s.jsxs)(e.h2,{id:"dts",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#dts",children:"#"}),"dts"]}),"\n",(0,s.jsx)(e.p,{children:"The dts file generates the relevant configuration, by default it generates."}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"false | object"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),":"]}),"\n"]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" abortOnError",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"true",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" distPath",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"./",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" only",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"false",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" tsconfigPath",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"./tsconfig.json",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.h2,{id:"dtsabortonerror",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#dtsabortonerror",children:"#"}),"dts.abortOnError"]}),"\n",(0,s.jsx)(e.p,{children:"Whether to allow the build to succeed if a type error occurs."}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"boolean"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"true"})]}),"\n"]}),"\n",(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.strong,{children:"By default, type errors will cause the build to fail"}),". When ",(0,s.jsx)(e.code,{children:"abortOnError"})," is set to ",(0,s.jsx)(e.code,{children:"false"}),", the build will still succeed even if there are type issues in the code:"]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"defineConfig",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"dts",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"abortOnError",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"false",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.div,{className:"modern-directive warning",children:[(0,s.jsx)(e.div,{className:"modern-directive-title",children:"WARNING"}),(0,s.jsx)(e.div,{className:"modern-directive-content",children:(0,s.jsxs)(e.p,{children:["\nWhen this configuration is disabled, there is no guarantee that the type files will be generated correctly. In ",(0,s.jsx)(e.code,{children:"buildType: 'bundle'"}),", which is the bundle mode, type files will not be generated."]})})]}),"\n",(0,s.jsxs)(e.h2,{id:"dtsdistpath",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#dtsdistpath",children:"#"}),"dts.distPath"]}),"\n",(0,s.jsxs)(e.p,{children:["The output path of the dts file, based on ",(0,s.jsx)(e.a,{href:"/module-tools/en/api/config/build-config.html#outDir",children:"outDir"})]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"string"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:". /types"})]}),"\n"]}),"\n",(0,s.jsxs)(e.h2,{id:"dtsonly",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#dtsonly",children:"#"}),"dts.only"]}),"\n",(0,s.jsx)(e.p,{children:"Generate only dts files, not js files"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"boolean"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"false"})]}),"\n"]}),"\n",(0,s.jsxs)(e.h2,{id:"dtsrespectexternal",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#dtsrespectexternal",children:"#"}),"dts.respectExternal"]}),"\n",(0,s.jsxs)(e.p,{children:["When set to ",(0,s.jsx)(e.code,{children:"false"}),", the type of third-party packages will be excluded from the bundle, when set to ",(0,s.jsx)(e.code,{children:"true"}),", it will determine whether third-party types need to be bundled based on ",(0,s.jsx)(e.a,{href:"#externals",children:"externals"}),"."]}),"\n",(0,s.jsx)(e.p,{children:"When bundle d.ts, export is not analyzed, so any third-party package type you use may break your build, which is obviously uncontrollable.\nSo we can avoid it with this configuration."}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"boolean"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"true"})]}),"\n"]}),"\n",(0,s.jsxs)(e.h2,{id:"dtstsconfigpath",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#dtstsconfigpath",children:"#"}),"dts.tsconfigPath"]}),"\n",(0,s.jsx)(e.p,{children:"Path to the tsconfig file"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"string"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:". /tsconfig.json"})]}),"\n"]}),"\n",(0,s.jsxs)(e.h2,{id:"esbuildoptions",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#esbuildoptions",children:"#"}),"esbuildOptions"]}),"\n",(0,s.jsxs)(e.p,{children:["Directly modify ",(0,s.jsx)(e.a,{href:"https://esbuild.github.io/api/",target:"_blank",rel:"noopener noreferrer",children:"esbuild configuration"})]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"Function"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"c => c"})]}),"\n"]}),"\n",(0,s.jsx)(e.p,{children:"For example, if we need to modify the file extension of the generated files:"}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"defineConfig",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"esbuildOptions",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"options",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"options",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"outExtension",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:".js",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:".mjs",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"options",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,s.jsxs)(e.div,{className:"modern-directive tip",children:[(0,s.jsx)(e.div,{className:"modern-directive-title",children:"TIP"}),(0,s.jsxs)(e.div,{className:"modern-directive-content",children:[(0,s.jsx)(e.p,{children:"\nWe have done many extensions based on the original esbuild build. Therefore, when using this configuration, pay attention to the following:"}),(0,s.jsxs)(e.ol,{children:["\n",(0,s.jsx)(e.li,{children:"Prefer to use the configuration we provide. For example, esbuild does not support target: 'es5', but we support this scenario internally using swc. Setting target: 'es5' through esbuildOptions will result in an error."}),"\n",(0,s.jsx)(e.li,{children:"Currently, we use enhanced-resolve internally to replace esbuild's resolve algorithm, so modifying esbuild resolve-related configurations is invalid. We plan to switch back in the future."}),"\n",(0,s.jsx)(e.li,{children:"When using esbuild plugins, you need to add the plugins to the beginning of the plugins array because we also intervene in the entire build process through an esbuild plugin internally. Therefore, custom plugins need to be registered first."}),"\n"]})]})]}),"\n",(0,s.jsxs)(e.h2,{id:"externalhelpers",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#externalhelpers",children:"#"}),"externalHelpers"]}),"\n",(0,s.jsx)(e.p,{children:"By default, the output JS code may depend on helper functions to support the target environment or output format, and these helper functions will be inlined in the file that requires it."}),"\n",(0,s.jsxs)(e.p,{children:["When using SWC Transform for code transformation, you can enable the ",(0,s.jsx)(e.code,{children:"externalHelpers"})," configuration to convert inline helper functions to import them from the external module ",(0,s.jsx)(e.code,{children:"@swc/helpers"}),"."]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"boolean"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"false"})]}),"\n"]}),"\n",(0,s.jsx)(e.p,{children:"Below is a comparison of the product changes before and after using this configuration."}),"\n",(0,s.jsx)(e.p,{children:"Before enable:"}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["./dist/index.js"],active:"./dist/index.js",heightRatio:1},files:[{name:"./dist/index.js",focus:"",code:{lines:[{tokens:[{content:"// helper function",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"function",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"asyncGeneratorStep",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"gen",props:{style:{color:"#D8DEE9"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"resolve",props:{style:{color:"#D8DEE9"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"reject",props:{style:{color:"#D8DEE9"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"_next",props:{style:{color:"#D8DEE9"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"_throw",props:{style:{color:"#D8DEE9"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"key",props:{style:{color:"#D8DEE9"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"arg",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#ECEFF4"}}},{content:"// ...",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"// helper function",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"function",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"_async_to_generator",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"fn",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"function",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#ECEFF4"}}},{content:"// use asyncGeneratorStep",props:{style:{color:"#616E88"}}}]},{tokens:[{content:" ",props:{style:{color:"#ECEFF4"}}},{content:"// ...",props:{style:{color:"#616E88"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[]},{tokens:[{content:"// your code",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"var",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"yourCode",props:{style:{color:"#88C0D0"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"function",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#ECEFF4"}}},{content:"// use _async_to_generator",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsx)(e.p,{children:"After enabled:"}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["./dist/index.js"],active:"./dist/index.js",heightRatio:1},files:[{name:"./dist/index.js",focus:"",code:{lines:[{tokens:[{content:"// helper functions imported from @swc/helpers",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"import",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"_",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"as",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"_async_to_generator",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"from",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"@swc/helpers/_/_async_to_generator",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"// your code",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"var",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"yourCode",props:{style:{color:"#88C0D0"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"function",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#ECEFF4"}}},{content:"// use _async_to_generator",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.h2,{id:"externals",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#externals",children:"#"}),"externals"]}),"\n",(0,s.jsx)(e.p,{children:"Configure external dependencies that will not be packaged into the final bundle"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),":"]}),"\n"]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"type",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"External",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}},{content:"string",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"|",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"RegExp",props:{style:{color:"#8FBCBB"}}},{content:")[]",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"[]"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Build Type"}),": ",(0,s.jsx)(e.code,{children:"Only supported for buildType: 'bundle'"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Example"}),":"]}),"\n"]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"defineConfig",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#ECEFF4"}}},{content:"// do not bundle React",props:{style:{color:"#616E88"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"externals",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" [",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"react",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.h2,{id:"format",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#format",children:"#"}),"format"]}),"\n",(0,s.jsxs)(e.p,{children:["Used to set the output format of JavaScript files. The options ",(0,s.jsx)(e.code,{children:"iife"})," and ",(0,s.jsx)(e.code,{children:"umd"})," only take effect when ",(0,s.jsx)(e.code,{children:"buildType"})," is ",(0,s.jsx)(e.code,{children:"bundle"}),"."]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"'esm' | 'cjs' | 'iife' | 'umd'"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"cjs"})]}),"\n"]}),"\n",(0,s.jsxs)(e.h3,{id:"format-esm",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#format-esm",children:"#"}),"format: 'esm'"]}),"\n",(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.code,{children:"esm"}),' stands for "ECMAScript module" and requires the runtime environment to support import and export syntax.']}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Example"}),":"]}),"\n"]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"defineConfig",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"format",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"esm",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.h3,{id:"format-cjs",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#format-cjs",children:"#"}),"format: 'cjs'"]}),"\n",(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.code,{children:"cjs"}),' stands for "CommonJS" and requires the runtime environment to support exports, require, and module syntax. This format is commonly used in Node.js environments.']}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Example"}),":"]}),"\n"]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"defineConfig",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"format",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"cjs",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.h3,{id:"format-iife",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#format-iife",children:"#"}),"format: 'iife'"]}),"\n",(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.code,{children:"iife"}),' stands for "immediately-invoked function expression" and wraps the code in a function expression to ensure that any variables in the code do not accidentally conflict with variables in the global scope. This format is commonly used in browser environments.']}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Example"}),":"]}),"\n"]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"defineConfig",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"format",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"iife",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.h3,{id:"format-umd",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#format-umd",children:"#"}),"format: 'umd'"]}),"\n",(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.code,{children:"umd"}),' stands for "Universal Module Definition" and is used to run modules in different environments such as browsers and Node.js. Modules in UMD format can be used in various environments, either as global variables or loaded as modules using module loaders like RequireJS.']}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Example"}),":"]}),"\n"]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"defineConfig",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"format",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"umd",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.h2,{id:"input",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#input",children:"#"}),"input"]}),"\n",(0,s.jsx)(e.p,{children:"Specify the entry file for the build, in the form of an array that can specify the directory"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),":"]}),"\n"]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"type",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"Input",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"|",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"string",props:{style:{color:"#8FBCBB"}}},{content:"[]",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"|",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" [",props:{style:{color:"#D8DEE9FF"}}},{content:"name",props:{style:{color:"#D8DEE9"}}},{content:": ",props:{style:{color:"#D8DEE9FF"}}},{content:"string",props:{style:{color:"#D8DEE9"}}},{content:"]: ",props:{style:{color:"#D8DEE9FF"}}},{content:"string",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"['src/index.ts']"})," in ",(0,s.jsx)(e.code,{children:"bundle"})," mode, ",(0,s.jsx)(e.code,{children:"['src']"})," in ",(0,s.jsx)(e.code,{children:"bundleless"})," mode"]}),"\n"]}),"\n",(0,s.jsx)(e.p,{children:(0,s.jsx)(e.strong,{children:"Array usage:"})}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"input",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" [",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"src/index.ts",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"src/index2.ts",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsx)(e.p,{children:(0,s.jsx)(e.strong,{children:"Object usage:"})}),"\n",(0,s.jsx)(e.p,{children:"When you need to modify the output file name in bundle mode, you can use an object configuration."}),"\n",(0,s.jsx)(e.p,{children:(0,s.jsx)(e.strong,{children:"The key of the object is the file name of the output, and the value is the file path of the source code."})}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"defineConfig",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"format",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"esm",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"input",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"index.esm",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"./src/index.ts",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.h2,{id:"jsx",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#jsx",children:"#"}),"jsx"]}),"\n",(0,s.jsx)(e.p,{children:"Specify the compilation method for JSX, which by default supports React 17 and higher versions and automatically injects JSX runtime code."}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"automatic | transform"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"automatic"})]}),"\n"]}),"\n",(0,s.jsxs)(e.p,{children:["If you need to support React 16, you can set ",(0,s.jsx)(e.code,{children:"jsx"})," to ",(0,s.jsx)(e.code,{children:"transform"}),":"]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"defineConfig",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"jsx",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"transform",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.div,{className:"modern-directive tip",children:[(0,s.jsx)(e.div,{className:"modern-directive-title",children:"TIP"}),(0,s.jsxs)(e.div,{className:"modern-directive-content",children:[(0,s.jsx)(e.p,{children:"\nFor more information about JSX Transform, you can refer to the following links:"}),(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.a,{href:"https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html",target:"_blank",rel:"noopener noreferrer",children:"React Blog - Introducing the New JSX Transform"}),"."]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.a,{href:"https://esbuild.github.io/api/#jsx",target:"_blank",rel:"noopener noreferrer",children:"esbuild - JSX"}),".\n:::"]}),"\n"]}),(0,s.jsxs)(e.h2,{id:"metafile",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#metafile",children:"#"}),"metafile"]}),(0,s.jsx)(e.p,{children:"This option is used for build analysis. When enabled, esbuild will generate metadata about the build in JSON format."}),(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"boolean"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"false"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Build Type"}),": ",(0,s.jsx)(e.code,{children:"Only supported for buildType: 'bundle'"})]}),"\n"]}),(0,s.jsxs)(e.p,{children:["To enable ",(0,s.jsx)(e.code,{children:"metafile"})," generation:"]}),(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"defineConfig",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildType",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"bundle",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"metafile",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"true",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),(0,s.jsxs)(e.p,{children:["After executing the build, a ",(0,s.jsx)(e.code,{children:"metafile-[xxx].json"})," file will be generated in the output directory. You can use tools like ",(0,s.jsx)(e.a,{href:"https://esbuild.github.io/analyze/",target:"_blank",rel:"noopener noreferrer",children:"esbuild analyze"})," and ",(0,s.jsx)(e.a,{href:"https://bundle-buddy.com/esbuild",target:"_blank",rel:"noopener noreferrer",children:"bundle-buddy"})," for visual analysis."]}),(0,s.jsxs)(e.h2,{id:"minify",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#minify",children:"#"}),"minify"]}),(0,s.jsxs)(e.p,{children:["Use esbuild or terser to compress code, also pass ",(0,s.jsx)(e.a,{href:"https://github.com/terser/terser#minify-options",target:"_blank",rel:"noopener noreferrer",children:"terserOptions"})]}),(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"'terser' | 'esbuild' | false | object"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"false"})]}),"\n"]}),(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"minify",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"compress",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"drop_console",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"true",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),(0,s.jsxs)(e.h2,{id:"outdir",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#outdir",children:"#"}),"outDir"]}),(0,s.jsx)(e.p,{children:"Specifies the output directory of the build"}),(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"string"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"dist"})]}),"\n"]}),(0,s.jsxs)(e.h2,{id:"platform",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#platform",children:"#"}),"platform"]}),(0,s.jsxs)(e.p,{children:["Generates code for the node environment by default, you can also specify ",(0,s.jsx)(e.code,{children:"browser"})," which will generate code for the browser environment"]}),(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"'browser' | 'node'"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"node"})]}),"\n"]}),(0,s.jsxs)(e.h2,{id:"redirect",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#redirect",children:"#"}),"redirect"]}),(0,s.jsxs)(e.p,{children:["In ",(0,s.jsx)(e.code,{children:"buildType: 'bundleless'"})," build mode, the reference path is redirected to ensure that it points to the correct product, e.g:"]}),(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.code,{children:"import '. /index.less'"})," will be rewritten to ",(0,s.jsx)(e.code,{children:"import '. /index.css'"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.code,{children:"import icon from '. /close.svg'"})," would be rewritten as ",(0,s.jsx)(e.code,{children:"import icon from '... /asset/close.svg'"})," to ",(0,s.jsx)(e.code,{children:"import icon from '. /asset/close.svg'"})," (depending on the situation)"]}),"\n"]}),(0,s.jsx)(e.p,{children:"In some scenarios, you may not need these functions, then you can turn it off with this configuration, and its reference path will not be changed after turning it off."}),(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"redirect",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"alias",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"false",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"// Turn off modifying alias paths",props:{style:{color:"#616E88"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"style",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"false",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"// Turn off modifying the path to the style file",props:{style:{color:"#616E88"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"asset",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"false",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"// Turn off modifying the path to the resource file",props:{style:{color:"#616E88"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),(0,s.jsxs)(e.h2,{id:"sideeffects",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#sideeffects",children:"#"}),"sideEffects"]}),(0,s.jsx)(e.p,{children:"Module sideEffects"}),(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"RegExg[] | (filePath: string, isExternal: boolean) => boolean | boolean"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"undefined"})]}),"\n"]}),(0,s.jsx)(e.p,{children:"Normally, we configure the module's side effects via the sideEffects field in package.json, but in some cases, The package.json of a third-party package is unreliable.Such as when we reference a third-party package style file"}),(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"import",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"other-package/dist/index.css",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),(0,s.jsx)(e.p,{children:"But the package.json of this third-party package does not have the style file configured in the sideEffects"}),(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["other-package/package.json"],active:"other-package/package.json",heightRatio:1},files:[{name:"other-package/package.json",focus:"",code:{lines:[{tokens:[{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"sideEffects",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"[",props:{style:{color:"#ECEFF4"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"dist/index.js",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"json"},annotations:[]}]}),(0,s.jsxs)(e.p,{children:["At the same time you set ",(0,s.jsx)(e.a,{href:"#styleinject",children:"style.inject"})," to ",(0,s.jsx)(e.code,{children:"true"})," and you will see a warning message like this in the console"]}),(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"[",props:{style:{color:"#ECEFF4"}}},{content:"LIBUILD:ESBUILD_WARN",props:{style:{color:"#D8DEE9FF"}}},{content:"]",props:{style:{color:"#ECEFF4"}}},{content:" Ignoring this import because ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"other-package/dist/index.css",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:" was marked as having no side effects",props:{style:{color:"#D8DEE9FF"}}}]}],lang:"bash"},annotations:[]}]}),(0,s.jsxs)(e.p,{children:["At this point, you can use this configuration item to manually configure the module's ",(0,s.jsx)(e.code,{children:'"sideEffects"'})," to support regular and functional forms."]}),(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"defineConfig",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"sideEffects",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" [",props:{style:{color:"#D8DEE9FF"}}},{content:"/",props:{style:{color:"#ECEFF4"}}},{content:"\\.css",props:{style:{color:"#EBCB8B"}}},{content:"$",props:{style:{color:"#81A1C1"}}},{content:"/",props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#ECEFF4"}}},{content:"// or",props:{style:{color:"#616E88"}}}]},{tokens:[{content:" ",props:{style:{color:"#ECEFF4"}}},{content:"// sideEffects: (filePath, isExternal) => /\\.css$/.test(filePath),",props:{style:{color:"#616E88"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),(0,s.jsx)(e.p,{children:":::tip\nAfter adding this configuration, the sideEffects field in package.json will no longer be read when packaging"})]})]}),"\n",(0,s.jsxs)(e.h2,{id:"sourcedir",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#sourcedir",children:"#"}),"sourceDir"]}),"\n",(0,s.jsxs)(e.p,{children:["Specify the source directory of the build, default is ",(0,s.jsx)(e.code,{children:"src"}),", which is used to generate the corresponding product directory based on the source directory structure when building ",(0,s.jsx)(e.code,{children:"bundleless"}),"."]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"string"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"src"})]}),"\n"]}),"\n",(0,s.jsxs)(e.h2,{id:"sourcemap",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#sourcemap",children:"#"}),"sourceMap"]}),"\n",(0,s.jsx)(e.p,{children:"Whether to generate sourceMap or not"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"boolean | 'inline' | 'external'"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"false"})]}),"\n"]}),"\n",(0,s.jsxs)(e.h2,{id:"sourcetype",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#sourcetype",children:"#"}),"sourceType"]}),"\n",(0,s.jsxs)(e.p,{children:["Sets the format of the source code. By default, the source code will be treated as EsModule. When the source code is using CommonJS, you need to set ",(0,s.jsx)(e.code,{children:"commonjs"}),"."]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"'commonjs' | 'module'"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"'module'"})]}),"\n"]}),"\n",(0,s.jsxs)(e.h2,{id:"splitting",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#splitting",children:"#"}),"splitting"]}),"\n",(0,s.jsx)(e.p,{children:"Whether to enable code splitting"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"boolean"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"false"})]}),"\n"]}),"\n",(0,s.jsxs)(e.h2,{id:"style",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#style",children:"#"}),"style"]}),"\n",(0,s.jsx)(e.p,{children:"Configure style-related configuration"}),"\n",(0,s.jsxs)(e.h2,{id:"styleless",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#styleless",children:"#"}),"style.less"]}),"\n",(0,s.jsx)(e.p,{children:"less-related configuration"}),"\n",(0,s.jsxs)(e.h2,{id:"stylelesslessoptions",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#stylelesslessoptions",children:"#"}),"style.less.lessOptions"]}),"\n",(0,s.jsxs)(e.p,{children:["Refer to ",(0,s.jsx)(e.a,{href:"https://less.bootcss.com/usage/#less-options",target:"_blank",rel:"noopener noreferrer",children:"less"})," for detailed configuration"]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"object"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"{ javascriptEnabled: true }"})]}),"\n"]}),"\n",(0,s.jsxs)(e.h2,{id:"stylelessadditionaldata",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#stylelessadditionaldata",children:"#"}),"style.less.additionalData"]}),"\n",(0,s.jsxs)(e.p,{children:["Add ",(0,s.jsx)(e.code,{children:"Less"})," code to the beginning of the entry file."]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"string"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"undefined"})]}),"\n"]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"style",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"less",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"additionalData",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"`",props:{style:{color:"#ECEFF4"}}},{content:"@base-color: #c6538c;",props:{style:{color:"#A3BE8C"}}},{content:"`",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.h2,{id:"stylelessimplementation",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#stylelessimplementation",children:"#"}),"style.less.implementation"]}),"\n",(0,s.jsxs)(e.p,{children:["Configure the implementation library used by ",(0,s.jsx)(e.code,{children:"Less"}),", if not specified, the built-in version used is ",(0,s.jsx)(e.code,{children:"4.1.3"}),"."]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"string | object"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"undefined"})]}),"\n"]}),"\n",(0,s.jsxs)(e.p,{children:["Specify the implementation library for ",(0,s.jsx)(e.code,{children:"Less"})," when the ",(0,s.jsx)(e.code,{children:"object"})," type is specified."]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"style",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"less",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"implementation",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"require",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"less",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.p,{children:["For the ",(0,s.jsx)(e.code,{children:"string"})," type, specify the path to the implementation library for ",(0,s.jsx)(e.code,{children:"Less"})]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"style",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"less",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"implementation",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"require",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"resolve",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"less",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.h2,{id:"stylesass",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#stylesass",children:"#"}),"style.sass"]}),"\n",(0,s.jsx)(e.p,{children:"sass-related configuration."}),"\n",(0,s.jsxs)(e.h2,{id:"stylesasssassoptions",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#stylesasssassoptions",children:"#"}),"style.sass.sassOptions"]}),"\n",(0,s.jsxs)(e.p,{children:["Refer to ",(0,s.jsx)(e.a,{href:"https://github.com/sass/node-sass#options",target:"_blank",rel:"noopener noreferrer",children:"node-sass"})," for detailed configuration."]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"object"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"{}"})]}),"\n"]}),"\n",(0,s.jsxs)(e.h2,{id:"stylesassadditionaldata",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#stylesassadditionaldata",children:"#"}),"style.sass.additionalData"]}),"\n",(0,s.jsxs)(e.p,{children:["Add ",(0,s.jsx)(e.code,{children:"Sass"})," code to the beginning of the entry file."]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"string | Function"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"undefined"})]}),"\n"]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"style",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"sass",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"additionalData",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"`",props:{style:{color:"#ECEFF4"}}},{content:"$base-color: #c6538c;",props:{style:{color:"#A3BE8C"}}}]},{tokens:[{content:" $border-dark: rgba($base-color, 0.88);",props:{style:{color:"#A3BE8C"}}},{content:"`",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.h2,{id:"stylesassimplementation",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#stylesassimplementation",children:"#"}),"style.sass.implementation"]}),"\n",(0,s.jsxs)(e.p,{children:["Configure the implementation library used by ",(0,s.jsx)(e.code,{children:"Sass"}),", the built-in version used is ",(0,s.jsx)(e.code,{children:"1.5.4"})," if not specified."]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"string | object"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"undefined"})]}),"\n"]}),"\n",(0,s.jsxs)(e.p,{children:["Specify the implementation library for ",(0,s.jsx)(e.code,{children:"Sass"})," when the ",(0,s.jsx)(e.code,{children:"object"})," type is specified."]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"style",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"sass",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"implementation",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"require",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"sass",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.p,{children:["For the ",(0,s.jsx)(e.code,{children:"string"})," type, specify the path to the ",(0,s.jsx)(e.code,{children:"Sass"})," implementation library"]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"style",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"sass",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"implementation",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"require",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"resolve",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"sass",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.h2,{id:"stylepostcss",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#stylepostcss",children:"#"}),"style.postcss"]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsx)(e.li,{children:"plugins"}),"\n",(0,s.jsx)(e.li,{children:"processOptions"}),"\n"]}),"\n",(0,s.jsxs)(e.p,{children:["See ",(0,s.jsx)(e.a,{href:"https://github.com/postcss/postcss#options",target:"_blank",rel:"noopener noreferrer",children:"PostCSS"})," for detailed configuration"]}),"\n",(0,s.jsx)(e.p,{children:(0,s.jsx)(e.strong,{children:"Basic usage:"})}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"defineConfig",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"style",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"postcss",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"plugins",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" [",props:{style:{color:"#D8DEE9FF"}}},{content:"yourPostCSSPlugin",props:{style:{color:"#D8DEE9"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.h2,{id:"styleinject",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#styleinject",children:"#"}),"style.inject"]}),"\n",(0,s.jsx)(e.p,{children:"Configure whether to insert CSS styles into JavaScript code in bundle mode."}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"boolean"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"false"})]}),"\n"]}),"\n",(0,s.jsxs)(e.p,{children:["Set ",(0,s.jsx)(e.code,{children:"inject"})," to ",(0,s.jsx)(e.code,{children:"true"})," to enable this feature:"]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"defineConfig",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"inject",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"true",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsx)(e.p,{children:"Once enabled, you will see the CSS code referenced in the source code included in the bundled JavaScript output."}),"\n",(0,s.jsxs)(e.p,{children:["For example, if you write ",(0,s.jsx)(e.code,{children:"import './index.scss'"})," in the source code, you will see the following code in the output:"]}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["dist/index.js"],active:"dist/index.js",heightRatio:1},files:[{name:"dist/index.js",focus:"",code:{lines:[{tokens:[{content:"// node_modules/style-inject/dist/style-inject.es.js",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"function",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"styleInject",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"css",props:{style:{color:"#D8DEE9"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"ref",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#ECEFF4"}}},{content:"// ...",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"var",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"style_inject_es_default",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"styleInject",props:{style:{color:"#D8DEE9"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[]},{tokens:[{content:"// src/index.scss",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"var",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"css_248z",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:".body {",props:{style:{color:"#A3BE8C"}}},{content:"\\n",props:{style:{color:"#EBCB8B"}}},{content:" color: black;",props:{style:{color:"#A3BE8C"}}},{content:"\\n",props:{style:{color:"#EBCB8B"}}},{content:"}",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"style_inject_es_default",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"css_248z",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.div,{className:"modern-directive tip",children:[(0,s.jsx)(e.div,{className:"modern-directive-title",children:"TIP"}),(0,s.jsxs)(e.div,{className:"modern-directive-content",children:[(0,s.jsxs)(e.p,{children:["After enabling ",(0,s.jsx)(e.code,{children:"inject"}),", you need to pay attention to the following points:"]}),(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.code,{children:"@import"})," in CSS files will not be processed. If your CSS file contains ",(0,s.jsx)(e.code,{children:"@import"}),", you need to manually import the CSS file in the JS file (less and scss files are not required because they have preprocessing)."]}),"\n",(0,s.jsxs)(e.li,{children:["Consider the impact of ",(0,s.jsx)(e.code,{children:"sideEffects"}),". By default, our builder assumes that CSS has side effects. If the ",(0,s.jsx)(e.code,{children:"sideEffects"})," field is set in your project or third-party package's package.json and does not include this CSS file, you will receive a warning:"]}),"\n"]}),(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"[",props:{style:{color:"#ECEFF4"}}},{content:"LIBUILD:ESBUILD_WARN",props:{style:{color:"#D8DEE9FF"}}},{content:"]",props:{style:{color:"#ECEFF4"}}},{content:" Ignoring this import because ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"src/index.scss",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:" was marked as having no side effects by plugin ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"libuild:adapter",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]}],lang:"shell"},annotations:[]}]}),(0,s.jsxs)(e.p,{children:["You can resolve this by configuring ",(0,s.jsx)(e.a,{href:"#sideeffects",children:"sideEffects"}),"."]}),(0,s.jsxs)(e.h2,{id:"styleautomodules",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#styleautomodules",children:"#"}),"style.autoModules"]}),(0,s.jsx)(e.p,{children:"Enable CSS Modules automatically based on the filename."}),(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"boolean | RegExp"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"true"})]}),"\n"]}),(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.code,{children:"true"})," : Enables CSS Modules for style files ending with ",(0,s.jsx)(e.code,{children:".module.css"})," ",(0,s.jsx)(e.code,{children:".module.less"})," ",(0,s.jsx)(e.code,{children:".module.scss"})," ",(0,s.jsx)(e.code,{children:".module.sass"})," filenames"]}),(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.code,{children:"false"})," : Disable CSS Modules."]}),(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.code,{children:"RegExp"})," : Enables CSS Modules for all files that match the regular condition."]}),(0,s.jsxs)(e.h2,{id:"stylemodules",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#stylemodules",children:"#"}),"style.modules"]}),(0,s.jsx)(e.p,{children:"CSS Modules configuration"}),(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"object"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"{}"})]}),"\n"]}),(0,s.jsxs)(e.p,{children:["A common configuration is ",(0,s.jsx)(e.code,{children:"localsConvention"}),", which changes the class name generation rules for css modules"]}),(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"style",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"modules",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"localsConvention",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"camelCaseOnly",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),(0,s.jsx)(e.p,{children:"For the following styles"}),(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:".",props:{style:{color:"#ECEFF4"}}},{content:"box-title",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"color",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"red;",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"css"},annotations:[]}]}),(0,s.jsxs)(e.p,{children:["You can use ",(0,s.jsx)(e.code,{children:"styles.boxTitle"})," to access"]}),(0,s.jsxs)(e.p,{children:["For detailed configuration see ",(0,s.jsx)(e.a,{href:"https://github.com/madyankin/postcss-modules#usage",target:"_blank",rel:"noopener noreferrer",children:"postcss-modules"})]}),(0,s.jsxs)(e.h2,{id:"styletailwindcss",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#styletailwindcss",children:"#"}),"style.tailwindcss"]}),(0,s.jsx)(e.p,{children:"tailwindcss related configuration"}),(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"object | Function"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"see configuration details below"})]}),"\n"]}),(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"const",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"tailwind",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"content",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" [",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"./config/html/**/*.html",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"./config/html/**/*.ejs",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"./config/html/**/*.hbs",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"./src/**/*.js",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"./src/**/*.jsx",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"./src/**/*.ts",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"./src/**/*.tsx",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"./storybook/**/*",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),(0,s.jsxs)(e.p,{children:["When the value is of type ",(0,s.jsx)(e.code,{children:"object"}),", it is merged with the default configuration via ",(0,s.jsx)(e.code,{children:"Object.assign"}),"."]}),(0,s.jsxs)(e.p,{children:["When the value is of type ",(0,s.jsx)(e.code,{children:"Function"}),", the object returned by the function is merged with the default configuration via ",(0,s.jsx)(e.code,{children:"Object.assign"}),"."]}),(0,s.jsxs)(e.p,{children:["The ",(0,s.jsx)(e.code,{children:"theme"})," property is not allowed, otherwise the build will fail, using ",(0,s.jsx)(e.a,{href:"/module-tools/en/api/config/design-system.html",children:(0,s.jsx)(e.code,{children:"designSystem"})})," as the ",(0,s.jsx)(e.code,{children:"Tailwind CSS Theme"})," configuration."]}),(0,s.jsxs)(e.p,{children:["The rest of the usage is the same as Tailwind CSS: ",(0,s.jsx)(e.a,{href:"https://tailwindcss.com/docs/configuration",target:"_blank",rel:"noopener noreferrer",children:"Quick Portal"}),"."]}),(0,s.jsxs)(e.h2,{id:"target",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#target",children:"#"}),"target"]}),(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.code,{children:"target"})," is used to set the target environment for the generated JavaScript code. It enables Module Tools to transform JavaScript syntax that is not recognized by the target environment into older versions of JavaScript syntax that are compatible with these environments."]}),(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),":"]}),"\n"]}),(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"type",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"Target",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"|",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"es5",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"|",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"es6",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"|",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"es2015",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"|",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"es2016",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"|",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"es2017",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"|",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"es2018",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"|",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"es2019",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"|",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"es2020",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"|",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"es2021",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"|",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"es2022",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"|",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"esnext",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"ts"},annotations:[]}]}),(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"'es6'"})]}),"\n"]}),(0,s.jsxs)(e.p,{children:["For example, compile the code to ",(0,s.jsx)(e.code,{children:"es5"})," syntax:"]}),(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"defineConfig",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"target",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"es5",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),(0,s.jsxs)(e.h2,{id:"transformimport",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#transformimport",children:"#"}),"transformImport"]}),(0,s.jsxs)(e.p,{children:["Using ",(0,s.jsx)(e.a,{href:"https://swc.rs/",target:"_blank",rel:"noopener noreferrer",children:"SWC"})," provides the same ability and configuration as ",(0,s.jsx)(e.a,{href:"https://github.com/umijs/babel-plugin-import",target:"_blank",rel:"noopener noreferrer",children:(0,s.jsx)(e.code,{children:"babel-plugin-import"})}),"."]}),(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"object[]"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"[]"})]}),"\n"]}),(0,s.jsxs)(e.p,{children:["The elements of the array are configuration objects for ",(0,s.jsx)(e.code,{children:"babel-plugin-import"}),", which can be referred to ",(0,s.jsx)(e.a,{href:"https://github.com/umijs/babel-plugin-import#options",target:"_blank",rel:"noopener noreferrer",children:"options"}),"。"]}),(0,s.jsx)(e.p,{children:(0,s.jsx)(e.strong,{children:"Example:"})}),(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"defineConfig",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"transformImport",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" [",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#ECEFF4"}}},{content:"// babel-plugin-import`s options config",props:{style:{color:"#616E88"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"libraryName",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"foo",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"style",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"true",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"ts"},annotations:[]}]}),(0,s.jsxs)(e.h3,{id:"notes",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#notes",children:"#"}),"Notes"]}),(0,s.jsxs)(e.p,{children:["Reference the ",(0,s.jsx)(e.a,{href:"/module-tools/en/plugins/official-list/plugin-import.html#Notes",children:"Import Plugin - Notes"})]}),(0,s.jsxs)(e.h2,{id:"umdglobals",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#umdglobals",children:"#"}),"umdGlobals"]}),(0,s.jsx)(e.p,{children:"Specify global variables for external import of umd products"}),(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"Record<string, string>"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"{}"})]}),"\n"]}),(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"umdGlobals",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"react",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"React",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"react-dom",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"ReactDOM",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),(0,s.jsxs)(e.p,{children:["At this point, ",(0,s.jsx)(e.code,{children:"react"})," and ",(0,s.jsx)(e.code,{children:"react-dom"})," will be seen as global variables imported externally and will not be packed into the umd product, but will be accessible by way of ",(0,s.jsx)(e.code,{children:"global.React"})," and ",(0,s.jsx)(e.code,{children:"global.ReactDOM"})]}),(0,s.jsxs)(e.h2,{id:"umdmodulename",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#umdmodulename",children:"#"}),"umdModuleName"]}),(0,s.jsx)(e.p,{children:"Specifies the module name of the umd product"}),(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Type"}),": ",(0,s.jsx)(e.code,{children:"string | Function"})]}),"\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.strong,{children:"Default"}),": ",(0,s.jsx)(e.code,{children:"name => name"})]}),"\n"]}),(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"format",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"umd",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"umdModuleName",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"myLib",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),(0,s.jsxs)(e.p,{children:["At this point the umd product will go to mount on ",(0,s.jsx)(e.code,{children:"global.myLib"})]}),(0,s.jsx)(e.p,{children:":::tip"}),(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsx)(e.li,{children:"The module name of the umd product must not conflict with the global variable name."}),"\n",(0,s.jsxs)(e.li,{children:["Module names will be converted to camelCase, e.g. ",(0,s.jsx)(e.code,{children:"my-lib"})," will be converted to ",(0,s.jsx)(e.code,{children:"myLib"}),", refer to ",(0,s.jsx)(e.a,{href:"https://github.com/babel/babel/blob/main/packages/babel-types/src/converters/toIdentifier.ts",target:"_blank",rel:"noopener noreferrer",children:"toIdentifier"}),"."]}),"\n"]})]})]}),"\n",(0,s.jsx)(e.p,{children:"Also the function form can take one parameter, which is the output path of the current package file"}),"\n",(0,s.jsx)(l.Code,{codeConfig:p,northPanel:{tabs:["modern.config.ts"],active:"modern.config.ts",heightRatio:1},files:[{name:"modern.config.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"format",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"umd",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"umdModuleName",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"path",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"if",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}},{content:"path",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"includes",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"index",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:")) ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"myLib",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"else",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"myLib2",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]})]})}var a=function(){var o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=Object.assign({},(0,r.useMDXComponents)(),o.components).wrapper;return e?(0,s.jsx)(e,Object.assign({},o,{children:(0,s.jsx)(i,o)})):i(o)};function d(o,e){throw Error("Expected "+(e?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}}}]);
|