@modern-js/module-tools-docs 2.59.0 → 2.60.1

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 (207) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/doc_build/404.html +17 -0
  3. package/doc_build/api/config/build-config.html +1217 -0
  4. package/doc_build/api/config/build-preset.html +211 -0
  5. package/doc_build/api/config/dev.html +63 -0
  6. package/doc_build/api/config/plugins.html +54 -0
  7. package/doc_build/api/index.html +17 -0
  8. package/doc_build/api/plugin-api/plugin-hooks.html +395 -0
  9. package/doc_build/components/faq-build-exception.html +17 -0
  10. package/doc_build/components/faq-build-other.html +17 -0
  11. package/doc_build/components/faq-build-product.html +17 -0
  12. package/doc_build/components/faq-storybook.html +17 -0
  13. package/doc_build/components/publish-emo.html +17 -0
  14. package/doc_build/components/register-esbuild-plugin.html +27 -0
  15. package/doc_build/components/release-module-doc.html +17 -0
  16. package/doc_build/en/api/config/build-config.html +1220 -0
  17. package/doc_build/en/api/config/build-preset.html +206 -0
  18. package/doc_build/en/api/config/dev.html +63 -0
  19. package/doc_build/en/api/config/plugins.html +54 -0
  20. package/doc_build/en/api/index.html +17 -0
  21. package/doc_build/en/api/plugin-api/plugin-hooks.html +399 -0
  22. package/doc_build/en/components/faq-build-exception.html +17 -0
  23. package/doc_build/en/components/faq-build-other.html +17 -0
  24. package/doc_build/en/components/faq-build-product.html +17 -0
  25. package/doc_build/en/components/faq-storybook.html +17 -0
  26. package/doc_build/en/components/publish-emo.html +17 -0
  27. package/doc_build/en/components/register-esbuild-plugin.html +27 -0
  28. package/doc_build/en/components/release-module-doc.html +17 -0
  29. package/doc_build/en/guide/advance/asset.html +58 -0
  30. package/doc_build/en/guide/advance/build-umd.html +166 -0
  31. package/doc_build/en/guide/advance/copy.html +208 -0
  32. package/doc_build/en/guide/advance/external-dependency.html +62 -0
  33. package/doc_build/en/guide/advance/in-depth-about-build.html +302 -0
  34. package/doc_build/en/guide/advance/in-depth-about-dev-command.html +68 -0
  35. package/doc_build/en/guide/basic/before-getting-started.html +139 -0
  36. package/doc_build/en/guide/basic/command-preview.html +131 -0
  37. package/doc_build/en/guide/basic/modify-output-product.html +133 -0
  38. package/doc_build/en/guide/basic/publish-your-project.html +100 -0
  39. package/doc_build/en/guide/basic/use-micro-generator.html +54 -0
  40. package/doc_build/en/guide/basic/use-module-doc.html +397 -0
  41. package/doc_build/en/guide/basic/using-storybook.html +168 -0
  42. package/doc_build/en/guide/best-practices/components.html +198 -0
  43. package/doc_build/en/guide/best-practices/use-tailwindcss.html +243 -0
  44. package/doc_build/en/guide/faq/basic.html +23 -0
  45. package/doc_build/en/guide/faq/build.html +237 -0
  46. package/doc_build/en/guide/faq/index.html +23 -0
  47. package/doc_build/en/guide/faq/storybook.html +85 -0
  48. package/doc_build/en/guide/intro/getting-started.html +92 -0
  49. package/doc_build/en/guide/intro/welcome.html +27 -0
  50. package/doc_build/en/guide/intro/why-module-engineering-solution.html +25 -0
  51. package/doc_build/en/index.html +17 -0
  52. package/doc_build/en/plugins/guide/getting-started.html +70 -0
  53. package/doc_build/en/plugins/guide/plugin-object.html +74 -0
  54. package/doc_build/en/plugins/guide/setup-function.html +96 -0
  55. package/doc_build/en/plugins/official-list/overview.html +26 -0
  56. package/doc_build/en/plugins/official-list/plugin-babel.html +65 -0
  57. package/doc_build/en/plugins/official-list/plugin-banner.html +91 -0
  58. package/doc_build/en/plugins/official-list/plugin-import.html +111 -0
  59. package/doc_build/en/plugins/official-list/plugin-node-polyfill.html +128 -0
  60. package/doc_build/en/plugins/official-list/plugin-polyfill.html +72 -0
  61. package/doc_build/en/plugins/official-list/plugin-vue.html +66 -0
  62. package/doc_build/guide/advance/asset.html +55 -0
  63. package/doc_build/guide/advance/build-umd.html +170 -0
  64. package/doc_build/guide/advance/copy.html +208 -0
  65. package/doc_build/guide/advance/external-dependency.html +61 -0
  66. package/doc_build/guide/advance/in-depth-about-build.html +300 -0
  67. package/doc_build/guide/advance/in-depth-about-dev-command.html +68 -0
  68. package/doc_build/guide/basic/before-getting-started.html +139 -0
  69. package/doc_build/guide/basic/command-preview.html +131 -0
  70. package/doc_build/guide/basic/modify-output-product.html +134 -0
  71. package/doc_build/guide/basic/publish-your-project.html +99 -0
  72. package/doc_build/guide/basic/use-micro-generator.html +54 -0
  73. package/doc_build/guide/basic/use-module-doc.html +395 -0
  74. package/doc_build/guide/basic/using-storybook.html +177 -0
  75. package/doc_build/guide/best-practices/components.html +198 -0
  76. package/doc_build/guide/best-practices/use-tailwindcss.html +243 -0
  77. package/doc_build/guide/faq/basic.html +23 -0
  78. package/doc_build/guide/faq/build.html +234 -0
  79. package/doc_build/guide/faq/index.html +23 -0
  80. package/doc_build/guide/faq/storybook.html +85 -0
  81. package/doc_build/guide/intro/getting-started.html +89 -0
  82. package/doc_build/guide/intro/welcome.html +27 -0
  83. package/doc_build/guide/intro/why-module-engineering-solution.html +25 -0
  84. package/doc_build/index.html +17 -0
  85. package/doc_build/plugins/guide/getting-started.html +70 -0
  86. package/doc_build/plugins/guide/plugin-object.html +74 -0
  87. package/doc_build/plugins/guide/setup-function.html +95 -0
  88. package/doc_build/plugins/official-list/overview.html +26 -0
  89. package/doc_build/plugins/official-list/plugin-babel.html +64 -0
  90. package/doc_build/plugins/official-list/plugin-banner.html +94 -0
  91. package/doc_build/plugins/official-list/plugin-import.html +112 -0
  92. package/doc_build/plugins/official-list/plugin-node-polyfill.html +128 -0
  93. package/doc_build/plugins/official-list/plugin-polyfill.html +71 -0
  94. package/doc_build/plugins/official-list/plugin-vue.html +66 -0
  95. package/doc_build/static/css/styles.0b88df3a.css +1 -0
  96. package/doc_build/static/js/490.a066dbc0.js +6 -0
  97. package/doc_build/static/js/490.a066dbc0.js.LICENSE.txt +35 -0
  98. package/doc_build/static/js/async/1095.4ca5fdf0.js +1 -0
  99. package/doc_build/static/js/async/1148.ff6a84ca.js +1 -0
  100. package/doc_build/static/js/async/1306.8bc84d6b.js +1 -0
  101. package/doc_build/static/js/async/1507.fed31a58.js +1 -0
  102. package/doc_build/static/js/async/1527.4c6e53e2.js +1 -0
  103. package/doc_build/static/js/async/1657.d0d95d59.js +1 -0
  104. package/doc_build/static/js/async/1801.5d49a2fe.js +1 -0
  105. package/doc_build/static/js/async/1941.0b3cceee.js +1 -0
  106. package/doc_build/static/js/async/213.db8a0492.js +1 -0
  107. package/doc_build/static/js/async/2131.5dfdffa9.js +1 -0
  108. package/doc_build/static/js/async/2140.848412d7.js +1 -0
  109. package/doc_build/static/js/async/2206.f6b802b2.js +1 -0
  110. package/doc_build/static/js/async/2300.cba0106e.js +1 -0
  111. package/doc_build/static/js/async/2347.a480682f.js +1 -0
  112. package/doc_build/static/js/async/2365.daed0a9c.js +1 -0
  113. package/doc_build/static/js/async/2561.2e43400c.js +1 -0
  114. package/doc_build/static/js/async/2579.f7c71e6b.js +1 -0
  115. package/doc_build/static/js/async/2671.c711355f.js +1 -0
  116. package/doc_build/static/js/async/2704.561dadd9.js +1 -0
  117. package/doc_build/static/js/async/2712.5ffea5ba.js +1 -0
  118. package/doc_build/static/js/async/3023.5bef6325.js +1 -0
  119. package/doc_build/static/js/async/3039.3982622e.js +1 -0
  120. package/doc_build/static/js/async/3097.b043b3aa.js +1 -0
  121. package/doc_build/static/js/async/3213.df408a99.js +1 -0
  122. package/doc_build/static/js/async/3235.0c4d2c9b.js +1 -0
  123. package/doc_build/static/js/async/336.8387125c.js +1 -0
  124. package/doc_build/static/js/async/3493.5133deaa.js +1 -0
  125. package/doc_build/static/js/async/351.de7824af.js +1 -0
  126. package/doc_build/static/js/async/3597.cf46a69b.js +1 -0
  127. package/doc_build/static/js/async/36.eee0e8fe.js +1 -0
  128. package/doc_build/static/js/async/3628.726e3f10.js +1 -0
  129. package/doc_build/static/js/async/3724.bcc90bb4.js +1 -0
  130. package/doc_build/static/js/async/3761.949f5838.js +1 -0
  131. package/doc_build/static/js/async/4061.84ac839b.js +1 -0
  132. package/doc_build/static/js/async/4064.104b71cd.js +1 -0
  133. package/doc_build/static/js/async/4206.133ffe9e.js +1 -0
  134. package/doc_build/static/js/async/443.b519ce6b.js +1 -0
  135. package/doc_build/static/js/async/4501.c647ab73.js +1 -0
  136. package/doc_build/static/js/async/453.7358c1fd.js +1 -0
  137. package/doc_build/static/js/async/461.2d6ea16c.js +1 -0
  138. package/doc_build/static/js/async/4615.c4e5b749.js +1 -0
  139. package/doc_build/static/js/async/4655.bbe27e7b.js +1 -0
  140. package/doc_build/static/js/async/4812.ebd3f4cb.js +1 -0
  141. package/doc_build/static/js/async/4904.de72a299.js +1 -0
  142. package/doc_build/static/js/async/5105.28347c4d.js +1 -0
  143. package/doc_build/static/js/async/5453.87dcea50.js +1 -0
  144. package/doc_build/static/js/async/5455.9e038fda.js +1 -0
  145. package/doc_build/static/js/async/5493.3644c7b8.js +1 -0
  146. package/doc_build/static/js/async/5495.50aacc7e.js +1 -0
  147. package/doc_build/static/js/async/5555.40dabd12.js +1 -0
  148. package/doc_build/static/js/async/5558.073d18d0.js +1 -0
  149. package/doc_build/static/js/async/5844.b3a9d57a.js +1 -0
  150. package/doc_build/static/js/async/588.6de9811a.js +1 -0
  151. package/doc_build/static/js/async/5889.41a786b6.js +1 -0
  152. package/doc_build/static/js/async/5892.b0db6657.js +1 -0
  153. package/doc_build/static/js/async/5995.209e2925.js +1 -0
  154. package/doc_build/static/js/async/6046.963bbf59.js +1 -0
  155. package/doc_build/static/js/async/6308.6363792d.js +1 -0
  156. package/doc_build/static/js/async/6576.a753babb.js +1 -0
  157. package/doc_build/static/js/async/6615.154a2810.js +1 -0
  158. package/doc_build/static/js/async/6858.e2452605.js +1 -0
  159. package/doc_build/static/js/async/6975.be4ba201.js +1 -0
  160. package/doc_build/static/js/async/7080.1c684c7d.js +1 -0
  161. package/doc_build/static/js/async/7220.1c4ee8bb.js +1 -0
  162. package/doc_build/static/js/async/7406.b2acec42.js +1 -0
  163. package/doc_build/static/js/async/7521.ca744786.js +1 -0
  164. package/doc_build/static/js/async/7535.f50f0fd1.js +1 -0
  165. package/doc_build/static/js/async/7584.c3b673fd.js +1 -0
  166. package/doc_build/static/js/async/7600.03d9da89.js +1 -0
  167. package/doc_build/static/js/async/7663.86b79735.js +1 -0
  168. package/doc_build/static/js/async/769.2bc1c7b7.js +1 -0
  169. package/doc_build/static/js/async/7715.1bfe887f.js +1 -0
  170. package/doc_build/static/js/async/7837.5667c422.js +1 -0
  171. package/doc_build/static/js/async/8040.1cfb21ff.js +1 -0
  172. package/doc_build/static/js/async/8085.f9f71860.js +1 -0
  173. package/doc_build/static/js/async/8098.beeb77f3.js +1 -0
  174. package/doc_build/static/js/async/8134.068074a0.js +1 -0
  175. package/doc_build/static/js/async/8158.2834ced1.js +1 -0
  176. package/doc_build/static/js/async/8214.2fdfe2fe.js +1 -0
  177. package/doc_build/static/js/async/8233.24111213.js +1 -0
  178. package/doc_build/static/js/async/8451.5328c0c7.js +1 -0
  179. package/doc_build/static/js/async/8689.f8447ca1.js +1 -0
  180. package/doc_build/static/js/async/8694.077556c4.js +1 -0
  181. package/doc_build/static/js/async/8713.91395601.js +1 -0
  182. package/doc_build/static/js/async/8750.0f6872b3.js +1 -0
  183. package/doc_build/static/js/async/8802.463e3040.js +1 -0
  184. package/doc_build/static/js/async/9100.066e1017.js +1 -0
  185. package/doc_build/static/js/async/9250.8fb41a47.js +1 -0
  186. package/doc_build/static/js/async/9524.bb257861.js +1 -0
  187. package/doc_build/static/js/async/9611.b2543acb.js +1 -0
  188. package/doc_build/static/js/async/964.b00f3e9f.js +1 -0
  189. package/doc_build/static/js/async/9740.b27e6629.js +1 -0
  190. package/doc_build/static/js/index.6a5d779d.js +1 -0
  191. package/doc_build/static/js/lib-react.a93218f7.js +2 -0
  192. package/doc_build/static/js/lib-react.a93218f7.js.LICENSE.txt +39 -0
  193. package/doc_build/static/js/lib-router.f8d11890.js +2 -0
  194. package/doc_build/static/js/lib-router.f8d11890.js.LICENSE.txt +32 -0
  195. package/doc_build/static/js/styles.3f5a6140.js +1 -0
  196. package/doc_build/static/search_index.en.f19ea64b.json +1 -0
  197. package/doc_build/static/search_index.zh.e818eee4.json +1 -0
  198. package/doc_build/test-result.png +0 -0
  199. package/doc_build/why-module-solution.png +0 -0
  200. package/docs/en/api/config/dev.md +2 -2
  201. package/docs/en/guide/basic/command-preview.md +0 -16
  202. package/docs/en/guide/intro/welcome.md +0 -1
  203. package/docs/zh/api/config/dev.md +2 -2
  204. package/docs/zh/guide/basic/command-preview.md +0 -16
  205. package/docs/zh/guide/basic/using-storybook.mdx +1 -1
  206. package/docs/zh/guide/intro/welcome.md +0 -1
  207. package/package.json +4 -4
