@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/guide/advance/in-depth-about-build.html ADDED
@@ -0,0 +1,300 @@
1
+ <!DOCTYPE html>
2
+ <html lang="zh">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <meta name="generator" content="Rspress v1.31.0">
9
+ <title data-rh="true">深入理解构建 - Modern.js Module</title><meta data-rh="true" name="description" content="模块工程解决方案"/>
10
+ <script>{;const saved = localStorage.getItem('rspress-theme-appearance');const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;const isDark = !saved || saved === 'auto' ? preferDark : saved === 'dark';document.documentElement.classList.toggle('dark', isDark);document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';}</script><link rel="icon" href="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/logo-1x-0104.png"><script defer src="/module-tools/static/js/styles.3f5a6140.js"></script><script defer src="/module-tools/static/js/lib-react.a93218f7.js"></script><script defer src="/module-tools/static/js/lib-router.f8d11890.js"></script><script defer src="/module-tools/static/js/490.a066dbc0.js"></script><script defer src="/module-tools/static/js/index.6a5d779d.js"></script><link href="/module-tools/static/css/styles.0b88df3a.css" rel="stylesheet"></head>
11
+
12
+ <body >
13
+ <div id="root"><div><div class="navContainer_f6cde rspress-nav px-6 " style="position:sticky"><div class="container_f6cde flex justify-between items-center h-full"><div class="navBarTitle_f6cde"><a href="/module-tools/" class="flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><span>Modern.js Module</span></a></div><div class="flex flex-1 justify-end items-center"><div class="rightNav_f6cde"><div class="flex sm:flex-1 items-center sm:pl-4 sm:pr-2"><div class="rspress-nav-search-button navSearchButton_6e282"><button><svg width="18" height="18" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9Z"></path></svg><p class="searchWord_6e282">Search Docs</p><div style="opacity:0"><span></span><span>K</span></div></button></div><div class="mobileNavSearchButton_6e282"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9Z"></path></svg></div></div><div class="rspress-nav-menu menu h-14"><a class="link_03735 cursor-pointer" target="" href="/module-tools/guide/intro/welcome.html"><div class="rspress-nav-menu-item singleItem_f6cde activeItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">指南</div></a><a class="link_03735 cursor-pointer" target="" href="/module-tools/api/index.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">API</div></a><a class="link_03735 cursor-pointer" target="" href="/module-tools/plugins/guide/getting-started.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">插件</div></a><div class="mx-3 last:mr-0"><div class="relative flex-center h-14"><button class="rspress-nav-menu-group-button flex-center items-center font-medium text-sm text-text-1 hover:text-text-2 transition-colors duration-200"><span class="text-sm font-medium flex" style="margin-right:2px">v2.60.1</span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div class="rspress-nav-menu-group-content absolute mx-0.8 transition-opacity duration-300" style="opacity:0;visibility:hidden;right:0;top:52px"><div class="p-3 pr-2 w-full h-full max-h-100vh whitespace-nowrap" style="box-shadow:var(--rp-shadow-3);z-index:100;border:1px solid var(--rp-c-divider-light);border-radius:var(--rp-radius-large);background:var(--rp-c-bg)"><div><div class="font-medium my-1"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="link_03735 "><div class="rounded-2xl hover:bg-mute" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><div class="flex"><span>更新日志</span></div></div></a></div></div><div><div class="font-medium my-1"><a href="https://modernjs.dev/en/community/contributing-guide.html" target="_blank" rel="noopener noreferrer" class="link_03735 "><div class="rounded-2xl hover:bg-mute" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><div class="flex"><span>贡献指南</span></div></div></a></div></div></div></div></div></div></div><div class="flex-center flex-row"><div class="translation menu-item_f6cde flex text-sm font-bold items-center px-3 py-2"><div><div class="relative flex-center h-14"><button class="rspress-nav-menu-group-button flex-center items-center font-medium text-sm text-text-1 hover:text-text-2 transition-colors duration-200"><span class="text-sm font-medium flex" style="margin-right:2px"><svg width="18" height="18" viewBox="0 0 32 32" style="width:18px;height:18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6 2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div class="rspress-nav-menu-group-content absolute mx-0.8 transition-opacity duration-300" style="opacity:0;visibility:hidden;right:0;top:52px"><div class="p-3 pr-2 w-full h-full max-h-100vh whitespace-nowrap" style="box-shadow:var(--rp-shadow-3);z-index:100;border:1px solid var(--rp-c-divider-light);border-radius:var(--rp-radius-large);background:var(--rp-c-bg)"><div><div class="rounded-2xl my-1 flex" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><span class="text-brand">简体中文</span></div></div><div><div class="font-medium my-1"><a class="link_03735 cursor-pointer" target="" href="/module-tools/en/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>English</span></div></div></a></div></div></div></div></div></div></div><div class="mx-2"><div class="md:mr-2 rspress-nav-appearance"><div class="p-1 border border-solid border-gray-300 text-gray-400 cursor-pointer rounded-md hover:border-gray-600 hover:text-gray-600 dark:hover:border-gray-200 dark:hover:text-gray-200 transition-all duration-300 w-7 h-7"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="dark:hidden" width="18" height="18" fill="currentColor"><path d="M12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM12 4c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1zM12 24c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1zM5.6 6.6c-.3 0-.5-.1-.7-.3L3.5 4.9c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.1.2-.4.3-.7.3zM19.8 20.8c-.3 0-.5-.1-.7-.3l-1.4-1.4c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.2.2-.5.3-.7.3zM3 13H1c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1zM23 13h-2c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1zM4.2 20.8c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.4.3-.7.3zM18.4 6.6c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.5.3-.7.3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="hidden dark:block" width="18" height="18" fill="currentColor"><path d="M12.1 22h-.9c-5.5-.5-9.5-5.4-9-10.9.4-4.8 4.2-8.6 9-9 .4 0 .8.2 1 .5.2.3.2.8-.1 1.1-2 2.7-1.4 6.4 1.3 8.4 2.1 1.6 5 1.6 7.1 0 .3-.2.7-.3 1.1-.1.3.2.5.6.5 1-.2 2.7-1.5 5.1-3.6 6.8-1.9 1.4-4.1 2.2-6.4 2.2zM9.3 4.4c-2.9 1-5 3.6-5.2 6.8-.4 4.4 2.8 8.3 7.2 8.7 2.1.2 4.2-.4 5.8-1.8 1.1-.9 1.9-2.1 2.4-3.4-2.5.9-5.3.5-7.5-1.1-2.8-2.2-3.9-5.9-2.7-9.2z"></path></svg></div></div></div><div class="social-links menu-item_93d67 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_93d67"><svg role="img" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div><div class="mobileNavMenu_f6cde"><div class="navScreen_457e8 " id="navScreen"><div class="container_457e8"><div class="navMenu_457e8"><div class="navMenuItem_457e8 w-full"><a class="link_03735 cursor-pointer" target="" href="/module-tools/guide/intro/welcome.html"><div class="rspress-nav-menu-item singleItem_f6cde activeItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">指南</div></a></div><div class="navMenuItem_457e8 w-full"><a class="link_03735 cursor-pointer" target="" href="/module-tools/api/index.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">API</div></a></div><div class="navMenuItem_457e8 w-full"><a class="link_03735 cursor-pointer" target="" href="/module-tools/plugins/guide/getting-started.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">插件</div></a></div><div class="navMenuItem_457e8 w-full"><div class="mx-3 last:mr-0"><div class=" navScreenMenuGroup_457e8 relative"><button class="button_457e8"><span class="buttonSpan_457e8">v2.60.1</span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" down_457e8 "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div><div class="items_457e8"><div><div class="py-1 font-medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="link_03735 "><div><div class="flex justify-center"><span>更新日志</span></div></div></a></div></div><div><div class="py-1 font-medium"><a href="https://modernjs.dev/en/community/contributing-guide.html" target="_blank" rel="noopener noreferrer" class="link_03735 "><div><div class="flex justify-center"><span>贡献指南</span></div></div></a></div></div></div></div></div></div></div></div><div class="flex-center flex-col gap-2"><div class="mt-2 navAppearance_457e8 flex justify-center"></div><div class="flex text-sm font-bold justify-center"><div class="mx-1.5 my-1"><div class=" navScreenMenuGroup_457e8 relative"><button class="button_457e8"><span class="buttonSpan_457e8"><svg width="18" height="18" viewBox="0 0 32 32" style="width:18px;height:18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6 2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" down_457e8 "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div><div class="items_457e8"><div><div class="p-1 text-center"><span class="text-brand">简体中文</span></div></div><div><div class="py-1 font-medium"><a class="link_03735 cursor-pointer" target="" href="/module-tools/en/guide/advance/in-depth-about-build.html"><div><div class="flex justify-center"><span>English</span></div></div></a></div></div></div></div></div></div></div><div class="social-links menu-item_93d67 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_93d67"><svg role="img" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div></div><button aria-label="mobile hamburger" class=" navHamburger_e7b06 text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="currentColor"><circle cx="8" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="24" cy="16" r="2" fill="currentColor"></circle></svg></button></div></div></div></div><section><div class="docLayout_edeb4 pt-0"><div class="rspress-sidebar-menu"><button class="flex-center mr-auto"><div class="text-md mr-2"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"></path></svg></div><span class="text-sm">Menu</span></button><button class="flex-center ml-auto"><span class="text-sm">目录</span><div class="text-md mr-2" style="transform:rotate(0deg);transition:transform 0.2s ease-out;margin-top:2px"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></button></div><aside class="sidebar_71eca rspress-sidebar "><div class="navTitleMask_71eca"><div class="navBarTitle_f6cde"><a href="/module-tools/" class="flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><span>Modern.js Module</span></a></div></div><div class="rspress-scrollbar sidebarContent_71eca"><nav class="pb-2"><section class="mt-0.5 block" style="margin-left:0"><div class="flex justify-between items-center menuItem_71eca" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">介绍</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/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>欢迎使用</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/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>为什么需要 Modern.js Module</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/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>快速开始</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">基础使用</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/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>开始之前</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/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 命令</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/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>修改输出产物</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/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>使用微生成器</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/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>开发模块文档</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/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>使用 Storybook</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/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>版本管理与发布</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">进阶指南</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/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>深入理解构建</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/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>深入理解 dev 命令</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/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>使用 Copy 工具</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/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>处理三方依赖</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/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>构建 umd 产物</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/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>处理静态资源</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">最佳实践</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/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>开发组件</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/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>使用 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">常见问题</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/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>通用类问题</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/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>构建相关问题</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/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 相关问题</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="深入理解构建" class="text-3xl mb-10 leading-10 tracking-tight title_3b154">深入理解构建<a class="link_3b154 header-anchor" aria-hidden="true" href="#深入理解构建">#</a></h1>
14
+ <p class="my-4 leading-7">在 &quot;基础使用&quot; 的部分，我们已经知道可以通过 <code>buildConfig</code> 配置对项目的输出产物进行修改。<code>buildConfig</code> 不仅描述了产物的一些特性，同时还为构建产物提供了一些功能。</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">如果你还不了解 <code>buildConfig</code> 的作用，请先阅读 <a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/guide/basic/modify-output-product.html">修改输出产物</a>。
16
+ </p></div></div>
17
+ <p class="my-4 leading-7">而在本章里我们将要深入理解某些构建配置的作用以及了解执行 <code>modern build</code> 命令的时候发生了什么。</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">那么首先我们来了解一下 bundle 和 bundleless。</p>
20
+ <p class="my-4 leading-7">所谓 bundle 是指对构建产物进行打包，构建产物可能是一个文件，也有可能是基于一定的<a target="_blank" rel="noopener noreferrer" href="https://esbuild.github.io/api/#splitting" class="link_03735 link_3b154 inline-link_3b154">代码拆分策略</a>得到的多个文件。</p>
21
+ <p class="my-4 leading-7">而 bundleless 则是指对每个源文件单独进行编译构建，但是并不将它们打包在一起。每一个产物文件都可以找到与之相对应的源码文件。<strong class="font-semibold">bundleless 构建的过程，也可以理解为仅对源文件进行代码转换的过程</strong>。</p>
22
+ <p class="my-4 leading-7">它们有各自的好处：</p>
23
+ <ul class="list-disc pl-5 my-4 leading-7">
24
+ <li class="[&amp;:not(:first-child)]:mt-2">bundle 可以减少构建产物的体积，也可以对依赖预打包，减小安装依赖的体积。提前对库进行打包，可以加快应用项目构建的速度。</li>
25
+ <li class="[&amp;:not(:first-child)]:mt-2">bundleless 则是可以保持原有的文件结构，更有利于调试和 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 是单文件编译模式，因此对于类型的引用和导出你需要加上 <code>type</code> 字段， 例如 <code>import type { A } from &#x27;./types</code>，背景参考 <a target="_blank" rel="noopener noreferrer" href="https://esbuild.github.io/content-types/#isolated-modules" class="link_03735 link_3b154 inline-link_3b154">esbuild 文档</a>。
28
+ </p></div></div>
29
+ <p class="my-4 leading-7">在 <code>buildConfig</code> 中可以通过 <a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/api/config/build-config.html#buildtype"><code>buildConfig.buildType</code></a> 来指定当前构建任务是 bundle 还是 bundleless。</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/api/config/build-config.html#input"><code>buildConfig.input</code></a> 用于指定读取源码的文件路径或者目录路径，其默认值在 bundle 和 bundleless 构建过程中有所不同：</p>
32
+ <ul class="list-disc pl-5 my-4 leading-7">
33
+ <li class="[&amp;:not(:first-child)]:mt-2">当 <code>buildType: &#x27;bundle&#x27;</code> 的时候，<code>input</code> 默认值为 <code>src/index.(j|t)sx?</code></li>
34
+ <li class="[&amp;:not(:first-child)]:mt-2">当 <code>buildType: &#x27;bundleless&#x27;</code> 的时候，<code>input</code> 默认值为 <code>[&#x27;src&#x27;]</code></li>
35
+ </ul>
36
+ <p class="my-4 leading-7">从默认值上我们可以知道：<strong class="font-semibold">使用 bundle 模式构建时一般指定一个或多个文件作为构建的入口，而使用 bundleless 构建则是指定一个目录，将目录下所有文件作为入口</strong>。</p>
37
+ <p class="my-4 leading-7"><a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/api/config/build-config.html#sourcedir"><code>sourceDir</code></a> 用于指定源码目录，它<strong class="font-semibold">只与</strong>以下两个内容有关系：</p>
38
+ <ul class="list-disc pl-5 my-4 leading-7">
39
+ <li class="[&amp;:not(:first-child)]:mt-2">类型文件生成</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></li>
41
+ </ul>
42
+ <p class="my-4 leading-7">因此我们可以得到其最佳实践：</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">在 bundle 构建过程中，只能指定 <code>input</code> 。</strong></li>
45
+ <li class="[&amp;:not(:first-child)]:mt-2"><strong class="font-semibold">一般情况下，bundleless 只需要指定 <code>sourceDir</code>（此时 <code>input</code> 会与 <code>sourceDir</code> 保持一致）。</strong></li>
46
+ </ul>
47
+ <p class="my-4 leading-7">如果我们想要在 bundleless 里只对一部分文件进行转换，例如只需要转换 <code>src/runtime</code> 目录的文件，此时需要配置 <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="使用-swc" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">使用 swc<a class="link_3b154 header-anchor" aria-hidden="true" href="#使用-swc">#</a></h2>
57
+ <p class="my-4 leading-7">在部分场景下，esbuild 不足以满足我们的需求，此时我们会使用 swc 来做代码转换。</p>
58
+ <p class="my-4 leading-7">从 <strong class="font-semibold">2.36.0</strong> 版本开始，涉及到以下功能时，Modern.js Module 默认会使用 swc ，但不这意味着不使用 esbuild 了，其余功能还是使用 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/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/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/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/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/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">事实上，我们在 <strong class="font-semibold">2.16.0</strong> 版本开始全量使用 swc 进行代码转换。不过 swc 同样也存在一些限制，为此我们添加了 <a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/api/config/build-config.html#sourcetype">sourceType</a> 配置，当源码格式为 &#x27;commonjs&#x27; 时关闭 swc， 但这种方式并不符合用户直觉，另外，swc 格式化输出的 cjs 模式没有给每个导出名称添加注释，这在 node 中使用可能会带来一些问题。
68
+ 因为我们废弃了此行为，回到了最初的设计 - <strong class="font-semibold">只在需要的场景下使用 swc 作为补充</strong>。</p>
69
+ <h2 id="使用-hook-介入构建流程" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">使用 Hook 介入构建流程<a class="link_3b154 header-anchor" aria-hidden="true" href="#使用-hook-介入构建流程">#</a></h2>
70
+ <p class="my-4 leading-7">Modern.js Module 提供了 Hook 机制，允许我们在构建流程的不同阶段注入自定义逻辑。
71
+ Modern.js Module Hook 使用了 <a target="_blank" rel="noopener noreferrer" href="https://github.com/webpack/tapable" class="link_03735 link_3b154 inline-link_3b154">tapable</a> 实现，扩展了 esbuild 的插件机制，若 esbuild plugins 已经满足了你的需求,建议直接使用它。
72
+ 下面展开说明其用法:</p>
73
+ <h3 id="hook-类型" class="mt-10 mb-2 leading-7 text-xl title_3b154">Hook 类型<a class="link_3b154 header-anchor" aria-hidden="true" href="#hook-类型">#</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">串行执行的 hooks，如果某个 tapped function 返回非 undefined 结果，则后续其他的 tapped function 停止执行。</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">串行执行的 hooks，其结果会传递给下一个 tapped function</p>
78
+ <h3 id="hook-顺序" class="mt-10 mb-2 leading-7 text-xl title_3b154">Hook 顺序<a class="link_3b154 header-anchor" aria-hidden="true" href="#hook-顺序">#</a></h3>
79
+ <p class="my-4 leading-7">Hook 的执行顺序和注册顺序保持一致，可以通过 <code>applyAfterBuiltIn</code> 来控制在 BuiltIn Hook 前或后注册。</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">在 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> 触发，根据模块路径来获取模块内容</li>
85
+ <li class="[&amp;:not(:first-child)]:mt-2">输入参数</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">返回参数</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)">// 模块内容</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">例子</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">在 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
+ 将 load 阶段获取的模块内容进行转换</li>
118
+ <li class="[&amp;:not(:first-child)]:mt-2">输入参数(返回参数)</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">例子</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">在 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
+ 类似于 transform hook，但是作用在 esbuild 生成的产物</li>
141
+ <li class="[&amp;:not(:first-child)]:mt-2">输入参数(返回参数)</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">例子</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="类型文件生成" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">类型文件生成<a class="link_3b154 header-anchor" aria-hidden="true" href="#类型文件生成">#</a></h2>
184
+ <p class="my-4 leading-7"><a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/api/config/build-config.html#dts"><code>buildConfig.dts</code></a> 配置主要用于类型文件的生成。</p>
185
+ <h3 id="关闭类型生成" class="mt-10 mb-2 leading-7 text-xl title_3b154">关闭类型生成<a class="link_3b154 header-anchor" aria-hidden="true" href="#关闭类型生成">#</a></h3>
186
+ <p class="my-4 leading-7">默认情况下类型生成功能是开启的，如果需要关闭的话，可以按照如下配置：</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">关闭类型文件后，一般来说构建速度会有所提升。</p></div></div>
195
+ <h3 id="打包类型文件" class="mt-10 mb-2 leading-7 text-xl title_3b154">打包类型文件<a class="link_3b154 header-anchor" aria-hidden="true" href="#打包类型文件">#</a></h3>
196
+ <p class="my-4 leading-7">在 <code>buildType: &#x27;bundleless&#x27;</code> 的时候，类型文件的生成是使用项目的 <code>tsc</code> 命令来完成生产。</p>
197
+ <p class="my-4 leading-7"><strong class="font-semibold">Modern.js Module 同时还支持对类型文件进行打包</strong>，不过使用该功能的时候需要注意：</p>
198
+ <ul class="list-disc pl-5 my-4 leading-7">
199
+ <li class="[&amp;:not(:first-child)]:mt-2">对类型文件进行打包不会开启类型检查。</li>
200
+ <li class="[&amp;:not(:first-child)]:mt-2">一些第三方依赖存在错误的语法会导致打包过程失败。因此对于这种情况，需要手动通过 <a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/api/config/build-config.html#externals"><code>buildConfig.externals</code></a> 将这类第三方包排除，或者直接关闭<a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/api/config/build-config.html#dtsrespectexternal">dts.respectExternal</a>从而不打包任何三方包类型。</li>
201
+ <li class="[&amp;:not(:first-child)]:mt-2">对于第三方依赖的类型文件指向的是一个 <code>.ts</code> 文件的情况，目前无法处理。比如第三方依赖的 <code>package.json</code> 中存在这样的内容： <code>{&quot;types&quot;: &quot;./src/index.ts&quot;</code>。</li>
202
+ </ul>
203
+ <p class="my-4 leading-7">对于上述问题，我们推荐的处理方式是首先使用 <code>tsc</code> 生成 d.ts 文件，然后将 index.d.ts 作为入口进行打包处理，并且关闭 <code>dts.respectExternal</code>。在之后的演进我们也会逐渐向这种处理方式靠拢。</p>
204
+ <h3 id="别名转换" class="mt-10 mb-2 leading-7 text-xl title_3b154">别名转换<a class="link_3b154 header-anchor" aria-hidden="true" href="#别名转换">#</a></h3>
205
+ <p class="my-4 leading-7">在 bundleless 构建过程中，如果源代码中出现了别名，例如：</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">使用 <code>tsc</code> 生成的产物类型文件也会包含这些别名。不过 Modern.js Module 会对 <code>tsc</code> 生成的类型文件里的别名进行转换处理。</p>
208
+ <h3 id="一些示例" class="mt-10 mb-2 leading-7 text-xl title_3b154">一些示例<a class="link_3b154 header-anchor" aria-hidden="true" href="#一些示例">#</a></h3>
209
+ <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>
210
+ </span></span><span style="display:block;padding:0 1.25rem">
211
+ </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>
212
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// 此时打包的类型文件输出路径为 `./dist/types`，并且将会读取项目下的 other-tsconfig.json 文件</span><span>
213
+ </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>
214
+ </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>
215
+ </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>
216
+ </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>
217
+ </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>
218
+ </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>
219
+ </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>
220
+ </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>
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 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>
222
+ <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>
223
+ </span></span><span style="display:block;padding:0 1.25rem">
224
+ </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>
225
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// 此时类型文件没有进行打包，输出路径为 `./dist/types`</span><span>
226
+ </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>
227
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</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)">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>
229
+ </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>
230
+ </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>
231
+ </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>
232
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </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 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>
234
+ </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>
235
+ </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>
236
+ </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>
237
+ </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>
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" style="color:var(--code-token-punctuation)">]</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 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>
241
+ <h2 id="构建过程" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">构建过程<a class="link_3b154 header-anchor" aria-hidden="true" href="#构建过程">#</a></h2>
242
+ <p class="my-4 leading-7">当执行 <code>modern build</code> 命令的时候，会发生</p>
243
+ <ul class="list-disc pl-5 my-4 leading-7">
244
+ <li class="[&amp;:not(:first-child)]:mt-2">根据 <code>buildConfig.outDir</code> 清理产物目录。</li>
245
+ <li class="[&amp;:not(:first-child)]:mt-2">编译 <code>js/ts</code> 源代码生成 bundle / bundleless 的 JS 构建产物。</li>
246
+ <li class="[&amp;:not(:first-child)]:mt-2">使用 <code>tsc</code> 生成 bundle / bundleless 的类型文件。</li>
247
+ <li class="[&amp;:not(:first-child)]:mt-2">处理 <code>copy</code> 任务。</li>
248
+ </ul>
249
+ <h2 id="构建报错" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">构建报错<a class="link_3b154 header-anchor" aria-hidden="true" href="#构建报错">#</a></h2>
250
+ <p class="my-4 leading-7">当发生构建报错的时候，基于以上了解到的信息，可以很容易的明白在终端出现的报错内容：</p>
251
+ <p class="my-4 leading-7"><strong class="font-semibold">js 或者 ts 构建的报错：</strong></p>
252
+ <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:
253
+ </span></span><span style="display:block;padding:0 1.25rem">
254
+ </span><span style="display:block;padding:0 1.25rem">╭───────────────────────╮
255
+ </span><span style="display:block;padding:0 1.25rem">│ bundle failed: │
256
+ </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> │
257
+ </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> │
258
+ </span></span><span style="display:block;padding:0 1.25rem">╰───────────────────────╯
259
+ </span><span style="display:block;padding:0 1.25rem">
260
+ </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>
261
+ <p class="my-4 leading-7"><strong class="font-semibold">类型文件生成过程的报错：</strong></p>
262
+ <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:
263
+ </span></span><span style="display:block;padding:0 1.25rem">
264
+ </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>
265
+ <p class="my-4 leading-7">对于 <code>js/ts</code> 构建错误，我们可以从报错信息中知道：</p>
266
+ <ul class="list-disc pl-5 my-4 leading-7">
267
+ <li class="[&amp;:not(:first-child)]:mt-2">报错的 <code>buildType</code></li>
268
+ <li class="[&amp;:not(:first-child)]:mt-2">报错的 <code>format</code></li>
269
+ <li class="[&amp;:not(:first-child)]:mt-2">报错的 <code>target</code></li>
270
+ <li class="[&amp;:not(:first-child)]:mt-2">其他具体报错信息</li>
271
+ </ul>
272
+ <h2 id="调试模式" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">调试模式<a class="link_3b154 header-anchor" aria-hidden="true" href="#调试模式">#</a></h2>
273
+ <p class="my-4 leading-7">从 <strong class="font-semibold">2.36.0</strong> 版本开始，为了便于排查问题，Modern.js Module 提供了调试模式，你可以在执行构建时添加 DEBUG=module 环境变量来开启调试模式。</p>
274
+ <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>
275
+ <p class="my-4 leading-7">调试模式下，你会看到 Shell 中输出更详细的构建日志，这主要以流程日志为主：</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>module run beforeBuildTask hooks +6ms
277
+ </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
278
+ </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
279
+ </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>
280
+ <p class="my-4 leading-7">另外，Module 还提供了调试内部工作流程的能力。你可以通过设置环境变量 <code>DEBUG=module:*</code> 来开启更详细的调试日志:</p>
281
+ <p class="my-4 leading-7">目前只支持了 <code>DEBUG=module:resolve</code>，可以查看 Module 内部模块解析的详细日志:</p>
282
+ <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>
283
+ </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>,
284
+ </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>,
285
+ </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>,
286
+ </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>,
287
+ </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>,
288
+ </span></span><span style="display:block;padding:0 1.25rem"> pluginData: undefined
289
+ </span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> +0ms
290
+ </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>
291
+ </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>,
292
+ </span></span><span style="display:block;padding:0 1.25rem"> external: false,
293
+ </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>,
294
+ </span></span><span style="display:block;padding:0 1.25rem"> sideEffects: undefined,
295
+ </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>
296
+ </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/zh/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/guide/basic/publish-your-project.html"><span class="desc_9b9a7">上一页</span><span class="title_9b9a7">版本管理与发布</span></a></div><div class="next_e7091 flex flex-col"><a class="link_03735 pager-link_9b9a7 next_9b9a7 cursor-pointer" target="" href="/module-tools/guide/advance/in-depth-about-dev-command.html"><span class="desc_9b9a7">下一页</span><span class="title_9b9a7">深入理解 dev 命令</span></a></div></div></footer></div></div></div><div class="aside-container_edeb4"><div><div class="flex flex-col"><div class="&lt;lg:hidden"><div id="aside-container" class="relative text-sm font-medium"><div class="leading-7 block text-sm font-semibold pl-3">目录</div><nav class="mt-1"><ul class="relative"><li><a href="#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="#使用-swc" title="使用 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">使用 swc</span></a></li><li><a href="#使用-hook-介入构建流程" title="使用 Hook 介入构建流程" 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">使用 Hook 介入构建流程</span></a></li><li><a href="#hook-类型" title="Hook 类型" 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 类型</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-顺序" title="Hook 顺序" 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 顺序</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="#类型文件生成" title="类型文件生成" 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">类型文件生成</span></a></li><li><a href="#关闭类型生成" title="关闭类型生成" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">关闭类型生成</span></a></li><li><a href="#打包类型文件" title="打包类型文件" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">打包类型文件</span></a></li><li><a href="#别名转换" title="别名转换" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">别名转换</span></a></li><li><a href="#一些示例" title="一些示例" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">一些示例</span></a></li><li><a href="#构建过程" title="构建过程" 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">构建过程</span></a></li><li><a href="#构建报错" title="构建报错" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">构建报错</span></a></li><li><a href="#调试模式" title="调试模式" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">调试模式</span></a></li></ul></nav></div></div></div></div></div></div></div></section></div></div>
297
+ <div id="search-container"></div>
298
+ </body>
299
+
300
+ </html>