@modern-js/module-tools-docs 2.25.2-beta.0 → 2.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (211) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/docs/en/api/config/build-config.md +10 -10
  3. package/docs/en/api/config/build-preset.mdx +4 -4
  4. package/docs/en/guide/advance/asset.mdx +2 -2
  5. package/docs/en/guide/advance/build-umd.mdx +9 -9
  6. package/docs/en/guide/advance/copy.md +1 -1
  7. package/docs/en/guide/advance/external-dependency.mdx +2 -2
  8. package/docs/en/guide/advance/in-depth-about-build.md +11 -11
  9. package/docs/en/guide/advance/in-depth-about-dev-command.md +1 -1
  10. package/docs/en/guide/basic/before-getting-started.md +1 -1
  11. package/docs/en/guide/basic/command-preview.md +5 -5
  12. package/docs/en/guide/basic/modify-output-product.md +18 -18
  13. package/docs/en/guide/basic/using-storybook.mdx +1 -1
  14. package/docs/en/guide/best-practices/components.mdx +10 -10
  15. package/docs/en/guide/faq/build.mdx +1 -1
  16. package/docs/en/guide/intro/welcome.md +2 -2
  17. package/docs/en/plugins/guide/getting-started.mdx +1 -1
  18. package/docs/en/plugins/guide/plugin-object.mdx +2 -2
  19. package/docs/en/plugins/guide/setup-function.mdx +1 -1
  20. package/docs/zh/api/config/build-config.md +1 -1
  21. package/docs/zh/guide/faq/build.mdx +1 -1
  22. package/package.json +3 -3
  23. package/doc_build/api/config/build-config.html +0 -522
  24. package/doc_build/api/config/build-preset.html +0 -71
  25. package/doc_build/api/config/design-system.html +0 -113
  26. package/doc_build/api/config/dev.html +0 -40
  27. package/doc_build/api/config/plugins.html +0 -31
  28. package/doc_build/api/config/testing.html +0 -31
  29. package/doc_build/api/index.html +0 -11
  30. package/doc_build/api/plugin-api/plugin-hooks.html +0 -122
  31. package/doc_build/components/faq-build-exception.html +0 -11
  32. package/doc_build/components/faq-build-other.html +0 -11
  33. package/doc_build/components/faq-build-product.html +0 -11
  34. package/doc_build/components/faq-storybook.html +0 -11
  35. package/doc_build/components/faq-test.html +0 -11
  36. package/doc_build/en/api/config/build-config.html +0 -443
  37. package/doc_build/en/api/config/build-preset.html +0 -71
  38. package/doc_build/en/api/config/design-system.html +0 -127
  39. package/doc_build/en/api/config/dev.html +0 -40
  40. package/doc_build/en/api/config/plugins.html +0 -31
  41. package/doc_build/en/api/config/testing.html +0 -31
  42. package/doc_build/en/api/index.html +0 -11
  43. package/doc_build/en/api/plugin-api/plugin-hooks.html +0 -122
  44. package/doc_build/en/components/faq-build-exception.html +0 -11
  45. package/doc_build/en/components/faq-build-other.html +0 -11
  46. package/doc_build/en/components/faq-build-product.html +0 -11
  47. package/doc_build/en/components/faq-storybook.html +0 -11
  48. package/doc_build/en/components/faq-test.html +0 -11
  49. package/doc_build/en/guide/advance/asset.html +0 -31
  50. package/doc_build/en/guide/advance/build-umd.html +0 -42
  51. package/doc_build/en/guide/advance/copy.html +0 -52
  52. package/doc_build/en/guide/advance/external-dependency.html +0 -32
  53. package/doc_build/en/guide/advance/in-depth-about-build.html +0 -123
  54. package/doc_build/en/guide/advance/in-depth-about-dev-command.html +0 -32
  55. package/doc_build/en/guide/advance/theme-config.html +0 -39
  56. package/doc_build/en/guide/basic/before-getting-started.html +0 -97
  57. package/doc_build/en/guide/basic/command-preview.html +0 -73
  58. package/doc_build/en/guide/basic/modify-output-product.html +0 -113
  59. package/doc_build/en/guide/basic/publish-your-project.html +0 -60
  60. package/doc_build/en/guide/basic/test-your-project.html +0 -41
  61. package/doc_build/en/guide/basic/use-micro-generator.html +0 -47
  62. package/doc_build/en/guide/basic/using-storybook.html +0 -76
  63. package/doc_build/en/guide/best-practices/components.html +0 -121
  64. package/doc_build/en/guide/faq/build.html +0 -91
  65. package/doc_build/en/guide/faq/index.html +0 -17
  66. package/doc_build/en/guide/faq/storybook.html +0 -53
  67. package/doc_build/en/guide/faq/test.html +0 -16
  68. package/doc_build/en/guide/intro/getting-started.html +0 -53
  69. package/doc_build/en/guide/intro/welcome.html +0 -23
  70. package/doc_build/en/guide/intro/why-module-engineering-solution.html +0 -19
  71. package/doc_build/en/index.html +0 -11
  72. package/doc_build/en/plugins/guide/getting-started.html +0 -25
  73. package/doc_build/en/plugins/guide/plugin-object.html +0 -24
  74. package/doc_build/en/plugins/guide/setup-function.html +0 -40
  75. package/doc_build/en/plugins/official-list/overview.html +0 -19
  76. package/doc_build/en/plugins/official-list/plugin-babel.html +0 -23
  77. package/doc_build/en/plugins/official-list/plugin-banner.html +0 -40
  78. package/doc_build/en/plugins/official-list/plugin-import.html +0 -44
  79. package/doc_build/en/plugins/official-list/plugin-node-polyfill.html +0 -88
  80. package/doc_build/en/plugins/official-list/plugin-polyfill.html +0 -28
  81. package/doc_build/guide/advance/asset.html +0 -31
  82. package/doc_build/guide/advance/build-umd.html +0 -42
  83. package/doc_build/guide/advance/copy.html +0 -52
  84. package/doc_build/guide/advance/external-dependency.html +0 -31
  85. package/doc_build/guide/advance/in-depth-about-build.html +0 -123
  86. package/doc_build/guide/advance/in-depth-about-dev-command.html +0 -32
  87. package/doc_build/guide/advance/theme-config.html +0 -38
  88. package/doc_build/guide/basic/before-getting-started.html +0 -97
  89. package/doc_build/guide/basic/command-preview.html +0 -73
  90. package/doc_build/guide/basic/modify-output-product.html +0 -110
  91. package/doc_build/guide/basic/publish-your-project.html +0 -62
  92. package/doc_build/guide/basic/test-your-project.html +0 -43
  93. package/doc_build/guide/basic/use-micro-generator.html +0 -45
  94. package/doc_build/guide/basic/using-storybook.html +0 -74
  95. package/doc_build/guide/best-practices/components.html +0 -121
  96. package/doc_build/guide/faq/build.html +0 -91
  97. package/doc_build/guide/faq/index.html +0 -17
  98. package/doc_build/guide/faq/storybook.html +0 -53
  99. package/doc_build/guide/faq/test.html +0 -16
  100. package/doc_build/guide/intro/getting-started.html +0 -50
  101. package/doc_build/guide/intro/welcome.html +0 -23
  102. package/doc_build/guide/intro/why-module-engineering-solution.html +0 -19
  103. package/doc_build/index.html +0 -11
  104. package/doc_build/plugins/guide/getting-started.html +0 -25
  105. package/doc_build/plugins/guide/plugin-object.html +0 -24
  106. package/doc_build/plugins/guide/setup-function.html +0 -40
  107. package/doc_build/plugins/official-list/overview.html +0 -19
  108. package/doc_build/plugins/official-list/plugin-babel.html +0 -23
  109. package/doc_build/plugins/official-list/plugin-banner.html +0 -40
  110. package/doc_build/plugins/official-list/plugin-import.html +0 -44
  111. package/doc_build/plugins/official-list/plugin-node-polyfill.html +0 -88
  112. package/doc_build/plugins/official-list/plugin-polyfill.html +0 -28
  113. package/doc_build/route.json +0 -10
  114. package/doc_build/ssr/bundles/main.js +0 -30
  115. package/doc_build/ssr/bundles/main.js.LICENSE.txt +0 -103
  116. 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
  117. package/doc_build/static/css/main.1e1c5ea3.css +0 -17
  118. 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
  119. package/doc_build/static/js/async/docs_en_api_config_build-config_md.47c13184.js +0 -1
  120. package/doc_build/static/js/async/docs_en_api_config_build-preset_mdx.240d175b.js +0 -1
  121. package/doc_build/static/js/async/docs_en_api_config_design-system_md.b2ec1ff7.js +0 -1
  122. package/doc_build/static/js/async/docs_en_api_config_dev_md.6ad208aa.js +0 -1
  123. package/doc_build/static/js/async/docs_en_api_config_plugins_md.da21c1a9.js +0 -1
  124. package/doc_build/static/js/async/docs_en_api_config_testing_md.5655d56b.js +0 -1
  125. package/doc_build/static/js/async/docs_en_api_index_md.b332bf64.js +0 -1
  126. package/doc_build/static/js/async/docs_en_api_plugin-api_plugin-hooks_md.b0f73e0d.js +0 -1
  127. package/doc_build/static/js/async/docs_en_guide_advance_asset_mdx.d302e90c.js +0 -1
  128. package/doc_build/static/js/async/docs_en_guide_advance_build-umd_mdx.554fa073.js +0 -1
  129. package/doc_build/static/js/async/docs_en_guide_advance_copy_md.78b33f73.js +0 -1
  130. package/doc_build/static/js/async/docs_en_guide_advance_external-dependency_mdx.507e4091.js +0 -1
  131. package/doc_build/static/js/async/docs_en_guide_advance_in-depth-about-build_md.207e8b25.js +0 -1
  132. package/doc_build/static/js/async/docs_en_guide_advance_in-depth-about-dev-command_md.72d6b6fc.js +0 -1
  133. package/doc_build/static/js/async/docs_en_guide_advance_theme-config_mdx.168a5eec.js +0 -1
  134. package/doc_build/static/js/async/docs_en_guide_basic_before-getting-started_md.a00933ab.js +0 -1
  135. package/doc_build/static/js/async/docs_en_guide_basic_command-preview_md.5e63d7ad.js +0 -1
  136. package/doc_build/static/js/async/docs_en_guide_basic_modify-output-product_md.abd250e1.js +0 -1
  137. package/doc_build/static/js/async/docs_en_guide_basic_publish-your-project_md.3b098b03.js +0 -1
  138. package/doc_build/static/js/async/docs_en_guide_basic_test-your-project_mdx.b86e9b69.js +0 -1
  139. package/doc_build/static/js/async/docs_en_guide_basic_use-micro-generator_md.e03b16c8.js +0 -1
  140. package/doc_build/static/js/async/docs_en_guide_basic_using-storybook_mdx.32e9b389.js +0 -1
  141. package/doc_build/static/js/async/docs_en_guide_best-practices_components_mdx.a56e369b.js +0 -1
  142. package/doc_build/static/js/async/docs_en_guide_faq_build_mdx.81c243c7.js +0 -1
  143. package/doc_build/static/js/async/docs_en_guide_faq_index_md.85367f4a.js +0 -1
  144. package/doc_build/static/js/async/docs_en_guide_faq_storybook_mdx.d6b26cfd.js +0 -1
  145. package/doc_build/static/js/async/docs_en_guide_faq_test_mdx.a7a1c8b5.js +0 -1
  146. package/doc_build/static/js/async/docs_en_guide_intro_getting-started_md.7c901798.js +0 -1
  147. package/doc_build/static/js/async/docs_en_guide_intro_welcome_md.69fe3324.js +0 -1
  148. package/doc_build/static/js/async/docs_en_guide_intro_why-module-engineering-solution_md.766afaee.js +0 -1
  149. package/doc_build/static/js/async/docs_en_index_md.32415ad9.js +0 -1
  150. package/doc_build/static/js/async/docs_en_plugins_guide_getting-started_mdx.c6631fd6.js +0 -1
  151. package/doc_build/static/js/async/docs_en_plugins_guide_plugin-object_mdx.0971cbdb.js +0 -1
  152. package/doc_build/static/js/async/docs_en_plugins_guide_setup-function_mdx.388d92b1.js +0 -1
  153. package/doc_build/static/js/async/docs_en_plugins_official-list_overview_md.9390ed67.js +0 -1
  154. package/doc_build/static/js/async/docs_en_plugins_official-list_plugin-babel_md.0528b729.js +0 -1
  155. package/doc_build/static/js/async/docs_en_plugins_official-list_plugin-banner_md.c14f8599.js +0 -1
  156. package/doc_build/static/js/async/docs_en_plugins_official-list_plugin-import_mdx.67bac7e1.js +0 -1
  157. package/doc_build/static/js/async/docs_en_plugins_official-list_plugin-node-polyfill_md.19819cf5.js +0 -1
  158. package/doc_build/static/js/async/docs_en_plugins_official-list_plugin-polyfill_md.473537df.js +0 -1
  159. package/doc_build/static/js/async/docs_zh_api_config_build-config_md.e52b0287.js +0 -1
  160. package/doc_build/static/js/async/docs_zh_api_config_build-preset_mdx.8b874378.js +0 -1
  161. package/doc_build/static/js/async/docs_zh_api_config_design-system_md.ceae6914.js +0 -1
  162. package/doc_build/static/js/async/docs_zh_api_config_dev_md.033094f8.js +0 -1
  163. package/doc_build/static/js/async/docs_zh_api_config_plugins_md.ab43b516.js +0 -1
  164. package/doc_build/static/js/async/docs_zh_api_config_testing_md.2c1f171d.js +0 -1
  165. package/doc_build/static/js/async/docs_zh_api_index_md.5df1b9d0.js +0 -1
  166. package/doc_build/static/js/async/docs_zh_api_plugin-api_plugin-hooks_md.9f155180.js +0 -1
  167. package/doc_build/static/js/async/docs_zh_guide_advance_asset_mdx.0b551e5e.js +0 -1
  168. package/doc_build/static/js/async/docs_zh_guide_advance_build-umd_mdx.4c0a741d.js +0 -1
  169. package/doc_build/static/js/async/docs_zh_guide_advance_copy_md.ff70ddd3.js +0 -1
  170. package/doc_build/static/js/async/docs_zh_guide_advance_external-dependency_mdx.64bae82a.js +0 -1
  171. package/doc_build/static/js/async/docs_zh_guide_advance_in-depth-about-build_md.d16f07b4.js +0 -1
  172. package/doc_build/static/js/async/docs_zh_guide_advance_in-depth-about-dev-command_md.2eabb853.js +0 -1
  173. package/doc_build/static/js/async/docs_zh_guide_advance_theme-config_mdx.5670e00b.js +0 -1
  174. package/doc_build/static/js/async/docs_zh_guide_basic_before-getting-started_md.3e23f82e.js +0 -1
  175. package/doc_build/static/js/async/docs_zh_guide_basic_command-preview_md.718669ed.js +0 -1
  176. package/doc_build/static/js/async/docs_zh_guide_basic_modify-output-product_md.bea77add.js +0 -1
  177. package/doc_build/static/js/async/docs_zh_guide_basic_publish-your-project_md.b0c63699.js +0 -1
  178. package/doc_build/static/js/async/docs_zh_guide_basic_test-your-project_mdx.b9ee0af4.js +0 -1
  179. package/doc_build/static/js/async/docs_zh_guide_basic_use-micro-generator_md.ad32d392.js +0 -1
  180. package/doc_build/static/js/async/docs_zh_guide_basic_using-storybook_mdx.2748f6f6.js +0 -1
  181. package/doc_build/static/js/async/docs_zh_guide_best-practices_components_mdx.e4450a3c.js +0 -1
  182. package/doc_build/static/js/async/docs_zh_guide_faq_build_mdx.470ca09d.js +0 -1
  183. package/doc_build/static/js/async/docs_zh_guide_faq_index_md.9c5738a8.js +0 -1
  184. package/doc_build/static/js/async/docs_zh_guide_faq_storybook_mdx.e1fb8e18.js +0 -1
  185. package/doc_build/static/js/async/docs_zh_guide_faq_test_mdx.d332b61f.js +0 -1
  186. package/doc_build/static/js/async/docs_zh_guide_intro_getting-started_md.8af35ffc.js +0 -1
  187. package/doc_build/static/js/async/docs_zh_guide_intro_welcome_md.6169850d.js +0 -1
  188. package/doc_build/static/js/async/docs_zh_guide_intro_why-module-engineering-solution_md.ff0f5ef0.js +0 -1
  189. package/doc_build/static/js/async/docs_zh_index_md.bc7e2f02.js +0 -1
  190. package/doc_build/static/js/async/docs_zh_plugins_guide_getting-started_mdx.6a2c07ee.js +0 -1
  191. package/doc_build/static/js/async/docs_zh_plugins_guide_plugin-object_mdx.9a665baa.js +0 -1
  192. package/doc_build/static/js/async/docs_zh_plugins_guide_setup-function_mdx.a614b224.js +0 -1
  193. package/doc_build/static/js/async/docs_zh_plugins_official-list_overview_md.bf4a7405.js +0 -1
  194. package/doc_build/static/js/async/docs_zh_plugins_official-list_plugin-babel_md.7107a66b.js +0 -1
  195. package/doc_build/static/js/async/docs_zh_plugins_official-list_plugin-banner_md.4443ae99.js +0 -1
  196. package/doc_build/static/js/async/docs_zh_plugins_official-list_plugin-import_mdx.e4923a9a.js +0 -1
  197. package/doc_build/static/js/async/docs_zh_plugins_official-list_plugin-node-polyfill_md.26c9cb0d.js +0 -1
  198. package/doc_build/static/js/async/docs_zh_plugins_official-list_plugin-polyfill_md.0bda701d.js +0 -1
  199. 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
  200. 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
  201. package/doc_build/static/js/lib-lodash.20527186.js +0 -1
  202. package/doc_build/static/js/lib-polyfill.a99fdfae.js +0 -1
  203. package/doc_build/static/js/lib-react.87879e53.js +0 -1
  204. package/doc_build/static/js/lib-react.87879e53.js.LICENSE.txt +0 -29
  205. package/doc_build/static/js/lib-router.65b37e4a.js +0 -1
  206. package/doc_build/static/js/lib-router.65b37e4a.js.LICENSE.txt +0 -32
  207. package/doc_build/static/js/main.42725889.js +0 -1
  208. package/doc_build/static/search_index.en.6f4165d1.json +0 -1
  209. package/doc_build/static/search_index.en.8cd54797.json +0 -1
  210. package/doc_build/static/search_index.zh.7ed3054c.json +0 -1
  211. 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_zh_api_config_build-config_md"],{58879: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 d}});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%2Fzh%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:"metafile",text:"metafile",depth:2},{id:"minify",text:"minify",depth:2},{id:"outdir",text:"outDir",depth:2},{id:"platform",text:"platform",depth:2},{id:"redirect",text:"redirect",depth:2},{id:"sideeffects",text:"sideEffects",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:"sass",text:"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},{id:"styleautomodules",text:"style.autoModules",depth:2},{id:"stylemodules",text:"style.modules",depth:2},{id:"styletailwindcss",text:"style.tailwindcss",depth:2},{id:"target",text:"target",depth:2},{id:"transformimport",text:"transformImport",depth:2},{id:"注意事项",text:"注意事项",depth:3},{id:"umdglobals",text:"umdGlobals",depth:2},{id:"umdmodulename",text:"umdModuleName",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/zh/api/config/build-config.md"};function i(o){var e=Object.assign({h1:"h1",a:"a",p:"p",code:"code",ul:"ul",li:"li",div:"div",h2:"h2",strong:"strong",ol:"ol",h3:"h3"},(0,r.useMDXComponents)(),o.components);return!l&&a("CH",!1),!l.Code&&a("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"})," 是一个用来描述如何编译、生成构建产物的配置项,它包含了构建的所有配置。"]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型:",(0,s.jsx)(e.code,{children:"object | object[]"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(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:["\n在开始使用 ",(0,s.jsx)(e.code,{children:"buildConfig"})," 之前,请先阅读以下文档来了解其作用:"]}),(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsx)(e.li,{children:(0,s.jsx)(e.a,{href:"/module-tools/guide/basic/modify-output-product.html",children:"修改输出产物"})}),"\n",(0,s.jsx)(e.li,{children:(0,s.jsx)(e.a,{href:"/module-tools/guide/advance/in-depth-about-build.html",children:"深入理解构建"})}),"\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.code,{children:"Record<string, string> | Function"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值:",(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:["\n对于 TypeScript 项目,只需要在 ",(0,s.jsx)(e.code,{children:"tsconfig.json"})," 中配置 ",(0,s.jsx)(e.a,{href:"https://www.typescriptlang.org/tsconfig#paths",target:"_blank",rel:"noopener noreferrer",children:"compilerOptions.paths"}),", Module Tools 会自动识别 ",(0,s.jsx)(e.code,{children:"tsconfig.json"})," 里的别名,因此不需要额外配置 ",(0,s.jsx)(e.code,{children:"alias"}),"字段。"]})})]}),"\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:"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:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.p,{children:["以上配置完成后,如果在代码中引用 ",(0,s.jsx)(e.code,{children:"@common/Foo.tsx"}),", 则会映射到 ",(0,s.jsx)(e.code,{children:"<root>/src/common/Foo.tsx"})," 路径上。"]}),"\n",(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.code,{children:"alias"})," 的值定义为函数时,可以接受预设的 alias 对象,并对其进行修改。"]}),"\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:"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:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsx)(e.p,{children:"也可以在函数中返回一个新对象作为最终结果,新对象会覆盖预设的 alias 对象。"}),"\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:"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:"#D8DEE9FF"}}},{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:"包含静态资源相关的配置。"}),"\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:["静态资源输出路径,会基于 ",(0,s.jsx)(e.a,{href:"/module-tools/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.code,{children:"string"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(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:"用于设置静态资源被自动内联为 base64 的体积阈值。"}),"\n",(0,s.jsx)(e.p,{children:"Module Tools 在进行打包时,默认会内联体积小于 10KB 的图片、字体、媒体等资源,将它们通过 Base64 编码,并内联到产物中,不再会发送独立的 HTTP 请求。"}),"\n",(0,s.jsxs)(e.p,{children:["你可以通过修改 ",(0,s.jsx)(e.code,{children:"limit"})," 参数来调整这个阈值。"]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"number"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(0,s.jsx)(e.code,{children:"10 * 1024"})]}),"\n"]}),"\n",(0,s.jsxs)(e.p,{children:["例如,将 ",(0,s.jsx)(e.code,{children:"limit"})," 设置为 ",(0,s.jsx)(e.code,{children:"0"})," 来避免资源内联:"]}),"\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:"打包时给未内联资源的 CDN 前缀。"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"string"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(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:"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:"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:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.p,{children:["此时,所有静态资源都会添加 ",(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:["打包时将 SVG 作为一个 React 组件处理,options 参考 ",(0,s.jsx)(e.a,{href:"https://react-svgr.com/docs/options/",target:"_blank",rel:"noopener noreferrer",children:"svgr"}),",另外还支持了 ",(0,s.jsx)(e.code,{children:"include"})," 和 ",(0,s.jsx)(e.code,{children:"exclude"})," 两个配置项,用于匹配需要处理的 SVG 文件。"]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"boolean | object"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(0,s.jsx)(e.code,{children:"false"})]}),"\n"]}),"\n",(0,s.jsx)(e.p,{children:"开启 svgr 功能后,可以使用默认导出的方式将 SVG 当做组件使用。"}),"\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:"目前不支持下面的用法:"}),(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:["当开启功能后,可以通过在 ",(0,s.jsx)(e.code,{children:"modern-app-env.d.ts"})," 文件中增加类型定义,修改使用 SVG 的类型:"]}),"\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:"设定匹配的 SVG 文件"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"string | RegExp | (string | RegExp)[]"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(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:"设定不匹配的 SVG 文件"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"string | RegExp | (string | RegExp)[]"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(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.jsxs)(e.p,{children:["自动外置项目的 ",(0,s.jsx)(e.code,{children:'"dependencies"'})," 和 ",(0,s.jsx)(e.code,{children:'"peerDependencies"'}),",不会将其打包到最终的 bundle 产物中。"]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"boolean | object"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(0,s.jsx)(e.code,{children:"true"})]}),"\n"]}),"\n",(0,s.jsx)(e.p,{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:"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:"autoExternal",props:{style:{color:"#D8DEE9"}}},{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:"ts"},annotations:[]}]}),"\n",(0,s.jsxs)(e.p,{children:["这样对于 ",(0,s.jsx)(e.code,{children:'"dependencies"'})," 和 ",(0,s.jsx)(e.code,{children:'"peerDependencies"'})," 下面的依赖都会进行打包处理。如果只想要关闭其中某个下面的依赖处理,则可以使用\n",(0,s.jsx)(e.code,{children:"buildConfig.autoExternal"})," 的对象形式:"]}),"\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:"autoExternal",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:"dependencies",props:{style:{color:"#D8DEE9"}}},{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:"#D8DEE9"}}},{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:"ts"},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.jsxs)(e.p,{children:["是否需要外置项目的 ",(0,s.jsx)(e.code,{children:'"dependencies"'})," 依赖。"]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"boolean"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(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.jsxs)(e.p,{children:["是否需要外置项目的 ",(0,s.jsx)(e.code,{children:'"peerDependencies"'})," 依赖。"]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"boolean"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(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:["构建类型,",(0,s.jsx)(e.code,{children:"bundle"})," 会打包你的代码,",(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.code,{children:"'bundle' | 'bundleless'"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(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:"将文件或目录拷贝到指定位置。"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"object"})]}),"\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:"copy",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:"patterns",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:"#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:"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.code,{children:"CopyPattern[]"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(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.jsx)(e.li,{children:"类型:"}),"\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.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"}),": 指定并行执行多少个复制任务。"]}),"\n"]}),"\n",(0,s.jsxs)(e.li,{children:["\n",(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.code,{children:"enableCopySync"}),": 使用 ",(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"})}),",默认情况下 ",(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:"定义全局变量,会被注入到代码中"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"Record<string, string>"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(0,s.jsx)(e.code,{children:"{}"})]}),"\n"]}),"\n",(0,s.jsxs)(e.p,{children:["由于 ",(0,s.jsx)(e.code,{children:"define"})," 功能是由全局文本替换实现的,所以需要保证全局变量值为字符串,更为安全的做法是将每个全局变量的值转化为字符串,使用 ",(0,s.jsx)(e.code,{children:"JSON.stringify"})," 进行转换,如下所示:"]}),"\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:"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:"#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:"\n为了防止全局替换替换过度,建议使用时遵循以下两个原则:"}),(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsx)(e.li,{children:"全局常量使用大写"}),"\n",(0,s.jsx)(e.li,{children:"自定义全局常量前缀后缀,确保独一无二"}),"\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:"类型文件生成的相关配置,默认情况会生成。"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"false | object"})]}),"\n",(0,s.jsx)(e.li,{children:"默认值:"}),"\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:"用于控制在出现类型错误的时候,是否允许构建成功。"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型:",(0,s.jsx)(e.code,{children:"boolean"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值:",(0,s.jsx)(e.code,{children:"true"})]}),"\n"]}),"\n",(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.strong,{children:"默认情况下,在出现类型错误的时候会导致构建失败"}),"。将 ",(0,s.jsx)(e.code,{children:"abortOnError"})," 设置为 ",(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:"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:["\n当关闭该配置后,无法保证类型文件能正常生成,且不保证内容正确。在 ",(0,s.jsx)(e.code,{children:"buildType: 'bundle'"}),"时,即打包模式下,类型文件一定不会生成。"]})})]}),"\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:["类型文件的输出路径,基于 ",(0,s.jsx)(e.a,{href:"/module-tools/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.code,{children:"string"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(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:"只生成类型文件,不生成 js 文件。"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"boolean"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(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:["当设为 ",(0,s.jsx)(e.code,{children:"false"})," 时,不会打包任何三方包类型,设为 ",(0,s.jsx)(e.code,{children:"true"})," 时,会根据 ",(0,s.jsx)(e.a,{href:"#externals",children:"externals"})," 来决定是否需要打包三方类型。"]}),"\n",(0,s.jsx)(e.p,{children:"在对类型文件进行打包时,构建工具还未对 export 进行分析,因此当你引用的任何一个三方包出现类型错误时,都可能会中断当前的构建流程,这会导致构建流程不可控,因此我们可以通过这个配置来避免该问题。"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"boolean"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(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:"TypeScript 配置文件的路径。"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"string"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(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:["直接修改",(0,s.jsx)(e.a,{href:"https://esbuild.github.io/api/",target:"_blank",rel:"noopener noreferrer",children:"esbuild 配置"})]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"Function"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(0,s.jsx)(e.code,{children:"c => c"})]}),"\n"]}),"\n",(0,s.jsx)(e.p,{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:"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:"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:"option",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:"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:"\n我们在原本 esbuild 构建的基础上做了许多扩展,因此使用此配置需要注意以下几点:"}),(0,s.jsxs)(e.ol,{children:["\n",(0,s.jsxs)(e.li,{children:["优先使用我们提供的配置,例如 esbuild 并不支持",(0,s.jsx)(e.code,{children:"target: 'es5'"}),",但我们内部使用 swc 支持了此场景,此时通过",(0,s.jsx)(e.code,{children:"esbuildOptions"}),"设置",(0,s.jsx)(e.code,{children:"target: 'es5'"}),"会报错。"]}),"\n",(0,s.jsxs)(e.li,{children:["目前我们内部使用",(0,s.jsx)(e.code,{children:"enhanced-resolve"}),"替代了 esbuild 的 resolve 解析算法,所以修改 esbuild resolve 相关配置无效,计划在未来会切换回来。"]}),"\n",(0,s.jsx)(e.li,{children:"使用 esbuild 插件时需要将插件加在 plugins 数组的头部,因为我们内部也是通过一个 esbuild 插件介入到整个构建流程中去的,因此需要将自定义插件优先注册。"}),"\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:"默认情况下,输出的 JS 代码可能会依赖一些辅助函数来支持目标环境或者输出格式,这些辅助函数会被内联在需要它的文件中。"}),"\n",(0,s.jsxs)(e.p,{children:["当在使用 SWC Transform 进行代码转换的时候,可以启动 ",(0,s.jsx)(e.code,{children:"externalHelpers"})," 配置,将内联的辅助函数转换为从外部模块 ",(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.code,{children:"boolean"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值:",(0,s.jsx)(e.code,{children:"false"})]}),"\n"]}),"\n",(0,s.jsx)(e.p,{children:"下面是使用该配置前后的产物变化比较。"}),"\n",(0,s.jsx)(e.p,{children:"开启前:"}),"\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:"// 辅助函数",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:"// 辅助函数",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:"// 你的代码",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:"开启后:"}),"\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:"// 从 @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:"// 你的代码",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:"用于在打包时排除一些外部依赖,避免将这些依赖打包到最终的 bundle 中。"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsx)(e.li,{children:"类型:"}),"\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:"Externals",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.code,{children:"[]"})]}),"\n",(0,s.jsxs)(e.li,{children:["构建类型:",(0,s.jsx)(e.code,{children:"仅支持 buildType: 'bundle'"})]}),"\n",(0,s.jsx)(e.li,{children:"示例:"}),"\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:"// 避免打包 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:["用于设置 JavaScript 产物输出的格式,其中 ",(0,s.jsx)(e.code,{children:"iife"})," 和 ",(0,s.jsx)(e.code,{children:"umd"})," 只在 ",(0,s.jsx)(e.code,{children:"buildType"})," 为 ",(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.code,{children:"'esm' | 'cjs' | 'iife' | 'umd'"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值:",(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.jsx)(e.p,{children:'esm 代表 "ECMAScript 模块",它需要运行环境支持 import 和 export 语法。'}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsx)(e.li,{children:"示例:"}),"\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.jsx)(e.p,{children:'cjs 代表 "CommonJS",它需要运行环境支持 exports、require 和 module 语法,通常为 Node.js 环境。'}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsx)(e.li,{children:"示例:"}),"\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.jsx)(e.p,{children:'iife 代表 "立即调用函数表达式",它将代码包裹在函数表达式中,确保代码中的任何变量不会意外地与全局范围中的变量冲突,通常在浏览器环境中运行。'}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsx)(e.li,{children:"示例:"}),"\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.jsx)(e.p,{children:'umd 代表 "Universal Module Definition",用于在不同环境(浏览器、Node.js 等)中运行。umd 格式的模块可以在多种环境下使用,既可以作为全局变量访问,也可以通过模块加载器(如 RequireJS)进行模块化加载。'}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsx)(e.li,{children:"示例:"}),"\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:"指定构建的入口文件,数组形式可以指定目录。"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsx)(e.li,{children:"类型:"}),"\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.code,{children:"bundle"})," 模式下默认为 ",(0,s.jsx)(e.code,{children:"['src/index.ts']"}),",",(0,s.jsx)(e.code,{children:"bundleless"})," 模式下默认为 ",(0,s.jsx)(e.code,{children:"['src']"})]}),"\n"]}),"\n",(0,s.jsx)(e.p,{children:(0,s.jsx)(e.strong,{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:"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:"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:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsx)(e.p,{children:(0,s.jsx)(e.strong,{children:"对象用法:"})}),"\n",(0,s.jsx)(e.p,{children:"当在 bundle 模式下需要修改产物的输出文件名称的时候,可以使用对象形式进行配置。"}),"\n",(0,s.jsx)(e.p,{children:(0,s.jsx)(e.strong,{children:"对象的 Key 是产物的文件名称,Value 是源码的文件路径。"})}),"\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:"指定 JSX 的编译方式,默认支持 React 17 及更高版本,自动注入 JSX 运行时代码。"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"automatic | transform"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(0,s.jsx)(e.code,{children:"automatic"})]}),"\n"]}),"\n",(0,s.jsxs)(e.p,{children:["如果你需要支持 React 16,则可以设置 ",(0,s.jsx)(e.code,{children:"jsx"})," 为 ",(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:"\n关于 JSX Transform 的更多说明,可以参考以下链接:"}),(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"]}),"\n",(0,s.jsx)(e.p,{children:"这个选项用于构建分析,开启该选项后,esbuild 会以 JSON 格式生成有关构建的一些元数据。"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型:",(0,s.jsx)(e.code,{children:"boolean"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值:",(0,s.jsx)(e.code,{children:"false"})]}),"\n",(0,s.jsxs)(e.li,{children:["构建类型:",(0,s.jsx)(e.code,{children:"仅支持 buildType: 'bundle'"})]}),"\n"]}),"\n",(0,s.jsxs)(e.p,{children:["开启 ",(0,s.jsx)(e.code,{children:"metafile"})," 生成:"]}),"\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:"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:[]}]}),"\n",(0,s.jsxs)(e.p,{children:["在执行 build 构建后,产物目录下会生成 ",(0,s.jsx)(e.code,{children:"metafile-[xxx].json"})," 文件,你可以通过 ",(0,s.jsx)(e.a,{href:"https://esbuild.github.io/analyze/",target:"_blank",rel:"noopener noreferrer",children:"esbuild analyze"})," 和 ",(0,s.jsx)(e.a,{href:"https://bundle-buddy.com/esbuild",target:"_blank",rel:"noopener noreferrer",children:"bundle-buddy"})," 等工具进行可视化分析。"]}),"\n",(0,s.jsxs)(e.h2,{id:"minify",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#minify",children:"#"}),"minify"]}),"\n",(0,s.jsxs)(e.p,{children:["使用 esbuild 或者 terser 压缩代码,也可以传入 ",(0,s.jsx)(e.a,{href:"https://github.com/terser/terser#minify-options",target:"_blank",rel:"noopener noreferrer",children:"terserOptions"}),"。"]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"'terser' | 'esbuild' | false | object"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(0,s.jsx)(e.code,{children:"false"})]}),"\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:"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:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.h2,{id:"outdir",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#outdir",children:"#"}),"outDir"]}),"\n",(0,s.jsx)(e.p,{children:"指定构建的输出目录"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"string"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(0,s.jsx)(e.code,{children:"dist"})]}),"\n"]}),"\n",(0,s.jsxs)(e.h2,{id:"platform",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#platform",children:"#"}),"platform"]}),"\n",(0,s.jsxs)(e.p,{children:["默认生成用于 Node.js 环境下的代码,你也可以指定为 ",(0,s.jsx)(e.code,{children:"browser"}),",会生成用于浏览器环境的代码。"]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"'browser' | 'node'"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(0,s.jsx)(e.code,{children:"node"})]}),"\n"]}),"\n",(0,s.jsxs)(e.h2,{id:"redirect",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#redirect",children:"#"}),"redirect"]}),"\n",(0,s.jsxs)(e.p,{children:["在 ",(0,s.jsx)(e.code,{children:"buildType: 'bundleless'"})," 构建模式下,会对引用路径进行重定向,确保指向了正确的产物,例如:"]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.code,{children:"import './index.less'"})," 会被改写成 ",(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'"})," 会被改写成 ",(0,s.jsx)(e.code,{children:"import icon from '../asset/close.svg'"}),"(依实际情况而定)"]}),"\n"]}),"\n",(0,s.jsx)(e.p,{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:"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:"// 关闭对别名路径的修改",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:"// 关闭对样式文件路径的修改",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:"// 关闭对资源文件路径的修改",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:[]}]}),"\n",(0,s.jsxs)(e.h2,{id:"sideeffects",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#sideeffects",children:"#"}),"sideEffects"]}),"\n",(0,s.jsx)(e.p,{children:"配置模块的副作用"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"RegExg[] | (filePath: string, isExternal: boolean) => boolean | boolean"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(0,s.jsx)(e.code,{children:"undefined"})]}),"\n"]}),"\n",(0,s.jsxs)(e.p,{children:["通常情况下,我们通过 package.json 的 ",(0,s.jsx)(e.code,{children:'"sideEffects"'})," 字段来配置模块的副作用,但是在某些情况下,三方包的 package.json 是不可靠的。\n例如我们引用了一个三方包的样式文件。"]}),"\n",(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:[]}]}),"\n",(0,s.jsxs)(e.p,{children:["但是这个三方包的 package.json 里并没有将样式文件配置到 ",(0,s.jsx)(e.code,{children:'"sideEffects"'})," 里。"]}),"\n",(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:[]}]}),"\n",(0,s.jsxs)(e.p,{children:["同时你又设置了 ",(0,s.jsx)(e.a,{href:"#styleinject",children:"style.inject"})," 为 ",(0,s.jsx)(e.code,{children:"true"}),",在控制台可以看到类似的警告信息:"]}),"\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:"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:[]}]}),"\n",(0,s.jsxs)(e.p,{children:["这时候就可以使用这个配置项,手动配置模块的",(0,s.jsx)(e.code,{children:'"sideEffects"'}),",配置支持正则和函数形式。"]}),"\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:"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:[]}]}),"\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:["\n添加此配置后,打包时将不会再读取 package.json 里的 ",(0,s.jsx)(e.code,{children:'"sideEffects"'}),"字段。"]})})]}),"\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:["指定构建的源码目录,默认为 ",(0,s.jsx)(e.code,{children:"src"}),",用于在 ",(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.code,{children:"string"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(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:"控制 sourceMap 如何生成。"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"boolean | 'inline' | 'external'"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(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:["设置源码的格式。默认情况下,会将源码作为 EsModule 进行处理。当源码使用的是 CommonJS 的时候,需要设置 ",(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.code,{children:"'commonjs' | 'module'"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值:",(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:"是否开启代码分割。"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"boolean"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(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:"配置样式相关的配置。"}),"\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 相关配置。"}),"\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:["详细配置参考 ",(0,s.jsx)(e.a,{href:"https://less.bootcss.com/usage/#less-options",target:"_blank",rel:"noopener noreferrer",children:"less"}),"。"]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"object"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(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:["在入口文件起始添加 ",(0,s.jsx)(e.code,{children:"Less"})," 代码。"]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"string"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(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:"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:"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:"#D8DEE9FF"}}},{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:["配置 ",(0,s.jsx)(e.code,{children:"Less"})," 使用的实现库,在不指定的情况下,使用的内置版本是 ",(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.code,{children:"string | object"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(0,s.jsx)(e.code,{children:"undefined"})]}),"\n"]}),"\n",(0,s.jsxs)(e.p,{children:["设置 ",(0,s.jsx)(e.code,{children:"object"})," 类型时,可以指定 ",(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:"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:"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:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.code,{children:"string"})," 类型时,指定 ",(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:"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:"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:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.h2,{id:"sass",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#sass",children:"#"}),"sass"]}),"\n",(0,s.jsx)(e.p,{children:"Sass 相关配置。"}),"\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:["详细配置参考 ",(0,s.jsx)(e.a,{href:"https://github.com/sass/node-sass#options",target:"_blank",rel:"noopener noreferrer",children:"node-sass"})]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"object"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(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:["在入口文件起始添加 ",(0,s.jsx)(e.code,{children:"Sass"})," 代码。"]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"string | Function"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(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:"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:"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:"#D8DEE9FF"}}},{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:["配置 ",(0,s.jsx)(e.code,{children:"Sass"})," 使用的实现库,在不指定的情况下,使用的内置版本是 ",(0,s.jsx)(e.code,{children:"1.5.4"}),"。"]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"string | object"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(0,s.jsx)(e.code,{children:"undefined"})]}),"\n"]}),"\n",(0,s.jsxs)(e.p,{children:["设置为 ",(0,s.jsx)(e.code,{children:"object"})," 类型时,可以指定 ",(0,s.jsx)(e.code,{children:"Sass"})," 的实现库。"]}),"\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:"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:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.code,{children:"string"})," 类型时,指定 ",(0,s.jsx)(e.code,{children:"Sass"})," 的实现库的路径"]}),"\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:"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:"#D8DEE9FF"}}},{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:["详细配置查看 ",(0,s.jsx)(e.a,{href:"https://github.com/postcss/postcss#options",target:"_blank",rel:"noopener noreferrer",children:"PostCSS"}),"。"]}),"\n",(0,s.jsx)(e.p,{children:(0,s.jsx)(e.strong,{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:"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:"配置打包模式下是否将 CSS 样式插入到 JavaScript 代码中。"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"boolean"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(0,s.jsx)(e.code,{children:"false"})]}),"\n"]}),"\n",(0,s.jsxs)(e.p,{children:["将 ",(0,s.jsx)(e.code,{children:"inject"})," 设置为 ",(0,s.jsx)(e.code,{children:"true"})," 来开启此功能:"]}),"\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:"开启后,你会看到源码中引用的 CSS 代码被包含在了打包后的 JS 产物中。"}),"\n",(0,s.jsxs)(e.p,{children:["例如,你在源码里写了 ",(0,s.jsx)(e.code,{children:"import './index.scss'"}),",那么在产物中你会看到以下代码:"]}),"\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:["开启 ",(0,s.jsx)(e.code,{children:"inject"})," 后,你需要注意以下几点:"]}),(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["CSS 文件中的 ",(0,s.jsx)(e.code,{children:"@import"})," 不会被处理。如果你的 CSS 文件中有 ",(0,s.jsx)(e.code,{children:"@import"})," ,那么你需要在 JS 文件中手动引入 CSS 文件(less,scss 文件不需要,因为它们会有预处理)。"]}),"\n",(0,s.jsxs)(e.li,{children:["需要考虑 ",(0,s.jsx)(e.code,{children:"sideEffects"})," 的影响。默认情况下,我们的构建器会认为 CSS 是有副作用的,如果你的项目中或者三方包的 package.json 设置了 ",(0,s.jsx)(e.code,{children:"sideEffects"})," 字段并且没有包含此 CSS 文件,那么你将会得到一个警告:"]}),"\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:["此时可以通过配置 ",(0,s.jsx)(e.a,{href:"#sideeffects",children:"sideEffects"})," 来解决。"]})]})]}),"\n",(0,s.jsxs)(e.h2,{id:"styleautomodules",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#styleautomodules",children:"#"}),"style.autoModules"]}),"\n",(0,s.jsx)(e.p,{children:"根据文件名自动启用 CSS Modules。"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"boolean | RegExp"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(0,s.jsx)(e.code,{children:"true"})]}),"\n"]}),"\n",(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.code,{children:"true"})," : 为以 ",(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"})," 文件名结尾的样式文件启用 CSS Modules。"]}),"\n",(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.code,{children:"false"})," : 禁用 CSS Modules."]}),"\n",(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.code,{children:"RegExp"})," : 为匹配正则条件的所有文件启用 CSS Modules."]}),"\n",(0,s.jsxs)(e.h2,{id:"stylemodules",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#stylemodules",children:"#"}),"style.modules"]}),"\n",(0,s.jsx)(e.p,{children:"CSS Modules 配置。"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"object"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(0,s.jsx)(e.code,{children:"{}"})]}),"\n"]}),"\n",(0,s.jsxs)(e.p,{children:["一个常用的配置是 ",(0,s.jsx)(e.code,{children:"localsConvention"}),",它可以改变 CSS Modules 的类名生成规则。"]}),"\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:"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:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsx)(e.p,{children:"对于以下样式:"}),"\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:"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:[]}]}),"\n",(0,s.jsxs)(e.p,{children:["你可以使用 ",(0,s.jsx)(e.code,{children:"styles.boxTitle"})," 来访问。"]}),"\n",(0,s.jsxs)(e.p,{children:["详细配置查看 ",(0,s.jsx)(e.a,{href:"https://github.com/madyankin/postcss-modules#usage",target:"_blank",rel:"noopener noreferrer",children:"postcss-modules"})]}),"\n",(0,s.jsxs)(e.h2,{id:"styletailwindcss",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#styletailwindcss",children:"#"}),"style.tailwindcss"]}),"\n",(0,s.jsx)(e.p,{children:"Tailwind CSS 相关配置。"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"object | Function"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(0,s.jsx)(e.code,{children:"见下方配置详情"})]}),"\n"]}),"\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:"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:[]}]}),"\n",(0,s.jsxs)(e.p,{children:["值为 ",(0,s.jsx)(e.code,{children:"object"})," 类型时,与默认配置通过 ",(0,s.jsx)(e.code,{children:"Object.assign"})," 合并。"]}),"\n",(0,s.jsxs)(e.p,{children:["值为 ",(0,s.jsx)(e.code,{children:"Function"})," 类型时,函数返回的对象与默认配置通过 ",(0,s.jsx)(e.code,{children:"Object.assign"})," 合并。"]}),"\n",(0,s.jsxs)(e.p,{children:["不允许出现 ",(0,s.jsx)(e.code,{children:"theme"})," 属性,否则会构建失败, 使用 ",(0,s.jsx)(e.a,{href:"/module-tools/api/config/design-system.html",children:(0,s.jsx)(e.code,{children:"designSystem"})})," 作为 ",(0,s.jsx)(e.code,{children:"Tailwind CSS Theme"})," 配置。"]}),"\n",(0,s.jsxs)(e.p,{children:["其他的使用方式和 Tailwind CSS 一致: ",(0,s.jsx)(e.a,{href:"https://tailwindcss.com/docs/configuration",target:"_blank",rel:"noopener noreferrer",children:"快速传送门"}),"。"]}),"\n",(0,s.jsxs)(e.h2,{id:"target",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#target",children:"#"}),"target"]}),"\n",(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.code,{children:"target"})," 用于为生成的 JavaScript 代码设置目标环境。它让 Module Tools 将目标环境无法识别的 JavaScript 语法转换为在这些环境中可用的低版本 JavaScript 语法。"]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsx)(e.li,{children:"类型:"}),"\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:"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:[]}]}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["默认值: ",(0,s.jsx)(e.code,{children:"'es6'"})]}),"\n"]}),"\n",(0,s.jsxs)(e.p,{children:["例如,将代码编译到 ",(0,s.jsx)(e.code,{children:"es5"})," 语法:"]}),"\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:"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:[]}]}),"\n",(0,s.jsxs)(e.h2,{id:"transformimport",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#transformimport",children:"#"}),"transformImport"]}),"\n",(0,s.jsx)(e.p,{children:"提供与 babel-plugin-import 等价的能力和配置,基于 SWC 实现。"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型:",(0,s.jsx)(e.code,{children:"object[]"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值:",(0,s.jsx)(e.code,{children:"[]"})]}),"\n"]}),"\n",(0,s.jsxs)(e.p,{children:["数组元素为一个 babel-plugin-import 的配置对象。配置对象可以参考 ",(0,s.jsx)(e.a,{href:"https://github.com/umijs/babel-plugin-import#options",target:"_blank",rel:"noopener noreferrer",children:"options"}),"。"]}),"\n",(0,s.jsx)(e.p,{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:"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:"transformImport",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" [",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#ECEFF4"}}},{content:"// babel-plugin-import 的 options 配置",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:"#88C0D0"}}},{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:"#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:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.h3,{id:"注意事项",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#注意事项",children:"#"}),"注意事项"]}),"\n",(0,s.jsxs)(e.p,{children:["参考",(0,s.jsx)(e.a,{href:"/module-tools/plugins/official-list/plugin-import.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9",children:"「Import 插件——注意事项」"})]}),"\n",(0,s.jsxs)(e.h2,{id:"umdglobals",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#umdglobals",children:"#"}),"umdGlobals"]}),"\n",(0,s.jsx)(e.p,{children:"指定 UMD 产物外部导入的全局变量。"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"Record<string, string>"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(0,s.jsx)(e.code,{children:"{}"})]}),"\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:"#D8DEE9"}}},{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:"#D8DEE9"}}},{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:"#D8DEE9"}}},{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:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"ts"},annotations:[]}]}),"\n",(0,s.jsxs)(e.p,{children:["此时,",(0,s.jsx)(e.code,{children:"react"})," 和 ",(0,s.jsx)(e.code,{children:"react-dom"})," 会被看做是外部导入的全局变量,不会被打包进 UMD 产物中,而是通过 ",(0,s.jsx)(e.code,{children:"global.React"})," 和 ",(0,s.jsx)(e.code,{children:"global.ReactDOM"})," 的方式进行访问。"]}),"\n",(0,s.jsxs)(e.h2,{id:"umdmodulename",children:[(0,s.jsx)(e.a,{className:"header-anchor","aria-hidden":"true",href:"#umdmodulename",children:"#"}),"umdModuleName"]}),"\n",(0,s.jsx)(e.p,{children:"指定 UMD 产物的模块名。"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["类型: ",(0,s.jsx)(e.code,{children:"string | Function"})]}),"\n",(0,s.jsxs)(e.li,{children:["默认值: ",(0,s.jsx)(e.code,{children:"name => name"})]}),"\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:"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:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),"\n",(0,s.jsxs)(e.p,{children:["此时 UMD 产物会去挂载到 ",(0,s.jsx)(e.code,{children:"global.myLib"})," 上。"]}),"\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.ul,{children:["\n",(0,s.jsx)(e.li,{children:"需要遵守 UMD 规范,UMD 产物的模块名不能和全局变量名冲突。"}),"\n",(0,s.jsxs)(e.li,{children:["模块名会被转换为驼峰命名,如 ",(0,s.jsx)(e.code,{children:"my-lib"})," 会被转换为 ",(0,s.jsx)(e.code,{children:"myLib"}),",可参考",(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:"同时函数形式可以接收一个参数,为当前打包文件的输出路径"}),"\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:"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:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]})]})}var d=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 a(o,e){throw Error("Expected "+(e?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}}}]);