package/doc_build/api/config/build-config.html ADDED
@@ -0,0 +1,1217 @@
1
+ <!DOCTYPE html>
2
+ <html lang="zh">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <meta name="generator" content="Rspress v1.31.0">
9
+ <title data-rh="true">buildConfig - Modern.js Module</title><meta data-rh="true" name="description" content="模块工程解决方案"/>
10
+ <script>{;const saved = localStorage.getItem('rspress-theme-appearance');const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;const isDark = !saved || saved === 'auto' ? preferDark : saved === 'dark';document.documentElement.classList.toggle('dark', isDark);document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';}</script><link rel="icon" href="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/logo-1x-0104.png"><script defer src="/module-tools/static/js/styles.3f5a6140.js"></script><script defer src="/module-tools/static/js/lib-react.a93218f7.js"></script><script defer src="/module-tools/static/js/lib-router.f8d11890.js"></script><script defer src="/module-tools/static/js/490.a066dbc0.js"></script><script defer src="/module-tools/static/js/index.6a5d779d.js"></script><link href="/module-tools/static/css/styles.0b88df3a.css" rel="stylesheet"></head>
11
+
12
+ <body >
13
+ <div id="root"><div><div class="navContainer_f6cde rspress-nav px-6 " style="position:sticky"><div class="container_f6cde flex justify-between items-center h-full"><div class="navBarTitle_f6cde"><a href="/module-tools/" class="flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><span>Modern.js Module</span></a></div><div class="flex flex-1 justify-end items-center"><div class="rightNav_f6cde"><div class="flex sm:flex-1 items-center sm:pl-4 sm:pr-2"><div class="rspress-nav-search-button navSearchButton_6e282"><button><svg width="18" height="18" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9Z"></path></svg><p class="searchWord_6e282">Search Docs</p><div style="opacity:0"><span></span><span>K</span></div></button></div><div class="mobileNavSearchButton_6e282"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9Z"></path></svg></div></div><div class="rspress-nav-menu menu h-14"><a class="link_03735 cursor-pointer" target="" href="/module-tools/guide/intro/welcome.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">指南</div></a><a class="link_03735 cursor-pointer" target="" href="/module-tools/api/index.html"><div class="rspress-nav-menu-item singleItem_f6cde activeItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">API</div></a><a class="link_03735 cursor-pointer" target="" href="/module-tools/plugins/guide/getting-started.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">插件</div></a><div class="mx-3 last:mr-0"><div class="relative flex-center h-14"><button class="rspress-nav-menu-group-button flex-center items-center font-medium text-sm text-text-1 hover:text-text-2 transition-colors duration-200"><span class="text-sm font-medium flex" style="margin-right:2px">v2.60.1</span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div class="rspress-nav-menu-group-content absolute mx-0.8 transition-opacity duration-300" style="opacity:0;visibility:hidden;right:0;top:52px"><div class="p-3 pr-2 w-full h-full max-h-100vh whitespace-nowrap" style="box-shadow:var(--rp-shadow-3);z-index:100;border:1px solid var(--rp-c-divider-light);border-radius:var(--rp-radius-large);background:var(--rp-c-bg)"><div><div class="font-medium my-1"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="link_03735 "><div class="rounded-2xl hover:bg-mute" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><div class="flex"><span>更新日志</span></div></div></a></div></div><div><div class="font-medium my-1"><a href="https://modernjs.dev/en/community/contributing-guide.html" target="_blank" rel="noopener noreferrer" class="link_03735 "><div class="rounded-2xl hover:bg-mute" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><div class="flex"><span>贡献指南</span></div></div></a></div></div></div></div></div></div></div><div class="flex-center flex-row"><div class="translation menu-item_f6cde flex text-sm font-bold items-center px-3 py-2"><div><div class="relative flex-center h-14"><button class="rspress-nav-menu-group-button flex-center items-center font-medium text-sm text-text-1 hover:text-text-2 transition-colors duration-200"><span class="text-sm font-medium flex" style="margin-right:2px"><svg width="18" height="18" viewBox="0 0 32 32" style="width:18px;height:18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6 2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div class="rspress-nav-menu-group-content absolute mx-0.8 transition-opacity duration-300" style="opacity:0;visibility:hidden;right:0;top:52px"><div class="p-3 pr-2 w-full h-full max-h-100vh whitespace-nowrap" style="box-shadow:var(--rp-shadow-3);z-index:100;border:1px solid var(--rp-c-divider-light);border-radius:var(--rp-radius-large);background:var(--rp-c-bg)"><div><div class="rounded-2xl my-1 flex" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><span class="text-brand">简体中文</span></div></div><div><div class="font-medium my-1"><a class="link_03735 cursor-pointer" target="" href="/module-tools/en/api/config/build-config.html"><div class="rounded-2xl hover:bg-mute" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><div class="flex"><span>English</span></div></div></a></div></div></div></div></div></div></div><div class="mx-2"><div class="md:mr-2 rspress-nav-appearance"><div class="p-1 border border-solid border-gray-300 text-gray-400 cursor-pointer rounded-md hover:border-gray-600 hover:text-gray-600 dark:hover:border-gray-200 dark:hover:text-gray-200 transition-all duration-300 w-7 h-7"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="dark:hidden" width="18" height="18" fill="currentColor"><path d="M12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM12 4c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1zM12 24c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1zM5.6 6.6c-.3 0-.5-.1-.7-.3L3.5 4.9c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.1.2-.4.3-.7.3zM19.8 20.8c-.3 0-.5-.1-.7-.3l-1.4-1.4c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.2.2-.5.3-.7.3zM3 13H1c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1zM23 13h-2c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1zM4.2 20.8c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.4.3-.7.3zM18.4 6.6c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.5.3-.7.3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="hidden dark:block" width="18" height="18" fill="currentColor"><path d="M12.1 22h-.9c-5.5-.5-9.5-5.4-9-10.9.4-4.8 4.2-8.6 9-9 .4 0 .8.2 1 .5.2.3.2.8-.1 1.1-2 2.7-1.4 6.4 1.3 8.4 2.1 1.6 5 1.6 7.1 0 .3-.2.7-.3 1.1-.1.3.2.5.6.5 1-.2 2.7-1.5 5.1-3.6 6.8-1.9 1.4-4.1 2.2-6.4 2.2zM9.3 4.4c-2.9 1-5 3.6-5.2 6.8-.4 4.4 2.8 8.3 7.2 8.7 2.1.2 4.2-.4 5.8-1.8 1.1-.9 1.9-2.1 2.4-3.4-2.5.9-5.3.5-7.5-1.1-2.8-2.2-3.9-5.9-2.7-9.2z"></path></svg></div></div></div><div class="social-links menu-item_93d67 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_93d67"><svg role="img" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div><div class="mobileNavMenu_f6cde"><div class="navScreen_457e8 " id="navScreen"><div class="container_457e8"><div class="navMenu_457e8"><div class="navMenuItem_457e8 w-full"><a class="link_03735 cursor-pointer" target="" href="/module-tools/guide/intro/welcome.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">指南</div></a></div><div class="navMenuItem_457e8 w-full"><a class="link_03735 cursor-pointer" target="" href="/module-tools/api/index.html"><div class="rspress-nav-menu-item singleItem_f6cde activeItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">API</div></a></div><div class="navMenuItem_457e8 w-full"><a class="link_03735 cursor-pointer" target="" href="/module-tools/plugins/guide/getting-started.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">插件</div></a></div><div class="navMenuItem_457e8 w-full"><div class="mx-3 last:mr-0"><div class=" navScreenMenuGroup_457e8 relative"><button class="button_457e8"><span class="buttonSpan_457e8">v2.60.1</span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" down_457e8 "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div><div class="items_457e8"><div><div class="py-1 font-medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="link_03735 "><div><div class="flex justify-center"><span>更新日志</span></div></div></a></div></div><div><div class="py-1 font-medium"><a href="https://modernjs.dev/en/community/contributing-guide.html" target="_blank" rel="noopener noreferrer" class="link_03735 "><div><div class="flex justify-center"><span>贡献指南</span></div></div></a></div></div></div></div></div></div></div></div><div class="flex-center flex-col gap-2"><div class="mt-2 navAppearance_457e8 flex justify-center"></div><div class="flex text-sm font-bold justify-center"><div class="mx-1.5 my-1"><div class=" navScreenMenuGroup_457e8 relative"><button class="button_457e8"><span class="buttonSpan_457e8"><svg width="18" height="18" viewBox="0 0 32 32" style="width:18px;height:18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6 2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" down_457e8 "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div><div class="items_457e8"><div><div class="p-1 text-center"><span class="text-brand">简体中文</span></div></div><div><div class="py-1 font-medium"><a class="link_03735 cursor-pointer" target="" href="/module-tools/en/api/config/build-config.html"><div><div class="flex justify-center"><span>English</span></div></div></a></div></div></div></div></div></div></div><div class="social-links menu-item_93d67 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_93d67"><svg role="img" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div></div><button aria-label="mobile hamburger" class=" navHamburger_e7b06 text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="currentColor"><circle cx="8" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="24" cy="16" r="2" fill="currentColor"></circle></svg></button></div></div></div></div><section><div class="docLayout_edeb4 pt-0"><div class="rspress-sidebar-menu"><button class="flex-center mr-auto"><div class="text-md mr-2"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"></path></svg></div><span class="text-sm">Menu</span></button><button class="flex-center ml-auto"><span class="text-sm">目录</span><div class="text-md mr-2" style="transform:rotate(0deg);transition:transform 0.2s ease-out;margin-top:2px"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></button></div><aside class="sidebar_71eca rspress-sidebar "><div class="navTitleMask_71eca"><div class="navBarTitle_f6cde"><a href="/module-tools/" class="flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><span>Modern.js Module</span></a></div></div><div class="rspress-scrollbar sidebarContent_71eca"><nav class="pb-2"><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/api/index.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:14px;margin-left:0;border-radius:0 var(--rp-radius) var(--rp-radius) 0;padding-left:24px;font-weight:bold"><span>概览</span></div></a><section class="mt-0.5 block" style="margin-left:0"><div class="flex justify-between items-center menuItem_71eca" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">配置项</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/api/config/build-config.html"><div class="menuItemActive_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>buildConfig</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/api/config/build-preset.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>buildPreset</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/api/config/dev.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>dev</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/api/config/plugins.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>plugins</span></div></a></div></div></div></section><section class="mt-0.5 block" style="margin-left:0"><div class="flex justify-between items-center menuItem_71eca" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">Plugin API</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/api/plugin-api/plugin-hooks.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Plugin Hooks</span></div></a></div></div></div></section></nav></div></aside><div class="content_edeb4 rspress-doc-container flex flex-shrink-0 mx-auto"><div class="w-full flex-1"><div><div class="rspress-doc"><!--$--><h1 id="buildconfig" class="text-3xl mb-10 leading-10 tracking-tight title_3b154">buildConfig<a class="link_3b154 header-anchor" aria-hidden="true" href="#buildconfig">#</a></h1>
14
+ <p class="my-4 leading-7"><code>buildConfig</code> 是一个用来描述如何编译、生成构建产物的配置项，它包含了构建的所有配置。</p>
15
+ <ul class="list-disc pl-5 my-4 leading-7">
16
+ <li class="[&amp;:not(:first-child)]:mt-2">类型：<code>object | object[]</code></li>
17
+ </ul>
18
+ <div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content"><p class="my-4 leading-7">在开始使用 <code>buildConfig</code> 之前，请先阅读以下文档来了解其作用：</p>
19
+ <ul class="list-disc pl-5 my-4 leading-7">
20
+ <li class="[&amp;:not(:first-child)]:mt-2"><a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/guide/basic/modify-output-product.html">修改输出产物</a></li>
21
+ <li class="[&amp;:not(:first-child)]:mt-2"><a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/guide/advance/in-depth-about-build.html">深入理解构建</a></li>
22
+ </ul>
23
+ </div></div>
24
+ <h2 id="alias" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">alias<a class="link_3b154 header-anchor" aria-hidden="true" href="#alias">#</a></h2>
25
+ <ul class="list-disc pl-5 my-4 leading-7">
26
+ <li class="[&amp;:not(:first-child)]:mt-2">类型：<code>Record&lt;string, string&gt; | Function</code></li>
27
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值：<code>{&#x27;@&#x27;: &#x27;src&#x27;,}</code></li>
28
+ </ul>
29
+ <div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content"><p class="my-4 leading-7">对于 TypeScript 项目，只需要在 <code>tsconfig.json</code> 中配置 <a target="_blank" rel="noopener noreferrer" href="https://www.typescriptlang.org/tsconfig#paths" class="link_03735 link_3b154 inline-link_3b154">compilerOptions.paths</a>, Modern.js Module 会自动识别 <code>tsconfig.json</code> 里的别名，因此不需要额外配置 <code>alias</code> 字段。
30
+ </p></div></div>
31
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
32
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
33
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">alias</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
34
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token string-property" style="color:var(--code-token-parameter)">&#x27;@common&#x27;</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;./src/common&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
35
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
36
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
37
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
38
+ <p class="my-4 leading-7">以上配置完成后，如果在代码中引用 <code>@common/Foo.tsx</code>, 则会映射到 <code>&lt;project&gt;/src/common/Foo.tsx</code> 路径上。</p>
39
+ <p class="my-4 leading-7"><code>alias</code> 的值定义为函数时，可以接受预设的 alias 对象，并对其进行修改。</p>
40
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
41
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
42
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token function-variable" style="color:var(--code-token-function)">alias</span><span class="token operator">:</span><span> </span><span class="token parameter">alias</span><span> </span><span class="token operator">=&gt;</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
43
+ </span></span><span style="display:block;padding:0 1.25rem"><span> alias</span><span class="token" style="color:var(--code-token-punctuation)">[</span><span class="token" style="color:var(--code-token-string)">&#x27;@common&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span> </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;./src/common&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
44
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
45
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
46
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
47
+ <p class="my-4 leading-7">也可以在函数中返回一个新对象作为最终结果，新对象会覆盖预设的 alias 对象。</p>
48
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
49
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
50
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token function-variable" style="color:var(--code-token-function)">alias</span><span class="token operator">:</span><span> </span><span class="token parameter">alias</span><span> </span><span class="token operator">=&gt;</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
51
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">return</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
52
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token string-property" style="color:var(--code-token-parameter)">&#x27;@common&#x27;</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;./src/common&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
53
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
54
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
55
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
56
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
57
+ <h2 id="asset" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">asset<a class="link_3b154 header-anchor" aria-hidden="true" href="#asset">#</a></h2>
58
+ <p class="my-4 leading-7">包含静态资源相关的配置。</p>
59
+ <h2 id="assetname" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">asset.name<a class="link_3b154 header-anchor" aria-hidden="true" href="#assetname">#</a></h2>
60
+ <p class="my-4 leading-7">静态资源输出文件名。</p>
61
+ <ul class="list-disc pl-5 my-4 leading-7">
62
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>string | ((assetPath) =&gt; name)</code></li>
63
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>[name].[hash].[ext]</code></li>
64
+ </ul>
65
+ <p class="my-4 leading-7">当 asset.name 为 string 类型时，会自动对 [name]、[ext]、[hash] 进行替换，分别替换为文件名、拓展名、文件 hash。
66
+ 如果想要更高的自由度，可以把 asset.name 作为方法使用，返回值即为文件名。此时，该方法接收一个参数 assetPath，对应资源路径。</p>
67
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
68
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
69
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">asset</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
70
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// no hash</span><span>
71
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">name</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span>name</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-punctuation)">[</span><span>ext</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
72
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// any logic</span><span>
73
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// name: (assetPath) =&gt; &#x27;any.png&#x27;,</span><span>
74
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
75
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
76
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
77
+ <h2 id="assetlimit" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">asset.limit<a class="link_3b154 header-anchor" aria-hidden="true" href="#assetlimit">#</a></h2>
78
+ <p class="my-4 leading-7">用于设置静态资源被自动内联为 base64 的体积阈值。</p>
79
+ <p class="my-4 leading-7">Modern.js Module 在进行打包时，默认会内联体积小于 10KB 的图片、字体、媒体等资源，将它们通过 Base64 编码，并内联到产物中，不再会发送独立的 HTTP 请求。</p>
80
+ <p class="my-4 leading-7">你可以通过修改 <code>limit</code> 参数来调整这个阈值。</p>
81
+ <ul class="list-disc pl-5 my-4 leading-7">
82
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>number</code></li>
83
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>10 * 1024</code></li>
84
+ </ul>
85
+ <p class="my-4 leading-7">例如，将 <code>limit</code> 设置为 <code>0</code> 来避免资源内联：</p>
86
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
87
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
88
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">asset</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
89
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">limit</span><span class="token operator">:</span><span> </span><span class="token number">0</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
90
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
91
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
92
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
93
+ <h2 id="assetpath" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">asset.path<a class="link_3b154 header-anchor" aria-hidden="true" href="#assetpath">#</a></h2>
94
+ <p class="my-4 leading-7">静态资源输出路径，会基于 <a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/api/config/build-config.html#outdir">outDir</a> 进行输出。</p>
95
+ <ul class="list-disc pl-5 my-4 leading-7">
96
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>string</code></li>
97
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>assets</code></li>
98
+ </ul>
99
+ <h2 id="assetpublicpath" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">asset.publicPath<a class="link_3b154 header-anchor" aria-hidden="true" href="#assetpublicpath">#</a></h2>
100
+ <p class="my-4 leading-7">打包时给未内联资源的 CDN 前缀。</p>
101
+ <ul class="list-disc pl-5 my-4 leading-7">
102
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>string</code></li>
103
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>undefined</code></li>
104
+ </ul>
105
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
106
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
107
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">asset</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
108
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">publicPath</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;https://xxx/&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
109
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
110
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
111
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
112
+ <p class="my-4 leading-7">此时，所有静态资源都会添加 <code>https://xxx/</code> 前缀。</p>
113
+ <h2 id="assetsvgr" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">asset.svgr<a class="link_3b154 header-anchor" aria-hidden="true" href="#assetsvgr">#</a></h2>
114
+ <p class="my-4 leading-7">打包时将 SVG 作为一个 React 组件处理，options 参考 <a target="_blank" rel="noopener noreferrer" href="https://react-svgr.com/docs/options/" class="link_03735 link_3b154 inline-link_3b154">svgr</a>，另外还支持了 <code>include</code> 和 <code>exclude</code> 两个配置项，用于匹配需要处理的 SVG 文件。</p>
115
+ <ul class="list-disc pl-5 my-4 leading-7">
116
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>boolean | object</code></li>
117
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>false</code></li>
118
+ </ul>
119
+ <p class="my-4 leading-7">开启 svgr 功能后，可以使用默认导出的方式将 SVG 当做组件使用。</p>
120
+ <div class="language-js"><div class="rspress-code-title">index.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-comment)">// true</span><span>
121
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">import</span><span> Logo </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;./logo.svg&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
122
+ </span></span><span style="display:block;padding:0 1.25rem">
123
+ </span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token operator">=&gt;</span><span> </span><span class="token operator">&lt;</span><span>Logo </span><span class="token operator">/</span><span class="token operator">&gt;</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
124
+ <p class="my-4 leading-7">当开启功能后，可以新建一个类型描述文件，并在 <code>modern-app-env.d.ts</code> 文件中增加，修改使用 SVG 的类型：</p>
125
+ <div class="language-ts"><div class="rspress-code-title">your-app-env.d.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">declare</span><span> </span><span class="token" style="color:var(--code-token-keyword)">module</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;*.svg&#x27;</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
126
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">const</span><span> src</span><span class="token operator">:</span><span> React</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>FunctionComponent</span><span class="token operator">&lt;</span><span>React</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>SVGProps</span><span class="token operator">&lt;</span><span>SVGSVGElement</span><span class="token operator">&gt;&gt;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
127
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> src</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
128
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
129
+ <div class="language-ts"><div class="rspress-code-title">modern-app-env.d.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-comment)">/// &lt;reference path=&#x27;./your-app-env.d.ts&#x27; /&gt;</span><span>
130
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-comment)">/// &lt;reference types=&#x27;@modern-js/module-tools/types&#x27; /&gt;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
131
+ <h2 id="assetsvgrinclude" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">asset.svgr.include<a class="link_3b154 header-anchor" aria-hidden="true" href="#assetsvgrinclude">#</a></h2>
132
+ <p class="my-4 leading-7">设定匹配的 SVG 文件</p>
133
+ <ul class="list-disc pl-5 my-4 leading-7">
134
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>string | RegExp | (string | RegExp)[]</code></li>
135
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>/\.svg$/</code></li>
136
+ </ul>
137
+ <h2 id="assetsvgrexclude" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">asset.svgr.exclude<a class="link_3b154 header-anchor" aria-hidden="true" href="#assetsvgrexclude">#</a></h2>
138
+ <p class="my-4 leading-7">设定不匹配的 SVG 文件</p>
139
+ <ul class="list-disc pl-5 my-4 leading-7">
140
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>string | RegExp | (string | RegExp)[]</code></li>
141
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>undefined</code></li>
142
+ </ul>
143
+ <h2 id="assetsvgrexporttype" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">asset.svgr.exportType<a class="link_3b154 header-anchor" aria-hidden="true" href="#assetsvgrexporttype">#</a></h2>
144
+ <p class="my-4 leading-7">用于配置使用 SVGR 时 SVG 的导出形式。</p>
145
+ <ul class="list-disc pl-5 my-4 leading-7">
146
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>&#x27;named&#x27; | &#x27;default&#x27;</code></li>
147
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>default</code></li>
148
+ </ul>
149
+ <p class="my-4 leading-7">当此选项设置为 &#x27;named&#x27; 时，你可以使用以下语法导入组件：</p>
150
+ <div class="language-js"><div class="rspress-code-title">index.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> ReactComponent </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;./logo.svg&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
151
+ <p class="my-4 leading-7">命名导出默认为 <code>ReactComponent</code>，并可以通过 <code>asset.svgr.namedExport</code> 进行自定义。</p>
152
+ <h2 id="autoextension" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">autoExtension<a class="link_3b154 header-anchor" aria-hidden="true" href="#autoextension">#</a></h2>
153
+ <p class="my-4 leading-7">根据 <a href="#format" class="link_3b154 ">format</a> 和 <a target="_blank" rel="noopener noreferrer" href="https://nodejs.org/api/packages.html#type" class="link_03735 link_3b154 inline-link_3b154">type</a> 自动添加产物里 js 文件和类型描述文件的后缀。</p>
154
+ <ul class="list-disc pl-5 my-4 leading-7">
155
+ <li class="[&amp;:not(:first-child)]:mt-2">类型：<code>boolean</code></li>
156
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值：<code>false</code></li>
157
+ <li class="[&amp;:not(:first-child)]:mt-2">版本：<code>&gt;=2.38.0</code></li>
158
+ </ul>
159
+ <p class="my-4 leading-7">关闭时，js 产物后缀为 <code>.js</code>，类型描述文件后缀为 <code>d.ts</code>。</p>
160
+ <p class="my-4 leading-7">开启后，当 type 为 <code>module</code> 时，node 默认将 <code>.js</code> 作为 esm 加载，因此当我们要输出 cjs 产物时，js 产物后缀为 <code>.cjs</code>，类型描述文件后缀为 <code>d.cts</code>;
161
+ 反之，如果缺少 type 字段或者 type 为 <code>commonjs</code> 时， node 默认将 <code>.js</code> 文件作为 cjs 加载，因此当我们要输出 esm 产物时，js 产物后缀为 <code>.mjs</code>，类型描述文件后缀为 <code>d.mts</code>。</p>
162
+ <div class="rspress-directive warning"><div class="rspress-directive-title">WARNING</div><div class="rspress-directive-content"><p class="my-4 leading-7">在 bundleless 模式下使用时，我们会有一步额外的操作，那就是处理每个文件里的 import/export 语句。我们会给相对路径加上 js 文件后缀，可能是 <code>.mjs</code> 或者 <code>.cjs</code>，这取决于你的包配置，此行为可以通过 <a href="#redirect" class="link_3b154 ">redirect.autoExtension</a>关闭。</p>
163
+ <p class="my-4 leading-7">注意 <a target="_blank" rel="noopener noreferrer" href="https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-useless-path-segments.md#nouselessindex" class="link_03735 link_3b154 inline-link_3b154">noUselessIndex</a> 规则会破坏此行为，你需要禁用此规则
164
+ 如果你需要在 bundleless 使用此配置，请补齐 <code>index</code>，例如 utils 是一个文件夹， 你需要将 <code>import * from &#x27;./utils&#x27;</code> 改写为 <code>import * from &#x27;./utils/index&#x27;</code>
165
+ </p></div></div>
166
+ <div class="language-ts"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
167
+ </span></span><span style="display:block;padding:0 1.25rem"><span> buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
168
+ </span></span><span style="display:block;padding:0 1.25rem"><span> autoExtension</span><span class="token operator">:</span><span> </span><span class="token boolean">true</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
169
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
170
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
171
+ <h2 id="autoexternal" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">autoExternal<a class="link_3b154 header-anchor" aria-hidden="true" href="#autoexternal">#</a></h2>
172
+ <p class="my-4 leading-7">自动外置项目的 <code>&quot;dependencies&quot;</code> 和 <code>&quot;peerDependencies&quot;</code>，不会将其打包到最终的 bundle 产物中。</p>
173
+ <ul class="list-disc pl-5 my-4 leading-7">
174
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>boolean | object</code></li>
175
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>true</code></li>
176
+ </ul>
177
+ <p class="my-4 leading-7">当我们希望关闭对于第三方依赖的默认处理行为时候，可以通过以下方式来实现：</p>
178
+ <div class="language-ts"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
179
+ </span></span><span style="display:block;padding:0 1.25rem"><span> buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
180
+ </span></span><span style="display:block;padding:0 1.25rem"><span> autoExternal</span><span class="token operator">:</span><span> </span><span class="token boolean">false</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
181
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
182
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
183
+ <p class="my-4 leading-7">这样对于 <code>&quot;dependencies&quot;</code> 和 <code>&quot;peerDependencies&quot;</code> 下面的依赖都会进行打包处理。如果只想要关闭其中某个下面的依赖处理，则可以使用
184
+ <code>buildConfig.autoExternal</code> 的对象形式：</p>
185
+ <div class="language-ts"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
186
+ </span></span><span style="display:block;padding:0 1.25rem"><span> buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
187
+ </span></span><span style="display:block;padding:0 1.25rem"><span> autoExternal</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
188
+ </span></span><span style="display:block;padding:0 1.25rem"><span> dependencies</span><span class="token operator">:</span><span> </span><span class="token boolean">false</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
189
+ </span></span><span style="display:block;padding:0 1.25rem"><span> peerDependencies</span><span class="token operator">:</span><span> </span><span class="token boolean">false</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
190
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
191
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
192
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
193
+ <h2 id="autoexternaldependencies" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">autoExternal.dependencies<a class="link_3b154 header-anchor" aria-hidden="true" href="#autoexternaldependencies">#</a></h2>
194
+ <p class="my-4 leading-7">是否需要外置项目的 <code>&quot;dependencies&quot;</code> 依赖。</p>
195
+ <ul class="list-disc pl-5 my-4 leading-7">
196
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>boolean</code></li>
197
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>true</code></li>
198
+ </ul>
199
+ <h2 id="autoexternalpeerdependencies" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">autoExternal.peerDependencies<a class="link_3b154 header-anchor" aria-hidden="true" href="#autoexternalpeerdependencies">#</a></h2>
200
+ <p class="my-4 leading-7">是否需要外置项目的 <code>&quot;peerDependencies&quot;</code> 依赖。</p>
201
+ <ul class="list-disc pl-5 my-4 leading-7">
202
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>boolean</code></li>
203
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>true</code></li>
204
+ </ul>
205
+ <h2 id="banner" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">banner<a class="link_3b154 header-anchor" aria-hidden="true" href="#banner">#</a></h2>
206
+ <p class="my-4 leading-7">提供为每个 JS , CSS 和 DTS 文件的顶部和底部注入内容的能力。</p>
207
+ <div class="language-ts"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">interface</span><span> </span><span class="token class-name">BannerAndFooter</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
208
+ </span></span><span style="display:block;padding:0 1.25rem"><span> js</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">string</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
209
+ </span></span><span style="display:block;padding:0 1.25rem"><span> css</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">string</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
210
+ </span></span><span style="display:block;padding:0 1.25rem"><span> dts</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">string</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
211
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
212
+ <ul class="list-disc pl-5 my-4 leading-7">
213
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>BannerAndFooter</code></li>
214
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值: <code>{}</code></li>
215
+ <li class="[&amp;:not(:first-child)]:mt-2">版本： <code>&gt;=2.36.0</code></li>
216
+ </ul>
217
+ <p class="my-4 leading-7">例如你想为 JS 和 CSS 文件添加版权信息:</p>
218
+ <div class="language-ts"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> moduleTools</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> defineConfig </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;@edenx/module-tools&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
219
+ </span></span><span style="display:block;padding:0 1.25rem">
220
+ </span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">const</span><span> copyRight </span><span class="token operator">=</span><span> </span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string" style="color:var(--code-token-string)">/*
221
+ </span></span><span style="display:block;padding:0 1.25rem;color:var(--code-token-string)" class="token template-string"> © Copyright 2020 example.com or one of its affiliates.
222
+ </span><span style="display:block;padding:0 1.25rem;color:var(--code-token-string)" class="token template-string"> * Some Sample Copyright Text Line
223
+ </span><span style="display:block;padding:0 1.25rem;color:var(--code-token-string)" class="token template-string"> * Some Sample Copyright Text Line
224
+ </span><span style="display:block;padding:0 1.25rem"><span class="token template-string" style="color:var(--code-token-string)">*/</span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
225
+ </span></span><span style="display:block;padding:0 1.25rem">
226
+ </span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
227
+ </span></span><span style="display:block;padding:0 1.25rem"><span> plugins</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span class="token" style="color:var(--code-token-function)">moduleTools</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
228
+ </span></span><span style="display:block;padding:0 1.25rem"><span> buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
229
+ </span></span><span style="display:block;padding:0 1.25rem"><span> banner</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
230
+ </span></span><span style="display:block;padding:0 1.25rem"><span> js</span><span class="token operator">:</span><span> copyRight</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
231
+ </span></span><span style="display:block;padding:0 1.25rem"><span> css</span><span class="token operator">:</span><span> copyRight</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
232
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
233
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
234
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
235
+ <h2 id="buildtype" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">buildType<a class="link_3b154 header-anchor" aria-hidden="true" href="#buildtype">#</a></h2>
236
+ <p class="my-4 leading-7">构建类型，<code>bundle</code> 会打包你的代码，<code>bundleless</code> 只做代码的转换。</p>
237
+ <ul class="list-disc pl-5 my-4 leading-7">
238
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>&#x27;bundle&#x27; | &#x27;bundleless&#x27;</code></li>
239
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>&#x27;bundle&#x27;</code></li>
240
+ </ul>
241
+ <h2 id="copy" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">copy<a class="link_3b154 header-anchor" aria-hidden="true" href="#copy">#</a></h2>
242
+ <p class="my-4 leading-7">将文件或目录拷贝到指定位置。</p>
243
+ <ul class="list-disc pl-5 my-4 leading-7">
244
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>object</code></li>
245
+ </ul>
246
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
247
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
248
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">copy</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
249
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">patterns</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">from</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;./src/assets&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">to</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;&#x27;</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
250
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
251
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
252
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
253
+ <h2 id="copypatterns" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">copy.patterns<a class="link_3b154 header-anchor" aria-hidden="true" href="#copypatterns">#</a></h2>
254
+ <ul class="list-disc pl-5 my-4 leading-7">
255
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>CopyPattern[]</code></li>
256
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>[]</code></li>
257
+ </ul>
258
+ <div class="language-ts"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">interface</span><span> </span><span class="token class-name">CopyPattern</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
259
+ </span></span><span style="display:block;padding:0 1.25rem"><span> from</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">string</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
260
+ </span></span><span style="display:block;padding:0 1.25rem"><span> to</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">string</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
261
+ </span></span><span style="display:block;padding:0 1.25rem"><span> context</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">string</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
262
+ </span></span><span style="display:block;padding:0 1.25rem"><span> globOptions</span><span class="token operator">?</span><span class="token operator">:</span><span> globby</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>GlobbyOptions</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
263
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
264
+ <h2 id="copyoptions" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">copy.options<a class="link_3b154 header-anchor" aria-hidden="true" href="#copyoptions">#</a></h2>
265
+ <ul class="list-disc pl-5 my-4 leading-7">
266
+ <li class="[&amp;:not(:first-child)]:mt-2">类型：</li>
267
+ </ul>
268
+ <div class="language-ts"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">type</span><span> </span><span class="token class-name">Options</span><span> </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
269
+ </span></span><span style="display:block;padding:0 1.25rem"><span> concurrency</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">number</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
270
+ </span></span><span style="display:block;padding:0 1.25rem"><span> enableCopySync</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
271
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
272
+ <ul class="list-disc pl-5 my-4 leading-7">
273
+ <li class="[&amp;:not(:first-child)]:mt-2">
274
+ <p class="my-4 leading-7">默认值： <code>{ concurrency: 100, enableCopySync: false }</code></p>
275
+ </li>
276
+ <li class="[&amp;:not(:first-child)]:mt-2">
277
+ <p class="my-4 leading-7"><code>concurrency</code>: 指定并行执行多少个复制任务。</p>
278
+ </li>
279
+ <li class="[&amp;:not(:first-child)]:mt-2">
280
+ <p class="my-4 leading-7"><code>enableCopySync</code>: 使用 <a target="_blank" rel="noopener noreferrer" href="https://github.com/jprichardson/node-fs-extra/blob/master/lib/copy/copy-sync.js" class="link_03735 link_3b154 inline-link_3b154"><code>fs.copySync</code></a>，默认情况下 <a target="_blank" rel="noopener noreferrer" href="https://github.com/jprichardson/node-fs-extra/blob/master/lib/copy/copy.js" class="link_03735 link_3b154 inline-link_3b154"><code>fs.copy</code></a>。</p>
281
+ </li>
282
+ </ul>
283
+ <h2 id="define" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">define<a class="link_3b154 header-anchor" aria-hidden="true" href="#define">#</a></h2>
284
+ <p class="my-4 leading-7">定义全局变量，注入到代码中</p>
285
+ <ul class="list-disc pl-5 my-4 leading-7">
286
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>Record&lt;string, string&gt;</code></li>
287
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>{}</code></li>
288
+ </ul>
289
+ <p class="my-4 leading-7">由于 <code>define</code> 功能是由全局文本替换实现的，所以需要保证全局变量值为字符串，更为安全的做法是将每个全局变量的值转化为字符串，如下所示：</p>
290
+ <div class="rspress-directive info"><div class="rspress-directive-title">INFO</div><div class="rspress-directive-content"><p class="my-4 leading-7">框架内部会自动进行 JSON 序列化处理，因此不需要手动执行序列化。</p>
291
+ <p class="my-4 leading-7">如果不需要自动序列化，可以通过配置 <a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/api/config/build-config.html#esbuildoptions"><code>esbuildOptions</code></a> 定义 <a target="_blank" rel="noopener noreferrer" href="https://esbuild.github.io/api/#alias" class="link_03735 link_3b154 inline-link_3b154"><code>alias</code></a> 来实现。
292
+ </p></div></div>
293
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
294
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
295
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">define</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
296
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-constant)">VERSION</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-function)">require</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">&#x27;./package.json&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>version </span><span class="token operator">||</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;0.0.0&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
297
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
298
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
299
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
300
+ <p class="my-4 leading-7">不过要注意：如果项目是一个 TypeScript 项目，那么你可能需要在项目源代码目录下的 <code>.d.ts</code> 文件里增加以下内容：</p>
301
+ <blockquote class="border-l-2 border-solid border-divider pl-4 my-6 transition-colors duration-500 blockquote_3b154">
302
+ <p class="my-4 leading-7">如果不存在 <code>d.ts</code> 文件，则可以手动创建。</p>
303
+ </blockquote>
304
+ <div class="language-ts"><div class="rspress-code-title">env.d.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">declare</span><span> </span><span class="token" style="color:var(--code-token-keyword)">const</span><span> </span><span class="token" style="color:var(--code-token-constant)">YOUR_ADD_GLOBAL_VAR</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
305
+ <p class="my-4 leading-7">我们也可以进行环境变量替换：</p>
306
+ <div class="language-js"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> defineConfig </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;@modern-js/module-tools&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
307
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
308
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
309
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">define</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
310
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token string-property" style="color:var(--code-token-parameter)">&#x27;process.env.VERSION&#x27;</span><span class="token operator">:</span><span> process</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>env</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-constant)">VERSION</span><span> </span><span class="token operator">||</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;0.0.0&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
311
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
312
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
313
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
314
+ <p class="my-4 leading-7">通过上面的配置，我们就可以将下面这段代码：</p>
315
+ <div class="language-js"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-comment)">// 编译前代码</span><span>
316
+ </span></span><span style="display:block;padding:0 1.25rem"><span>console</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">log</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>process</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>env</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-constant)">VERSION</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
317
+ <p class="my-4 leading-7">在执行 <code>VERSION=1.0.0 modern build</code> 的时候，转换为：</p>
318
+ <div class="language-js"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-comment)">// 编译后代码</span><span>
319
+ </span></span><span style="display:block;padding:0 1.25rem"><span>console</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">log</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">&#x27;1.0.0&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
320
+ <div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content"><p class="my-4 leading-7">为了防止全局替换替换过度，建议使用时遵循以下两个原则：</p>
321
+ <ul class="list-disc pl-5 my-4 leading-7">
322
+ <li class="[&amp;:not(:first-child)]:mt-2">全局常量使用大写</li>
323
+ <li class="[&amp;:not(:first-child)]:mt-2">自定义全局常量前缀后缀，确保独一无二</li>
324
+ </ul>
325
+ </div></div>
326
+ <h2 id="dts" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">dts<a class="link_3b154 header-anchor" aria-hidden="true" href="#dts">#</a></h2>
327
+ <p class="my-4 leading-7">类型文件生成的相关配置，默认情况会生成。</p>
328
+ <ul class="list-disc pl-5 my-4 leading-7">
329
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>false | object</code></li>
330
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值：</li>
331
+ </ul>
332
+ <div class="language-js"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
333
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">abortOnError</span><span class="token operator">:</span><span> </span><span class="token boolean">true</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
334
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">distPath</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;./&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
335
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">only</span><span class="token operator">:</span><span> </span><span class="token boolean">false</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
336
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
337
+ <h2 id="dtsabortonerror" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">dts.abortOnError<a class="link_3b154 header-anchor" aria-hidden="true" href="#dtsabortonerror">#</a></h2>
338
+ <p class="my-4 leading-7">用于控制在出现类型错误的时候，是否允许构建成功。</p>
339
+ <ul class="list-disc pl-5 my-4 leading-7">
340
+ <li class="[&amp;:not(:first-child)]:mt-2">类型：<code>boolean</code></li>
341
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值：<code>true</code></li>
342
+ </ul>
343
+ <p class="my-4 leading-7"><strong class="font-semibold">默认情况下，在出现类型错误的时候会导致构建失败</strong>。将 <code>abortOnError</code> 设置为 <code>false</code> 后，即使代码中出现了类型问题，构建依然会成功：</p>
344
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
345
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
346
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">dts</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
347
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">abortOnError</span><span class="token operator">:</span><span> </span><span class="token boolean">false</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
348
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
349
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
350
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
351
+ <div class="rspress-directive warning"><div class="rspress-directive-title">WARNING</div><div class="rspress-directive-content"><p class="my-4 leading-7">当关闭该配置后，无法保证类型文件能正常生成，且不保证内容正确。在 <code>buildType: &#x27;bundle&#x27;</code> 时，即打包模式下，类型文件一定不会生成。
352
+ </p></div></div>
353
+ <h2 id="dtsdistpath" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">dts.distPath<a class="link_3b154 header-anchor" aria-hidden="true" href="#dtsdistpath">#</a></h2>
354
+ <p class="my-4 leading-7">类型文件的输出路径，基于 <a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/api/config/build-config.html#outdir">outDir</a> 进行输出。</p>
355
+ <ul class="list-disc pl-5 my-4 leading-7">
356
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>string</code></li>
357
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>./</code></li>
358
+ </ul>
359
+ <p class="my-4 leading-7">比如输出到 <code>outDir</code> 下面的 <code>types</code> 目录：</p>
360
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
361
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
362
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">dts</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
363
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">distPath</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;./types&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
364
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
365
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
366
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
367
+ <h2 id="dtsenabletscbuild" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">dts.enableTscBuild<a class="link_3b154 header-anchor" aria-hidden="true" href="#dtsenabletscbuild">#</a></h2>
368
+ <p class="my-4 leading-7">开启 tsc &#x27;--build&#x27; 选项。当使用 project reference 时，
369
+ 可以使用 &#x27;--build&#x27; 选项以实现项目之间的协同工作以加快构建速度。</p>
370
+ <p class="my-4 leading-7">此选项要求版本 &gt; 2.43.0，
371
+ 事实上，我们在 2.42.0 版本曾试验性地开启此选项，但其带来的许多问题使我们不得不动态开启。</p>
372
+ <div class="language-warning"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-warning" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span>当开启此选项时，为了满足构建需求，你必须显式地在 tsconfig.json 里设置 &#x27;declarationDir&#x27; 或者 &#x27;outDir&#x27;，
373
+ </span></span><span style="display:block;padding:0 1.25rem">如果你用的不是 TS &gt;= 5.0 版本，你还需要显式地设置 &#x27;declaration&#x27; 和 &#x27;emitDeclarationOnly&#x27;。</span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
374
+ <ul class="list-disc pl-5 my-4 leading-7">
375
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>boolean</code></li>
376
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>false</code></li>
377
+ <li class="[&amp;:not(:first-child)]:mt-2">版本： <code>&gt;2.43.0</code></li>
378
+ </ul>
379
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
380
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
381
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">dts</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
382
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">enableTscBuild</span><span class="token operator">:</span><span> </span><span class="token boolean">true</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
383
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
384
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
385
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
386
+ <h2 id="dtsonly" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">dts.only<a class="link_3b154 header-anchor" aria-hidden="true" href="#dtsonly">#</a></h2>
387
+ <p class="my-4 leading-7">是否在构建时只生成类型文件，不生成 JavaScript 产物文件。</p>
388
+ <ul class="list-disc pl-5 my-4 leading-7">
389
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>boolean</code></li>
390
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>false</code></li>
391
+ </ul>
392
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
393
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
394
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">dts</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
395
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">only</span><span class="token operator">:</span><span> </span><span class="token boolean">true</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
396
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
397
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
398
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
399
+ <h2 id="dtsrespectexternal" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">dts.respectExternal<a class="link_3b154 header-anchor" aria-hidden="true" href="#dtsrespectexternal">#</a></h2>
400
+ <p class="my-4 leading-7">当设为 <code>false</code> 时，不会打包任何三方包类型，设为 <code>true</code> 时，会根据 <a href="#externals" class="link_3b154 ">externals</a> 来决定是否需要打包三方类型。</p>
401
+ <p class="my-4 leading-7">在对类型文件进行打包时，构建工具还未对 export 进行分析，因此当你引用的任何一个三方包出现类型错误时，都可能会中断当前的构建流程，这会导致构建流程不可控，因此我们可以通过这个配置来避免该问题。</p>
402
+ <ul class="list-disc pl-5 my-4 leading-7">
403
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>boolean</code></li>
404
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>true</code></li>
405
+ </ul>
406
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
407
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
408
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">dts</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
409
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">respectExternal</span><span class="token operator">:</span><span> </span><span class="token boolean">false</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
410
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
411
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
412
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
413
+ <h2 id="dtstsconfigpath" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">dts.tsconfigPath<a class="link_3b154 header-anchor" aria-hidden="true" href="#dtstsconfigpath">#</a></h2>
414
+ <p class="my-4 leading-7"><strong class="font-semibold">废弃</strong>，使用 <a href="#tsconfig" class="link_3b154 ">tsconfig</a> 配置替代。</p>
415
+ <p class="my-4 leading-7">指定用于生成类型文件的 tsconfig 文件路径。</p>
416
+ <div class="language-ts"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
417
+ </span></span><span style="display:block;padding:0 1.25rem"><span> buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
418
+ </span></span><span style="display:block;padding:0 1.25rem"><span> dts</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
419
+ </span></span><span style="display:block;padding:0 1.25rem"><span> tsconfigPath</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;./other-tsconfig.json&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
420
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
421
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
422
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
423
+ <h2 id="esbuildoptions" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">esbuildOptions<a class="link_3b154 header-anchor" aria-hidden="true" href="#esbuildoptions">#</a></h2>
424
+ <p class="my-4 leading-7">用于修改底层的 <a target="_blank" rel="noopener noreferrer" href="https://esbuild.github.io/api/" class="link_03735 link_3b154 inline-link_3b154">esbuild 配置</a>。</p>
425
+ <ul class="list-disc pl-5 my-4 leading-7">
426
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>Function</code></li>
427
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>c =&gt; c</code></li>
428
+ </ul>
429
+ <p class="my-4 leading-7">例如，我们需要修改生成文件的后缀：</p>
430
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
431
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
432
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token function-variable" style="color:var(--code-token-function)">esbuildOptions</span><span class="token operator">:</span><span> </span><span class="token parameter">options</span><span> </span><span class="token operator">=&gt;</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
433
+ </span></span><span style="display:block;padding:0 1.25rem"><span> options</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>outExtension </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> </span><span class="token string-property" style="color:var(--code-token-parameter)">&#x27;.js&#x27;</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;.mjs&#x27;</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
434
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">return</span><span> options</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
435
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
436
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
437
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
438
+ <p class="my-4 leading-7">例如，注册一个 esbuild 插件：</p>
439
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> myEsbuildPlugin </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;./myEsbuildPlugin&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
440
+ </span></span><span style="display:block;padding:0 1.25rem">
441
+ </span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
442
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
443
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token function-variable" style="color:var(--code-token-function)">esbuildOptions</span><span class="token operator">:</span><span> </span><span class="token parameter">options</span><span> </span><span class="token operator">=&gt;</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
444
+ </span></span><span style="display:block;padding:0 1.25rem"><span> options</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>plugins </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span>myEsbuildPlugin</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token operator">...</span><span>options</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>plugins</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
445
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">return</span><span> options</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
446
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
447
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
448
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
449
+ <p class="my-4 leading-7">在增加 esbuild 插件时，请注意你需要将插件加在 plugins 数组的头部，因为 Modern.js Module 内部也是通过一个 esbuild 插件介入到整个构建流程中去的，因此需要将自定义插件优先注册。</p>
450
+ <div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content"><p class="my-4 leading-7">我们在原本 esbuild 构建的基础上做了许多扩展，因此使用此配置需要注意以下几点：</p>
451
+ <ol class="list-decimal pl-5 my-4 leading-7">
452
+ <li class="[&amp;:not(:first-child)]:mt-2">优先使用 Modern.js Module 提供的配置，例如 esbuild 并不支持 <code>target: &#x27;es5&#x27;</code>，但我们内部使用 SWC 支持了此场景，此时通过 <code>esbuildOptions</code> 设置<code>target: &#x27;es5&#x27;</code>会报错。</li>
453
+ <li class="[&amp;:not(:first-child)]:mt-2">目前我们内部使用 <code>enhanced-resolve</code> 替代了 esbuild 的 resolve 解析算法，所以修改 esbuild resolve 相关配置无效，计划在未来会切换回来。</li>
454
+ </ol>
455
+ </div></div>
456
+ <h2 id="externalhelpers" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">externalHelpers<a class="link_3b154 header-anchor" aria-hidden="true" href="#externalhelpers">#</a></h2>
457
+ <p class="my-4 leading-7">默认情况下，输出的 JS 代码可能会依赖一些辅助函数来支持目标环境或者输出格式，这些辅助函数会被内联在需要它的文件中。</p>
458
+ <p class="my-4 leading-7">使用此配置，将会使用 SWC 对代码进行转换，将内联的辅助函数转换为从外部模块 <code>@swc/helpers</code> 导入这些辅助函数。</p>
459
+ <ul class="list-disc pl-5 my-4 leading-7">
460
+ <li class="[&amp;:not(:first-child)]:mt-2">类型：<code>boolean</code></li>
461
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值：<code>false</code></li>
462
+ </ul>
463
+ <p class="my-4 leading-7">下面是使用该配置前后的产物变化比较。</p>
464
+ <p class="my-4 leading-7">开启前：</p>
465
+ <div class="language-js"><div class="rspress-code-title">./dist/index.js</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-comment)">// 辅助函数</span><span>
466
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">function</span><span> </span><span class="token" style="color:var(--code-token-function)">asyncGeneratorStep</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token parameter">gen</span><span class="token parameter" style="color:var(--code-token-punctuation)">,</span><span class="token parameter"> resolve</span><span class="token parameter" style="color:var(--code-token-punctuation)">,</span><span class="token parameter"> reject</span><span class="token parameter" style="color:var(--code-token-punctuation)">,</span><span class="token parameter"> _next</span><span class="token parameter" style="color:var(--code-token-punctuation)">,</span><span class="token parameter"> _throw</span><span class="token parameter" style="color:var(--code-token-punctuation)">,</span><span class="token parameter"> key</span><span class="token parameter" style="color:var(--code-token-punctuation)">,</span><span class="token parameter"> arg</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
467
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// ...</span><span>
468
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span>
469
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-comment)">// 辅助函数</span><span>
470
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">function</span><span> </span><span class="token" style="color:var(--code-token-function)">_async_to_generator</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token parameter">fn</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
471
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">return</span><span> </span><span class="token" style="color:var(--code-token-keyword)">function</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
472
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// use asyncGeneratorStep</span><span>
473
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// ...</span><span>
474
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
475
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span>
476
+ </span></span><span style="display:block;padding:0 1.25rem">
477
+ </span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-comment)">// 你的代码</span><span>
478
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">var</span><span> </span><span class="token function-variable" style="color:var(--code-token-function)">yourCode</span><span> </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-keyword)">function</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
479
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// use _async_to_generator</span><span>
480
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
481
+ <p class="my-4 leading-7">开启后：</p>
482
+ <div class="language-js"><div class="rspress-code-title">./dist/index.js</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-comment)">// 从 @swc/helpers 导入的辅助函数</span><span>
483
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> _ </span><span class="token" style="color:var(--code-token-keyword)">as</span><span> _async_to_generator </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;@swc/helpers/_/_async_to_generator&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
484
+ </span></span><span style="display:block;padding:0 1.25rem">
485
+ </span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-comment)">// 你的代码</span><span>
486
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">var</span><span> </span><span class="token function-variable" style="color:var(--code-token-function)">yourCode</span><span> </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-keyword)">function</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
487
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// use _async_to_generator</span><span>
488
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
489
+ <h2 id="externals" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">externals<a class="link_3b154 header-anchor" aria-hidden="true" href="#externals">#</a></h2>
490
+ <p class="my-4 leading-7">用于在打包时排除一些外部依赖，避免将这些依赖打包到最终的 bundle 中。</p>
491
+ <ul class="list-disc pl-5 my-4 leading-7">
492
+ <li class="[&amp;:not(:first-child)]:mt-2">类型：</li>
493
+ </ul>
494
+ <div class="language-ts"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">type</span><span> </span><span class="token class-name">Externals</span><span> </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-symbol)">string</span><span> </span><span class="token operator">|</span><span> RegExp</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">[</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
495
+ <ul class="list-disc pl-5 my-4 leading-7">
496
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>[]</code></li>
497
+ <li class="[&amp;:not(:first-child)]:mt-2">构建类型：<code>仅支持 buildType: &#x27;bundle&#x27;</code></li>
498
+ <li class="[&amp;:not(:first-child)]:mt-2">示例：</li>
499
+ </ul>
500
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
501
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
502
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// 避免打包 React</span><span>
503
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">externals</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span class="token" style="color:var(--code-token-string)">&#x27;react&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
504
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
505
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
506
+ <h2 id="footer" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">footer<a class="link_3b154 header-anchor" aria-hidden="true" href="#footer">#</a></h2>
507
+ <p class="my-4 leading-7">同 <a href="#banner" class="link_3b154 ">banner</a> 配置，用于在输出文件末尾添加注释。</p>
508
+ <h2 id="format" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">format<a class="link_3b154 header-anchor" aria-hidden="true" href="#format">#</a></h2>
509
+ <p class="my-4 leading-7">用于设置 JavaScript 产物输出的格式，其中 <code>iife</code> 和 <code>umd</code> 只在 <code>buildType</code> 为 <code>bundle</code> 时生效。</p>
510
+ <ul class="list-disc pl-5 my-4 leading-7">
511
+ <li class="[&amp;:not(:first-child)]:mt-2">类型：<code>&#x27;esm&#x27; | &#x27;cjs&#x27; | &#x27;iife&#x27; | &#x27;umd&#x27;</code></li>
512
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值：<code>cjs</code></li>
513
+ </ul>
514
+ <h3 id="format-esm" class="mt-10 mb-2 leading-7 text-xl title_3b154">format: esm<a class="link_3b154 header-anchor" aria-hidden="true" href="#format-esm">#</a></h3>
515
+ <p class="my-4 leading-7">esm 代表 &quot;ECMAScript 模块&quot;，它需要运行环境支持 import 和 export 语法。</p>
516
+ <ul class="list-disc pl-5 my-4 leading-7">
517
+ <li class="[&amp;:not(:first-child)]:mt-2">示例：</li>
518
+ </ul>
519
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
520
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
521
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">format</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;esm&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
522
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
523
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
524
+ <h3 id="format-cjs" class="mt-10 mb-2 leading-7 text-xl title_3b154">format: cjs<a class="link_3b154 header-anchor" aria-hidden="true" href="#format-cjs">#</a></h3>
525
+ <p class="my-4 leading-7">cjs 代表 &quot;CommonJS&quot;，它需要运行环境支持 exports、require 和 module 语法，通常为 Node.js 环境。</p>
526
+ <ul class="list-disc pl-5 my-4 leading-7">
527
+ <li class="[&amp;:not(:first-child)]:mt-2">示例：</li>
528
+ </ul>
529
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
530
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
531
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">format</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;cjs&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
532
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
533
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
534
+ <h3 id="format-iife" class="mt-10 mb-2 leading-7 text-xl title_3b154">format: iife<a class="link_3b154 header-anchor" aria-hidden="true" href="#format-iife">#</a></h3>
535
+ <p class="my-4 leading-7">iife 代表 &quot;立即调用函数表达式&quot;，它将代码包裹在函数表达式中，确保代码中的任何变量不会意外地与全局范围中的变量冲突，通常在浏览器环境中运行。</p>
536
+ <ul class="list-disc pl-5 my-4 leading-7">
537
+ <li class="[&amp;:not(:first-child)]:mt-2">示例：</li>
538
+ </ul>
539
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
540
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
541
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">format</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;iife&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
542
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
543
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
544
+ <h3 id="format-umd" class="mt-10 mb-2 leading-7 text-xl title_3b154">format: umd<a class="link_3b154 header-anchor" aria-hidden="true" href="#format-umd">#</a></h3>
545
+ <p class="my-4 leading-7">umd 代表 &quot;Universal Module Definition&quot;，用于在不同环境（浏览器、Node.js 等）中运行。umd 格式的模块可以在多种环境下使用，既可以作为全局变量访问，也可以通过模块加载器（如 RequireJS）进行模块化加载。</p>
546
+ <ul class="list-disc pl-5 my-4 leading-7">
547
+ <li class="[&amp;:not(:first-child)]:mt-2">示例：</li>
548
+ </ul>
549
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
550
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
551
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">format</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;umd&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
552
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
553
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
554
+ <h2 id="hooks" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">hooks<a class="link_3b154 header-anchor" aria-hidden="true" href="#hooks">#</a></h2>
555
+ <p class="my-4 leading-7">构建生命周期钩子,允许在构建流程的特定阶段注入自定义逻辑。</p>
556
+ <ul class="list-disc pl-5 my-4 leading-7">
557
+ <li class="[&amp;:not(:first-child)]:mt-2">类型：</li>
558
+ </ul>
559
+ <div class="language-ts"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">type</span><span> </span><span class="token class-name">HookList</span><span> </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
560
+ </span></span><span style="display:block;padding:0 1.25rem"><span> name</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">string</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
561
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token function-variable" style="color:var(--code-token-function)">apply</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>compiler</span><span class="token operator">:</span><span> ICompiler</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token operator">=&gt;</span><span> </span><span class="token" style="color:var(--code-token-keyword)">void</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
562
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// 是否在 buildIn 钩子之后执行</span><span>
563
+ </span></span><span style="display:block;padding:0 1.25rem"><span> applyAfterBuiltIn</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
564
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
565
+ <ul class="list-disc pl-5 my-4 leading-7">
566
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值：<code>[]</code></li>
567
+ </ul>
568
+ <p class="my-4 leading-7">我们可以在 apply 方法里拿到 compiler 实例，修改其属性，以及在不同阶段执行自定义逻辑，对于 Hook 的详细介绍，
569
+ 参考<a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/guide/advance/in-depth-about-build.html#使用-hook-介入构建流程">使用 Hook 介入构建流程</a>。</p>
570
+ <div class="language-ts"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
571
+ </span></span><span style="display:block;padding:0 1.25rem"><span> buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
572
+ </span></span><span style="display:block;padding:0 1.25rem"><span> buildType</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;bundle&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
573
+ </span></span><span style="display:block;padding:0 1.25rem"><span> hooks</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span>
574
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
575
+ </span></span><span style="display:block;padding:0 1.25rem"><span> name</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;renderChunk&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
576
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token function-variable" style="color:var(--code-token-function)">apply</span><span class="token operator">:</span><span> compiler </span><span class="token operator">=&gt;</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
577
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// any logic for compiler</span><span>
578
+ </span></span><span style="display:block;padding:0 1.25rem"><span> compiler</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>hooks</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>renderChunk</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">tapPromise</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>
579
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> name</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;renderChunk&#x27;</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
580
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">async</span><span> chunk </span><span class="token operator">=&gt;</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
581
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">return</span><span> chunk</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
582
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
583
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
584
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
585
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
586
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
587
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
588
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
589
+ <h2 id="input" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">input<a class="link_3b154 header-anchor" aria-hidden="true" href="#input">#</a></h2>
590
+ <p class="my-4 leading-7">指定构建的入口文件，数组形式可以指定目录。</p>
591
+ <ul class="list-disc pl-5 my-4 leading-7">
592
+ <li class="[&amp;:not(:first-child)]:mt-2">类型：</li>
593
+ </ul>
594
+ <div class="language-ts"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">type</span><span> </span><span class="token class-name">Input</span><span> </span><span class="token operator">=</span><span>
595
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token operator">|</span><span> </span><span class="token" style="color:var(--code-token-symbol)">string</span><span class="token" style="color:var(--code-token-punctuation)">[</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
596
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token operator">|</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
597
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span>name</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">string</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">string</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
598
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
599
+ <ul class="list-disc pl-5 my-4 leading-7">
600
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值：<code>bundle</code> 模式下默认为 <code>[&#x27;src/index.ts&#x27;]</code>，<code>bundleless</code> 模式下默认为 <code>[&#x27;src&#x27;]</code></li>
601
+ </ul>
602
+ <p class="my-4 leading-7"><strong class="font-semibold">数组用法：</strong></p>
603
+ <p class="my-4 leading-7">在 <code>bundle</code> 模式下，下面的配置会以 <code>src/index.ts</code> 和 <code>src/index2.ts</code> 为入口分别进行构建。<code>bundle</code> 模式不支持配置 <code>input</code> 为目录。</p>
604
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
605
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
606
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildType</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;bundle&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
607
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">input</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span class="token" style="color:var(--code-token-string)">&#x27;src/index.ts&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;src/index2.ts&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
608
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
609
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
610
+ <p class="my-4 leading-7">在 <code>bundleless</code> 模式下，下面的配置会同时处理 <code>src/a</code> 目录下的文件和 <code>src/index.ts</code> 文件。</p>
611
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
612
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
613
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildType</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;bundleless&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
614
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">input</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span class="token" style="color:var(--code-token-string)">&#x27;src/a&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;src/index.ts&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
615
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
616
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
617
+ <p class="my-4 leading-7">在 <code>bundleless</code> 模式下，数组模式还支持使用 <code>!</code> 来过滤部分文件：</p>
618
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
619
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
620
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildType</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;bundleless&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
621
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">input</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span class="token" style="color:var(--code-token-string)">&#x27;src&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;!src/*.spec.ts&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
622
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
623
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
624
+ <p class="my-4 leading-7">上面的配置将打包 <code>src</code> 目录下的文件，同时会过滤以 <code>spec.ts</code> 为后缀的文件。这在测试文件与源码文件在同一个根目录下的情况会很有用。</p>
625
+ <p class="my-4 leading-7"><strong class="font-semibold">对象用法：</strong></p>
626
+ <p class="my-4 leading-7">当在 bundle 模式下需要修改产物的输出文件名称的时候，可以使用对象形式进行配置。</p>
627
+ <p class="my-4 leading-7"><strong class="font-semibold">对象的 Key 是产物的文件名称，Value 是源码的文件路径。</strong></p>
628
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
629
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
630
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">format</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;esm&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
631
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">input</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
632
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token string-property" style="color:var(--code-token-parameter)">&#x27;index.esm&#x27;</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;./src/index.ts&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
633
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
634
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
635
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
636
+ <h2 id="jsx" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">jsx<a class="link_3b154 header-anchor" aria-hidden="true" href="#jsx">#</a></h2>
637
+ <p class="my-4 leading-7">指定 JSX 的编译方式，默认支持 React 17 及更高版本，自动注入 JSX 运行时代码。</p>
638
+ <ul class="list-disc pl-5 my-4 leading-7">
639
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>automatic | transform | preserve</code></li>
640
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>automatic</code></li>
641
+ </ul>
642
+ <p class="my-4 leading-7">如果你需要支持 React 16，则可以设置 <code>jsx</code> 为 <code>transform</code>：</p>
643
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
644
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
645
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">jsx</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;transform&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
646
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
647
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
648
+ <div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content"><p class="my-4 leading-7">如果你不需要转换 JSX ,可以设置 <code>jsx</code> 为 <code>preserve</code>, 但此时请不要<a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/guide/advance/in-depth-about-build.html#使用-swc">使用 swc</a> 做代码转换。
649
+ 关于 JSX Transform 的更多说明，可以参考以下链接：</p>
650
+ <ul class="list-disc pl-5 my-4 leading-7">
651
+ <li class="[&amp;:not(:first-child)]:mt-2"><a target="_blank" rel="noopener noreferrer" href="https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html" class="link_03735 link_3b154 inline-link_3b154">React Blog - Introducing the New JSX Transform</a>.</li>
652
+ <li class="[&amp;:not(:first-child)]:mt-2"><a target="_blank" rel="noopener noreferrer" href="https://esbuild.github.io/api/#jsx" class="link_03735 link_3b154 inline-link_3b154">esbuild - JSX</a>.</li>
653
+ </ul>
654
+ </div></div>
655
+ <h2 id="loader" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">loader<a class="link_3b154 header-anchor" aria-hidden="true" href="#loader">#</a></h2>
656
+ <p class="my-4 leading-7"><strong class="font-semibold">试验性功能</strong></p>
657
+ <p class="my-4 leading-7">此选项用来更改给定输入文件的解释方式。例如你需要将 js 文件当做 jsx 处理</p>
658
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
659
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
660
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">loader</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
661
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token string-property" style="color:var(--code-token-parameter)">&#x27;.js&#x27;</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;jsx&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
662
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span>
663
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
664
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
665
+ <h2 id="metafile" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">metafile<a class="link_3b154 header-anchor" aria-hidden="true" href="#metafile">#</a></h2>
666
+ <p class="my-4 leading-7">这个选项用于构建分析，开启该选项后，esbuild 会以 JSON 格式生成有关构建的一些元数据。</p>
667
+ <ul class="list-disc pl-5 my-4 leading-7">
668
+ <li class="[&amp;:not(:first-child)]:mt-2">类型：<code>boolean</code></li>
669
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值：<code>false</code></li>
670
+ <li class="[&amp;:not(:first-child)]:mt-2">构建类型：<code>仅支持 buildType: &#x27;bundle&#x27;</code></li>
671
+ </ul>
672
+ <p class="my-4 leading-7">开启 <code>metafile</code> 生成：</p>
673
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
674
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
675
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildType</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;bundle&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
676
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">metafile</span><span class="token operator">:</span><span> </span><span class="token boolean">true</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
677
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
678
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
679
+ <p class="my-4 leading-7">在执行 build 构建后，产物目录下会生成 <code>metafile-[xxx].json</code> 文件，你可以通过 <a target="_blank" rel="noopener noreferrer" href="https://esbuild.github.io/analyze/" class="link_03735 link_3b154 inline-link_3b154">esbuild analyze</a> 和 <a target="_blank" rel="noopener noreferrer" href="https://bundle-buddy.com/esbuild" class="link_03735 link_3b154 inline-link_3b154">bundle-buddy</a> 等工具进行可视化分析。</p>
680
+ <h2 id="minify" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">minify<a class="link_3b154 header-anchor" aria-hidden="true" href="#minify">#</a></h2>
681
+ <p class="my-4 leading-7">使用 esbuild 或者 terser 压缩代码，也可以传入 <a target="_blank" rel="noopener noreferrer" href="https://github.com/terser/terser#minify-options" class="link_03735 link_3b154 inline-link_3b154">terserOptions</a>。</p>
682
+ <ul class="list-disc pl-5 my-4 leading-7">
683
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>&#x27;terser&#x27; | &#x27;esbuild&#x27; | false | object</code></li>
684
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>false</code></li>
685
+ </ul>
686
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
687
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
688
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">minify</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
689
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">compress</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
690
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">drop_console</span><span class="token operator">:</span><span> </span><span class="token boolean">true</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
691
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
692
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
693
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
694
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
695
+ <h2 id="outdir" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">outDir<a class="link_3b154 header-anchor" aria-hidden="true" href="#outdir">#</a></h2>
696
+ <p class="my-4 leading-7">指定构建的输出目录。</p>
697
+ <ul class="list-disc pl-5 my-4 leading-7">
698
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>string</code></li>
699
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>./dist</code></li>
700
+ </ul>
701
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
702
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
703
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">outDir</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;./dist/esm&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
704
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
705
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
706
+ <h2 id="platform" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">platform<a class="link_3b154 header-anchor" aria-hidden="true" href="#platform">#</a></h2>
707
+ <p class="my-4 leading-7">默认生成用于 Node.js 环境下的代码，你也可以指定为 <code>browser</code>，会生成用于浏览器环境的代码。
708
+ 查看<a target="_blank" rel="noopener noreferrer" href="https://esbuild.github.io/api/#platform" class="link_03735 link_3b154 inline-link_3b154">esbuild.platform</a>了解更多。</p>
709
+ <ul class="list-disc pl-5 my-4 leading-7">
710
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>&#x27;browser&#x27; | &#x27;node&#x27;</code></li>
711
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>&#x27;node&#x27;</code></li>
712
+ </ul>
713
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
714
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
715
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">platform</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;browser&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
716
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
717
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
718
+ <h2 id="redirect" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">redirect<a class="link_3b154 header-anchor" aria-hidden="true" href="#redirect">#</a></h2>
719
+ <p class="my-4 leading-7">在 <strong class="font-semibold"><code>buildType: &#x27;bundleless&#x27;</code></strong> 构建模式下，会对引用路径进行重定向，确保指向了正确的产物，例如：</p>
720
+ <ul class="list-disc pl-5 my-4 leading-7">
721
+ <li class="[&amp;:not(:first-child)]:mt-2"><code>import &#x27;./index.less&#x27;</code> 会被改写成 <code>import &#x27;./index.css&#x27;</code></li>
722
+ <li class="[&amp;:not(:first-child)]:mt-2"><code>import icon from &#x27;./close.svg&#x27;</code> 会被改写成 <code>import icon from &#x27;../asset/close.svg&#x27;</code>（依实际情况而定）</li>
723
+ <li class="[&amp;:not(:first-child)]:mt-2"><code>import * from &#x27;./utils&#x27;</code> 会被改写成 <code>import * from &#x27;./utils.mjs&#x27;</code> (如果生成了 utils.mjs，视实际情况而定)</li>
724
+ </ul>
725
+ <p class="my-4 leading-7">在某些场景下，你可能不需要这些功能，那么可以通过此配置关闭它，关闭后，其引用路径将不会发生改变。</p>
726
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
727
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
728
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">redirect</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
729
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">alias</span><span class="token operator">:</span><span> </span><span class="token boolean">false</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-comment)">// 关闭对别名路径的修改</span><span>
730
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">style</span><span class="token operator">:</span><span> </span><span class="token boolean">false</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-comment)">// 关闭对样式文件路径的修改</span><span>
731
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">asset</span><span class="token operator">:</span><span> </span><span class="token boolean">false</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-comment)">// 关闭对资源文件路径的修改</span><span>
732
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">autoExtension</span><span class="token operator">:</span><span> </span><span class="token boolean">false</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-comment)">// 关闭对 js 文件后缀的修改</span><span>
733
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
734
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
735
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
736
+ <h2 id="resolve" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">resolve<a class="link_3b154 header-anchor" aria-hidden="true" href="#resolve">#</a></h2>
737
+ <p class="my-4 leading-7">自定义模块解析选项</p>
738
+ <h3 id="resolvealias" class="mt-10 mb-2 leading-7 text-xl title_3b154">resolve.alias<a class="link_3b154 header-anchor" aria-hidden="true" href="#resolvealias">#</a></h3>
739
+ <p class="my-4 leading-7">基本用法和 <a href="#alias" class="link_3b154 ">alias</a> 一致。</p>
740
+ <p class="my-4 leading-7"><a href="#alias" class="link_3b154 ">alias</a> 的问题在于我们在 bundleless 场景下错误的处理了 Module ID 的情况：</p>
741
+ <div class="language-js"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> createElement </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">&quot;react&quot;</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
742
+ <p class="my-4 leading-7">当我们配置了 <code>alias: { react: &#x27;react-native&#x27; }</code> 后，结果会变成</p>
743
+ <div class="language-js"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> createElement </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">&quot;./react-native&quot;</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
744
+ <p class="my-4 leading-7">一个 Module ID 被错误的处理成了相对路径，显然这是不符合预期的。</p>
745
+ <p class="my-4 leading-7">我们想要修复这个问题，但是这可能会破坏已有的项目，因此我们在 2.58.0 版本提供了 <code>resolve.alias</code> 来解决这个问题。
746
+ 并且 <code>resolve.alias</code> 里移除了 <a href="#alias" class="link_3b154 ">alias</a> 提供的默认值 <code>{ &quot;@&quot;: &quot;./src&quot;}</code></p>
747
+ <p class="my-4 leading-7">如果你需要此功能，请使用 <code>resolve.alias</code>。</p>
748
+ <p class="my-4 leading-7">在下一个大版本，<code>resolve.alias</code> 将会取代 <code>alias</code> 。</p>
749
+ <div class="rspress-directive warning"><div class="rspress-directive-title">WARNING</div><div class="rspress-directive-content">
750
+ <ul class="list-disc pl-5 my-4 leading-7">
751
+ <li class="[&amp;:not(:first-child)]:mt-2">注意此配置不要与 <a href="#alias" class="link_3b154 ">alias</a> 混用。</li>
752
+ <li class="[&amp;:not(:first-child)]:mt-2">注意此配置必须标注一个相对路径，例如 <code>{ &quot;@&quot;: &quot;./src&quot; }</code> 而非 <code>{ &quot;@&quot;: &quot;src&quot;}</code>。</li>
753
+ </ul>
754
+ </div></div>
755
+ <h3 id="resolvemainfields" class="mt-10 mb-2 leading-7 text-xl title_3b154">resolve.mainFields<a class="link_3b154 header-anchor" aria-hidden="true" href="#resolvemainfields">#</a></h3>
756
+ <p class="my-4 leading-7">package.json 中，在解析包的入口点时尝试的字段列表。</p>
757
+ <ul class="list-disc pl-5 my-4 leading-7">
758
+ <li class="[&amp;:not(:first-child)]:mt-2">类型：<code>string[]</code></li>
759
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值：取决于<a href="#platform" class="link_3b154 ">platform</a>
760
+ <ul class="list-disc pl-5 my-4 leading-7">
761
+ <li class="[&amp;:not(:first-child)]:mt-2">node: [&#x27;module&#x27;, &#x27;main&#x27;]</li>
762
+ <li class="[&amp;:not(:first-child)]:mt-2">browser: [&#x27;module&#x27;, &#x27;browser&#x27;, &#x27;main&#x27;]</li>
763
+ </ul>
764
+ </li>
765
+ <li class="[&amp;:not(:first-child)]:mt-2">版本：<code>&gt;=2.36.0</code></li>
766
+ </ul>
767
+ <p class="my-4 leading-7">例如，我们想要先加载 <code>js:source</code> 字段：</p>
768
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
769
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
770
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">resolve</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
771
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">mainFields</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span class="token" style="color:var(--code-token-string)">&#x27;js:source&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;module&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;main&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
772
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
773
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
774
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
775
+ <div class="rspress-directive warning"><div class="rspress-directive-title">WARNING</div><div class="rspress-directive-content"><p class="my-4 leading-7"><code>resolve.mainFields</code> 比 package.json 中 exports 字段的优先级低，如果一个入口点从 exports 成功解析，<code>resolve.mainFields</code> 将被忽略。
776
+ </p></div></div>
777
+ <h3 id="resolvejsextentions" class="mt-10 mb-2 leading-7 text-xl title_3b154">resolve.jsExtentions<a class="link_3b154 header-anchor" aria-hidden="true" href="#resolvejsextentions">#</a></h3>
778
+ <p class="my-4 leading-7">支持隐式文件扩展名</p>
779
+ <ul class="list-disc pl-5 my-4 leading-7">
780
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>string[]</code></li>
781
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>[&#x27;.jsx&#x27;, &#x27;.tsx&#x27;, &#x27;.js&#x27;, &#x27;.ts&#x27;, &#x27;.json&#x27;]</code></li>
782
+ <li class="[&amp;:not(:first-child)]:mt-2">版本：<code>&gt;=2.36.0</code></li>
783
+ </ul>
784
+ <p class="my-4 leading-7">对于 css 文件，请不要使用隐式文件扩展名，目前 Module 仅支持 [&#x27;.less&#x27;, &#x27;.css&#x27;, &#x27;.sass&#x27;, &#x27;.scss&#x27;] 后缀。</p>
785
+ <p class="my-4 leading-7">Node 的解析算法不会将 <code>.mjs</code> 和 <code>cjs</code> 视为隐式文件扩展名，因此这里默认也不会，但是可以通过更改此配置来包含：</p>
786
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
787
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
788
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">resolve</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
789
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">jsExtentions</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span class="token" style="color:var(--code-token-string)">&#x27;.mts&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;ts&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
790
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
791
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
792
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
793
+ <h2 id="shims" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">shims<a class="link_3b154 header-anchor" aria-hidden="true" href="#shims">#</a></h2>
794
+ <p class="my-4 leading-7">在构建 cjs / esm 产物时注入一些垫片代码。</p>
795
+ <p class="my-4 leading-7">例如 <code>__dirname</code> 只能在 commonjs 里使用，开启此选项后，当产物格式为 esm 时，会将 <code>__dirname</code> 编译为 <code>path.dirname(fileURLToPath(import.meta.url))</code>。</p>
796
+ <p class="my-4 leading-7">详细代码见 <a target="_blank" rel="noopener noreferrer" href="https://github.com/web-infra-dev/modern.js/blob/main/packages/solutions/module-tools/shims" class="link_03735 link_3b154 inline-link_3b154">shims</a>，
797
+ 需要注意的是 esm shims 只会在 <a href="#platform" class="link_3b154 ">platform</a> 为 node 时注入，因为用到了 url 模块。</p>
798
+ <ul class="list-disc pl-5 my-4 leading-7">
799
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>boolean</code></li>
800
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>false</code></li>
801
+ <li class="[&amp;:not(:first-child)]:mt-2">版本：<code>&gt;=2.38.0</code></li>
802
+ </ul>
803
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
804
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
805
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">shims</span><span class="token operator">:</span><span> </span><span class="token boolean">true</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
806
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
807
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
808
+ <h2 id="sideeffects" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">sideEffects<a class="link_3b154 header-anchor" aria-hidden="true" href="#sideeffects">#</a></h2>
809
+ <p class="my-4 leading-7">配置模块的副作用</p>
810
+ <ul class="list-disc pl-5 my-4 leading-7">
811
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>RegExg[] | (filePath: string, isExternal: boolean) =&gt; boolean | boolean</code></li>
812
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>undefined</code></li>
813
+ </ul>
814
+ <p class="my-4 leading-7">通常情况下，我们通过 package.json 的 <code>&quot;sideEffects&quot;</code> 字段来配置模块的副作用，但是在某些情况下，三方包的 package.json 是不可靠的。
815
+ 例如我们引用了一个三方包的样式文件。</p>
816
+ <div class="language-js"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;other-package/dist/index.css&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
817
+ <p class="my-4 leading-7">但是这个三方包的 package.json 里并没有将样式文件配置到 <code>&quot;sideEffects&quot;</code> 里。</p>
818
+ <div class="language-json"><div class="rspress-code-title">other-package/package.json</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-json" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
819
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">&quot;sideEffects&quot;</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span class="token" style="color:var(--code-token-string)">&quot;dist/index.js&quot;</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span>
820
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
821
+ <p class="my-4 leading-7">同时你又设置了 <a href="#styleinject" class="link_3b154 ">style.inject</a> 为 <code>true</code>，在控制台可以看到类似的警告信息：</p>
822
+ <div class="language-bash"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-bash" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-punctuation)">[</span><span>LIBUILD:ESBUILD_WARN</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span> Ignoring this </span><span class="token" style="color:var(--code-token-function)">import</span><span> because </span><span class="token" style="color:var(--code-token-string)">&quot;other-package/dist/index.css&quot;</span><span> was marked as having no side effects</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
823
+ <p class="my-4 leading-7">这时候就可以使用这个配置项，手动配置模块的<code>&quot;sideEffects&quot;</code>，配置支持正则和函数形式。</p>
824
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
825
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
826
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">sideEffects</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span class="token regex-delimiter" style="color:var(--code-token-keyword)">/</span><span class="token regex-source language-regex" style="color:var(--code-token-keyword)">\.css$</span><span class="token regex-delimiter" style="color:var(--code-token-keyword)">/</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
827
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// or</span><span>
828
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// sideEffects: (filePath, isExternal) =&gt; /\.css$/.test(filePath),</span><span>
829
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
830
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
831
+ <div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content"><p class="my-4 leading-7">添加此配置后，打包时将不会再读取 package.json 里的 <code>&quot;sideEffects&quot;</code> 字段。
832
+ </p></div></div>
833
+ <h2 id="sourcedir" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">sourceDir<a class="link_3b154 header-anchor" aria-hidden="true" href="#sourcedir">#</a></h2>
834
+ <p class="my-4 leading-7">指定构建的源码目录,默认为 <code>src</code>，用于在 <code>bundleless</code> 构建时基于源码目录结构生成对应的产物目录。
835
+ 等同于<a target="_blank" rel="noopener noreferrer" href="https://esbuild.github.io/api/#outbase" class="link_03735 link_3b154 inline-link_3b154">esbuild.outbase</a>。</p>
836
+ <ul class="list-disc pl-5 my-4 leading-7">
837
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>string</code></li>
838
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>src</code></li>
839
+ </ul>
840
+ <h2 id="sourcemap" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">sourceMap<a class="link_3b154 header-anchor" aria-hidden="true" href="#sourcemap">#</a></h2>
841
+ <p class="my-4 leading-7">控制 sourceMap 如何生成。</p>
842
+ <ul class="list-disc pl-5 my-4 leading-7">
843
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>boolean | &#x27;inline&#x27; | &#x27;external&#x27;</code></li>
844
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>false</code></li>
845
+ </ul>
846
+ <h2 id="sourcetype" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">sourceType<a class="link_3b154 header-anchor" aria-hidden="true" href="#sourcetype">#</a></h2>
847
+ <div class="rspress-directive warning"><div class="rspress-directive-title">WARNING</div><div class="rspress-directive-content"><p class="my-4 leading-7">已废弃，此配置不会产生任何影响。</p></div></div>
848
+ <p class="my-4 leading-7">设置源码的格式。默认情况下，会将源码作为 EsModule 进行处理。当源码使用的是 CommonJS 的时候，需要设置 <code>commonjs</code>。</p>
849
+ <ul class="list-disc pl-5 my-4 leading-7">
850
+ <li class="[&amp;:not(:first-child)]:mt-2">类型：<code>&#x27;commonjs&#x27; | &#x27;module&#x27;</code></li>
851
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值：<code>&#x27;module&#x27;</code></li>
852
+ </ul>
853
+ <h2 id="splitting" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">splitting<a class="link_3b154 header-anchor" aria-hidden="true" href="#splitting">#</a></h2>
854
+ <p class="my-4 leading-7">是否开启代码分割。
855
+ 仅支持 <a href="#format-esm" class="link_3b154 ">format: &#x27;esm&#x27;</a> 和 <a href="#format-cjs" class="link_3b154 ">format: &#x27;cjs&#x27;</a>，查看<a target="_blank" rel="noopener noreferrer" href="https://esbuild.github.io/api/#splitting" class="link_03735 link_3b154 inline-link_3b154">esbuild.splitting</a>了解更多。</p>
856
+ <ul class="list-disc pl-5 my-4 leading-7">
857
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>boolean</code></li>
858
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>false</code></li>
859
+ </ul>
860
+ <h2 id="style" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">style<a class="link_3b154 header-anchor" aria-hidden="true" href="#style">#</a></h2>
861
+ <p class="my-4 leading-7">配置样式相关的配置。</p>
862
+ <h2 id="styleless" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">style.less<a class="link_3b154 header-anchor" aria-hidden="true" href="#styleless">#</a></h2>
863
+ <p class="my-4 leading-7">less 相关配置。</p>
864
+ <h2 id="stylelesslessoptions" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">style.less.lessOptions<a class="link_3b154 header-anchor" aria-hidden="true" href="#stylelesslessoptions">#</a></h2>
865
+ <p class="my-4 leading-7">详细配置参考 <a target="_blank" rel="noopener noreferrer" href="https://less.bootcss.com/usage/#less-options" class="link_03735 link_3b154 inline-link_3b154">less</a>。</p>
866
+ <ul class="list-disc pl-5 my-4 leading-7">
867
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>object</code></li>
868
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>{ javascriptEnabled: true }</code></li>
869
+ </ul>
870
+ <h2 id="stylelessadditionaldata" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">style.less.additionalData<a class="link_3b154 header-anchor" aria-hidden="true" href="#stylelessadditionaldata">#</a></h2>
871
+ <p class="my-4 leading-7">在入口文件起始添加 <code>Less</code> 代码。</p>
872
+ <ul class="list-disc pl-5 my-4 leading-7">
873
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>string</code></li>
874
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>undefined</code></li>
875
+ </ul>
876
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
877
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
878
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">style</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
879
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">less</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
880
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">additionalData</span><span class="token operator">:</span><span> </span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string" style="color:var(--code-token-string)">@base-color: #c6538c;</span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
881
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
882
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
883
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
884
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
885
+ <h2 id="stylelessimplementation" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">style.less.implementation<a class="link_3b154 header-anchor" aria-hidden="true" href="#stylelessimplementation">#</a></h2>
886
+ <p class="my-4 leading-7">配置 <code>Less</code> 使用的实现库，在不指定的情况下，使用的内置版本是 <code>4.1.3</code>。</p>
887
+ <ul class="list-disc pl-5 my-4 leading-7">
888
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>string | object</code></li>
889
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>undefined</code></li>
890
+ </ul>
891
+ <p class="my-4 leading-7">设置 <code>object</code> 类型时，可以指定 <code>Less</code> 的实现库。</p>
892
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
893
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
894
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">style</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
895
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">less</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
896
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">implementation</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-function)">require</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">&#x27;less&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
897
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
898
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
899
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
900
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
901
+ <p class="my-4 leading-7"><code>string</code> 类型时，指定 <code>Less</code> 的实现库的路径</p>
902
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
903
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
904
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">style</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
905
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">less</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
906
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">implementation</span><span class="token operator">:</span><span> require</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">resolve</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">&#x27;less&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
907
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
908
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
909
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
910
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
911
+ <h2 id="sass" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">sass<a class="link_3b154 header-anchor" aria-hidden="true" href="#sass">#</a></h2>
912
+ <p class="my-4 leading-7">Sass 相关配置。</p>
913
+ <h2 id="stylesasssassoptions" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">style.sass.sassOptions<a class="link_3b154 header-anchor" aria-hidden="true" href="#stylesasssassoptions">#</a></h2>
914
+ <p class="my-4 leading-7">详细配置参考 <a target="_blank" rel="noopener noreferrer" href="https://github.com/sass/node-sass#options" class="link_03735 link_3b154 inline-link_3b154">node-sass</a></p>
915
+ <ul class="list-disc pl-5 my-4 leading-7">
916
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>object</code></li>
917
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>{}</code></li>
918
+ </ul>
919
+ <h2 id="stylesassadditionaldata" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">style.sass.additionalData<a class="link_3b154 header-anchor" aria-hidden="true" href="#stylesassadditionaldata">#</a></h2>
920
+ <p class="my-4 leading-7">在入口文件起始添加 <code>Sass</code> 代码。</p>
921
+ <ul class="list-disc pl-5 my-4 leading-7">
922
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>string | Function</code></li>
923
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>undefined</code></li>
924
+ </ul>
925
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
926
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
927
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">style</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
928
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">sass</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
929
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">additionalData</span><span class="token operator">:</span><span> </span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string" style="color:var(--code-token-string)">$base-color: #c6538c;
930
+ </span></span><span style="display:block;padding:0 1.25rem"><span class="token template-string" style="color:var(--code-token-string)"> $border-dark: rgba($base-color, 0.88);</span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
931
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
932
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
933
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
934
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
935
+ <h2 id="stylesassimplementation" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">style.sass.implementation<a class="link_3b154 header-anchor" aria-hidden="true" href="#stylesassimplementation">#</a></h2>
936
+ <p class="my-4 leading-7">配置 <code>Sass</code> 使用的实现库，在不指定的情况下，使用的内置版本是 <code>1.5.4</code>。</p>
937
+ <ul class="list-disc pl-5 my-4 leading-7">
938
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>string | object</code></li>
939
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>undefined</code></li>
940
+ </ul>
941
+ <p class="my-4 leading-7">设置为 <code>object</code> 类型时，可以指定 <code>Sass</code> 的实现库。</p>
942
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
943
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
944
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">style</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
945
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">sass</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
946
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">implementation</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-function)">require</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">&#x27;sass&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
947
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
948
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
949
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
950
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
951
+ <p class="my-4 leading-7"><code>string</code> 类型时，指定 <code>Sass</code> 的实现库的路径</p>
952
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
953
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
954
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">style</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
955
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">sass</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
956
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">implementation</span><span class="token operator">:</span><span> require</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">resolve</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">&#x27;sass&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
957
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
958
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
959
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
960
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
961
+ <h2 id="stylepostcss" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">style.postcss<a class="link_3b154 header-anchor" aria-hidden="true" href="#stylepostcss">#</a></h2>
962
+ <p class="my-4 leading-7">用于配置 PostCSS 的选项，传入的值会与默认配置通过 <code>Object.assign</code> 合并。注意 <code>Object.assign</code> 是浅拷贝，因此会完全覆盖内置的 plugins 数组。</p>
963
+ <p class="my-4 leading-7">详细配置请查看 <a target="_blank" rel="noopener noreferrer" href="https://github.com/postcss/postcss#options" class="link_03735 link_3b154 inline-link_3b154">PostCSS</a>。</p>
964
+ <ul class="list-disc pl-5 my-4 leading-7">
965
+ <li class="[&amp;:not(:first-child)]:mt-2">类型：</li>
966
+ </ul>
967
+ <div class="language-ts"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">type</span><span> </span><span class="token class-name">PostcssOptions</span><span> </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
968
+ </span></span><span style="display:block;padding:0 1.25rem"><span> processOptions</span><span class="token operator">?</span><span class="token operator">:</span><span> ProcessOptions</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
969
+ </span></span><span style="display:block;padding:0 1.25rem"><span> plugins</span><span class="token operator">?</span><span class="token operator">:</span><span> AcceptedPlugin</span><span class="token" style="color:var(--code-token-punctuation)">[</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
970
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
971
+ <ul class="list-disc pl-5 my-4 leading-7">
972
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值：</li>
973
+ </ul>
974
+ <div class="language-ts"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">const</span><span> defaultConfig </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
975
+ </span></span><span style="display:block;padding:0 1.25rem"><span> plugins</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span>
976
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// 以下插件默认启用</span><span>
977
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">require</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">&#x27;postcss-flexbugs-fixes&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
978
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">require</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">&#x27;postcss-media-minmax&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
979
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">require</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">&#x27;postcss-nesting&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
980
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// 以下插件仅在 target 为 `es5` 时启用</span><span>
981
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">require</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">&#x27;postcss-custom-properties&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
982
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">require</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">&#x27;postcss-initial&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
983
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">require</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">&#x27;postcss-page-break&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
984
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">require</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">&#x27;postcss-font-variant&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
985
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
986
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
987
+ <ul class="list-disc pl-5 my-4 leading-7">
988
+ <li class="[&amp;:not(:first-child)]:mt-2">示例：</li>
989
+ </ul>
990
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
991
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
992
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">style</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
993
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">postcss</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
994
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">plugins</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span>yourPostCSSPlugin</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
995
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
996
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
997
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
998
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
999
+ <h2 id="styleinject" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">style.inject<a class="link_3b154 header-anchor" aria-hidden="true" href="#styleinject">#</a></h2>
1000
+ <p class="my-4 leading-7">配置打包模式下是否将 CSS 样式插入到 JavaScript 代码中。</p>
1001
+ <ul class="list-disc pl-5 my-4 leading-7">
1002
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>boolean</code></li>
1003
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>false</code></li>
1004
+ </ul>
1005
+ <p class="my-4 leading-7">将 <code>inject</code> 设置为 <code>true</code> 来开启此功能：</p>
1006
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1007
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1008
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">style</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1009
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">inject</span><span class="token operator">:</span><span> </span><span class="token boolean">true</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1010
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1011
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1012
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
1013
+ <p class="my-4 leading-7">开启后，你会看到源码中引用的 CSS 代码被包含在了打包后的 JS 产物中。</p>
1014
+ <p class="my-4 leading-7">例如，你在源码里写了 <code>import &#x27;./index.scss&#x27;</code>，那么在产物中你会看到以下代码：</p>
1015
+ <div class="language-js"><div class="rspress-code-title">dist/index.js</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-comment)">// node_modules/style-inject/dist/style-inject.es.js</span><span>
1016
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">function</span><span> </span><span class="token" style="color:var(--code-token-function)">styleInject</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token parameter">css</span><span class="token parameter" style="color:var(--code-token-punctuation)">,</span><span class="token parameter"> ref</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1017
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// ...</span><span>
1018
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span>
1019
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">var</span><span> style_inject_es_default </span><span class="token operator">=</span><span> styleInject</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
1020
+ </span></span><span style="display:block;padding:0 1.25rem">
1021
+ </span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-comment)">// src/index.scss</span><span>
1022
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">var</span><span> css_248z </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;.body {\n color: black;\n}&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
1023
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-function)">style_inject_es_default</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>css_248z</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
1024
+ <div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content">
1025
+ <p class="my-4 leading-7">开启 <code>inject</code> 后，你需要注意以下几点：</p>
1026
+ <ul class="list-disc pl-5 my-4 leading-7">
1027
+ <li class="[&amp;:not(:first-child)]:mt-2">CSS 文件中的 <code>@import</code> 不会被处理。如果你的 CSS 文件中有 <code>@import</code> ，那么你需要在 JS 文件中手动引入 CSS 文件（less,scss 文件不需要，因为它们会有预处理）。</li>
1028
+ <li class="[&amp;:not(:first-child)]:mt-2">需要考虑 <code>sideEffects</code> 的影响。默认情况下，我们的构建器会认为 CSS 是有副作用的，如果你的项目中或者三方包的 package.json 设置了 <code>sideEffects</code> 字段并且没有包含此 CSS 文件，那么你将会得到一个警告：</li>
1029
+ </ul>
1030
+ <div class="language-shell"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-shell" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-punctuation)">[</span><span>LIBUILD:ESBUILD_WARN</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span> Ignoring this </span><span class="token" style="color:var(--code-token-function)">import</span><span> because </span><span class="token" style="color:var(--code-token-string)">&quot;src/index.scss&quot;</span><span> was marked as having no side effects by plugin </span><span class="token" style="color:var(--code-token-string)">&quot;libuild:adapter&quot;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
1031
+ <p class="my-4 leading-7">此时可以通过配置 <a href="#sideeffects" class="link_3b154 ">sideEffects</a> 来解决。</p>
1032
+ </div></div>
1033
+ <h2 id="styleautomodules" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">style.autoModules<a class="link_3b154 header-anchor" aria-hidden="true" href="#styleautomodules">#</a></h2>
1034
+ <p class="my-4 leading-7">根据文件名自动启用 CSS Modules。</p>
1035
+ <ul class="list-disc pl-5 my-4 leading-7">
1036
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>boolean | RegExp</code></li>
1037
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>true</code></li>
1038
+ </ul>
1039
+ <p class="my-4 leading-7"><code>true</code> : 为以 <code>.module.css</code> <code>.module.less</code> <code>.module.scss</code> <code>.module.sass</code> 文件名结尾的样式文件启用 CSS Modules。</p>
1040
+ <p class="my-4 leading-7"><code>false</code> : 禁用 CSS Modules.</p>
1041
+ <p class="my-4 leading-7"><code>RegExp</code> : 为匹配正则条件的所有文件启用 CSS Modules.</p>
1042
+ <h2 id="stylemodules" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">style.modules<a class="link_3b154 header-anchor" aria-hidden="true" href="#stylemodules">#</a></h2>
1043
+ <p class="my-4 leading-7">CSS Modules 配置。</p>
1044
+ <ul class="list-disc pl-5 my-4 leading-7">
1045
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>object</code></li>
1046
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>{}</code></li>
1047
+ </ul>
1048
+ <p class="my-4 leading-7">一个常用的配置是 <code>localsConvention</code>，它可以改变 CSS Modules 的类名生成规则。</p>
1049
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1050
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1051
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">style</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1052
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">modules</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1053
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">localsConvention</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;camelCaseOnly&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1054
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1055
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1056
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1057
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
1058
+ <p class="my-4 leading-7">对于以下样式：</p>
1059
+ <div class="language-css"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-css" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token selector">.box-title</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1060
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">color</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> red</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
1061
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
1062
+ <p class="my-4 leading-7">你可以使用 <code>styles.boxTitle</code> 来访问。</p>
1063
+ <p class="my-4 leading-7">详细配置查看 <a target="_blank" rel="noopener noreferrer" href="https://github.com/madyankin/postcss-modules#usage" class="link_03735 link_3b154 inline-link_3b154">postcss-modules</a></p>
1064
+ <h2 id="styletailwindcss" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">style.tailwindcss<a class="link_3b154 header-anchor" aria-hidden="true" href="#styletailwindcss">#</a></h2>
1065
+ <p class="my-4 leading-7">用于修改 <a target="_blank" rel="noopener noreferrer" href="https://tailwindcss.com/docs/configuration" class="link_03735 link_3b154 inline-link_3b154">Tailwind CSS</a> 的配置项。</p>
1066
+ <ul class="list-disc pl-5 my-4 leading-7">
1067
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>object | Function</code></li>
1068
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值：</li>
1069
+ </ul>
1070
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">const</span><span> tailwind </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1071
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">content</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span class="token" style="color:var(--code-token-string)">&#x27;./src/**/*.{js,jsx,ts,tsx}&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;./config/html/**/*.{html,ejs,hbs}&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1072
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
1073
+ <h3 id="启用-tailwind-css" class="mt-10 mb-2 leading-7 text-xl title_3b154">启用 Tailwind CSS<a class="link_3b154 header-anchor" aria-hidden="true" href="#启用-tailwind-css">#</a></h3>
1074
+ <p class="my-4 leading-7">在使用 <code>style.tailwindcss</code> 之前，你需要启用 Modern.js Module 的 Tailwind CSS 插件。</p>
1075
+ <p class="my-4 leading-7">请阅读<a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/guide/best-practices/use-tailwindcss.html">「使用 Tailwind CSS」</a> 章节来了解开启方式。</p>
1076
+ <h3 id="类型" class="mt-10 mb-2 leading-7 text-xl title_3b154">类型<a class="link_3b154 header-anchor" aria-hidden="true" href="#类型">#</a></h3>
1077
+ <p class="my-4 leading-7">值为 <code>object</code> 类型时，与默认配置通过 <code>Object.assign</code> 合并。</p>
1078
+ <p class="my-4 leading-7">值为 <code>Function</code> 类型时，函数返回的对象与默认配置通过 <code>Object.assign</code> 合并。</p>
1079
+ <p class="my-4 leading-7">其他的使用方式和 Tailwind CSS 一致: <a target="_blank" rel="noopener noreferrer" href="https://tailwindcss.com/docs/configuration" class="link_03735 link_3b154 inline-link_3b154">快速传送门</a>。</p>
1080
+ <h3 id="注意事项" class="mt-10 mb-2 leading-7 text-xl title_3b154">注意事项<a class="link_3b154 header-anchor" aria-hidden="true" href="#注意事项">#</a></h3>
1081
+ <p class="my-4 leading-7">注意：</p>
1082
+ <ul class="list-disc pl-5 my-4 leading-7">
1083
+ <li class="[&amp;:not(:first-child)]:mt-2">如果你同时使用了 <code>tailwind.config.{ts,js}</code> 文件和 <code>tools.tailwindcss</code> 选项，那么 <code>tools.tailwindcss</code> 定义的配置会优先生效，并覆盖 <code>tailwind.config.{ts,js}</code> 中定义的内容。</li>
1084
+ <li class="[&amp;:not(:first-child)]:mt-2">如果你同时使用了 <code>designSystem</code> 配置项，那么 Tailwind CSS 的 <code>theme</code> 配置将会被 <code>designSystem</code> 的值所覆盖。</li>
1085
+ </ul>
1086
+ <p class="my-4 leading-7">其他配置的使用方式与 Tailwind CSS 官方用法一致，请参考 <a target="_blank" rel="noopener noreferrer" href="https://tailwindcss.com/docs/configuration" class="link_03735 link_3b154 inline-link_3b154">tailwindcss - Configuration</a>。</p>
1087
+ <h2 id="target" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">target<a class="link_3b154 header-anchor" aria-hidden="true" href="#target">#</a></h2>
1088
+ <p class="my-4 leading-7"><code>target</code> 用于为生成的 JavaScript 代码设置目标环境。它让 Modern.js Module 将目标环境无法识别的 JavaScript 语法转换为在这些环境中可用的低版本 JavaScript 语法。</p>
1089
+ <ul class="list-disc pl-5 my-4 leading-7">
1090
+ <li class="[&amp;:not(:first-child)]:mt-2">类型：</li>
1091
+ </ul>
1092
+ <div class="language-ts"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">type</span><span> </span><span class="token class-name">Target</span><span> </span><span class="token operator">=</span><span>
1093
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token operator">|</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;es5&#x27;</span><span>
1094
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token operator">|</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;es6&#x27;</span><span>
1095
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token operator">|</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;es2015&#x27;</span><span>
1096
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token operator">|</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;es2016&#x27;</span><span>
1097
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token operator">|</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;es2017&#x27;</span><span>
1098
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token operator">|</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;es2018&#x27;</span><span>
1099
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token operator">|</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;es2019&#x27;</span><span>
1100
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token operator">|</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;es2020&#x27;</span><span>
1101
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token operator">|</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;es2021&#x27;</span><span>
1102
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token operator">|</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;es2022&#x27;</span><span>
1103
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token operator">|</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;esnext&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
1104
+ <ul class="list-disc pl-5 my-4 leading-7">
1105
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>&#x27;es6&#x27;</code></li>
1106
+ </ul>
1107
+ <p class="my-4 leading-7">例如，将代码编译到 <code>es5</code> 语法：</p>
1108
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1109
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1110
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">target</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;es5&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1111
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1112
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
1113
+ <h2 id="transformimport" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">transformImport<a class="link_3b154 header-anchor" aria-hidden="true" href="#transformimport">#</a></h2>
1114
+ <p class="my-4 leading-7">提供与 babel-plugin-import 等价的能力和配置，基于 SWC 实现，使用此配置，将会使用 SWC 对代码进行转换。</p>
1115
+ <ul class="list-disc pl-5 my-4 leading-7">
1116
+ <li class="[&amp;:not(:first-child)]:mt-2">类型：<code>object[]</code></li>
1117
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值：<code>[]</code></li>
1118
+ </ul>
1119
+ <p class="my-4 leading-7">数组元素为一个 babel-plugin-import 的配置对象。配置对象可以参考 <a target="_blank" rel="noopener noreferrer" href="https://github.com/umijs/babel-plugin-import#options" class="link_03735 link_3b154 inline-link_3b154">options</a>。</p>
1120
+ <p class="my-4 leading-7">使用示例：</p>
1121
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1122
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1123
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">transformImport</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span>
1124
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// babel-plugin-import 的 options 配置</span><span>
1125
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1126
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">libraryName</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;foo&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1127
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">style</span><span class="token operator">:</span><span> </span><span class="token boolean">true</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1128
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1129
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1130
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1131
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
1132
+ <p class="my-4 leading-7">参考<a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/plugins/official-list/plugin-import.html#注意事项">「Import 插件——注意事项」</a></p>
1133
+ <h2 id="transformlodash" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">transformLodash<a class="link_3b154 header-anchor" aria-hidden="true" href="#transformlodash">#</a></h2>
1134
+ <p class="my-4 leading-7">是否模块化 <a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/lodash" class="link_03735 link_3b154 inline-link_3b154">lodash</a> 的导入，删除未使用的 lodash 模块，从而减少 lodash 代码体积。这项优化基于 <a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/babel-plugin-lodash" class="link_03735 link_3b154 inline-link_3b154">babel-plugin-lodash</a> 和 <a target="_blank" rel="noopener noreferrer" href="https://github.com/web-infra-dev/swc-plugins/tree/main/crates/plugin_lodash" class="link_03735 link_3b154 inline-link_3b154">swc-plugin-lodash</a> 实现。
1135
+ 使用此配置，将会使用 SWC 对代码进行转换。</p>
1136
+ <ul class="list-disc pl-5 my-4 leading-7">
1137
+ <li class="[&amp;:not(:first-child)]:mt-2">类型：<code>boolean</code></li>
1138
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值：<code>false</code></li>
1139
+ </ul>
1140
+ <p class="my-4 leading-7">当开启此选项时，Modern.js Module 会自动将 lodash 的代码引用指向子路径。</p>
1141
+ <p class="my-4 leading-7">比如：</p>
1142
+ <div class="language-ts"><div class="rspress-code-title">input.js</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">import</span><span> _ </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;lodash&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
1143
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> add </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;lodash/fp&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
1144
+ </span></span><span style="display:block;padding:0 1.25rem">
1145
+ </span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">const</span><span> addOne </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-function)">add</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token number">1</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
1146
+ </span></span><span style="display:block;padding:0 1.25rem"><span>_</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">map</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">[</span><span class="token number">1</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token number">2</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token number">3</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> addOne</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
1147
+ <p class="my-4 leading-7">转换后的代码：</p>
1148
+ <div class="language-ts"><div class="rspress-code-title">output.js</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">import</span><span> _add </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;lodash/fp/add&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
1149
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">import</span><span> _map </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;lodash/map&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
1150
+ </span></span><span style="display:block;padding:0 1.25rem">
1151
+ </span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">const</span><span> addOne </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-function)">_add</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token number">1</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
1152
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-function)">_map</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">[</span><span class="token number">1</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token number">2</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token number">3</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> addOne</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
1153
+ <h2 id="tsconfig" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">tsconfig<a class="link_3b154 header-anchor" aria-hidden="true" href="#tsconfig">#</a></h2>
1154
+ <p class="my-4 leading-7">TypeScript 配置文件的路径。</p>
1155
+ <ul class="list-disc pl-5 my-4 leading-7">
1156
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>string</code></li>
1157
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>tsconfig.json</code></li>
1158
+ <li class="[&amp;:not(:first-child)]:mt-2">版本： <code>&gt;=2.36.0</code></li>
1159
+ </ul>
1160
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1161
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1162
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">tsconfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;tsconfig.build.json&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1163
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1164
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
1165
+ <h2 id="umdglobals" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">umdGlobals<a class="link_3b154 header-anchor" aria-hidden="true" href="#umdglobals">#</a></h2>
1166
+ <p class="my-4 leading-7">指定 UMD 产物外部导入的全局变量。</p>
1167
+ <ul class="list-disc pl-5 my-4 leading-7">
1168
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>Record&lt;string, string&gt;</code></li>
1169
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>{}</code></li>
1170
+ </ul>
1171
+ <div class="language-ts"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1172
+ </span></span><span style="display:block;padding:0 1.25rem"><span> buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1173
+ </span></span><span style="display:block;padding:0 1.25rem"><span> umdGlobals</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1174
+ </span></span><span style="display:block;padding:0 1.25rem"><span> react</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;React&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1175
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token string-property" style="color:var(--code-token-parameter)">&#x27;react-dom&#x27;</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;ReactDOM&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1176
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1177
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1178
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
1179
+ <p class="my-4 leading-7">此时，<code>react</code> 和 <code>react-dom</code> 会被看做是外部导入的全局变量，不会被打包进 UMD 产物中，而是通过 <code>global.React</code> 和 <code>global.ReactDOM</code> 的方式进行访问。</p>
1180
+ <h2 id="umdmodulename" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">umdModuleName<a class="link_3b154 header-anchor" aria-hidden="true" href="#umdmodulename">#</a></h2>
1181
+ <p class="my-4 leading-7">指定 UMD 产物的模块名。</p>
1182
+ <ul class="list-disc pl-5 my-4 leading-7">
1183
+ <li class="[&amp;:not(:first-child)]:mt-2">类型： <code>string | Function</code></li>
1184
+ <li class="[&amp;:not(:first-child)]:mt-2">默认值： <code>name =&gt; name</code></li>
1185
+ </ul>
1186
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1187
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1188
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">format</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;umd&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1189
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">umdModuleName</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;myLib&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1190
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1191
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
1192
+ <p class="my-4 leading-7">此时 UMD 产物会去挂载到 <code>global.myLib</code> 上。</p>
1193
+ <div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content">
1194
+ <ul class="list-disc pl-5 my-4 leading-7">
1195
+ <li class="[&amp;:not(:first-child)]:mt-2">需要遵守 UMD 规范，UMD 产物的模块名不能和全局变量名冲突。</li>
1196
+ <li class="[&amp;:not(:first-child)]:mt-2">模块名会被转换为驼峰命名，如 <code>my-lib</code> 会被转换为 <code>myLib</code>，可参考<a target="_blank" rel="noopener noreferrer" href="https://github.com/babel/babel/blob/main/packages/babel-types/src/converters/toIdentifier.ts" class="link_03735 link_3b154 inline-link_3b154">toIdentifier</a>。</li>
1197
+ </ul>
1198
+ </div></div>
1199
+ <p class="my-4 leading-7">同时函数形式可以接收一个参数，为当前打包文件的输出路径</p>
1200
+ <div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1201
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1202
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">format</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;umd&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1203
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token function-variable" style="color:var(--code-token-function)">umdModuleName</span><span class="token operator">:</span><span> </span><span class="token parameter">path</span><span> </span><span class="token operator">=&gt;</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1204
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">if</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>path</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">includes</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">&#x27;index&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1205
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">return</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;myLib&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
1206
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">else</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
1207
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">return</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;myLib2&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
1208
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span>
1209
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1210
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
1211
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
1212
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span>`</span><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> aliases </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;../../../../../../toolkit/utils/dist/compiled/browserslist&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
1213
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> createElement </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;react&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div><!--/$--></div><div class="rspress-doc-footer"><footer class="mt-8"><div class="xs:flex pb-5 px-2 justify-end items-center"></div><div class="flex flex-col"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/document/module-doc/docs/zh/api/config/build-config.mdx" target="_blank" class="editLink_2a169">Edit this page on GitHub</a></div><div class="flex flex-col sm:flex-row sm:justify-around gap-4 pt-6"><div class="prev_e7091 flex flex-col"><a class="link_03735 pager-link_9b9a7 cursor-pointer" target="" href="/module-tools/api/index.html"><span class="desc_9b9a7">上一页</span><span class="title_9b9a7">概览</span></a></div><div class="next_e7091 flex flex-col"><a class="link_03735 pager-link_9b9a7 next_9b9a7 cursor-pointer" target="" href="/module-tools/api/config/build-preset.html"><span class="desc_9b9a7">下一页</span><span class="title_9b9a7">buildPreset</span></a></div></div></footer></div></div></div><div class="aside-container_edeb4"><div><div class="flex flex-col"><div class="&lt;lg:hidden"><div id="aside-container" class="relative text-sm font-medium"><div class="leading-7 block text-sm font-semibold pl-3">目录</div><nav class="mt-1"><ul class="relative"><li><a href="#alias" title="alias" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">alias</span></a></li><li><a href="#asset" title="asset" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">asset</span></a></li><li><a href="#assetname" title="asset.name" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">asset.name</span></a></li><li><a href="#assetlimit" title="asset.limit" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">asset.limit</span></a></li><li><a href="#assetpath" title="asset.path" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">asset.path</span></a></li><li><a href="#assetpublicpath" title="asset.publicPath" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">asset.publicPath</span></a></li><li><a href="#assetsvgr" title="asset.svgr" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">asset.svgr</span></a></li><li><a href="#assetsvgrinclude" title="asset.svgr.include" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">asset.svgr.include</span></a></li><li><a href="#assetsvgrexclude" title="asset.svgr.exclude" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">asset.svgr.exclude</span></a></li><li><a href="#assetsvgrexporttype" title="asset.svgr.exportType" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">asset.svgr.exportType</span></a></li><li><a href="#autoextension" title="autoExtension" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">autoExtension</span></a></li><li><a href="#autoexternal" title="autoExternal" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">autoExternal</span></a></li><li><a href="#autoexternaldependencies" title="autoExternal.dependencies" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">autoExternal.dependencies</span></a></li><li><a href="#autoexternalpeerdependencies" title="autoExternal.peerDependencies" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">autoExternal.peerDependencies</span></a></li><li><a href="#banner" title="banner" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">banner</span></a></li><li><a href="#buildtype" title="buildType" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">buildType</span></a></li><li><a href="#copy" title="copy" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">copy</span></a></li><li><a href="#copypatterns" title="copy.patterns" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">copy.patterns</span></a></li><li><a href="#copyoptions" title="copy.options" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">copy.options</span></a></li><li><a href="#define" title="define" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">define</span></a></li><li><a href="#dts" title="dts" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">dts</span></a></li><li><a href="#dtsabortonerror" title="dts.abortOnError" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">dts.abortOnError</span></a></li><li><a href="#dtsdistpath" title="dts.distPath" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">dts.distPath</span></a></li><li><a href="#dtsenabletscbuild" title="dts.enableTscBuild" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">dts.enableTscBuild</span></a></li><li><a href="#dtsonly" title="dts.only" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">dts.only</span></a></li><li><a href="#dtsrespectexternal" title="dts.respectExternal" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">dts.respectExternal</span></a></li><li><a href="#dtstsconfigpath" title="dts.tsconfigPath" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">dts.tsconfigPath</span></a></li><li><a href="#esbuildoptions" title="esbuildOptions" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">esbuildOptions</span></a></li><li><a href="#externalhelpers" title="externalHelpers" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">externalHelpers</span></a></li><li><a href="#externals" title="externals" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">externals</span></a></li><li><a href="#footer" title="footer" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">footer</span></a></li><li><a href="#format" title="format" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">format</span></a></li><li><a href="#format-esm" title="format: esm" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">format: esm</span></a></li><li><a href="#format-cjs" title="format: cjs" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">format: cjs</span></a></li><li><a href="#format-iife" title="format: iife" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">format: iife</span></a></li><li><a href="#format-umd" title="format: umd" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">format: umd</span></a></li><li><a href="#hooks" title="hooks" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">hooks</span></a></li><li><a href="#input" title="input" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">input</span></a></li><li><a href="#jsx" title="jsx" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">jsx</span></a></li><li><a href="#loader" title="loader" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">loader</span></a></li><li><a href="#metafile" title="metafile" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">metafile</span></a></li><li><a href="#minify" title="minify" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">minify</span></a></li><li><a href="#outdir" title="outDir" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">outDir</span></a></li><li><a href="#platform" title="platform" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">platform</span></a></li><li><a href="#redirect" title="redirect" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">redirect</span></a></li><li><a href="#resolve" title="resolve" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">resolve</span></a></li><li><a href="#resolvealias" title="resolve.alias" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">resolve.alias</span></a></li><li><a href="#resolvemainfields" title="resolve.mainFields" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">resolve.mainFields</span></a></li><li><a href="#resolvejsextentions" title="resolve.jsExtentions" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">resolve.jsExtentions</span></a></li><li><a href="#shims" title="shims" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">shims</span></a></li><li><a href="#sideeffects" title="sideEffects" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">sideEffects</span></a></li><li><a href="#sourcedir" title="sourceDir" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">sourceDir</span></a></li><li><a href="#sourcemap" title="sourceMap" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">sourceMap</span></a></li><li><a href="#sourcetype" title="sourceType" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">sourceType</span></a></li><li><a href="#splitting" title="splitting" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">splitting</span></a></li><li><a href="#style" title="style" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">style</span></a></li><li><a href="#styleless" title="style.less" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">style.less</span></a></li><li><a href="#stylelesslessoptions" title="style.less.lessOptions" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">style.less.lessOptions</span></a></li><li><a href="#stylelessadditionaldata" title="style.less.additionalData" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">style.less.additionalData</span></a></li><li><a href="#stylelessimplementation" title="style.less.implementation" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">style.less.implementation</span></a></li><li><a href="#sass" title="sass" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">sass</span></a></li><li><a href="#stylesasssassoptions" title="style.sass.sassOptions" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">style.sass.sassOptions</span></a></li><li><a href="#stylesassadditionaldata" title="style.sass.additionalData" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">style.sass.additionalData</span></a></li><li><a href="#stylesassimplementation" title="style.sass.implementation" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">style.sass.implementation</span></a></li><li><a href="#stylepostcss" title="style.postcss" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">style.postcss</span></a></li><li><a href="#styleinject" title="style.inject" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">style.inject</span></a></li><li><a href="#styleautomodules" title="style.autoModules" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">style.autoModules</span></a></li><li><a href="#stylemodules" title="style.modules" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">style.modules</span></a></li><li><a href="#styletailwindcss" title="style.tailwindcss" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">style.tailwindcss</span></a></li><li><a href="#启用-tailwind-css" title="启用 Tailwind CSS" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">启用 Tailwind CSS</span></a></li><li><a href="#类型" title="类型" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">类型</span></a></li><li><a href="#注意事项" title="注意事项" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">注意事项</span></a></li><li><a href="#target" title="target" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">target</span></a></li><li><a href="#transformimport" title="transformImport" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">transformImport</span></a></li><li><a href="#transformlodash" title="transformLodash" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">transformLodash</span></a></li><li><a href="#tsconfig" title="tsconfig" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">tsconfig</span></a></li><li><a href="#umdglobals" title="umdGlobals" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">umdGlobals</span></a></li><li><a href="#umdmodulename" title="umdModuleName" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">umdModuleName</span></a></li></ul></nav></div></div></div></div></div></div></div></section></div></div>
1214
+ <div id="search-container"></div>
1215
+ </body>
1216
+
1217
+ </html>