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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (207) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/doc_build/404.html +17 -0
  3. package/doc_build/api/config/build-config.html +1217 -0
  4. package/doc_build/api/config/build-preset.html +211 -0
  5. package/doc_build/api/config/dev.html +63 -0
  6. package/doc_build/api/config/plugins.html +54 -0
  7. package/doc_build/api/index.html +17 -0
  8. package/doc_build/api/plugin-api/plugin-hooks.html +395 -0
  9. package/doc_build/components/faq-build-exception.html +17 -0
  10. package/doc_build/components/faq-build-other.html +17 -0
  11. package/doc_build/components/faq-build-product.html +17 -0
  12. package/doc_build/components/faq-storybook.html +17 -0
  13. package/doc_build/components/publish-emo.html +17 -0
  14. package/doc_build/components/register-esbuild-plugin.html +27 -0
  15. package/doc_build/components/release-module-doc.html +17 -0
  16. package/doc_build/en/api/config/build-config.html +1220 -0
  17. package/doc_build/en/api/config/build-preset.html +206 -0
  18. package/doc_build/en/api/config/dev.html +63 -0
  19. package/doc_build/en/api/config/plugins.html +54 -0
  20. package/doc_build/en/api/index.html +17 -0
  21. package/doc_build/en/api/plugin-api/plugin-hooks.html +399 -0
  22. package/doc_build/en/components/faq-build-exception.html +17 -0
  23. package/doc_build/en/components/faq-build-other.html +17 -0
  24. package/doc_build/en/components/faq-build-product.html +17 -0
  25. package/doc_build/en/components/faq-storybook.html +17 -0
  26. package/doc_build/en/components/publish-emo.html +17 -0
  27. package/doc_build/en/components/register-esbuild-plugin.html +27 -0
  28. package/doc_build/en/components/release-module-doc.html +17 -0
  29. package/doc_build/en/guide/advance/asset.html +58 -0
  30. package/doc_build/en/guide/advance/build-umd.html +166 -0
  31. package/doc_build/en/guide/advance/copy.html +208 -0
  32. package/doc_build/en/guide/advance/external-dependency.html +62 -0
  33. package/doc_build/en/guide/advance/in-depth-about-build.html +302 -0
  34. package/doc_build/en/guide/advance/in-depth-about-dev-command.html +68 -0
  35. package/doc_build/en/guide/basic/before-getting-started.html +139 -0
  36. package/doc_build/en/guide/basic/command-preview.html +131 -0
  37. package/doc_build/en/guide/basic/modify-output-product.html +133 -0
  38. package/doc_build/en/guide/basic/publish-your-project.html +100 -0
  39. package/doc_build/en/guide/basic/use-micro-generator.html +54 -0
  40. package/doc_build/en/guide/basic/use-module-doc.html +397 -0
  41. package/doc_build/en/guide/basic/using-storybook.html +168 -0
  42. package/doc_build/en/guide/best-practices/components.html +198 -0
  43. package/doc_build/en/guide/best-practices/use-tailwindcss.html +243 -0
  44. package/doc_build/en/guide/faq/basic.html +23 -0
  45. package/doc_build/en/guide/faq/build.html +237 -0
  46. package/doc_build/en/guide/faq/index.html +23 -0
  47. package/doc_build/en/guide/faq/storybook.html +85 -0
  48. package/doc_build/en/guide/intro/getting-started.html +92 -0
  49. package/doc_build/en/guide/intro/welcome.html +27 -0
  50. package/doc_build/en/guide/intro/why-module-engineering-solution.html +25 -0
  51. package/doc_build/en/index.html +17 -0
  52. package/doc_build/en/plugins/guide/getting-started.html +70 -0
  53. package/doc_build/en/plugins/guide/plugin-object.html +74 -0
  54. package/doc_build/en/plugins/guide/setup-function.html +96 -0
  55. package/doc_build/en/plugins/official-list/overview.html +26 -0
  56. package/doc_build/en/plugins/official-list/plugin-babel.html +65 -0
  57. package/doc_build/en/plugins/official-list/plugin-banner.html +91 -0
  58. package/doc_build/en/plugins/official-list/plugin-import.html +111 -0
  59. package/doc_build/en/plugins/official-list/plugin-node-polyfill.html +128 -0
  60. package/doc_build/en/plugins/official-list/plugin-polyfill.html +72 -0
  61. package/doc_build/en/plugins/official-list/plugin-vue.html +66 -0
  62. package/doc_build/guide/advance/asset.html +55 -0
  63. package/doc_build/guide/advance/build-umd.html +170 -0
  64. package/doc_build/guide/advance/copy.html +208 -0
  65. package/doc_build/guide/advance/external-dependency.html +61 -0
  66. package/doc_build/guide/advance/in-depth-about-build.html +300 -0
  67. package/doc_build/guide/advance/in-depth-about-dev-command.html +68 -0
  68. package/doc_build/guide/basic/before-getting-started.html +139 -0
  69. package/doc_build/guide/basic/command-preview.html +131 -0
  70. package/doc_build/guide/basic/modify-output-product.html +134 -0
  71. package/doc_build/guide/basic/publish-your-project.html +99 -0
  72. package/doc_build/guide/basic/use-micro-generator.html +54 -0
  73. package/doc_build/guide/basic/use-module-doc.html +395 -0
  74. package/doc_build/guide/basic/using-storybook.html +177 -0
  75. package/doc_build/guide/best-practices/components.html +198 -0
  76. package/doc_build/guide/best-practices/use-tailwindcss.html +243 -0
  77. package/doc_build/guide/faq/basic.html +23 -0
  78. package/doc_build/guide/faq/build.html +234 -0
  79. package/doc_build/guide/faq/index.html +23 -0
  80. package/doc_build/guide/faq/storybook.html +85 -0
  81. package/doc_build/guide/intro/getting-started.html +89 -0
  82. package/doc_build/guide/intro/welcome.html +27 -0
  83. package/doc_build/guide/intro/why-module-engineering-solution.html +25 -0
  84. package/doc_build/index.html +17 -0
  85. package/doc_build/plugins/guide/getting-started.html +70 -0
  86. package/doc_build/plugins/guide/plugin-object.html +74 -0
  87. package/doc_build/plugins/guide/setup-function.html +95 -0
  88. package/doc_build/plugins/official-list/overview.html +26 -0
  89. package/doc_build/plugins/official-list/plugin-babel.html +64 -0
  90. package/doc_build/plugins/official-list/plugin-banner.html +94 -0
  91. package/doc_build/plugins/official-list/plugin-import.html +112 -0
  92. package/doc_build/plugins/official-list/plugin-node-polyfill.html +128 -0
  93. package/doc_build/plugins/official-list/plugin-polyfill.html +71 -0
  94. package/doc_build/plugins/official-list/plugin-vue.html +66 -0
  95. package/doc_build/static/css/styles.0b88df3a.css +1 -0
  96. package/doc_build/static/js/490.a066dbc0.js +6 -0
  97. package/doc_build/static/js/490.a066dbc0.js.LICENSE.txt +35 -0
  98. package/doc_build/static/js/async/1095.4ca5fdf0.js +1 -0
  99. package/doc_build/static/js/async/1148.ff6a84ca.js +1 -0
  100. package/doc_build/static/js/async/1306.8bc84d6b.js +1 -0
  101. package/doc_build/static/js/async/1507.fed31a58.js +1 -0
  102. package/doc_build/static/js/async/1527.4c6e53e2.js +1 -0
  103. package/doc_build/static/js/async/1657.d0d95d59.js +1 -0
  104. package/doc_build/static/js/async/1801.5d49a2fe.js +1 -0
  105. package/doc_build/static/js/async/1941.0b3cceee.js +1 -0
  106. package/doc_build/static/js/async/213.db8a0492.js +1 -0
  107. package/doc_build/static/js/async/2131.5dfdffa9.js +1 -0
  108. package/doc_build/static/js/async/2140.848412d7.js +1 -0
  109. package/doc_build/static/js/async/2206.f6b802b2.js +1 -0
  110. package/doc_build/static/js/async/2300.cba0106e.js +1 -0
  111. package/doc_build/static/js/async/2347.a480682f.js +1 -0
  112. package/doc_build/static/js/async/2365.daed0a9c.js +1 -0
  113. package/doc_build/static/js/async/2561.2e43400c.js +1 -0
  114. package/doc_build/static/js/async/2579.f7c71e6b.js +1 -0
  115. package/doc_build/static/js/async/2671.c711355f.js +1 -0
  116. package/doc_build/static/js/async/2704.561dadd9.js +1 -0
  117. package/doc_build/static/js/async/2712.5ffea5ba.js +1 -0
  118. package/doc_build/static/js/async/3023.5bef6325.js +1 -0
  119. package/doc_build/static/js/async/3039.3982622e.js +1 -0
  120. package/doc_build/static/js/async/3097.b043b3aa.js +1 -0
  121. package/doc_build/static/js/async/3213.df408a99.js +1 -0
  122. package/doc_build/static/js/async/3235.0c4d2c9b.js +1 -0
  123. package/doc_build/static/js/async/336.8387125c.js +1 -0
  124. package/doc_build/static/js/async/3493.5133deaa.js +1 -0
  125. package/doc_build/static/js/async/351.de7824af.js +1 -0
  126. package/doc_build/static/js/async/3597.cf46a69b.js +1 -0
  127. package/doc_build/static/js/async/36.eee0e8fe.js +1 -0
  128. package/doc_build/static/js/async/3628.726e3f10.js +1 -0
  129. package/doc_build/static/js/async/3724.bcc90bb4.js +1 -0
  130. package/doc_build/static/js/async/3761.949f5838.js +1 -0
  131. package/doc_build/static/js/async/4061.84ac839b.js +1 -0
  132. package/doc_build/static/js/async/4064.104b71cd.js +1 -0
  133. package/doc_build/static/js/async/4206.133ffe9e.js +1 -0
  134. package/doc_build/static/js/async/443.b519ce6b.js +1 -0
  135. package/doc_build/static/js/async/4501.c647ab73.js +1 -0
  136. package/doc_build/static/js/async/453.7358c1fd.js +1 -0
  137. package/doc_build/static/js/async/461.2d6ea16c.js +1 -0
  138. package/doc_build/static/js/async/4615.c4e5b749.js +1 -0
  139. package/doc_build/static/js/async/4655.bbe27e7b.js +1 -0
  140. package/doc_build/static/js/async/4812.ebd3f4cb.js +1 -0
  141. package/doc_build/static/js/async/4904.de72a299.js +1 -0
  142. package/doc_build/static/js/async/5105.28347c4d.js +1 -0
  143. package/doc_build/static/js/async/5453.87dcea50.js +1 -0
  144. package/doc_build/static/js/async/5455.9e038fda.js +1 -0
  145. package/doc_build/static/js/async/5493.3644c7b8.js +1 -0
  146. package/doc_build/static/js/async/5495.50aacc7e.js +1 -0
  147. package/doc_build/static/js/async/5555.40dabd12.js +1 -0
  148. package/doc_build/static/js/async/5558.073d18d0.js +1 -0
  149. package/doc_build/static/js/async/5844.b3a9d57a.js +1 -0
  150. package/doc_build/static/js/async/588.6de9811a.js +1 -0
  151. package/doc_build/static/js/async/5889.41a786b6.js +1 -0
  152. package/doc_build/static/js/async/5892.b0db6657.js +1 -0
  153. package/doc_build/static/js/async/5995.209e2925.js +1 -0
  154. package/doc_build/static/js/async/6046.963bbf59.js +1 -0
  155. package/doc_build/static/js/async/6308.6363792d.js +1 -0
  156. package/doc_build/static/js/async/6576.a753babb.js +1 -0
  157. package/doc_build/static/js/async/6615.154a2810.js +1 -0
  158. package/doc_build/static/js/async/6858.e2452605.js +1 -0
  159. package/doc_build/static/js/async/6975.be4ba201.js +1 -0
  160. package/doc_build/static/js/async/7080.1c684c7d.js +1 -0
  161. package/doc_build/static/js/async/7220.1c4ee8bb.js +1 -0
  162. package/doc_build/static/js/async/7406.b2acec42.js +1 -0
  163. package/doc_build/static/js/async/7521.ca744786.js +1 -0
  164. package/doc_build/static/js/async/7535.f50f0fd1.js +1 -0
  165. package/doc_build/static/js/async/7584.c3b673fd.js +1 -0
  166. package/doc_build/static/js/async/7600.03d9da89.js +1 -0
  167. package/doc_build/static/js/async/7663.86b79735.js +1 -0
  168. package/doc_build/static/js/async/769.2bc1c7b7.js +1 -0
  169. package/doc_build/static/js/async/7715.1bfe887f.js +1 -0
  170. package/doc_build/static/js/async/7837.5667c422.js +1 -0
  171. package/doc_build/static/js/async/8040.1cfb21ff.js +1 -0
  172. package/doc_build/static/js/async/8085.f9f71860.js +1 -0
  173. package/doc_build/static/js/async/8098.beeb77f3.js +1 -0
  174. package/doc_build/static/js/async/8134.068074a0.js +1 -0
  175. package/doc_build/static/js/async/8158.2834ced1.js +1 -0
  176. package/doc_build/static/js/async/8214.2fdfe2fe.js +1 -0
  177. package/doc_build/static/js/async/8233.24111213.js +1 -0
  178. package/doc_build/static/js/async/8451.5328c0c7.js +1 -0
  179. package/doc_build/static/js/async/8689.f8447ca1.js +1 -0
  180. package/doc_build/static/js/async/8694.077556c4.js +1 -0
  181. package/doc_build/static/js/async/8713.91395601.js +1 -0
  182. package/doc_build/static/js/async/8750.0f6872b3.js +1 -0
  183. package/doc_build/static/js/async/8802.463e3040.js +1 -0
  184. package/doc_build/static/js/async/9100.066e1017.js +1 -0
  185. package/doc_build/static/js/async/9250.8fb41a47.js +1 -0
  186. package/doc_build/static/js/async/9524.bb257861.js +1 -0
  187. package/doc_build/static/js/async/9611.b2543acb.js +1 -0
  188. package/doc_build/static/js/async/964.b00f3e9f.js +1 -0
  189. package/doc_build/static/js/async/9740.b27e6629.js +1 -0
  190. package/doc_build/static/js/index.6a5d779d.js +1 -0
  191. package/doc_build/static/js/lib-react.a93218f7.js +2 -0
  192. package/doc_build/static/js/lib-react.a93218f7.js.LICENSE.txt +39 -0
  193. package/doc_build/static/js/lib-router.f8d11890.js +2 -0
  194. package/doc_build/static/js/lib-router.f8d11890.js.LICENSE.txt +32 -0
  195. package/doc_build/static/js/styles.3f5a6140.js +1 -0
  196. package/doc_build/static/search_index.en.f19ea64b.json +1 -0
  197. package/doc_build/static/search_index.zh.e818eee4.json +1 -0
  198. package/doc_build/test-result.png +0 -0
  199. package/doc_build/why-module-solution.png +0 -0
  200. package/docs/en/api/config/dev.md +2 -2
  201. package/docs/en/guide/basic/command-preview.md +0 -16
  202. package/docs/en/guide/intro/welcome.md +0 -1
  203. package/docs/zh/api/config/dev.md +2 -2
  204. package/docs/zh/guide/basic/command-preview.md +0 -16
  205. package/docs/zh/guide/basic/using-storybook.mdx +1 -1
  206. package/docs/zh/guide/intro/welcome.md +0 -1
  207. package/package.json +4 -4
