@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/en/guide/advance/in-depth-about-build.html ADDED
@@ -0,0 +1,302 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
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">In-depth understanding of build - Modern.js Module</title><meta data-rh="true" name="description" content="Module Engineering Solutions"/>
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/en" 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/en/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">Guide</div></a><a class="link_03735 cursor-pointer" target="" href="/module-tools/en/api/index.html"><div class="rspress-nav-menu-item singleItem_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/en/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">Plugins</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>Changelog</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>Contributing</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="font-medium my-1"><a class="link_03735 cursor-pointer" target="" href="/module-tools/guide/advance/in-depth-about-build.html"><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="rounded-2xl my-1 flex" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><span class="text-brand">English</span></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/en/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">Guide</div></a></div><div class="navMenuItem_457e8 w-full"><a class="link_03735 cursor-pointer" target="" href="/module-tools/en/api/index.html"><div class="rspress-nav-menu-item singleItem_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/en/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">Plugins</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>Changelog</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>Contributing</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="py-1 font-medium"><a class="link_03735 cursor-pointer" target="" href="/module-tools/guide/advance/in-depth-about-build.html"><div><div class="flex justify-center"><span>简体中文</span></div></div></a></div></div><div><div class="p-1 text-center"><span class="text-brand">English</span></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">ON THIS PAGE</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/en" 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"><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">Introduction</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/en/guide/intro/welcome.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>Welcome to Modern.js Module</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/guide/intro/why-module-engineering-solution.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>Why you need Modern.js Module</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/guide/intro/getting-started.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>Quick Start</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">Basic Guide</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/en/guide/basic/before-getting-started.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>Before you start</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/guide/basic/command-preview.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>CLI Commands</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/guide/basic/modify-output-product.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>Modify the output</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/guide/basic/use-micro-generator.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>Using the Microgenerator</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/guide/basic/use-module-doc.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>Developing Module documentation</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/guide/basic/using-storybook.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>Using Storybook</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/guide/basic/publish-your-project.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>Versioning and Publishing</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">Advanced Guide</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/en/guide/advance/in-depth-about-build.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>In-depth understanding of build</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/guide/advance/in-depth-about-dev-command.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>In-depth understanding of the dev command</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/guide/advance/copy.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>Use the Copy Tools</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/guide/advance/external-dependency.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>Handle third-party dependencies</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/guide/advance/build-umd.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>Build umd artifacts</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/guide/advance/asset.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>Handle static assets</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">Best practices</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/en/guide/best-practices/components.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>Developing Components</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/guide/best-practices/use-tailwindcss.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>Using Tailwind CSS</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">FAQ</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/en/guide/faq/basic.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>General Questions</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/guide/faq/build.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>Build FAQ</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/guide/faq/storybook.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>Storybook FAQ</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="in-depth-understanding-of-build" class="text-3xl mb-10 leading-10 tracking-tight title_3b154">In-depth understanding of build<a class="link_3b154 header-anchor" aria-hidden="true" href="#in-depth-understanding-of-build">#</a></h1>
14
+ <p class="my-4 leading-7">In the &quot;Basic Usage&quot; section, we already knew that you can modify the output files of a project through the <code>buildConfig</code> configuration. <code>buildConfig</code> not only describes some of the features of the product, but also provides some functionality for building the product.</p>
15
+ <div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content"><p class="my-4 leading-7">If you are not familiar with <code>buildConfig</code>, please read <a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/en/guide/basic/modify-output-product.html">modify-output-product</a>.
16
+ </p></div></div>
17
+ <p class="my-4 leading-7">In this chapter we&#x27;ll dive into the use of certain build configurations and understand what happens when the <code>modern build</code> command is executed.</p>
18
+ <h2 id="bundle--bundleless" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154"><code>bundle</code> / <code>bundleless</code><a class="link_3b154 header-anchor" aria-hidden="true" href="#bundle--bundleless">#</a></h2>
19
+ <p class="my-4 leading-7">So first let&#x27;s understand bundle and bundleless.</p>
20
+ <p class="my-4 leading-7">A bundle is a package of build artifacts, which may be a single file or multiple files based on a certain <a target="_blank" rel="noopener noreferrer" href="https://esbuild.github.io/api/#splitting" class="link_03735 link_3b154 inline-link_3b154">code splitting strategy</a>.</p>
21
+ <p class="my-4 leading-7">bundleless, on the other hand, means that each source file is compiled and built separately, but not bundled together. Each output file can be found with its corresponding source code file. The process of <strong class="font-semibold">bundleless build can also be understood as the process of code conversion of source files only</strong>.</p>
22
+ <p class="my-4 leading-7">They have their own benefits.</p>
23
+ <ul class="list-disc pl-5 my-4 leading-7">
24
+ <li class="[&amp;:not(:first-child)]:mt-2">bundle can reduce the size of build artifacts and also pre-package dependencies to reduce the size of installed dependencies. Packaging libraries in advance can speed up application project builds.</li>
25
+ <li class="[&amp;:not(:first-child)]:mt-2">bundleless maintains the original file structure and is more conducive to debugging and tree shaking.</li>
26
+ </ul>
27
+ <div class="rspress-directive warning"><div class="rspress-directive-title">WARNING</div><div class="rspress-directive-content"><p class="my-4 leading-7">bundleless is a single-file compilation mode, so for referencing and exporting types, you need to add the <code>type</code> keyword. For example, <code>import type { A } from &#x27;./types&#x27;</code>. Please refer to the <a target="_blank" rel="noopener noreferrer" href="https://esbuild.github.io/content-types/#isolated-modules" class="link_03735 link_3b154 inline-link_3b154">esbuild documentation</a> for more information.
28
+ </p></div></div>
29
+ <p class="my-4 leading-7">In <code>buildConfig</code> you can specify whether the current build task is bundle or bundleless by using <a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/en/api/config/build-config.html#buildtype"><code>buildConfig.buildType</code></a>.</p>
30
+ <h2 id="input--sourcedir" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154"><code>input</code> / <code>sourceDir</code><a class="link_3b154 header-anchor" aria-hidden="true" href="#input--sourcedir">#</a></h2>
31
+ <p class="my-4 leading-7"><a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/en/api/config/build-config.html#input"><code>buildConfig.input</code></a> is used to specify the path to a file or directory from which to read the source code, the default value of which varies between bundle and bundleless builds:</p>
32
+ <ul class="list-disc pl-5 my-4 leading-7">
33
+ <li class="[&amp;:not(:first-child)]:mt-2">When <code>buildType: &#x27;bundle&#x27;</code>, <code>input</code> defaults to <code>src/index.(j|t)sx?</code>.</li>
34
+ <li class="[&amp;:not(:first-child)]:mt-2">When <code>buildType: &#x27;bundleless&#x27;</code>, <code>input</code> defaults to <code>[&#x27;src&#x27;]</code>.</li>
35
+ </ul>
36
+ <p class="my-4 leading-7">From the default value, we know that <strong class="font-semibold">building in bundle mode usually specifies one or more files as the entry point for the build, while building in bundleless mode specifies a directory and uses all the files in that directory as the entry point</strong>.</p>
37
+ <p class="my-4 leading-7"><a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/en/api/config/build-config.html#sourcedir"><code>sourceDir</code></a> is used to specify the source directory, which is <strong class="font-semibold">only</strong> related to the following two elements:</p>
38
+ <ul class="list-disc pl-5 my-4 leading-7">
39
+ <li class="[&amp;:not(:first-child)]:mt-2">Type file generation</li>
40
+ <li class="[&amp;:not(:first-child)]:mt-2"><a target="_blank" rel="noopener noreferrer" href="https://esbuild.github.io/api/#outbase" class="link_03735 link_3b154 inline-link_3b154"><code>outbase</code></a> for specifying the build process</li>
41
+ </ul>
42
+ <p class="my-4 leading-7">So we can get its best practices:</p>
43
+ <ul class="list-disc pl-5 my-4 leading-7">
44
+ <li class="[&amp;:not(:first-child)]:mt-2"><strong class="font-semibold">Only specify <code>input</code> during the bundle build.</strong></li>
45
+ <li class="[&amp;:not(:first-child)]:mt-2"><strong class="font-semibold">In general, bundleless only needs to specify <code>sourceDir</code> (where <code>input</code> will be aligned with <code>sourceDir</code>).</strong> If we want to use the <code>input</code> in bundleless, we only need to specify <code>sourceDir</code>.</li>
46
+ </ul>
47
+ <p class="my-4 leading-7">If you want to convert only some of the files in bundleless, e.g. only the files in the <code>src/runtime</code> directory, you need to configure <code>input</code>:</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)">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>
49
+ </span></span><span style="display:block;padding:0 1.25rem">
50
+ </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>
51
+ </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>
52
+ </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/runtime&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">]</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 literal-property" style="color:var(--code-token-parameter)">sourceDir</span><span class="token operator">:</span><span> </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>
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 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>
56
+ <h2 id="use-swc" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">use swc<a class="link_3b154 header-anchor" aria-hidden="true" href="#use-swc">#</a></h2>
57
+ <p class="my-4 leading-7">In some scenarios, esbuild is not enough to meet our needs, and we will use swc to do the code conversion.</p>
58
+ <p class="my-4 leading-7">Starting from version <strong class="font-semibold">2.36.0</strong>, the Modern.js Module will use swc by default when it comes to the following functionality, but that doesn&#x27;t mean we don&#x27;t use esbuild any more, the rest of the functionality will still use esbuild.</p>
59
+ <ul class="list-disc pl-5 my-4 leading-7">
60
+ <li class="[&amp;:not(:first-child)]:mt-2"><a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/en/api/config/build-config.html#transformimport">transformImport</a></li>
61
+ <li class="[&amp;:not(:first-child)]:mt-2"><a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/en/api/config/build-config.html#transformlodash">transformLodash</a></li>
62
+ <li class="[&amp;:not(:first-child)]:mt-2"><a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/en/api/config/build-config.html#externalhelpers">externalHelpers</a></li>
63
+ <li class="[&amp;:not(:first-child)]:mt-2"><a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/en/api/config/build-config.html#format-umd">format: umd</a></li>
64
+ <li class="[&amp;:not(:first-child)]:mt-2"><a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/en/api/config/build-config.html#target">target: es5</a></li>
65
+ <li class="[&amp;:not(:first-child)]:mt-2"><a target="_blank" rel="noopener noreferrer" href="https://www.typescriptlang.org/tsconfig#emitDecoratorMetadata" class="link_03735 link_3b154 inline-link_3b154">emitDecoratorMetadata: true</a></li>
66
+ </ul>
67
+ <p class="my-4 leading-7">In fact, we&#x27;ve been using swc for full code conversion since version <strong class="font-semibold">2.16.0</strong>. However, swc also has some limitations, so we added <a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/en/api/config/build-config.html#sourcetype">sourceType</a> to turn off swc when the source is formatted as &#x27;commonjs&#x27;, which isn&#x27;t really user-intuitive, and the cjs mode of the swc formatted outputs don&#x27;t have annotate each export name, which can cause problems in node.
68
+ So we deprecated this behaviour and went back to the original design - <strong class="font-semibold">using swc as a supplement only in situations where it was needed</strong>.</p>
69
+ <h2 id="using-hooks-to-intervene-in-the-build-process" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">Using Hooks to Intervene in the Build Process<a class="link_3b154 header-anchor" aria-hidden="true" href="#using-hooks-to-intervene-in-the-build-process">#</a></h2>
70
+ <p class="my-4 leading-7">The Modern.js Module provides a Hook mechanism that allows us to inject custom logic at different stages of the build process.
71
+ The Modern.js Module Hook is implemented using <a target="_blank" rel="noopener noreferrer" href="https://github.com/webpack/tapable" class="link_03735 link_3b154 inline-link_3b154">tapable</a>, which extends esbuild&#x27;s plugin mechanism, and is recommended to be used directly if esbuild plugins already meet your needs.
72
+ Here&#x27;s how to use it:</p>
73
+ <h3 id="hook-type" class="mt-10 mb-2 leading-7 text-xl title_3b154">Hook type<a class="link_3b154 header-anchor" aria-hidden="true" href="#hook-type">#</a></h3>
74
+ <h4 id="asyncseriesbailhook" class="mt-8 leading-6 text-lg title_3b154">AsyncSeriesBailHook<a class="link_3b154 header-anchor" aria-hidden="true" href="#asyncseriesbailhook">#</a></h4>
75
+ <p class="my-4 leading-7">Serial hooks that stop the execution of other tapped functions if a tapped function returns a non-undefined result.</p>
76
+ <h4 id="asyncserieswaterfallhooks" class="mt-8 leading-6 text-lg title_3b154">AsyncSeriesWaterFallHooks<a class="link_3b154 header-anchor" aria-hidden="true" href="#asyncserieswaterfallhooks">#</a></h4>
77
+ <p class="my-4 leading-7">Serial hooks whose results are passed to the next tapped function.</p>
78
+ <h3 id="hook-order" class="mt-10 mb-2 leading-7 text-xl title_3b154">Hook Order<a class="link_3b154 header-anchor" aria-hidden="true" href="#hook-order">#</a></h3>
79
+ <p class="my-4 leading-7">The execution order of hooks follows the registration order. You can control whether a hook is registered before or after the built-in hooks using <code>applyAfterBuiltIn</code>.</p>
80
+ <h3 id="hook-api" class="mt-10 mb-2 leading-7 text-xl title_3b154">Hook API<a class="link_3b154 header-anchor" aria-hidden="true" href="#hook-api">#</a></h3>
81
+ <h4 id="load" class="mt-8 leading-6 text-lg title_3b154">load<a class="link_3b154 header-anchor" aria-hidden="true" href="#load">#</a></h4>
82
+ <ul class="list-disc pl-5 my-4 leading-7">
83
+ <li class="[&amp;:not(:first-child)]:mt-2">AsyncSeriesBailHook</li>
84
+ <li class="[&amp;:not(:first-child)]:mt-2">Triggered at esbuild <a target="_blank" rel="noopener noreferrer" href="https://esbuild.github.io/plugins/#on-load" class="link_03735 link_3b154 inline-link_3b154">onLoad callbacks</a> to fetch module content based on the module path</li>
85
+ <li class="[&amp;:not(:first-child)]:mt-2">Input parameters</li>
86
+ </ul>
87
+ <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">LoadArgs</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> path</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>
89
+ </span></span><span style="display:block;padding:0 1.25rem"><span> namespace</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>
90
+ </span></span><span style="display:block;padding:0 1.25rem"><span> suffix</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>
91
+ </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>
92
+ <ul class="list-disc pl-5 my-4 leading-7">
93
+ <li class="[&amp;:not(:first-child)]:mt-2">Return parameters</li>
94
+ </ul>
95
+ <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">LoadResult</span><span> </span><span class="token operator">=</span><span>
96
+ </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>
97
+ </span></span><span style="display:block;padding:0 1.25rem"><span> contents</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> </span><span class="token" style="color:var(--code-token-comment)">// module contents</span><span>
98
+ </span></span><span style="display:block;padding:0 1.25rem"><span> map</span><span class="token operator">?</span><span class="token operator">:</span><span> SourceMap</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span> </span><span class="token" style="color:var(--code-token-comment)">// https://esbuild.github.io/api/#sourcemap</span><span>
99
+ </span></span><span style="display:block;padding:0 1.25rem"><span> loader</span><span class="token operator">?</span><span class="token operator">:</span><span> Loader</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span> </span><span class="token" style="color:var(--code-token-comment)">// https://esbuild.github.io/api/#loader</span><span>
100
+ </span></span><span style="display:block;padding:0 1.25rem"><span> resolveDir</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>
101
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span>
102
+ </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-keyword)">undefined</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>
103
+ <ul class="list-disc pl-5 my-4 leading-7">
104
+ <li class="[&amp;:not(:first-child)]:mt-2">Example</li>
105
+ </ul>
106
+ <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>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>load</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 class="token" style="color:var(--code-token-string)">&#x27;load content from memfs&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-keyword)">async</span><span> args </span><span class="token operator">=&gt;</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" style="color:var(--code-token-keyword)">const</span><span> contents </span><span class="token operator">=</span><span> memfs</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">readFileSync</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>args</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-punctuation)">;</span><span>
108
+ </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>
109
+ </span></span><span style="display:block;padding:0 1.25rem"><span> contents</span><span class="token operator">:</span><span> contents</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
110
+ </span></span><span style="display:block;padding:0 1.25rem"><span> loader</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;js&#x27;</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>
112
+ </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>
113
+ <h4 id="transform" class="mt-8 leading-6 text-lg title_3b154">transform<a class="link_3b154 header-anchor" aria-hidden="true" href="#transform">#</a></h4>
114
+ <ul class="list-disc pl-5 my-4 leading-7">
115
+ <li class="[&amp;:not(:first-child)]:mt-2">AsyncSeriesWaterFallHooks</li>
116
+ <li class="[&amp;:not(:first-child)]:mt-2">Triggered at esbuild <a target="_blank" rel="noopener noreferrer" href="https://esbuild.github.io/plugins/#on-load" class="link_03735 link_3b154 inline-link_3b154">onLoad callbacks</a>.
117
+ Transforms the contents of the module fetched during the load phase</li>
118
+ <li class="[&amp;:not(:first-child)]:mt-2">Input parameters (return parameters)</li>
119
+ </ul>
120
+ <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)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">type</span><span> </span><span class="token class-name">Source</span><span> </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
121
+ </span></span><span style="display:block;padding:0 1.25rem"><span> code</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>
122
+ </span></span><span style="display:block;padding:0 1.25rem"><span> map</span><span class="token operator">?</span><span class="token operator">:</span><span> SourceMap</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
123
+ </span></span><span style="display:block;padding:0 1.25rem"><span> path</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>
124
+ </span></span><span style="display:block;padding:0 1.25rem"><span> loader</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>
125
+ </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>
126
+ <ul class="list-disc pl-5 my-4 leading-7">
127
+ <li class="[&amp;:not(:first-child)]:mt-2">Example</li>
128
+ </ul>
129
+ <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>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>transform</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 class="token" style="color:var(--code-token-string)">&#x27;6to5&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-keyword)">async</span><span> args </span><span class="token operator">=&gt;</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
130
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">const</span><span> result </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-function)">babelTransform</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>args</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>code</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> presets</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;@babel/preset-env&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">]</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>
131
+ </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>
132
+ </span></span><span style="display:block;padding:0 1.25rem"><span> code</span><span class="token operator">:</span><span> result</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>code</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
133
+ </span></span><span style="display:block;padding:0 1.25rem"><span> map</span><span class="token operator">:</span><span> result</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>map</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
134
+ </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>
135
+ </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>
136
+ <h4 id="renderchunk" class="mt-8 leading-6 text-lg title_3b154">renderChunk<a class="link_3b154 header-anchor" aria-hidden="true" href="#renderchunk">#</a></h4>
137
+ <ul class="list-disc pl-5 my-4 leading-7">
138
+ <li class="[&amp;:not(:first-child)]:mt-2">AsyncSeriesWaterFallHooks</li>
139
+ <li class="[&amp;:not(:first-child)]:mt-2">Triggered at esbuild <a target="_blank" rel="noopener noreferrer" href="https://esbuild.github.io/plugins/#on-end" class="link_03735 link_3b154 inline-link_3b154">onEnd callbacks</a>.
140
+ This is similar to the transform hook, but works on the artifacts generated by esbuild.</li>
141
+ <li class="[&amp;:not(:first-child)]:mt-2">Input parameters (return parameters)</li>
142
+ </ul>
143
+ <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)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">type</span><span> </span><span class="token class-name">AssetChunk</span><span> </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
144
+ </span></span><span style="display:block;padding:0 1.25rem"><span> type</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;asset&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
145
+ </span></span><span style="display:block;padding:0 1.25rem"><span> contents</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">string</span><span> </span><span class="token operator">|</span><span> Buffer</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
146
+ </span></span><span style="display:block;padding:0 1.25rem"><span> entryPoint</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>
147
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">/**
148
+ </span></span><span style="display:block;padding:0 1.25rem;color:var(--code-token-comment)" class="token"> * absolute file path
149
+ </span><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-comment)"> */</span><span>
150
+ </span></span><span style="display:block;padding:0 1.25rem"><span> fileName</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>
151
+ </span></span><span style="display:block;padding:0 1.25rem"><span> originalFileName</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>
152
+ </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>
153
+ </span></span><span style="display:block;padding:0 1.25rem">
154
+ </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)">type</span><span> </span><span class="token class-name">JsChunk</span><span> </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
155
+ </span></span><span style="display:block;padding:0 1.25rem"><span> type</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;chunk&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
156
+ </span></span><span style="display:block;padding:0 1.25rem"><span> contents</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>
157
+ </span></span><span style="display:block;padding:0 1.25rem"><span> entryPoint</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>
158
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">/**
159
+ </span></span><span style="display:block;padding:0 1.25rem;color:var(--code-token-comment)" class="token"> * absolute file path
160
+ </span><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-comment)"> */</span><span>
161
+ </span></span><span style="display:block;padding:0 1.25rem"><span> fileName</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>
162
+ </span></span><span style="display:block;padding:0 1.25rem"><span> map</span><span class="token operator">?</span><span class="token operator">:</span><span> SourceMap</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
163
+ </span></span><span style="display:block;padding:0 1.25rem"><span> modules</span><span class="token operator">?</span><span class="token operator">:</span><span> Record</span><span class="token operator">&lt;</span><span class="token" style="color:var(--code-token-symbol)">string</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-symbol)">any</span><span class="token operator">&gt;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
164
+ </span></span><span style="display:block;padding:0 1.25rem"><span> originalFileName</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>
165
+ </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>
166
+ </span></span><span style="display:block;padding:0 1.25rem">
167
+ </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)">type</span><span> </span><span class="token class-name">Chunk</span><span> </span><span class="token operator">=</span><span> AssetChunk </span><span class="token operator">|</span><span> JsChunk</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>
168
+ <ul class="list-disc pl-5 my-4 leading-7">
169
+ <li class="[&amp;:not(:first-child)]:mt-2">Examples</li>
170
+ </ul>
171
+ <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>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 class="token" style="color:var(--code-token-string)">&#x27;minify&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><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>
172
+ </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>chunk</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>type </span><span class="token operator">===</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;chunk&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
173
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">const</span><span> code </span><span class="token operator">=</span><span> chunk</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>contents</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">toString</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>
174
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">const</span><span> result </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-keyword)">await</span><span> </span><span class="token" style="color:var(--code-token-function)">minify</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">call</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>compiler</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> code</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
175
+ </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>
176
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token operator">...</span><span>chunk</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
177
+ </span></span><span style="display:block;padding:0 1.25rem"><span> contents</span><span class="token operator">:</span><span> result</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>code</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
178
+ </span></span><span style="display:block;padding:0 1.25rem"><span> map</span><span class="token operator">:</span><span> result</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>map</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
179
+ </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>
180
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </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-keyword)">return</span><span> chunk</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
+ <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>
184
+ <p class="my-4 leading-7">The <a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/en/api/config/build-config.html#dts"><code>buildConfig.dts</code></a> configuration is mainly used for type file generation.</p>
185
+ <h3 id="turn-off-type-generation" class="mt-10 mb-2 leading-7 text-xl title_3b154">Turn off type generation<a class="link_3b154 header-anchor" aria-hidden="true" href="#turn-off-type-generation">#</a></h3>
186
+ <p class="my-4 leading-7">Type generation is turned on by default, if you need to turn it off, you can configure it as follows:</p>
187
+ <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> 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>
188
+ </span></span><span style="display:block;padding:0 1.25rem">
189
+ </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>
190
+ </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>
191
+ </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 boolean">false</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>
193
+ </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>
194
+ <div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content"><p class="my-4 leading-7">The build speed is generally improved by closing the type file.</p></div></div>
195
+ <h3 id="build-type-files" class="mt-10 mb-2 leading-7 text-xl title_3b154">Build type files<a class="link_3b154 header-anchor" aria-hidden="true" href="#build-type-files">#</a></h3>
196
+ <p class="my-4 leading-7">With <code>buildType: &#x27;bundleless&#x27;</code>, type files are generated using the project&#x27;s <code>tsc</code> command to complete production.</p>
197
+ <p class="my-4 leading-7">The <strong class="font-semibold">Modern.js Module also supports bundling of type files</strong>, although care needs to be taken when using this feature.</p>
198
+ <ul class="list-disc pl-5 my-4 leading-7">
199
+ <li class="[&amp;:not(:first-child)]:mt-2">Bundle type files does not enable type checking.</li>
200
+ <li class="[&amp;:not(:first-child)]:mt-2">Some third-party dependencies have incorrect syntax that can cause the bundling process to fail. So in this case, you need to exclude such third-party packages manually with <a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/en/api/config/build-config.html#externals"><code>buildConfig.externals</code></a> or close <a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/en/api/config/build-config.html#dtsrespectexternal">dts.respectExternal</a> to external all third-party packages types.</li>
201
+ <li class="[&amp;:not(:first-child)]:mt-2">It is not possible to handle the case where the type file of a third-party dependency points to a <code>.ts</code> file. For example, the <code>package.json</code> of a third-party dependency contains something like this: <code>{&quot;types&quot;: &quot;. /src/index.ts&quot;}</code>.</li>
202
+ </ul>
203
+ <p class="my-4 leading-7">For the above problems, our recommended approach is to first use <code>tsc</code> to generate d.ts files, then package the index.d.ts as the entry and close <code>dts.respectExternal</code>. In the future evolution, we will gradually move towards this handling approach.</p>
204
+ <h3 id="alias-conversion" class="mt-10 mb-2 leading-7 text-xl title_3b154">Alias Conversion<a class="link_3b154 header-anchor" aria-hidden="true" href="#alias-conversion">#</a></h3>
205
+ <p class="my-4 leading-7">During the bundleless build process, if an alias appears in the source code, e.g.</p>
206
+ <div class="language-js"><div class="rspress-code-title">./src/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> utils </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;@common/utils&#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>
207
+ <p class="my-4 leading-7">The type files generated with <code>tsc</code> will also contain these aliases. However, Modern.js Module will convert the aliases in the type file generated by <code>tsc</code>.</p>
208
+ <h3 id="some-examples-of-the-use-of-dts" class="mt-10 mb-2 leading-7 text-xl title_3b154">Some examples of the use of <code>dts</code><a class="link_3b154 header-anchor" aria-hidden="true" href="#some-examples-of-the-use-of-dts">#</a></h3>
209
+ <p class="my-4 leading-7">General usage:</p>
210
+ <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>
211
+ </span></span><span style="display:block;padding:0 1.25rem">
212
+ </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>
213
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// The output path of the bundled type file at this point is `./dist/types`</span><span>
214
+ </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>
215
+ </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>
216
+ </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>
217
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token literal-property" style="color:var(--code-token-parameter)">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>
218
+ </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>
219
+ </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>
220
+ </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&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
221
+ </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>
222
+ </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>
223
+ <p class="my-4 leading-7">For the use of <code>dts.only</code>:</p>
224
+ <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>
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> </span><span class="token" style="color:var(--code-token-comment)">// At this moment the type file is not bundled and the output path is `./dist/types`</span><span>
228
+ </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>
229
+ </span></span><span style="display:block;padding:0 1.25rem"><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> </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>
231
+ </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 boolean">false</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 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&#x27;</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>
235
+ </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>
236
+ </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>
237
+ </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>
238
+ </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>
239
+ </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/types&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
240
+ </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>
241
+ </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>
242
+ </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>
243
+ <h2 id="build-process" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">Build process<a class="link_3b154 header-anchor" aria-hidden="true" href="#build-process">#</a></h2>
244
+ <p class="my-4 leading-7">When the <code>modern build</code> command is executed, the</p>
245
+ <ul class="list-disc pl-5 my-4 leading-7">
246
+ <li class="[&amp;:not(:first-child)]:mt-2">Clear the output directory according to <code>buildConfig.outDir</code>.</li>
247
+ <li class="[&amp;:not(:first-child)]:mt-2">Compile <code>js/ts</code> source code to generate the JS build artifacts for bundle/bundleless.</li>
248
+ <li class="[&amp;:not(:first-child)]:mt-2">Generate bundle/bundleless type files using <code>tsc</code>.</li>
249
+ <li class="[&amp;:not(:first-child)]:mt-2">Handle Copy tasks.</li>
250
+ </ul>
251
+ <h2 id="build-errors" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">Build errors<a class="link_3b154 header-anchor" aria-hidden="true" href="#build-errors">#</a></h2>
252
+ <p class="my-4 leading-7">When a build error occurs, based on the information learned above, it is easy to understand what error appears in the terminal.</p>
253
+ <p class="my-4 leading-7"><strong class="font-semibold">Errors reported for js or ts builds:</strong></p>
254
+ <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>error ModuleBuildError:
255
+ </span></span><span style="display:block;padding:0 1.25rem">
256
+ </span><span style="display:block;padding:0 1.25rem">╭───────────────────────╮
257
+ </span><span style="display:block;padding:0 1.25rem">│ bundle failed: │
258
+ </span><span style="display:block;padding:0 1.25rem"><span>│ - </span><span class="token" style="color:var(--code-token-function)">format</span><span> is </span><span class="token" style="color:var(--code-token-string)">&quot;cjs&quot;</span><span> │
259
+ </span></span><span style="display:block;padding:0 1.25rem"><span>│ - target is </span><span class="token" style="color:var(--code-token-string)">&quot;esnext&quot;</span><span> │
260
+ </span></span><span style="display:block;padding:0 1.25rem">╰───────────────────────╯
261
+ </span><span style="display:block;padding:0 1.25rem">
262
+ </span><span style="display:block;padding:0 1.25rem">Detailed Information:</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>
263
+ <p class="my-4 leading-7"><strong class="font-semibold">Errors reported for the type file generation process:</strong></p>
264
+ <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>error ModuleBuildError:
265
+ </span></span><span style="display:block;padding:0 1.25rem">
266
+ </span><span style="display:block;padding:0 1.25rem">bundle DTS failed:</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>
267
+ <p class="my-4 leading-7">For <code>js/ts</code> build errors, we can tell from the error message.</p>
268
+ <ul class="list-disc pl-5 my-4 leading-7">
269
+ <li class="[&amp;:not(:first-child)]:mt-2">By <code>&#x27;bundle failed:&#x27;</code> to determine if the error is reported for a bundle build or a bundleless build</li>
270
+ <li class="[&amp;:not(:first-child)]:mt-2">What is the <code>format</code> of the build process</li>
271
+ <li class="[&amp;:not(:first-child)]:mt-2">What is the <code>target</code> of the build process</li>
272
+ <li class="[&amp;:not(:first-child)]:mt-2">The specific error message</li>
273
+ </ul>
274
+ <h2 id="debug-mode" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">Debug mode<a class="link_3b154 header-anchor" aria-hidden="true" href="#debug-mode">#</a></h2>
275
+ <p class="my-4 leading-7">From <strong class="font-semibold">2.36.0</strong>, For troubleshooting purposes, the Modern.js Module provides a debug mode, which you can enable by adding the DEBUG=module environment variable when executing a build.</p>
276
+ <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 assign-left" style="color:var(--code-token-variable)">DEBUG</span><span class="token operator">=</span><span>module modern build</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>
277
+ <p class="my-4 leading-7">In debug mode, you&#x27;ll see more detailed build logs output in Shell, which are mainly process logs:</p>
278
+ <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>module run beforeBuildTask hooks +6ms
279
+ </span></span><span style="display:block;padding:0 1.25rem"><span>module run beforeBuildTask hooks </span><span class="token" style="color:var(--code-token-keyword)">done</span><span> +0ms
280
+ </span></span><span style="display:block;padding:0 1.25rem"><span>module </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span>DTS</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span> Build Start +139ms
281
+ </span></span><span style="display:block;padding:0 1.25rem"><span>module </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span>CJS</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span> Build Start +1ms</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>
282
+ <p class="my-4 leading-7">In addition, Module provides the ability to debug internal workflows. You can enable more detailed debugging logging by setting the <code>DEBUG=module:*</code> environment variable.</p>
283
+ <p class="my-4 leading-7">Currently, only <code>DEBUG=module:resolve</code> is supported, which allows you to see a detailed log of module resolution within the Module.</p>
284
+ <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>module:resolve onResolve args: </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
285
+ </span></span><span style="display:block;padding:0 1.25rem"><span> path: </span><span class="token" style="color:var(--code-token-string)">&#x27;./src/hooks/misc.ts&#x27;</span><span>,
286
+ </span></span><span style="display:block;padding:0 1.25rem"><span> importer: </span><span class="token" style="color:var(--code-token-string)">&#x27;&#x27;</span><span>,
287
+ </span></span><span style="display:block;padding:0 1.25rem"><span> namespace: </span><span class="token" style="color:var(--code-token-string)">&#x27;file&#x27;</span><span>,
288
+ </span></span><span style="display:block;padding:0 1.25rem"><span> resolveDir: </span><span class="token" style="color:var(--code-token-string)">&#x27;/Users/bytedance/modern.js/packages/solutions/module-tools&#x27;</span><span>,
289
+ </span></span><span style="display:block;padding:0 1.25rem"><span> kind: </span><span class="token" style="color:var(--code-token-string)">&#x27;entry-point&#x27;</span><span>,
290
+ </span></span><span style="display:block;padding:0 1.25rem"> pluginData: undefined
291
+ </span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> +0ms
292
+ </span></span><span style="display:block;padding:0 1.25rem"><span> module:resolve onResolve result: </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
293
+ </span></span><span style="display:block;padding:0 1.25rem"><span> path: </span><span class="token" style="color:var(--code-token-string)">&#x27;/Users/bytedance/modern.js/packages/solutions/module-tools/src/hooks/misc.ts&#x27;</span><span>,
294
+ </span></span><span style="display:block;padding:0 1.25rem"> external: false,
295
+ </span><span style="display:block;padding:0 1.25rem"><span> namespace: </span><span class="token" style="color:var(--code-token-string)">&#x27;file&#x27;</span><span>,
296
+ </span></span><span style="display:block;padding:0 1.25rem"> sideEffects: undefined,
297
+ </span><span style="display:block;padding:0 1.25rem"><span> suffix: </span><span class="token" style="color:var(--code-token-string)">&#x27;&#x27;</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> +0ms</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/en/guide/advance/in-depth-about-build.md" 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/en/guide/basic/publish-your-project.html"><span class="desc_9b9a7">Previous Page</span><span class="title_9b9a7">Versioning and Publishing</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/en/guide/advance/in-depth-about-dev-command.html"><span class="desc_9b9a7">Next page</span><span class="title_9b9a7">In-depth understanding of the dev command</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">ON THIS PAGE</div><nav class="mt-1"><ul class="relative"><li><a href="#bundle--bundleless" title="bundle / bundleless" 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"><code>bundle</code> / <code>bundleless</code></span></a></li><li><a href="#input--sourcedir" title="input / 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"><code>input</code> / <code>sourceDir</code></span></a></li><li><a href="#use-swc" title="use swc" 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">use swc</span></a></li><li><a href="#using-hooks-to-intervene-in-the-build-process" title="Using Hooks to Intervene in the Build Process" 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">Using Hooks to Intervene in the Build Process</span></a></li><li><a href="#hook-type" title="Hook type" 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">Hook type</span></a></li><li><a href="#asyncseriesbailhook" title="AsyncSeriesBailHook" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:24px;font-weight:semibold"><span class="aside-link-text block">AsyncSeriesBailHook</span></a></li><li><a href="#asyncserieswaterfallhooks" title="AsyncSeriesWaterFallHooks" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:24px;font-weight:semibold"><span class="aside-link-text block">AsyncSeriesWaterFallHooks</span></a></li><li><a href="#hook-order" title="Hook Order" 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">Hook Order</span></a></li><li><a href="#hook-api" title="Hook API" 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">Hook API</span></a></li><li><a href="#load" title="load" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:24px;font-weight:semibold"><span class="aside-link-text block">load</span></a></li><li><a href="#transform" title="transform" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:24px;font-weight:semibold"><span class="aside-link-text block">transform</span></a></li><li><a href="#renderchunk" title="renderChunk" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:24px;font-weight:semibold"><span class="aside-link-text block">renderChunk</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="#turn-off-type-generation" title="Turn off type generation" 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">Turn off type generation</span></a></li><li><a href="#build-type-files" title="Build type files" 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">Build type files</span></a></li><li><a href="#alias-conversion" title="Alias Conversion" 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">Alias Conversion</span></a></li><li><a href="#some-examples-of-the-use-of-dts" title="Some examples of the use of dts" 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">Some examples of the use of <code>dts</code></span></a></li><li><a href="#build-process" title="Build process" 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">Build process</span></a></li><li><a href="#build-errors" title="Build errors" 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">Build errors</span></a></li><li><a href="#debug-mode" title="Debug mode" 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">Debug mode</span></a></li></ul></nav></div></div></div></div></div></div></div></section></div></div>
299
+ <div id="search-container"></div>
300
+ </body>
301
+
302
+ </html>