package/doc_build/en/plugins/guide/setup-function.html ADDED
@@ -0,0 +1,96 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <meta name="generator" content="Rspress v1.31.0">
9
+ <title data-rh="true">Setup function - Modern.js Module</title><meta data-rh="true" name="description" content="Module Engineering Solutions"/>
10
+ <script>{;const saved = localStorage.getItem('rspress-theme-appearance');const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;const isDark = !saved || saved === 'auto' ? preferDark : saved === 'dark';document.documentElement.classList.toggle('dark', isDark);document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';}</script><link rel="icon" href="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/logo-1x-0104.png"><script defer src="/module-tools/static/js/styles.3f5a6140.js"></script><script defer src="/module-tools/static/js/lib-react.a93218f7.js"></script><script defer src="/module-tools/static/js/lib-router.f8d11890.js"></script><script defer src="/module-tools/static/js/490.a066dbc0.js"></script><script defer src="/module-tools/static/js/index.6a5d779d.js"></script><link href="/module-tools/static/css/styles.0b88df3a.css" rel="stylesheet"></head>
11
+
12
+ <body >
13
+ <div id="root"><div><div class="navContainer_f6cde rspress-nav px-6 " style="position:sticky"><div class="container_f6cde flex justify-between items-center h-full"><div class="navBarTitle_f6cde"><a href="/module-tools/en" class="flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><span>Modern.js Module</span></a></div><div class="flex flex-1 justify-end items-center"><div class="rightNav_f6cde"><div class="flex sm:flex-1 items-center sm:pl-4 sm:pr-2"><div class="rspress-nav-search-button navSearchButton_6e282"><button><svg width="18" height="18" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9Z"></path></svg><p class="searchWord_6e282">Search Docs</p><div style="opacity:0"><span></span><span>K</span></div></button></div><div class="mobileNavSearchButton_6e282"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9Z"></path></svg></div></div><div class="rspress-nav-menu menu h-14"><a class="link_03735 cursor-pointer" target="" href="/module-tools/en/guide/intro/welcome.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">Guide</div></a><a class="link_03735 cursor-pointer" target="" href="/module-tools/en/api/index.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">API</div></a><a class="link_03735 cursor-pointer" target="" href="/module-tools/en/plugins/guide/getting-started.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">Plugins</div></a><div class="mx-3 last:mr-0"><div class="relative flex-center h-14"><button class="rspress-nav-menu-group-button flex-center items-center font-medium text-sm text-text-1 hover:text-text-2 transition-colors duration-200"><span class="text-sm font-medium flex" style="margin-right:2px">v2.60.1</span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div class="rspress-nav-menu-group-content absolute mx-0.8 transition-opacity duration-300" style="opacity:0;visibility:hidden;right:0;top:52px"><div class="p-3 pr-2 w-full h-full max-h-100vh whitespace-nowrap" style="box-shadow:var(--rp-shadow-3);z-index:100;border:1px solid var(--rp-c-divider-light);border-radius:var(--rp-radius-large);background:var(--rp-c-bg)"><div><div class="font-medium my-1"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="link_03735 "><div class="rounded-2xl hover:bg-mute" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><div class="flex"><span>Changelog</span></div></div></a></div></div><div><div class="font-medium my-1"><a href="https://modernjs.dev/en/community/contributing-guide.html" target="_blank" rel="noopener noreferrer" class="link_03735 "><div class="rounded-2xl hover:bg-mute" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><div class="flex"><span>Contributing</span></div></div></a></div></div></div></div></div></div></div><div class="flex-center flex-row"><div class="translation menu-item_f6cde flex text-sm font-bold items-center px-3 py-2"><div><div class="relative flex-center h-14"><button class="rspress-nav-menu-group-button flex-center items-center font-medium text-sm text-text-1 hover:text-text-2 transition-colors duration-200"><span class="text-sm font-medium flex" style="margin-right:2px"><svg width="18" height="18" viewBox="0 0 32 32" style="width:18px;height:18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6 2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div class="rspress-nav-menu-group-content absolute mx-0.8 transition-opacity duration-300" style="opacity:0;visibility:hidden;right:0;top:52px"><div class="p-3 pr-2 w-full h-full max-h-100vh whitespace-nowrap" style="box-shadow:var(--rp-shadow-3);z-index:100;border:1px solid var(--rp-c-divider-light);border-radius:var(--rp-radius-large);background:var(--rp-c-bg)"><div><div class="font-medium my-1"><a class="link_03735 cursor-pointer" target="" href="/module-tools/plugins/guide/setup-function.html"><div class="rounded-2xl hover:bg-mute" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><div class="flex"><span>简体中文</span></div></div></a></div></div><div><div class="rounded-2xl my-1 flex" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><span class="text-brand">English</span></div></div></div></div></div></div></div><div class="mx-2"><div class="md:mr-2 rspress-nav-appearance"><div class="p-1 border border-solid border-gray-300 text-gray-400 cursor-pointer rounded-md hover:border-gray-600 hover:text-gray-600 dark:hover:border-gray-200 dark:hover:text-gray-200 transition-all duration-300 w-7 h-7"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="dark:hidden" width="18" height="18" fill="currentColor"><path d="M12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM12 4c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1zM12 24c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1zM5.6 6.6c-.3 0-.5-.1-.7-.3L3.5 4.9c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.1.2-.4.3-.7.3zM19.8 20.8c-.3 0-.5-.1-.7-.3l-1.4-1.4c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.2.2-.5.3-.7.3zM3 13H1c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1zM23 13h-2c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1zM4.2 20.8c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.4.3-.7.3zM18.4 6.6c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.5.3-.7.3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="hidden dark:block" width="18" height="18" fill="currentColor"><path d="M12.1 22h-.9c-5.5-.5-9.5-5.4-9-10.9.4-4.8 4.2-8.6 9-9 .4 0 .8.2 1 .5.2.3.2.8-.1 1.1-2 2.7-1.4 6.4 1.3 8.4 2.1 1.6 5 1.6 7.1 0 .3-.2.7-.3 1.1-.1.3.2.5.6.5 1-.2 2.7-1.5 5.1-3.6 6.8-1.9 1.4-4.1 2.2-6.4 2.2zM9.3 4.4c-2.9 1-5 3.6-5.2 6.8-.4 4.4 2.8 8.3 7.2 8.7 2.1.2 4.2-.4 5.8-1.8 1.1-.9 1.9-2.1 2.4-3.4-2.5.9-5.3.5-7.5-1.1-2.8-2.2-3.9-5.9-2.7-9.2z"></path></svg></div></div></div><div class="social-links menu-item_93d67 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_93d67"><svg role="img" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div><div class="mobileNavMenu_f6cde"><div class="navScreen_457e8 " id="navScreen"><div class="container_457e8"><div class="navMenu_457e8"><div class="navMenuItem_457e8 w-full"><a class="link_03735 cursor-pointer" target="" href="/module-tools/en/guide/intro/welcome.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">Guide</div></a></div><div class="navMenuItem_457e8 w-full"><a class="link_03735 cursor-pointer" target="" href="/module-tools/en/api/index.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">API</div></a></div><div class="navMenuItem_457e8 w-full"><a class="link_03735 cursor-pointer" target="" href="/module-tools/en/plugins/guide/getting-started.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">Plugins</div></a></div><div class="navMenuItem_457e8 w-full"><div class="mx-3 last:mr-0"><div class=" navScreenMenuGroup_457e8 relative"><button class="button_457e8"><span class="buttonSpan_457e8">v2.60.1</span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" down_457e8 "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div><div class="items_457e8"><div><div class="py-1 font-medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="link_03735 "><div><div class="flex justify-center"><span>Changelog</span></div></div></a></div></div><div><div class="py-1 font-medium"><a href="https://modernjs.dev/en/community/contributing-guide.html" target="_blank" rel="noopener noreferrer" class="link_03735 "><div><div class="flex justify-center"><span>Contributing</span></div></div></a></div></div></div></div></div></div></div></div><div class="flex-center flex-col gap-2"><div class="mt-2 navAppearance_457e8 flex justify-center"></div><div class="flex text-sm font-bold justify-center"><div class="mx-1.5 my-1"><div class=" navScreenMenuGroup_457e8 relative"><button class="button_457e8"><span class="buttonSpan_457e8"><svg width="18" height="18" viewBox="0 0 32 32" style="width:18px;height:18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6 2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" down_457e8 "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div><div class="items_457e8"><div><div class="py-1 font-medium"><a class="link_03735 cursor-pointer" target="" href="/module-tools/plugins/guide/setup-function.html"><div><div class="flex justify-center"><span>简体中文</span></div></div></a></div></div><div><div class="p-1 text-center"><span class="text-brand">English</span></div></div></div></div></div></div></div><div class="social-links menu-item_93d67 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_93d67"><svg role="img" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div></div><button aria-label="mobile hamburger" class=" navHamburger_e7b06 text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="currentColor"><circle cx="8" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="24" cy="16" r="2" fill="currentColor"></circle></svg></button></div></div></div></div><section><div class="docLayout_edeb4 pt-0"><div class="rspress-sidebar-menu"><button class="flex-center mr-auto"><div class="text-md mr-2"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"></path></svg></div><span class="text-sm">Menu</span></button><button class="flex-center ml-auto"><span class="text-sm">ON THIS PAGE</span><div class="text-md mr-2" style="transform:rotate(0deg);transition:transform 0.2s ease-out;margin-top:2px"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></button></div><aside class="sidebar_71eca rspress-sidebar "><div class="navTitleMask_71eca"><div class="navBarTitle_f6cde"><a href="/module-tools/en" class="flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><span>Modern.js Module</span></a></div></div><div class="rspress-scrollbar sidebarContent_71eca"><nav class="pb-2"><section class="mt-0.5 block" style="margin-left:0"><div class="flex justify-between items-center menuItem_71eca" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">Guide</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/guide/getting-started.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Quick Start</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/guide/plugin-object.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Plugin Object</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/guide/setup-function.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>Setup function</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">Plugins List</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/official-list/overview.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>Overview</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/official-list/plugin-babel.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>Babel Plugin</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/official-list/plugin-banner.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>Banner Plugin</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/official-list/plugin-import.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>Import Plugin</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/official-list/plugin-node-polyfill.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>Node Polyfill Plugin</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/official-list/plugin-polyfill.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>Polyfill Plugin</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/official-list/plugin-vue.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>Vue Plugin</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="setup-function" class="text-3xl mb-10 leading-10 tracking-tight title_3b154">Setup function<a class="link_3b154 header-anchor" aria-hidden="true" href="#setup-function">#</a></h1>
14
+ <p class="my-4 leading-7">In the <a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/en/plugins/guide/plugin-object.html">&quot;Plugin object&quot;</a> section we know that the plugin object contains a <code>setup</code> function that not only contains an <code>api</code> object parameter, but also returns a Hooks object.</p>
15
+ <h2 id="plugin-api-objects" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">Plugin API objects<a class="link_3b154 header-anchor" aria-hidden="true" href="#plugin-api-objects">#</a></h2>
16
+ <p class="my-4 leading-7">The <code>setup</code> function of the plugin will provide an <code>api</code> object parameter, and you can call some of the methods provided on this object to get information about the configuration, project context, etc.</p>
17
+ <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)">const</span><span> myPlugin </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token operator">:</span><span> CliPlugin</span><span class="token operator">&lt;</span><span>ModuleTools</span><span class="token operator">&gt;</span><span> </span><span class="token operator">=&gt;</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
18
+ </span></span><span style="display:block;padding:0 1.25rem"><span> name</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;my-plugin&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
19
+ </span></span><span style="display:block;padding:0 1.25rem">
20
+ </span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-function)">setup</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>api</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
21
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// Get the original configuration of the application</span><span>
22
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">const</span><span> config </span><span class="token operator">=</span><span> api</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">useConfigContext</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>
23
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// Get the application runtime context</span><span>
24
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">const</span><span> appContext </span><span class="token operator">=</span><span> api</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">useAppContext</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>
25
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// Get the final configuration after resolving</span><span>
26
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">const</span><span> resolvedConfig </span><span class="token operator">=</span><span> api</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">useResolvedConfigContext</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>
27
+ </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>
28
+ </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>
29
+ <h3 id="apiuseappcontext" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>api.useAppContext</code><a class="link_3b154 header-anchor" aria-hidden="true" href="#apiuseappcontext">#</a></h3>
30
+ <p class="my-4 leading-7">Used to get project context information.</p>
31
+ <div class="language-ts"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">const</span><span> </span><span class="token function-variable" style="color:var(--code-token-function)">useAppContext</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token operator">=&gt;</span><span> IAppContext</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
32
+ </span></span><span style="display:block;padding:0 1.25rem">
33
+ </span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">interface</span><span> </span><span class="token class-name">IAppContext</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
34
+ </span></span><span style="display:block;padding:0 1.25rem"><span> appDirectory</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>
35
+ </span></span><span style="display:block;padding:0 1.25rem"><span> configFile</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> </span><span class="token boolean">false</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
36
+ </span></span><span style="display:block;padding:0 1.25rem"><span> packageName</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>
37
+ </span></span><span style="display:block;padding:0 1.25rem"><span> nodeModulesDirectory</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>
38
+ </span></span><span style="display:block;padding:0 1.25rem"><span> internalDirectory</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>
39
+ </span></span><span style="display:block;padding:0 1.25rem"><span> plugins</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
40
+ </span></span><span style="display:block;padding:0 1.25rem"><span> cli</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">any</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
41
+ </span></span><span style="display:block;padding:0 1.25rem"><span> server</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">any</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
42
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">[</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
43
+ </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>
44
+ <div class="rspress-directive info"><div class="rspress-directive-title">INFO</div><div class="rspress-directive-content"><p class="my-4 leading-7">Through the actual type file, we can see that there are some additional fields. However, for Modern.js Module, the fields mentioned above are the only ones that are meaningful. The same applies to other methods of the <code>api</code> object.
45
+ </p></div></div>
46
+ <h3 id="apiuseresolvedconfigcontext" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>api.useResolvedConfigContext</code><a class="link_3b154 header-anchor" aria-hidden="true" href="#apiuseresolvedconfigcontext">#</a></h3>
47
+ <p class="my-4 leading-7">Used to get the final configuration after parsing.</p>
48
+ <div class="rspress-directive info"><div class="rspress-directive-title">INFO</div><div class="rspress-directive-content"><p class="my-4 leading-7">If you need to get the build-related final configuration, you need to use the <code>beforeBuild</code> Hook.
49
+ </p></div></div>
50
+ <div class="language-ts"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">const</span><span> </span><span class="token function-variable" style="color:var(--code-token-function)">useResolvedConfigContext</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token operator">=&gt;</span><span> NormalizedConfig</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
51
+ </span></span><span style="display:block;padding:0 1.25rem">
52
+ </span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">interface</span><span> </span><span class="token class-name">NormalizedConfig</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
53
+ </span></span><span style="display:block;padding:0 1.25rem"><span> buildConfig</span><span class="token operator">:</span><span> PartialBuildConfig</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
54
+ </span></span><span style="display:block;padding:0 1.25rem"><span> buildPreset</span><span class="token operator">:</span><span> BuildPreset</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
55
+ </span></span><span style="display:block;padding:0 1.25rem"><span> dev</span><span class="token operator">:</span><span> Dev</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
56
+ </span></span><span style="display:block;padding:0 1.25rem"><span> plugins</span><span class="token operator">:</span><span> PluginConfig</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
57
+ </span></span><span style="display:block;padding:0 1.25rem"><span> runtime</span><span class="token operator">:</span><span> RuntimeConfig</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
58
+ </span></span><span style="display:block;padding:0 1.25rem"><span> runtimeByEntries</span><span class="token operator">?</span><span class="token operator">:</span><span> RuntimeByEntriesConfig</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
59
+ </span></span><span style="display:block;padding:0 1.25rem"><span> _raw</span><span class="token operator">:</span><span> UserConfig</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
60
+ </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>
61
+ <h3 id="apiusehookrunners" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>api.useHookRunners</code><a class="link_3b154 header-anchor" aria-hidden="true" href="#apiusehookrunners">#</a></h3>
62
+ <p class="my-4 leading-7">Used to get the executors of Hooks and trigger the execution of a specific Hook.</p>
63
+ <div class="language-ts"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-keyword)">type</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> CliPlugin </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/core&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
64
+ </span></span><span style="display:block;padding:0 1.25rem">
65
+ </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)">const</span><span> myPlugin </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token operator">:</span><span> CliPlugin </span><span class="token operator">=&gt;</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
66
+ </span></span><span style="display:block;padding:0 1.25rem"><span> name</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;my-plugin&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
67
+ </span></span><span style="display:block;padding:0 1.25rem">
68
+ </span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">async</span><span> </span><span class="token" style="color:var(--code-token-function)">setup</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>api</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
69
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">const</span><span> hookRunners </span><span class="token operator">=</span><span> api</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">useHookRunners</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>
70
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// trigger the afterBuild Hook</span><span>
71
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">await</span><span> hookRunners</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">afterBuild</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>
72
+ </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>
73
+ </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>
74
+ <h2 id="asynchronous-setup" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">Asynchronous setup<a class="link_3b154 header-anchor" aria-hidden="true" href="#asynchronous-setup">#</a></h2>
75
+ <p class="my-4 leading-7">The setup of a CLI plugin can be an asynchronous function that performs asynchronous logic during the initialization process.</p>
76
+ <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)">const</span><span> myPlugin </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token operator">:</span><span> CliPlugin</span><span class="token operator">&lt;</span><span>ModuleTools</span><span class="token operator">&gt;</span><span> </span><span class="token operator">=&gt;</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
77
+ </span></span><span style="display:block;padding:0 1.25rem"><span> name</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;my-plugin&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
78
+ </span></span><span style="display:block;padding:0 1.25rem">
79
+ </span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">async</span><span> </span><span class="token" style="color:var(--code-token-function)">setup</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>api</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
80
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">await</span><span> </span><span class="token" style="color:var(--code-token-function)">doSomething</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>
81
+ </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>
82
+ </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>
83
+ <p class="my-4 leading-7">Note that the setup function of the next plugin is not executed until the async setup function of the current plugin has finished. Therefore, you should avoid performing time-consuming asynchronous operations in the setup function to avoid slowing down the startup performance of the CLI.</p>
84
+ <h2 id="life-cycle-hooks" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">Life cycle hooks<a class="link_3b154 header-anchor" aria-hidden="true" href="#life-cycle-hooks">#</a></h2>
85
+ <p class="my-4 leading-7">We know that the <code>setup</code> function returns a Hooks object, which can also be understood as an object with Modern.js Module lifecycle hooks.</p>
86
+ <p class="my-4 leading-7">Currently there are two main types of hooks.</p>
87
+ <ul class="list-disc pl-5 my-4 leading-7">
88
+ <li class="[&amp;:not(:first-child)]:mt-2">build hooks: triggered only when the <code>build</code> command is executed to build the source code product.</li>
89
+ <li class="[&amp;:not(:first-child)]:mt-2"><code>buildPlatform</code> hook: triggered only when the <code>build --platform</code> command is executed to generate other build artifacts.</li>
90
+ <li class="[&amp;:not(:first-child)]:mt-2">debug hooks: hooks that are triggered when running the <code>dev</code> command.</li>
91
+ </ul>
92
+ <p class="my-4 leading-7">See the <a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/en/api/plugin-api/plugin-hooks.html">API documentation</a> for a full list of lifecycle hooks.</p><!--/$--></div><div class="rspress-doc-footer"><footer class="mt-8"><div class="xs:flex pb-5 px-2 justify-end items-center"></div><div class="flex flex-col"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/document/module-doc/docs/en/plugins/guide/setup-function.mdx" target="_blank" class="editLink_2a169">Edit this page on GitHub</a></div><div class="flex flex-col sm:flex-row sm:justify-around gap-4 pt-6"><div class="prev_e7091 flex flex-col"><a class="link_03735 pager-link_9b9a7 cursor-pointer" target="" href="/module-tools/en/plugins/guide/plugin-object.html"><span class="desc_9b9a7">Previous Page</span><span class="title_9b9a7">Plugin Object</span></a></div><div class="next_e7091 flex flex-col"><a class="link_03735 pager-link_9b9a7 next_9b9a7 cursor-pointer" target="" href="/module-tools/en/plugins/official-list/overview.html"><span class="desc_9b9a7">Next page</span><span class="title_9b9a7">Overview</span></a></div></div></footer></div></div></div><div class="aside-container_edeb4"><div><div class="flex flex-col"><div class="&lt;lg:hidden"><div id="aside-container" class="relative text-sm font-medium"><div class="leading-7 block text-sm font-semibold pl-3">ON THIS PAGE</div><nav class="mt-1"><ul class="relative"><li><a href="#plugin-api-objects" title="Plugin API objects" 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">Plugin API objects</span></a></li><li><a href="#apiuseappcontext" title="api.useAppContext" 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"><code>api.useAppContext</code></span></a></li><li><a href="#apiuseresolvedconfigcontext" title="api.useResolvedConfigContext" 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"><code>api.useResolvedConfigContext</code></span></a></li><li><a href="#apiusehookrunners" title="api.useHookRunners" 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"><code>api.useHookRunners</code></span></a></li><li><a href="#asynchronous-setup" title="Asynchronous setup" 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">Asynchronous setup</span></a></li><li><a href="#life-cycle-hooks" title="Life cycle hooks" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">Life cycle hooks</span></a></li></ul></nav></div></div></div></div></div></div></div></section></div></div>
93
+ <div id="search-container"></div>
94
+ </body>
95
+
96
+ </html>
package/doc_build/en/plugins/official-list/overview.html ADDED
@@ -0,0 +1,26 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <meta name="generator" content="Rspress v1.31.0">
9
+ <title data-rh="true">Overview - Modern.js Module</title><meta data-rh="true" name="description" content="Module Engineering Solutions"/>
10
+ <script>{;const saved = localStorage.getItem('rspress-theme-appearance');const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;const isDark = !saved || saved === 'auto' ? preferDark : saved === 'dark';document.documentElement.classList.toggle('dark', isDark);document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';}</script><link rel="icon" href="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/logo-1x-0104.png"><script defer src="/module-tools/static/js/styles.3f5a6140.js"></script><script defer src="/module-tools/static/js/lib-react.a93218f7.js"></script><script defer src="/module-tools/static/js/lib-router.f8d11890.js"></script><script defer src="/module-tools/static/js/490.a066dbc0.js"></script><script defer src="/module-tools/static/js/index.6a5d779d.js"></script><link href="/module-tools/static/css/styles.0b88df3a.css" rel="stylesheet"></head>
11
+
12
+ <body >
13
+ <div id="root"><div><div class="navContainer_f6cde rspress-nav px-6 " style="position:sticky"><div class="container_f6cde flex justify-between items-center h-full"><div class="navBarTitle_f6cde"><a href="/module-tools/en" class="flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><span>Modern.js Module</span></a></div><div class="flex flex-1 justify-end items-center"><div class="rightNav_f6cde"><div class="flex sm:flex-1 items-center sm:pl-4 sm:pr-2"><div class="rspress-nav-search-button navSearchButton_6e282"><button><svg width="18" height="18" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9Z"></path></svg><p class="searchWord_6e282">Search Docs</p><div style="opacity:0"><span></span><span>K</span></div></button></div><div class="mobileNavSearchButton_6e282"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9Z"></path></svg></div></div><div class="rspress-nav-menu menu h-14"><a class="link_03735 cursor-pointer" target="" href="/module-tools/en/guide/intro/welcome.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">Guide</div></a><a class="link_03735 cursor-pointer" target="" href="/module-tools/en/api/index.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">API</div></a><a class="link_03735 cursor-pointer" target="" href="/module-tools/en/plugins/guide/getting-started.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">Plugins</div></a><div class="mx-3 last:mr-0"><div class="relative flex-center h-14"><button class="rspress-nav-menu-group-button flex-center items-center font-medium text-sm text-text-1 hover:text-text-2 transition-colors duration-200"><span class="text-sm font-medium flex" style="margin-right:2px">v2.60.1</span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div class="rspress-nav-menu-group-content absolute mx-0.8 transition-opacity duration-300" style="opacity:0;visibility:hidden;right:0;top:52px"><div class="p-3 pr-2 w-full h-full max-h-100vh whitespace-nowrap" style="box-shadow:var(--rp-shadow-3);z-index:100;border:1px solid var(--rp-c-divider-light);border-radius:var(--rp-radius-large);background:var(--rp-c-bg)"><div><div class="font-medium my-1"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="link_03735 "><div class="rounded-2xl hover:bg-mute" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><div class="flex"><span>Changelog</span></div></div></a></div></div><div><div class="font-medium my-1"><a href="https://modernjs.dev/en/community/contributing-guide.html" target="_blank" rel="noopener noreferrer" class="link_03735 "><div class="rounded-2xl hover:bg-mute" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><div class="flex"><span>Contributing</span></div></div></a></div></div></div></div></div></div></div><div class="flex-center flex-row"><div class="translation menu-item_f6cde flex text-sm font-bold items-center px-3 py-2"><div><div class="relative flex-center h-14"><button class="rspress-nav-menu-group-button flex-center items-center font-medium text-sm text-text-1 hover:text-text-2 transition-colors duration-200"><span class="text-sm font-medium flex" style="margin-right:2px"><svg width="18" height="18" viewBox="0 0 32 32" style="width:18px;height:18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6 2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div class="rspress-nav-menu-group-content absolute mx-0.8 transition-opacity duration-300" style="opacity:0;visibility:hidden;right:0;top:52px"><div class="p-3 pr-2 w-full h-full max-h-100vh whitespace-nowrap" style="box-shadow:var(--rp-shadow-3);z-index:100;border:1px solid var(--rp-c-divider-light);border-radius:var(--rp-radius-large);background:var(--rp-c-bg)"><div><div class="font-medium my-1"><a class="link_03735 cursor-pointer" target="" href="/module-tools/plugins/official-list/overview.html"><div class="rounded-2xl hover:bg-mute" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><div class="flex"><span>简体中文</span></div></div></a></div></div><div><div class="rounded-2xl my-1 flex" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><span class="text-brand">English</span></div></div></div></div></div></div></div><div class="mx-2"><div class="md:mr-2 rspress-nav-appearance"><div class="p-1 border border-solid border-gray-300 text-gray-400 cursor-pointer rounded-md hover:border-gray-600 hover:text-gray-600 dark:hover:border-gray-200 dark:hover:text-gray-200 transition-all duration-300 w-7 h-7"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="dark:hidden" width="18" height="18" fill="currentColor"><path d="M12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM12 4c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1zM12 24c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1zM5.6 6.6c-.3 0-.5-.1-.7-.3L3.5 4.9c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.1.2-.4.3-.7.3zM19.8 20.8c-.3 0-.5-.1-.7-.3l-1.4-1.4c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.2.2-.5.3-.7.3zM3 13H1c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1zM23 13h-2c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1zM4.2 20.8c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.4.3-.7.3zM18.4 6.6c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.5.3-.7.3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="hidden dark:block" width="18" height="18" fill="currentColor"><path d="M12.1 22h-.9c-5.5-.5-9.5-5.4-9-10.9.4-4.8 4.2-8.6 9-9 .4 0 .8.2 1 .5.2.3.2.8-.1 1.1-2 2.7-1.4 6.4 1.3 8.4 2.1 1.6 5 1.6 7.1 0 .3-.2.7-.3 1.1-.1.3.2.5.6.5 1-.2 2.7-1.5 5.1-3.6 6.8-1.9 1.4-4.1 2.2-6.4 2.2zM9.3 4.4c-2.9 1-5 3.6-5.2 6.8-.4 4.4 2.8 8.3 7.2 8.7 2.1.2 4.2-.4 5.8-1.8 1.1-.9 1.9-2.1 2.4-3.4-2.5.9-5.3.5-7.5-1.1-2.8-2.2-3.9-5.9-2.7-9.2z"></path></svg></div></div></div><div class="social-links menu-item_93d67 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_93d67"><svg role="img" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div><div class="mobileNavMenu_f6cde"><div class="navScreen_457e8 " id="navScreen"><div class="container_457e8"><div class="navMenu_457e8"><div class="navMenuItem_457e8 w-full"><a class="link_03735 cursor-pointer" target="" href="/module-tools/en/guide/intro/welcome.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">Guide</div></a></div><div class="navMenuItem_457e8 w-full"><a class="link_03735 cursor-pointer" target="" href="/module-tools/en/api/index.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">API</div></a></div><div class="navMenuItem_457e8 w-full"><a class="link_03735 cursor-pointer" target="" href="/module-tools/en/plugins/guide/getting-started.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">Plugins</div></a></div><div class="navMenuItem_457e8 w-full"><div class="mx-3 last:mr-0"><div class=" navScreenMenuGroup_457e8 relative"><button class="button_457e8"><span class="buttonSpan_457e8">v2.60.1</span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" down_457e8 "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div><div class="items_457e8"><div><div class="py-1 font-medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="link_03735 "><div><div class="flex justify-center"><span>Changelog</span></div></div></a></div></div><div><div class="py-1 font-medium"><a href="https://modernjs.dev/en/community/contributing-guide.html" target="_blank" rel="noopener noreferrer" class="link_03735 "><div><div class="flex justify-center"><span>Contributing</span></div></div></a></div></div></div></div></div></div></div></div><div class="flex-center flex-col gap-2"><div class="mt-2 navAppearance_457e8 flex justify-center"></div><div class="flex text-sm font-bold justify-center"><div class="mx-1.5 my-1"><div class=" navScreenMenuGroup_457e8 relative"><button class="button_457e8"><span class="buttonSpan_457e8"><svg width="18" height="18" viewBox="0 0 32 32" style="width:18px;height:18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6 2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" down_457e8 "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div><div class="items_457e8"><div><div class="py-1 font-medium"><a class="link_03735 cursor-pointer" target="" href="/module-tools/plugins/official-list/overview.html"><div><div class="flex justify-center"><span>简体中文</span></div></div></a></div></div><div><div class="p-1 text-center"><span class="text-brand">English</span></div></div></div></div></div></div></div><div class="social-links menu-item_93d67 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_93d67"><svg role="img" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div></div><button aria-label="mobile hamburger" class=" navHamburger_e7b06 text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="currentColor"><circle cx="8" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="24" cy="16" r="2" fill="currentColor"></circle></svg></button></div></div></div></div><section><div class="docLayout_edeb4 pt-0"><div class="rspress-sidebar-menu"><button class="flex-center mr-auto"><div class="text-md mr-2"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"></path></svg></div><span class="text-sm">Menu</span></button><button class="flex-center ml-auto"><span class="text-sm">ON THIS PAGE</span><div class="text-md mr-2" style="transform:rotate(0deg);transition:transform 0.2s ease-out;margin-top:2px"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></button></div><aside class="sidebar_71eca rspress-sidebar "><div class="navTitleMask_71eca"><div class="navBarTitle_f6cde"><a href="/module-tools/en" class="flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><span>Modern.js Module</span></a></div></div><div class="rspress-scrollbar sidebarContent_71eca"><nav class="pb-2"><section class="mt-0.5 block" style="margin-left:0"><div class="flex justify-between items-center menuItem_71eca" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">Guide</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/guide/getting-started.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Quick Start</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/guide/plugin-object.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Plugin Object</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/guide/setup-function.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>Setup function</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">Plugins List</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/official-list/overview.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>Overview</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/official-list/plugin-babel.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>Babel Plugin</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/official-list/plugin-banner.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>Banner Plugin</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/official-list/plugin-import.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>Import Plugin</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/official-list/plugin-node-polyfill.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>Node Polyfill Plugin</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/official-list/plugin-polyfill.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>Polyfill Plugin</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/official-list/plugin-vue.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>Vue Plugin</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="overview" class="text-3xl mb-10 leading-10 tracking-tight title_3b154">Overview<a class="link_3b154 header-anchor" aria-hidden="true" href="#overview">#</a></h1>
14
+ <h2 id="official-plugins" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">Official Plugins<a class="link_3b154 header-anchor" aria-hidden="true" href="#official-plugins">#</a></h2>
15
+ <ul class="list-disc pl-5 my-4 leading-7">
16
+ <li class="[&amp;:not(:first-child)]:mt-2"><a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/en/plugins/official-list/plugin-import.html">@modern-js/plugin-module-import</a>：Use SWC to provide the same ability as <a target="_blank" rel="noopener noreferrer" href="https://github.com/umijs/babel-plugin-import" class="link_03735 link_3b154 inline-link_3b154"><code>babel-plugin-import</code></a>.</li>
17
+ <li class="[&amp;:not(:first-child)]:mt-2"><a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/en/plugins/official-list/plugin-banner.html">@modern-js/plugin-module-banner</a>：Add custom content, such as copyright information, to the top and bottom of each JS and CSS file.</li>
18
+ <li class="[&amp;:not(:first-child)]:mt-2"><a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/en/plugins/official-list/plugin-node-polyfill.html">@modern-js/plugin-module-node-polyfill</a>： Inject Polyfills of Node core modules in the browser side.</li>
19
+ <li class="[&amp;:not(:first-child)]:mt-2"><a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/en/plugins/official-list/plugin-polyfill.html">@modern-js/plugin-module-polyfill</a>：Inject polyfill for unsupported features used in your code.</li>
20
+ <li class="[&amp;:not(:first-child)]:mt-2"><a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/en/plugins/official-list/plugin-babel.html">@modern-js/plugin-module-babel</a>：Use Babel to transform your code.</li>
21
+ <li class="[&amp;:not(:first-child)]:mt-2"><a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/en/plugins/official-list/plugin-vue.html">@modern-js/plugin-module-vue</a>：Support for Vue component.</li>
22
+ </ul><!--/$--></div><div class="rspress-doc-footer"><footer class="mt-8"><div class="xs:flex pb-5 px-2 justify-end items-center"></div><div class="flex flex-col"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/document/module-doc/docs/en/plugins/official-list/overview.md" target="_blank" class="editLink_2a169">Edit this page on GitHub</a></div><div class="flex flex-col sm:flex-row sm:justify-around gap-4 pt-6"><div class="prev_e7091 flex flex-col"><a class="link_03735 pager-link_9b9a7 cursor-pointer" target="" href="/module-tools/en/plugins/guide/setup-function.html"><span class="desc_9b9a7">Previous Page</span><span class="title_9b9a7">Setup function</span></a></div><div class="next_e7091 flex flex-col"><a class="link_03735 pager-link_9b9a7 next_9b9a7 cursor-pointer" target="" href="/module-tools/en/plugins/official-list/plugin-babel.html"><span class="desc_9b9a7">Next page</span><span class="title_9b9a7">Babel Plugin</span></a></div></div></footer></div></div></div><div class="aside-container_edeb4"><div><div class="flex flex-col"><div class="&lt;lg:hidden"><div id="aside-container" class="relative text-sm font-medium"><div class="leading-7 block text-sm font-semibold pl-3">ON THIS PAGE</div><nav class="mt-1"><ul class="relative"><li><a href="#official-plugins" title="Official Plugins" 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">Official Plugins</span></a></li></ul></nav></div></div></div></div></div></div></div></section></div></div>
23
+ <div id="search-container"></div>
24
+ </body>
25
+
26
+ </html>
package/doc_build/en/plugins/official-list/plugin-babel.html ADDED
@@ -0,0 +1,65 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <meta name="generator" content="Rspress v1.31.0">
9
+ <title data-rh="true">Babel Plugin - Modern.js Module</title><meta data-rh="true" name="description" content="Module Engineering Solutions"/>
10
+ <script>{;const saved = localStorage.getItem('rspress-theme-appearance');const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;const isDark = !saved || saved === 'auto' ? preferDark : saved === 'dark';document.documentElement.classList.toggle('dark', isDark);document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';}</script><link rel="icon" href="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/logo-1x-0104.png"><script defer src="/module-tools/static/js/styles.3f5a6140.js"></script><script defer src="/module-tools/static/js/lib-react.a93218f7.js"></script><script defer src="/module-tools/static/js/lib-router.f8d11890.js"></script><script defer src="/module-tools/static/js/490.a066dbc0.js"></script><script defer src="/module-tools/static/js/index.6a5d779d.js"></script><link href="/module-tools/static/css/styles.0b88df3a.css" rel="stylesheet"></head>
11
+
12
+ <body >
13
+ <div id="root"><div><div class="navContainer_f6cde rspress-nav px-6 " style="position:sticky"><div class="container_f6cde flex justify-between items-center h-full"><div class="navBarTitle_f6cde"><a href="/module-tools/en" class="flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><span>Modern.js Module</span></a></div><div class="flex flex-1 justify-end items-center"><div class="rightNav_f6cde"><div class="flex sm:flex-1 items-center sm:pl-4 sm:pr-2"><div class="rspress-nav-search-button navSearchButton_6e282"><button><svg width="18" height="18" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9Z"></path></svg><p class="searchWord_6e282">Search Docs</p><div style="opacity:0"><span></span><span>K</span></div></button></div><div class="mobileNavSearchButton_6e282"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9Z"></path></svg></div></div><div class="rspress-nav-menu menu h-14"><a class="link_03735 cursor-pointer" target="" href="/module-tools/en/guide/intro/welcome.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">Guide</div></a><a class="link_03735 cursor-pointer" target="" href="/module-tools/en/api/index.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">API</div></a><a class="link_03735 cursor-pointer" target="" href="/module-tools/en/plugins/guide/getting-started.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">Plugins</div></a><div class="mx-3 last:mr-0"><div class="relative flex-center h-14"><button class="rspress-nav-menu-group-button flex-center items-center font-medium text-sm text-text-1 hover:text-text-2 transition-colors duration-200"><span class="text-sm font-medium flex" style="margin-right:2px">v2.60.1</span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div class="rspress-nav-menu-group-content absolute mx-0.8 transition-opacity duration-300" style="opacity:0;visibility:hidden;right:0;top:52px"><div class="p-3 pr-2 w-full h-full max-h-100vh whitespace-nowrap" style="box-shadow:var(--rp-shadow-3);z-index:100;border:1px solid var(--rp-c-divider-light);border-radius:var(--rp-radius-large);background:var(--rp-c-bg)"><div><div class="font-medium my-1"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="link_03735 "><div class="rounded-2xl hover:bg-mute" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><div class="flex"><span>Changelog</span></div></div></a></div></div><div><div class="font-medium my-1"><a href="https://modernjs.dev/en/community/contributing-guide.html" target="_blank" rel="noopener noreferrer" class="link_03735 "><div class="rounded-2xl hover:bg-mute" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><div class="flex"><span>Contributing</span></div></div></a></div></div></div></div></div></div></div><div class="flex-center flex-row"><div class="translation menu-item_f6cde flex text-sm font-bold items-center px-3 py-2"><div><div class="relative flex-center h-14"><button class="rspress-nav-menu-group-button flex-center items-center font-medium text-sm text-text-1 hover:text-text-2 transition-colors duration-200"><span class="text-sm font-medium flex" style="margin-right:2px"><svg width="18" height="18" viewBox="0 0 32 32" style="width:18px;height:18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6 2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div class="rspress-nav-menu-group-content absolute mx-0.8 transition-opacity duration-300" style="opacity:0;visibility:hidden;right:0;top:52px"><div class="p-3 pr-2 w-full h-full max-h-100vh whitespace-nowrap" style="box-shadow:var(--rp-shadow-3);z-index:100;border:1px solid var(--rp-c-divider-light);border-radius:var(--rp-radius-large);background:var(--rp-c-bg)"><div><div class="font-medium my-1"><a class="link_03735 cursor-pointer" target="" href="/module-tools/plugins/official-list/plugin-babel.html"><div class="rounded-2xl hover:bg-mute" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><div class="flex"><span>简体中文</span></div></div></a></div></div><div><div class="rounded-2xl my-1 flex" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><span class="text-brand">English</span></div></div></div></div></div></div></div><div class="mx-2"><div class="md:mr-2 rspress-nav-appearance"><div class="p-1 border border-solid border-gray-300 text-gray-400 cursor-pointer rounded-md hover:border-gray-600 hover:text-gray-600 dark:hover:border-gray-200 dark:hover:text-gray-200 transition-all duration-300 w-7 h-7"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="dark:hidden" width="18" height="18" fill="currentColor"><path d="M12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM12 4c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1zM12 24c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1zM5.6 6.6c-.3 0-.5-.1-.7-.3L3.5 4.9c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.1.2-.4.3-.7.3zM19.8 20.8c-.3 0-.5-.1-.7-.3l-1.4-1.4c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.2.2-.5.3-.7.3zM3 13H1c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1zM23 13h-2c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1zM4.2 20.8c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.4.3-.7.3zM18.4 6.6c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.5.3-.7.3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="hidden dark:block" width="18" height="18" fill="currentColor"><path d="M12.1 22h-.9c-5.5-.5-9.5-5.4-9-10.9.4-4.8 4.2-8.6 9-9 .4 0 .8.2 1 .5.2.3.2.8-.1 1.1-2 2.7-1.4 6.4 1.3 8.4 2.1 1.6 5 1.6 7.1 0 .3-.2.7-.3 1.1-.1.3.2.5.6.5 1-.2 2.7-1.5 5.1-3.6 6.8-1.9 1.4-4.1 2.2-6.4 2.2zM9.3 4.4c-2.9 1-5 3.6-5.2 6.8-.4 4.4 2.8 8.3 7.2 8.7 2.1.2 4.2-.4 5.8-1.8 1.1-.9 1.9-2.1 2.4-3.4-2.5.9-5.3.5-7.5-1.1-2.8-2.2-3.9-5.9-2.7-9.2z"></path></svg></div></div></div><div class="social-links menu-item_93d67 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_93d67"><svg role="img" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div><div class="mobileNavMenu_f6cde"><div class="navScreen_457e8 " id="navScreen"><div class="container_457e8"><div class="navMenu_457e8"><div class="navMenuItem_457e8 w-full"><a class="link_03735 cursor-pointer" target="" href="/module-tools/en/guide/intro/welcome.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">Guide</div></a></div><div class="navMenuItem_457e8 w-full"><a class="link_03735 cursor-pointer" target="" href="/module-tools/en/api/index.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">API</div></a></div><div class="navMenuItem_457e8 w-full"><a class="link_03735 cursor-pointer" target="" href="/module-tools/en/plugins/guide/getting-started.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">Plugins</div></a></div><div class="navMenuItem_457e8 w-full"><div class="mx-3 last:mr-0"><div class=" navScreenMenuGroup_457e8 relative"><button class="button_457e8"><span class="buttonSpan_457e8">v2.60.1</span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" down_457e8 "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div><div class="items_457e8"><div><div class="py-1 font-medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="link_03735 "><div><div class="flex justify-center"><span>Changelog</span></div></div></a></div></div><div><div class="py-1 font-medium"><a href="https://modernjs.dev/en/community/contributing-guide.html" target="_blank" rel="noopener noreferrer" class="link_03735 "><div><div class="flex justify-center"><span>Contributing</span></div></div></a></div></div></div></div></div></div></div></div><div class="flex-center flex-col gap-2"><div class="mt-2 navAppearance_457e8 flex justify-center"></div><div class="flex text-sm font-bold justify-center"><div class="mx-1.5 my-1"><div class=" navScreenMenuGroup_457e8 relative"><button class="button_457e8"><span class="buttonSpan_457e8"><svg width="18" height="18" viewBox="0 0 32 32" style="width:18px;height:18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6 2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" down_457e8 "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div><div class="items_457e8"><div><div class="py-1 font-medium"><a class="link_03735 cursor-pointer" target="" href="/module-tools/plugins/official-list/plugin-babel.html"><div><div class="flex justify-center"><span>简体中文</span></div></div></a></div></div><div><div class="p-1 text-center"><span class="text-brand">English</span></div></div></div></div></div></div></div><div class="social-links menu-item_93d67 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_93d67"><svg role="img" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div></div><button aria-label="mobile hamburger" class=" navHamburger_e7b06 text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="currentColor"><circle cx="8" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="24" cy="16" r="2" fill="currentColor"></circle></svg></button></div></div></div></div><section><div class="docLayout_edeb4 pt-0"><div class="rspress-sidebar-menu"><button class="flex-center mr-auto"><div class="text-md mr-2"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"></path></svg></div><span class="text-sm">Menu</span></button><button class="flex-center ml-auto"><span class="text-sm">ON THIS PAGE</span><div class="text-md mr-2" style="transform:rotate(0deg);transition:transform 0.2s ease-out;margin-top:2px"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></button></div><aside class="sidebar_71eca rspress-sidebar "><div class="navTitleMask_71eca"><div class="navBarTitle_f6cde"><a href="/module-tools/en" class="flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><span>Modern.js Module</span></a></div></div><div class="rspress-scrollbar sidebarContent_71eca"><nav class="pb-2"><section class="mt-0.5 block" style="margin-left:0"><div class="flex justify-between items-center menuItem_71eca" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">Guide</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/guide/getting-started.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Quick Start</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/guide/plugin-object.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Plugin Object</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/guide/setup-function.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>Setup function</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">Plugins List</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/official-list/overview.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>Overview</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/official-list/plugin-babel.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>Babel Plugin</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/official-list/plugin-banner.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>Banner Plugin</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/official-list/plugin-import.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>Import Plugin</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/official-list/plugin-node-polyfill.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>Node Polyfill Plugin</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/official-list/plugin-polyfill.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>Polyfill Plugin</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/plugins/official-list/plugin-vue.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>Vue Plugin</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="babel-plugin" class="text-3xl mb-10 leading-10 tracking-tight title_3b154">Babel Plugin<a class="link_3b154 header-anchor" aria-hidden="true" href="#babel-plugin">#</a></h1>
14
+ <div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content"><p class="my-4 leading-7">Normally, we don&#x27;t need to use Babel to transform our code, this plugin is only used as a downgrade.</p></div></div>
15
+ <h2 id="quick-start" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">Quick start<a class="link_3b154 header-anchor" aria-hidden="true" href="#quick-start">#</a></h2>
16
+ <h3 id="install" class="mt-10 mb-2 leading-7 text-xl title_3b154">Install<a class="link_3b154 header-anchor" aria-hidden="true" href="#install">#</a></h3>
17
+ <!-- -->
18
+ <div class="container_fa768"><div><div class="tab-list_fa768 no-scrollbar_fa768" style="justify-content:flex-start"><div class="tab_fa768 selected_fa768"><div style="display:flex;align-items:center;font-size:15px"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="#C12127" d="M0 256V0h256v256z"></path><path fill="#FFF" d="M48 48h160v160h-32V80h-48v128H48z"></path></svg><span style="margin-left:6px;margin-bottom:2px">npm</span></div></div><div class="tab_fa768 not-selected_fa768"><div style="display:flex;align-items:center;font-size:15px"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><g fill="#2c8ebb"><path d="M99.24 80.71C94.9 80.76 91.1 83 87.89 85c-6 3.71-9 3.47-9 3.47l-.1-.17c-.41-.67 1.92-6.68-.69-13.84c-2.82-7.83-7.3-9.72-6.94-10.32c1.53-2.59 5.36-6.7 6.89-14.36c.91-4.64.67-12.28-1.39-16.28c-.38-.74-3.78 1.24-3.78 1.24s-3.18-7.09-4.07-7.66c-2.87-1.84-6 7.61-6 7.61a14 14 0 0 0-11.71 4.5a9.64 9.64 0 0 1-3.85 2.27c-.41.14-.91.12-2.15 3.47c-1.9 5.07 3.24 10.81 3.24 10.81s-6.13 4.33-8.4 9.72a24.78 24.78 0 0 0-1.75 11.68s-4.36 3.78-4.64 7.68a12.87 12.87 0 0 0 1.77 7.83a1.94 1.94 0 0 0 2.63.91s-2.9 3.38-.19 4.81c2.47 1.29 6.63 2 8.83-.19c1.6-1.6 1.92-5.17 2.51-6.63c.14-.34.62.57 1.08 1a10 10 0 0 0 1.36 1s-3.9 1.68-2.3 5.51c.53 1.27 2.42 2.08 5.51 2.06c1.15 0 13.76-.72 17.12-1.53a4.33 4.33 0 0 0 2.61-1.46a63 63 0 0 0 15.49-7c4.74-3.09 6.68-3.93 10.51-4.84c3.16-.75 2.95-5.65-1.24-5.58z"></path><path d="M64 2a62 62 0 1 0 62 62A62 62 0 0 0 64 2zm37.3 87.83c-3.35.81-4.91 1.44-9.41 4.36a67 67 0 0 1-15.56 7.18a8.71 8.71 0 0 1-3.64 1.77c-3.81.93-16.88 1.63-17.91 1.63h-.24c-4 0-6.27-1.24-7.49-2.54c-3.4 1.7-7.8 1-11-.69a5.55 5.55 0 0 1-3-3.9a6 6 0 0 1 0-2.06a6.66 6.66 0 0 1-.79-1A16.38 16.38 0 0 1 30 84.52c.29-3.73 2.87-7.06 4.55-8.83A28.56 28.56 0 0 1 36.61 64a26.82 26.82 0 0 1 6.82-9c-1.65-2.78-3.33-7.06-1.7-11.42c1.17-3.11 2.13-4.84 4.24-5.58a6.84 6.84 0 0 0 2.51-1.34A17.65 17.65 0 0 1 60.34 31c.19-.48.41-1 .65-1.46c1.6-3.4 3.3-5.31 5.29-6a4.88 4.88 0 0 1 4.4.5c.65.43 1.48 1 3.9 6a4.69 4.69 0 0 1 2.85-.1a3.81 3.81 0 0 1 2.39 1.94c2.47 4.74 2.8 13.19 1.72 18.62a33.8 33.8 0 0 1-5.84 13.31a25.73 25.73 0 0 1 5.77 9.43a25.42 25.42 0 0 1 1.41 10.41A28.7 28.7 0 0 0 86 81.91c3.06-1.89 7.68-4.74 13.19-4.81a6.62 6.62 0 0 1 7 5.7a6.35 6.35 0 0 1-4.89 7.03z"></path></g></svg><span style="margin-left:6px;margin-bottom:2px">yarn</span></div></div><div class="tab_fa768 not-selected_fa768"><div style="display:flex;align-items:center;font-size:15px"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#f8ab00" d="M0 .004V40h39.996V.004Zm43.996 0V40h40V.004Zm44.008 0V40H128V.004Zm0 43.996v39.996H128V44Z"></path><path fill="#4c4c4c" d="M43.996 44v39.996h40V44ZM0 87.996v40h39.996v-40Zm43.996 0v40h40v-40Zm44.008 0v40H128v-40Z"></path></svg><span style="margin-left:6px;margin-bottom:2px">pnpm</span></div></div><div class="tab_fa768 not-selected_fa768"><div style="display:flex;align-items:center;font-size:15px"><svg id="Bun" width="1.2em" height="1.2em" viewBox="0 0 80 70"><path id="Shadow" d="M71.09,20.74c-.16-.17-.33-.34-.5-.5s-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5A26.46,26.46,0,0,1,75.5,35.7c0,16.57-16.82,30.05-37.5,30.05-11.58,0-21.94-4.23-28.83-10.86l.5.5.5.5.5.5.5.5.5.5.5.5.5.5C19.55,65.3,30.14,69.75,42,69.75c20.68,0,37.5-13.48,37.5-30C79.5,32.69,76.46,26,71.09,20.74Z"></path><g id="Body"><path id="Background" d="M73,35.7c0,15.21-15.67,27.54-35,27.54S3,50.91,3,35.7C3,26.27,9,17.94,18.22,13S33.18,3,38,3s8.94,4.13,19.78,10C67,17.94,73,26.27,73,35.7Z" style="fill:#fbf0df"></path><path id="Bottom_Shadow" data-name="Bottom Shadow" d="M73,35.7a21.67,21.67,0,0,0-.8-5.78c-2.73,33.3-43.35,34.9-59.32,24.94A40,40,0,0,0,38,63.24C57.3,63.24,73,50.89,73,35.7Z" style="fill:#f6dece"></path><path id="Light_Shine" data-name="Light Shine" d="M24.53,11.17C29,8.49,34.94,3.46,40.78,3.45A9.29,9.29,0,0,0,38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7c0,.4,0,.8,0,1.19C9.06,15.48,20.07,13.85,24.53,11.17Z" style="fill:#fffefc"></path><path id="Top" d="M35.12,5.53A16.41,16.41,0,0,1,29.49,18c-.28.25-.06.73.3.59,3.37-1.31,7.92-5.23,6-13.14C35.71,5,35.12,5.12,35.12,5.53Zm2.27,0A16.24,16.24,0,0,1,39,19c-.12.35.31.65.55.36C41.74,16.56,43.65,11,37.93,5,37.64,4.74,37.19,5.14,37.39,5.49Zm2.76-.17A16.42,16.42,0,0,1,47,17.12a.33.33,0,0,0,.65.11c.92-3.49.4-9.44-7.17-12.53C40.08,4.54,39.82,5.08,40.15,5.32ZM21.69,15.76a16.94,16.94,0,0,0,10.47-9c.18-.36.75-.22.66.18-1.73,8-7.52,9.67-11.12,9.45C21.32,16.4,21.33,15.87,21.69,15.76Z" style="fill:#ccbea7;fill-rule:evenodd"></path><path id="Outline" d="M38,65.75C17.32,65.75.5,52.27.5,35.7c0-10,6.18-19.33,16.53-24.92,3-1.6,5.57-3.21,7.86-4.62,1.26-.78,2.45-1.51,3.6-2.19C32,1.89,35,.5,38,.5s5.62,1.2,8.9,3.14c1,.57,2,1.19,3.07,1.87,2.49,1.54,5.3,3.28,9,5.27C69.32,16.37,75.5,25.69,75.5,35.7,75.5,52.27,58.68,65.75,38,65.75ZM38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7,3,50.89,18.7,63.25,38,63.25S73,50.89,73,35.7C73,26.62,67.31,18.13,57.78,13,54,11,51.05,9.12,48.66,7.64c-1.09-.67-2.09-1.29-3-1.84C42.63,4,40.42,3,38,3Z"></path></g><g id="Mouth"><g id="Background-2" data-name="Background"><path d="M45.05,43a8.93,8.93,0,0,1-2.92,4.71,6.81,6.81,0,0,1-4,1.88A6.84,6.84,0,0,1,34,47.71,8.93,8.93,0,0,1,31.12,43a.72.72,0,0,1,.8-.81H44.26A.72.72,0,0,1,45.05,43Z" style="fill:#b71422"></path></g><g id="Tongue"><path id="Background-3" data-name="Background" d="M34,47.79a6.91,6.91,0,0,0,4.12,1.9,6.91,6.91,0,0,0,4.11-1.9,10.63,10.63,0,0,0,1-1.07,6.83,6.83,0,0,0-4.9-2.31,6.15,6.15,0,0,0-5,2.78C33.56,47.4,33.76,47.6,34,47.79Z" style="fill:#ff6164"></path><path id="Outline-2" data-name="Outline" d="M34.16,47a5.36,5.36,0,0,1,4.19-2.08,6,6,0,0,1,4,1.69c.23-.25.45-.51.66-.77a7,7,0,0,0-4.71-1.93,6.36,6.36,0,0,0-4.89,2.36A9.53,9.53,0,0,0,34.16,47Z"></path></g><path id="Outline-3" data-name="Outline" d="M38.09,50.19a7.42,7.42,0,0,1-4.45-2,9.52,9.52,0,0,1-3.11-5.05,1.2,1.2,0,0,1,.26-1,1.41,1.41,0,0,1,1.13-.51H44.26a1.44,1.44,0,0,1,1.13.51,1.19,1.19,0,0,1,.25,1h0a9.52,9.52,0,0,1-3.11,5.05A7.42,7.42,0,0,1,38.09,50.19Zm-6.17-7.4c-.16,0-.2.07-.21.09a8.29,8.29,0,0,0,2.73,4.37A6.23,6.23,0,0,0,38.09,49a6.28,6.28,0,0,0,3.65-1.73,8.3,8.3,0,0,0,2.72-4.37.21.21,0,0,0-.2-.09Z"></path></g><g id="Face"><ellipse id="Right_Blush" data-name="Right Blush" cx="53.22" cy="40.18" rx="5.85" ry="3.44" style="fill:#febbd0"></ellipse><ellipse id="Left_Bluch" data-name="Left Bluch" cx="22.95" cy="40.18" rx="5.85" ry="3.44" style="fill:#febbd0"></ellipse><path id="Eyes" d="M25.7,38.8a5.51,5.51,0,1,0-5.5-5.51A5.51,5.51,0,0,0,25.7,38.8Zm24.77,0A5.51,5.51,0,1,0,45,33.29,5.5,5.5,0,0,0,50.47,38.8Z" style="fill-rule:evenodd"></path><path id="Iris" d="M24,33.64a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,24,33.64Zm24.77,0a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,48.75,33.64Z" style="fill:#fff;fill-rule:evenodd"></path></g></svg><span style="margin-left:6px;margin-bottom:2px">bun</span></div></div></div></div><div><div class="rounded px-2"><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>npm add @modern</span><span class="token operator">-</span><span>js</span><span class="token operator">/</span><span>plugin</span><span class="token operator">-</span><span>module</span><span class="token operator">-</span><span>babel </span><span class="token operator">-</span><span class="token" style="color:var(--code-token-constant)">D</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></div>
19
+ <h3 id="register" class="mt-10 mb-2 leading-7 text-xl title_3b154">Register<a class="link_3b154 header-anchor" aria-hidden="true" href="#register">#</a></h3>
20
+ <p class="my-4 leading-7">You can install the plugin with the following command:</p>
21
+ <div class="language-ts"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> moduleTools</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> defineConfig </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;@modern-js/module-tools&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
22
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> modulePluginBabel </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/plugin-module-babel&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
23
+ </span></span><span style="display:block;padding:0 1.25rem">
24
+ </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>
25
+ </span></span><span style="display:block;padding:0 1.25rem"><span> plugins</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span class="token" style="color:var(--code-token-function)">moduleTools</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-function)">modulePluginBabel</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
26
+ </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>
27
+ <p class="my-4 leading-7">You can also configure the registration via hooks, for example,
28
+ if you need to bundle two files A and B at the same time and only need to use babel when bundle A:</p>
29
+ <div class="language-ts"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> moduleTools</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> defineConfig </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;@modern-js/module-tools&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
30
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> getBabelHook </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/plugin-module-babel&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
31
+ </span></span><span style="display:block;padding:0 1.25rem">
32
+ </span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">const</span><span> babelHook </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-function)">getBabelHook</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
33
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// babel options</span><span>
34
+ </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>
35
+ </span></span><span style="display:block;padding:0 1.25rem">
36
+ </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>
37
+ </span></span><span style="display:block;padding:0 1.25rem"><span> plugins</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span class="token" style="color:var(--code-token-function)">moduleTools</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
38
+ </span></span><span style="display:block;padding:0 1.25rem"><span> buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span>
39
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
40
+ </span></span><span style="display:block;padding:0 1.25rem"><span> hooks</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span>babelHook</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
41
+ </span></span><span style="display:block;padding:0 1.25rem"><span> input</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span class="token" style="color:var(--code-token-string)">&#x27;src/a.ts&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
42
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
43
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
44
+ </span></span><span style="display:block;padding:0 1.25rem"><span> 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/b.ts&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
45
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
46
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
47
+ </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>
48
+ <h2 id="config" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">Config<a class="link_3b154 header-anchor" aria-hidden="true" href="#config">#</a></h2>
49
+ <p class="my-4 leading-7">See <a target="_blank" rel="noopener noreferrer" href="https://babeljs.io/docs/options" class="link_03735 link_3b154 inline-link_3b154">babel options</a>.</p>
50
+ <p class="my-4 leading-7">Here is an example with <code>@babel/preset-env</code> configured</p>
51
+ <div class="language-ts"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> moduleTools</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> defineConfig </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;@modern-js/module-tools&#x27;</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" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> modulePluginBabel </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/plugin-module-babel&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
53
+ </span></span><span style="display:block;padding:0 1.25rem">
54
+ </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>
55
+ </span></span><span style="display:block;padding:0 1.25rem"><span> plugins</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span>
56
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-function)">moduleTools</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
57
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-function)">modulePluginBabel</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
58
+ </span></span><span style="display:block;padding:0 1.25rem"><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-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 class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
59
+ </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>
60
+ </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>
61
+ </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><!--/$--></div><div class="rspress-doc-footer"><footer class="mt-8"><div class="xs:flex pb-5 px-2 justify-end items-center"></div><div class="flex flex-col"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/document/module-doc/docs/en/plugins/official-list/plugin-babel.mdx" target="_blank" class="editLink_2a169">Edit this page on GitHub</a></div><div class="flex flex-col sm:flex-row sm:justify-around gap-4 pt-6"><div class="prev_e7091 flex flex-col"><a class="link_03735 pager-link_9b9a7 cursor-pointer" target="" href="/module-tools/en/plugins/official-list/overview.html"><span class="desc_9b9a7">Previous Page</span><span class="title_9b9a7">Overview</span></a></div><div class="next_e7091 flex flex-col"><a class="link_03735 pager-link_9b9a7 next_9b9a7 cursor-pointer" target="" href="/module-tools/en/plugins/official-list/plugin-banner.html"><span class="desc_9b9a7">Next page</span><span class="title_9b9a7">Banner Plugin</span></a></div></div></footer></div></div></div><div class="aside-container_edeb4"><div><div class="flex flex-col"><div class="&lt;lg:hidden"><div id="aside-container" class="relative text-sm font-medium"><div class="leading-7 block text-sm font-semibold pl-3">ON THIS PAGE</div><nav class="mt-1"><ul class="relative"><li><a href="#quick-start" title="Quick start" 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">Quick start</span></a></li><li><a href="#install" title="Install" 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">Install</span></a></li><li><a href="#register" title="Register" 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">Register</span></a></li><li><a href="#config" title="Config" 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">Config</span></a></li></ul></nav></div></div></div></div></div></div></div></section></div></div>
62
+ <div id="search-container"></div>
63
+ </body>
64
+
65
+ </html>