@modern-js/module-tools-docs 2.0.2 → 2.2.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (308) hide show
  1. package/doc_build/html/main/index.html +1 -1
  2. package/doc_build/static/css/main.css +267 -660
  3. package/doc_build/static/css/main.css.map +1 -1
  4. package/doc_build/static/css/vendors-node_modules_pnpm_remix-run_router_1_2_0_node_modules_remix-run_router_dist_router_js-9d5e9c.css +6 -23
  5. package/doc_build/static/css/vendors-node_modules_pnpm_remix-run_router_1_2_0_node_modules_remix-run_router_dist_router_js-9d5e9c.css.map +1 -1
  6. package/doc_build/static/js/async/en_api_config_build-config.js +79 -36
  7. package/doc_build/static/js/async/en_api_config_build-config.js.map +1 -1
  8. package/doc_build/static/js/async/en_api_config_build-preset.js +40 -20
  9. package/doc_build/static/js/async/en_api_config_build-preset.js.map +1 -1
  10. package/doc_build/static/js/async/en_api_config_design-system.js +33800 -2340
  11. package/doc_build/static/js/async/en_api_config_design-system.js.map +1 -1
  12. package/doc_build/static/js/async/en_api_config_plugins.js +15 -19
  13. package/doc_build/static/js/async/en_api_config_testing.js +26 -24
  14. package/doc_build/static/js/async/en_api_config_testing.js.map +1 -1
  15. package/doc_build/static/js/async/{en_api_.js → en_api_index.js} +10 -14
  16. package/doc_build/static/js/async/en_api_index.js.map +1 -0
  17. package/doc_build/static/js/async/en_api_plugin-api_plugin-hooks.js +24 -26
  18. package/doc_build/static/js/async/en_api_plugin-api_plugin-hooks.js.map +1 -1
  19. package/doc_build/static/js/async/en_guide_advance_asset.js +16 -41
  20. package/doc_build/static/js/async/en_guide_advance_asset.js.map +1 -1
  21. package/doc_build/static/js/async/en_guide_advance_build-umd.js +20 -24
  22. package/doc_build/static/js/async/en_guide_advance_copy.js +25 -23
  23. package/doc_build/static/js/async/en_guide_advance_copy.js.map +1 -1
  24. package/doc_build/static/js/async/en_guide_advance_external-dependency.js +15 -19
  25. package/doc_build/static/js/async/en_guide_advance_in-depth-about-build.js +352 -94
  26. package/doc_build/static/js/async/en_guide_advance_in-depth-about-build.js.map +1 -1
  27. package/doc_build/static/js/async/en_guide_advance_in-depth-about-dev-command.js +11 -15
  28. package/doc_build/static/js/async/en_guide_advance_in-depth-about-dev-command.js.map +1 -1
  29. package/doc_build/static/js/async/en_guide_advance_theme-config.js +26 -24
  30. package/doc_build/static/js/async/en_guide_advance_theme-config.js.map +1 -1
  31. package/doc_build/static/js/async/en_guide_basic_before-getting-started.js +275 -88
  32. package/doc_build/static/js/async/en_guide_basic_before-getting-started.js.map +1 -1
  33. package/doc_build/static/js/async/en_guide_basic_command-preview.js +45 -33
  34. package/doc_build/static/js/async/en_guide_basic_command-preview.js.map +1 -1
  35. package/doc_build/static/js/async/en_guide_basic_modify-output-product.js +274 -196
  36. package/doc_build/static/js/async/en_guide_basic_modify-output-product.js.map +1 -1
  37. package/doc_build/static/js/async/en_guide_basic_publish-your-project.js +18 -20
  38. package/doc_build/static/js/async/en_guide_basic_publish-your-project.js.map +1 -1
  39. package/doc_build/static/js/async/en_guide_basic_test-your-project.js +27 -32
  40. package/doc_build/static/js/async/en_guide_basic_test-your-project.js.map +1 -1
  41. package/doc_build/static/js/async/en_guide_basic_use-micro-generator.js +33 -15
  42. package/doc_build/static/js/async/en_guide_basic_use-micro-generator.js.map +1 -1
  43. package/doc_build/static/js/async/en_guide_basic_using-storybook.js +24 -63
  44. package/doc_build/static/js/async/en_guide_basic_using-storybook.js.map +1 -1
  45. package/doc_build/static/js/async/en_guide_best-practices_components.js +39 -27
  46. package/doc_build/static/js/async/en_guide_best-practices_components.js.map +1 -1
  47. package/doc_build/static/js/async/en_guide_intro_getting-started.js +288 -45
  48. package/doc_build/static/js/async/en_guide_intro_getting-started.js.map +1 -1
  49. package/doc_build/static/js/async/en_guide_intro_welcome.js +27 -13
  50. package/doc_build/static/js/async/en_guide_intro_welcome.js.map +1 -1
  51. package/doc_build/static/js/async/en_guide_intro_why-module-engineering-solution.js +16 -12
  52. package/doc_build/static/js/async/en_guide_intro_why-module-engineering-solution.js.map +1 -1
  53. package/doc_build/static/js/async/{en_.js → en_index.js} +12 -16
  54. package/doc_build/static/js/async/en_index.js.map +1 -0
  55. package/doc_build/static/js/async/en_plugins_guide_getting-started.js +17 -21
  56. package/doc_build/static/js/async/en_plugins_guide_plugin-object.js +20 -24
  57. package/doc_build/static/js/async/en_plugins_guide_setup-function.js +19 -23
  58. package/doc_build/static/js/async/en_plugins_guide_setup-function.js.map +1 -1
  59. package/doc_build/static/js/async/en_plugins_official-list_overview.js +8 -12
  60. package/doc_build/static/js/async/packages_cli_doc-core_src_theme-default_components_Search_logic_search_ts.js +166 -367
  61. package/doc_build/static/js/async/packages_cli_doc-core_src_theme-default_components_Search_logic_search_ts.js.map +1 -1
  62. package/doc_build/static/js/async/{api_config_build-config.js → zh_api_config_build-config.js} +80 -35
  63. package/doc_build/static/js/async/{api_config_build-config.js.map → zh_api_config_build-config.js.map} +1 -1
  64. package/doc_build/static/js/async/{api_config_build-preset.js → zh_api_config_build-preset.js} +39 -21
  65. package/doc_build/static/js/async/{api_config_build-preset.js.map → zh_api_config_build-preset.js.map} +1 -1
  66. package/doc_build/static/js/async/{api_config_design-system.js → zh_api_config_design-system.js} +27 -23
  67. package/doc_build/static/js/async/{api_config_design-system.js.map → zh_api_config_design-system.js.map} +1 -1
  68. package/doc_build/static/js/async/{api_config_plugins.js → zh_api_config_plugins.js} +17 -21
  69. package/doc_build/static/js/async/{api_config_plugins.js.map → zh_api_config_plugins.js.map} +1 -1
  70. package/doc_build/static/js/async/{api_config_testing.js → zh_api_config_testing.js} +28 -26
  71. package/doc_build/static/js/async/{api_config_testing.js.map → zh_api_config_testing.js.map} +1 -1
  72. package/doc_build/static/js/async/{api_.js → zh_api_index.js} +10 -14
  73. package/doc_build/static/js/async/zh_api_index.js.map +1 -0
  74. package/doc_build/static/js/async/{api_plugin-api_plugin-hooks.js → zh_api_plugin-api_plugin-hooks.js} +25 -27
  75. package/doc_build/static/js/async/{api_plugin-api_plugin-hooks.js.map → zh_api_plugin-api_plugin-hooks.js.map} +1 -1
  76. package/doc_build/static/js/async/{guide_advance_asset.js → zh_guide_advance_asset.js} +18 -43
  77. package/doc_build/static/js/async/{guide_advance_asset.js.map → zh_guide_advance_asset.js.map} +1 -1
  78. package/doc_build/static/js/async/{guide_advance_build-umd.js → zh_guide_advance_build-umd.js} +22 -26
  79. package/doc_build/static/js/async/{guide_advance_build-umd.js.map → zh_guide_advance_build-umd.js.map} +1 -1
  80. package/doc_build/static/js/async/{guide_advance_copy.js → zh_guide_advance_copy.js} +26 -24
  81. package/doc_build/static/js/async/{guide_advance_copy.js.map → zh_guide_advance_copy.js.map} +1 -1
  82. package/doc_build/static/js/async/{guide_advance_external-dependency.js → zh_guide_advance_external-dependency.js} +17 -21
  83. package/doc_build/static/js/async/{guide_advance_external-dependency.js.map → zh_guide_advance_external-dependency.js.map} +1 -1
  84. package/doc_build/static/js/async/{guide_advance_in-depth-about-build.js → zh_guide_advance_in-depth-about-build.js} +353 -95
  85. package/doc_build/static/js/async/{guide_advance_in-depth-about-build.js.map → zh_guide_advance_in-depth-about-build.js.map} +1 -1
  86. package/doc_build/static/js/async/{guide_advance_in-depth-about-dev-command.js → zh_guide_advance_in-depth-about-dev-command.js} +16 -18
  87. package/doc_build/static/js/async/zh_guide_advance_in-depth-about-dev-command.js.map +1 -0
  88. package/doc_build/static/js/async/{guide_advance_theme-config.js → zh_guide_advance_theme-config.js} +24 -22
  89. package/doc_build/static/js/async/{guide_advance_theme-config.js.map → zh_guide_advance_theme-config.js.map} +1 -1
  90. package/doc_build/static/js/async/{guide_basic_before-getting-started.js → zh_guide_basic_before-getting-started.js} +272 -85
  91. package/doc_build/static/js/async/zh_guide_basic_before-getting-started.js.map +1 -0
  92. package/doc_build/static/js/async/{guide_basic_command-preview.js → zh_guide_basic_command-preview.js} +47 -35
  93. package/doc_build/static/js/async/zh_guide_basic_command-preview.js.map +1 -0
  94. package/doc_build/static/js/async/{guide_basic_modify-output-product.js → zh_guide_basic_modify-output-product.js} +203 -88
  95. package/doc_build/static/js/async/zh_guide_basic_modify-output-product.js.map +1 -0
  96. package/doc_build/static/js/async/{guide_basic_publish-your-project.js → zh_guide_basic_publish-your-project.js} +20 -22
  97. package/doc_build/static/js/async/{guide_basic_publish-your-project.js.map → zh_guide_basic_publish-your-project.js.map} +1 -1
  98. package/doc_build/static/js/async/{guide_basic_test-your-project.js → zh_guide_basic_test-your-project.js} +30 -35
  99. package/doc_build/static/js/async/{guide_basic_test-your-project.js.map → zh_guide_basic_test-your-project.js.map} +1 -1
  100. package/doc_build/static/js/async/{guide_basic_use-micro-generator.js → zh_guide_basic_use-micro-generator.js} +40 -20
  101. package/doc_build/static/js/async/zh_guide_basic_use-micro-generator.js.map +1 -0
  102. package/doc_build/static/js/async/{guide_basic_using-storybook.js → zh_guide_basic_using-storybook.js} +78 -171
  103. package/doc_build/static/js/async/{guide_basic_using-storybook.js.map → zh_guide_basic_using-storybook.js.map} +1 -1
  104. package/doc_build/static/js/async/{guide_best-practices_components.js → zh_guide_best-practices_components.js} +41 -29
  105. package/doc_build/static/js/async/{guide_best-practices_components.js.map → zh_guide_best-practices_components.js.map} +1 -1
  106. package/doc_build/static/js/async/{guide_intro_getting-started.js → zh_guide_intro_getting-started.js} +291 -42
  107. package/doc_build/static/js/async/{guide_intro_getting-started.js.map → zh_guide_intro_getting-started.js.map} +1 -1
  108. package/doc_build/static/js/async/{guide_intro_welcome.js → zh_guide_intro_welcome.js} +28 -14
  109. package/doc_build/static/js/async/zh_guide_intro_welcome.js.map +1 -0
  110. package/doc_build/static/js/async/{guide_intro_why-module-engineering-solution.js → zh_guide_intro_why-module-engineering-solution.js} +18 -14
  111. package/doc_build/static/js/async/zh_guide_intro_why-module-engineering-solution.js.map +1 -0
  112. package/doc_build/static/js/async/{index.js → zh_index.js} +11 -15
  113. package/doc_build/static/js/async/zh_index.js.map +1 -0
  114. package/doc_build/static/js/async/{plugins_guide_getting-started.js → zh_plugins_guide_getting-started.js} +19 -23
  115. package/doc_build/static/js/async/{plugins_guide_getting-started.js.map → zh_plugins_guide_getting-started.js.map} +1 -1
  116. package/doc_build/static/js/async/{plugins_guide_plugin-object.js → zh_plugins_guide_plugin-object.js} +22 -26
  117. package/doc_build/static/js/async/{plugins_guide_plugin-object.js.map → zh_plugins_guide_plugin-object.js.map} +1 -1
  118. package/doc_build/static/js/async/{plugins_guide_setup-function.js → zh_plugins_guide_setup-function.js} +21 -25
  119. package/doc_build/static/js/async/{plugins_guide_setup-function.js.map → zh_plugins_guide_setup-function.js.map} +1 -1
  120. package/doc_build/static/js/async/{plugins_official-list_overview.js → zh_plugins_official-list_overview.js} +10 -14
  121. package/doc_build/static/js/async/zh_plugins_official-list_overview.js.map +1 -0
  122. package/doc_build/static/js/builder-runtime.js +1 -1
  123. package/doc_build/static/js/builder-runtime.js.map +1 -1
  124. package/doc_build/static/js/lib-polyfill.js +3433 -16355
  125. package/doc_build/static/js/lib-polyfill.js.map +1 -1
  126. package/doc_build/static/js/main.js +2073 -2700
  127. package/doc_build/static/js/main.js.map +1 -1
  128. package/doc_build/static/js/vendors-node_modules_pnpm_remix-run_router_1_2_0_node_modules_remix-run_router_dist_router_js-9d5e9c.js +485 -1689
  129. package/doc_build/static/js/vendors-node_modules_pnpm_remix-run_router_1_2_0_node_modules_remix-run_router_dist_router_js-9d5e9c.js.map +1 -1
  130. package/doc_build/static/search_index.json +1 -0
  131. package/docs/.island/dist/404.html +41 -0
  132. package/docs/.island/dist/assets/asset.26aea654.js +160 -0
  133. package/docs/.island/dist/assets/asset.36e3d3c9.js +160 -0
  134. package/docs/.island/dist/assets/before-getting-started.0e863740.js +87 -0
  135. package/docs/.island/dist/assets/before-getting-started.2c6e6b8a.js +87 -0
  136. package/docs/.island/dist/assets/build-config.460d11d9.js +804 -0
  137. package/docs/.island/dist/assets/build-config.e155e534.js +854 -0
  138. package/docs/.island/dist/assets/build-preset.6c2c6c62.js +256 -0
  139. package/docs/.island/dist/assets/build-preset.d3da921d.js +256 -0
  140. package/docs/.island/dist/assets/build-umd.ba00f028.js +264 -0
  141. package/docs/.island/dist/assets/build-umd.edb9d163.js +273 -0
  142. package/docs/.island/dist/assets/command-preview.1dc93921.js +264 -0
  143. package/docs/.island/dist/assets/command-preview.ef7a9d01.js +264 -0
  144. package/docs/.island/dist/assets/components.esm.03560353.js +9 -0
  145. package/docs/.island/dist/assets/copy.28dc4d5f.js +277 -0
  146. package/docs/.island/dist/assets/copy.f4625565.js +277 -0
  147. package/docs/.island/dist/assets/design-system.8993234c.js +1254 -0
  148. package/docs/.island/dist/assets/design-system.b0ba163f.js +639 -0
  149. package/docs/.island/dist/assets/dev.b373b152.js +37 -0
  150. package/docs/.island/dist/assets/dev.b39fd42a.js +37 -0
  151. package/docs/.island/dist/assets/down.f35427d3.svg +1 -0
  152. package/docs/.island/dist/assets/extension.4bf3526b.js +1 -0
  153. package/docs/.island/dist/assets/extension.d64ed0b8.js +469 -0
  154. package/docs/.island/dist/assets/external-dependency.2ede7532.js +156 -0
  155. package/docs/.island/dist/assets/external-dependency.92ca89e0.js +156 -0
  156. package/docs/.island/dist/assets/getting-started.822cf0b2.js +117 -0
  157. package/docs/.island/dist/assets/getting-started.e2764829.js +114 -0
  158. package/docs/.island/dist/assets/github.3bf8ccee.svg +1 -0
  159. package/docs/.island/dist/assets/in-depth-about-build.94cc902d.js +375 -0
  160. package/docs/.island/dist/assets/in-depth-about-build.aa74de10.js +374 -0
  161. package/docs/.island/dist/assets/in-depth-about-dev-command.877bdb83.js +33 -0
  162. package/docs/.island/dist/assets/in-depth-about-dev-command.9736befd.js +39 -0
  163. package/docs/.island/dist/assets/index.01786ba7.js +30 -0
  164. package/docs/.island/dist/assets/index.6cef6f5f.js +4 -0
  165. package/docs/.island/dist/assets/index.cb118238.js +36 -0
  166. package/docs/.island/dist/assets/index.ccb6ce27.js +4 -0
  167. package/docs/.island/dist/assets/island_inject.69495876.js +1 -0
  168. package/docs/.island/dist/assets/island_inject.cdfb22d9.js +1 -0
  169. package/docs/.island/dist/assets/loading.8c9bb911.svg +1 -0
  170. package/docs/.island/dist/assets/modify-output-product.9e2394d7.js +100 -0
  171. package/docs/.island/dist/assets/modify-output-product.f363845a.js +100 -0
  172. package/docs/.island/dist/assets/moon.6b705924.svg +3 -0
  173. package/docs/.island/dist/assets/plugin.70a61997.js +42 -0
  174. package/docs/.island/dist/assets/plugin.80b12ee2.js +42 -0
  175. package/docs/.island/dist/assets/publish-your-project.7321c10e.js +164 -0
  176. package/docs/.island/dist/assets/publish-your-project.7326359f.js +166 -0
  177. package/docs/.island/dist/assets/right.89674cd7.svg +1 -0
  178. package/docs/.island/dist/assets/search.0aea6901.svg +1 -0
  179. package/docs/.island/dist/assets/search.11353245.js +222 -0
  180. package/docs/.island/dist/assets/search.a1b1cff3.js +3 -0
  181. package/docs/.island/dist/assets/search.f9025ced.js +3 -0
  182. package/docs/.island/dist/assets/style.09015a4b.css +1 -0
  183. package/docs/.island/dist/assets/style.2e5f7bc2.css +1970 -0
  184. package/docs/.island/dist/assets/sun.841dac10.svg +11 -0
  185. package/docs/.island/dist/assets/test-your-project.8ab2809e.js +190 -0
  186. package/docs/.island/dist/assets/test-your-project.9ae2a49e.js +190 -0
  187. package/docs/.island/dist/assets/test.2bfe276b.js +66 -0
  188. package/docs/.island/dist/assets/test.a2c00a3f.js +67 -0
  189. package/docs/.island/dist/assets/translator.b1077c44.svg +1 -0
  190. package/docs/.island/dist/assets/use-micro-generator.13c1a09f.js +60 -0
  191. package/docs/.island/dist/assets/use-micro-generator.dfe877f6.js +60 -0
  192. package/docs/.island/dist/assets/using-storybook.adb88cb8.js +260 -0
  193. package/docs/.island/dist/assets/using-storybook.b8e7dd04.js +260 -0
  194. package/docs/.island/dist/assets/welcome.94880043.js +13 -0
  195. package/docs/.island/dist/assets/welcome.b2140e7e.js +13 -0
  196. package/docs/.island/dist/assets/why-module-engineering-solution.bfe7981a.js +26 -0
  197. package/docs/.island/dist/assets/why-module-engineering-solution.e31cd19f.js +26 -0
  198. package/docs/.island/dist/chunk-COLCRJ2V.js +1 -0
  199. package/docs/.island/dist/chunk-K5FMOYDC.js +10 -0
  200. package/docs/.island/dist/chunk-WE42KMYS.js +26 -0
  201. package/docs/.island/dist/client-entry.js +3 -0
  202. package/docs/.island/dist/en/api/build-config.html +344 -0
  203. package/docs/.island/dist/en/api/build-preset.html +82 -0
  204. package/docs/.island/dist/en/api/design-system.html +155 -0
  205. package/docs/.island/dist/en/api/dev.html +45 -0
  206. package/docs/.island/dist/en/api/index.html +41 -0
  207. package/docs/.island/dist/en/api/plugin.html +48 -0
  208. package/docs/.island/dist/en/api/test.html +58 -0
  209. package/docs/.island/dist/en/guide/advance/asset.html +68 -0
  210. package/docs/.island/dist/en/guide/advance/build-umd.html +72 -0
  211. package/docs/.island/dist/en/guide/advance/copy.html +82 -0
  212. package/docs/.island/dist/en/guide/advance/extension.html +41 -0
  213. package/docs/.island/dist/en/guide/advance/external-dependency.html +71 -0
  214. package/docs/.island/dist/en/guide/advance/in-depth-about-build.html +148 -0
  215. package/docs/.island/dist/en/guide/advance/in-depth-about-dev-command.html +51 -0
  216. package/docs/.island/dist/en/guide/basic/before-getting-started.html +127 -0
  217. package/docs/.island/dist/en/guide/basic/command-preview.html +100 -0
  218. package/docs/.island/dist/en/guide/basic/modify-output-product.html +140 -0
  219. package/docs/.island/dist/en/guide/basic/publish-your-project.html +91 -0
  220. package/docs/.island/dist/en/guide/basic/test-your-project.html +72 -0
  221. package/docs/.island/dist/en/guide/basic/use-micro-generator.html +65 -0
  222. package/docs/.island/dist/en/guide/basic/using-storybook.html +113 -0
  223. package/docs/.island/dist/en/guide/intro/getting-started.html +76 -0
  224. package/docs/.island/dist/en/guide/intro/welcome.html +53 -0
  225. package/docs/.island/dist/en/guide/intro/why-module-engineering-solution.html +49 -0
  226. package/docs/.island/dist/en/index.html +42 -0
  227. package/docs/.island/dist/react-dom.js +1 -0
  228. package/docs/.island/dist/react-dom_client.js +1 -0
  229. package/docs/.island/dist/react.js +1 -0
  230. package/docs/.island/dist/react_jsx-runtime.js +10 -0
  231. package/docs/.island/dist/ssr-manifest.json +57 -0
  232. package/docs/.island/dist/test-result.png +0 -0
  233. package/docs/.island/dist/why-module-solution.png +0 -0
  234. package/docs/.island/dist/zh/api/build-config.html +361 -0
  235. package/docs/.island/dist/zh/api/build-preset.html +82 -0
  236. package/docs/.island/dist/zh/api/design-system.html +149 -0
  237. package/docs/.island/dist/zh/api/dev.html +46 -0
  238. package/docs/.island/dist/zh/api/index.html +41 -0
  239. package/docs/.island/dist/zh/api/plugin.html +48 -0
  240. package/docs/.island/dist/zh/api/test.html +59 -0
  241. package/docs/.island/dist/zh/guide/advance/asset.html +68 -0
  242. package/docs/.island/dist/zh/guide/advance/build-umd.html +72 -0
  243. package/docs/.island/dist/zh/guide/advance/copy.html +82 -0
  244. package/docs/.island/dist/zh/guide/advance/extension.html +127 -0
  245. package/docs/.island/dist/zh/guide/advance/external-dependency.html +71 -0
  246. package/docs/.island/dist/zh/guide/advance/in-depth-about-build.html +148 -0
  247. package/docs/.island/dist/zh/guide/advance/in-depth-about-dev-command.html +53 -0
  248. package/docs/.island/dist/zh/guide/basic/before-getting-started.html +127 -0
  249. package/docs/.island/dist/zh/guide/basic/command-preview.html +100 -0
  250. package/docs/.island/dist/zh/guide/basic/modify-output-product.html +140 -0
  251. package/docs/.island/dist/zh/guide/basic/publish-your-project.html +92 -0
  252. package/docs/.island/dist/zh/guide/basic/test-your-project.html +72 -0
  253. package/docs/.island/dist/zh/guide/basic/use-micro-generator.html +65 -0
  254. package/docs/.island/dist/zh/guide/basic/using-storybook.html +114 -0
  255. package/docs/.island/dist/zh/guide/intro/getting-started.html +79 -0
  256. package/docs/.island/dist/zh/guide/intro/welcome.html +53 -0
  257. package/docs/.island/dist/zh/guide/intro/why-module-engineering-solution.html +49 -0
  258. package/docs/.island/dist/zh/index.html +42 -0
  259. package/docs/en/api/config/build-config.md +15 -5
  260. package/docs/en/api/config/build-preset.md +3 -2
  261. package/docs/en/api/config/design-system.md +623 -615
  262. package/docs/en/api/config/plugins.md +2 -2
  263. package/docs/en/api/config/testing.md +2 -1
  264. package/docs/en/guide/advance/asset.mdx +0 -4
  265. package/docs/en/guide/advance/build-umd.mdx +3 -3
  266. package/docs/en/guide/advance/in-depth-about-build.md +14 -13
  267. package/docs/en/guide/advance/in-depth-about-dev-command.md +2 -1
  268. package/docs/en/guide/basic/before-getting-started.md +16 -9
  269. package/docs/en/guide/basic/command-preview.md +2 -2
  270. package/docs/en/guide/basic/modify-output-product.md +65 -69
  271. package/docs/en/guide/basic/test-your-project.mdx +1 -3
  272. package/docs/en/guide/basic/use-micro-generator.md +4 -0
  273. package/docs/en/guide/basic/using-storybook.mdx +1 -13
  274. package/docs/en/guide/intro/getting-started.md +16 -7
  275. package/docs/en/plugins/guide/getting-started.mdx +2 -2
  276. package/docs/en/plugins/guide/plugin-object.mdx +5 -5
  277. package/docs/zh/api/config/build-config.md +18 -6
  278. package/docs/zh/api/config/build-preset.md +3 -2
  279. package/docs/zh/api/config/design-system.md +2 -2
  280. package/docs/zh/api/config/plugins.md +2 -2
  281. package/docs/zh/api/config/testing.md +3 -2
  282. package/docs/zh/guide/advance/asset.mdx +0 -5
  283. package/docs/zh/guide/advance/build-umd.mdx +3 -3
  284. package/docs/zh/guide/advance/in-depth-about-build.md +14 -13
  285. package/docs/zh/guide/advance/in-depth-about-dev-command.md +2 -1
  286. package/docs/zh/guide/basic/before-getting-started.md +15 -8
  287. package/docs/zh/guide/basic/command-preview.md +2 -2
  288. package/docs/zh/guide/basic/modify-output-product.md +17 -19
  289. package/docs/zh/guide/basic/test-your-project.mdx +1 -3
  290. package/docs/zh/guide/basic/use-micro-generator.md +5 -1
  291. package/docs/zh/guide/basic/using-storybook.mdx +9 -19
  292. package/docs/zh/guide/intro/getting-started.md +17 -11
  293. package/docs/zh/plugins/guide/getting-started.mdx +2 -2
  294. package/docs/zh/plugins/guide/plugin-object.mdx +5 -5
  295. package/modern.config.ts +11 -5
  296. package/package.json +4 -4
  297. package/doc_build/static/js/async/api_.js.map +0 -1
  298. package/doc_build/static/js/async/en_.js.map +0 -1
  299. package/doc_build/static/js/async/en_api_.js.map +0 -1
  300. package/doc_build/static/js/async/guide_advance_in-depth-about-dev-command.js.map +0 -1
  301. package/doc_build/static/js/async/guide_basic_before-getting-started.js.map +0 -1
  302. package/doc_build/static/js/async/guide_basic_command-preview.js.map +0 -1
  303. package/doc_build/static/js/async/guide_basic_modify-output-product.js.map +0 -1
  304. package/doc_build/static/js/async/guide_basic_use-micro-generator.js.map +0 -1
  305. package/doc_build/static/js/async/guide_intro_welcome.js.map +0 -1
  306. package/doc_build/static/js/async/guide_intro_why-module-engineering-solution.js.map +0 -1
  307. package/doc_build/static/js/async/index.js.map +0 -1
  308. package/doc_build/static/js/async/plugins_official-list_overview.js.map +0 -1
package/docs/.island/dist/assets/build-umd.edb9d163.js ADDED
@@ -0,0 +1,273 @@
1
+ import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{a,C as i,S as E,b as d}from"./components.esm.03560353.js";import"react";import"react-dom";const n={annotations:a,Code:i,Spotlight:E,CodeSlot:d},c={staticMediaQuery:"not screen, (max-width: 768px)",theme:{name:"nord",type:"dark",semanticHighlighting:!0,colors:{focusBorder:"#3b4252",foreground:"#d8dee9","activityBar.background":"#2e3440","activityBar.dropBackground":"#3b4252","activityBar.foreground":"#d8dee9","activityBar.activeBorder":"#88c0d0","activityBar.activeBackground":"#3b4252","activityBarBadge.background":"#88c0d0","activityBarBadge.foreground":"#2e3440","badge.foreground":"#2e3440","badge.background":"#88c0d0","button.background":"#88c0d0ee","button.foreground":"#2e3440","button.hoverBackground":"#88c0d0","button.secondaryBackground":"#434c5e","button.secondaryForeground":"#d8dee9","button.secondaryHoverBackground":"#4c566a","charts.red":"#bf616a","charts.blue":"#81a1c1","charts.yellow":"#ebcb8b","charts.orange":"#d08770","charts.green":"#a3be8c","charts.purple":"#b48ead","charts.foreground":"#d8dee9","charts.lines":"#88c0d0","debugConsole.infoForeground":"#88c0d0","debugConsole.warningForeground":"#ebcb8b","debugConsole.errorForeground":"#bf616a","debugConsole.sourceForeground":"#616e88","debugConsoleInputIcon.foreground":"#81a1c1","debugExceptionWidget.background":"#4c566a","debugExceptionWidget.border":"#2e3440","debugToolBar.background":"#3b4252",descriptionForeground:"#d8dee9e6","diffEditor.insertedTextBackground":"#81a1c133","diffEditor.removedTextBackground":"#bf616a4d","dropdown.background":"#3b4252","dropdown.border":"#3b4252","dropdown.foreground":"#d8dee9","editorActiveLineNumber.foreground":"#d8dee9cc","editorCursor.foreground":"#d8dee9","editorHint.border":"#ebcb8b00","editorHint.foreground":"#ebcb8b","editorIndentGuide.background":"#434c5eb3","editorIndentGuide.activeBackground":"#4c566a","editorInlayHint.background":"#434c5e","editorInlayHint.foreground":"#d8dee9","editorLineNumber.foreground":"#4c566a","editorLineNumber.activeForeground":"#d8dee9","editorWhitespace.foreground":"#4c566ab3","editorWidget.background":"#2e3440","editorWidget.border":"#3b4252","editor.background":"#2e3440","editor.foreground":"#d8dee9","editor.hoverHighlightBackground":"#3b4252","editor.findMatchBackground":"#88c0d066","editor.findMatchHighlightBackground":"#88c0d033","editor.findRangeHighlightBackground":"#88c0d033","editor.lineHighlightBackground":"#3b4252","editor.lineHighlightBorder":"#3b4252","editor.inactiveSelectionBackground":"#434c5ecc","editor.inlineValuesBackground":"#4c566a","editor.inlineValuesForeground":"#eceff4","editor.selectionBackground":"#434c5ecc","editor.selectionHighlightBackground":"#434c5ecc","editor.rangeHighlightBackground":"#434c5e52","editor.wordHighlightBackground":"#81a1c166","editor.wordHighlightStrongBackground":"#81a1c199","editor.stackFrameHighlightBackground":"#5e81ac","editor.focusedStackFrameHighlightBackground":"#5e81ac","editorError.foreground":"#bf616a","editorError.border":"#bf616a00","editorWarning.foreground":"#ebcb8b","editorWarning.border":"#ebcb8b00","editorBracketMatch.background":"#2e344000","editorBracketMatch.border":"#88c0d0","editorBracketHighlight.foreground1":"#8fbcbb","editorBracketHighlight.foreground2":"#88c0d0","editorBracketHighlight.foreground3":"#81a1c1","editorBracketHighlight.foreground4":"#5e81ac","editorBracketHighlight.foreground5":"#8fbcbb","editorBracketHighlight.foreground6":"#88c0d0","editorBracketHighlight.unexpectedBracket.foreground":"#bf616a","editorCodeLens.foreground":"#4c566a","editorGroup.background":"#2e3440","editorGroup.border":"#3b425201","editorGroup.dropBackground":"#3b425299","editorGroupHeader.border":"#3b425200","editorGroupHeader.noTabsBackground":"#2e3440","editorGroupHeader.tabsBackground":"#2e3440","editorGroupHeader.tabsBorder":"#3b425200","editorGutter.background":"#2e3440","editorGutter.modifiedBackground":"#ebcb8b","editorGutter.addedBackground":"#a3be8c","editorGutter.deletedBackground":"#bf616a","editorHoverWidget.background":"#3b4252","editorHoverWidget.border":"#3b4252","editorLink.activeForeground":"#88c0d0","editorMarkerNavigation.background":"#5e81acc0","editorMarkerNavigationError.background":"#bf616ac0","editorMarkerNavigationWarning.background":"#ebcb8bc0","editorOverviewRuler.border":"#3b4252","editorOverviewRuler.currentContentForeground":"#3b4252","editorOverviewRuler.incomingContentForeground":"#3b4252","editorOverviewRuler.findMatchForeground":"#88c0d066","editorOverviewRuler.rangeHighlightForeground":"#88c0d066","editorOverviewRuler.selectionHighlightForeground":"#88c0d066","editorOverviewRuler.wordHighlightForeground":"#88c0d066","editorOverviewRuler.wordHighlightStrongForeground":"#88c0d066","editorOverviewRuler.modifiedForeground":"#ebcb8b","editorOverviewRuler.addedForeground":"#a3be8c","editorOverviewRuler.deletedForeground":"#bf616a","editorOverviewRuler.errorForeground":"#bf616a","editorOverviewRuler.warningForeground":"#ebcb8b","editorOverviewRuler.infoForeground":"#81a1c1","editorRuler.foreground":"#434c5e","editorSuggestWidget.background":"#2e3440","editorSuggestWidget.border":"#3b4252","editorSuggestWidget.foreground":"#d8dee9","editorSuggestWidget.focusHighlightForeground":"#88c0d0","editorSuggestWidget.highlightForeground":"#88c0d0","editorSuggestWidget.selectedBackground":"#434c5e","editorSuggestWidget.selectedForeground":"#d8dee9","extensionButton.prominentForeground":"#d8dee9","extensionButton.prominentBackground":"#434c5e","extensionButton.prominentHoverBackground":"#4c566a",errorForeground:"#bf616a","gitDecoration.modifiedResourceForeground":"#ebcb8b","gitDecoration.deletedResourceForeground":"#bf616a","gitDecoration.untrackedResourceForeground":"#a3be8c","gitDecoration.ignoredResourceForeground":"#d8dee966","gitDecoration.conflictingResourceForeground":"#5e81ac","gitDecoration.submoduleResourceForeground":"#8fbcbb","gitDecoration.stageDeletedResourceForeground":"#bf616a","gitDecoration.stageModifiedResourceForeground":"#ebcb8b","input.background":"#3b4252","input.foreground":"#d8dee9","input.placeholderForeground":"#d8dee999","input.border":"#3b4252","inputOption.activeBackground":"#5e81ac","inputOption.activeBorder":"#5e81ac","inputOption.activeForeground":"#eceff4","inputValidation.errorBackground":"#bf616a","inputValidation.errorBorder":"#bf616a","inputValidation.infoBackground":"#81a1c1","inputValidation.infoBorder":"#81a1c1","inputValidation.warningBackground":"#d08770","inputValidation.warningBorder":"#d08770","keybindingLabel.background":"#4c566a","keybindingLabel.border":"#4c566a","keybindingLabel.bottomBorder":"#4c566a","keybindingLabel.foreground":"#d8dee9","list.activeSelectionBackground":"#88c0d0","list.activeSelectionForeground":"#2e3440","list.inactiveSelectionBackground":"#434c5e","list.inactiveSelectionForeground":"#d8dee9","list.inactiveFocusBackground":"#434c5ecc","list.hoverForeground":"#eceff4","list.focusForeground":"#d8dee9","list.focusBackground":"#88c0d099","list.focusHighlightForeground":"#eceff4","list.hoverBackground":"#3b4252","list.dropBackground":"#88c0d099","list.highlightForeground":"#88c0d0","list.errorForeground":"#bf616a","list.warningForeground":"#ebcb8b","merge.currentHeaderBackground":"#81a1c166","merge.currentContentBackground":"#81a1c14d","merge.incomingHeaderBackground":"#8fbcbb66","merge.incomingContentBackground":"#8fbcbb4d","merge.border":"#3b425200","minimap.background":"#2e3440","minimap.errorHighlight":"#bf616acc","minimap.findMatchHighlight":"#88c0d0","minimap.selectionHighlight":"#88c0d0cc","minimap.warningHighlight":"#ebcb8bcc","minimapGutter.addedBackground":"#a3be8c","minimapGutter.deletedBackground":"#bf616a","minimapGutter.modifiedBackground":"#ebcb8b","minimapSlider.activeBackground":"#434c5eaa","minimapSlider.background":"#434c5e99","minimapSlider.hoverBackground":"#434c5eaa","notification.background":"#3b4252","notification.buttonBackground":"#434c5e","notification.buttonForeground":"#d8dee9","notification.buttonHoverBackground":"#4c566a","notification.errorBackground":"#bf616a","notification.errorForeground":"#2e3440","notification.foreground":"#d8dee9","notification.infoBackground":"#88c0d0","notification.infoForeground":"#2e3440","notification.warningBackground":"#ebcb8b","notification.warningForeground":"#2e3440","notificationCenter.border":"#3b425200","notificationCenterHeader.background":"#2e3440","notificationCenterHeader.foreground":"#88c0d0","notificationLink.foreground":"#88c0d0","notifications.background":"#3b4252","notifications.border":"#2e3440","notifications.foreground":"#d8dee9","notificationToast.border":"#3b425200","panel.background":"#2e3440","panel.border":"#3b4252","panelTitle.activeBorder":"#88c0d000","panelTitle.activeForeground":"#88c0d0","panelTitle.inactiveForeground":"#d8dee9","peekView.border":"#4c566a","peekViewEditor.background":"#2e3440","peekViewEditorGutter.background":"#2e3440","peekViewEditor.matchHighlightBackground":"#88c0d04d","peekViewResult.background":"#2e3440","peekViewResult.fileForeground":"#88c0d0","peekViewResult.lineForeground":"#d8dee966","peekViewResult.matchHighlightBackground":"#88c0d0cc","peekViewResult.selectionBackground":"#434c5e","peekViewResult.selectionForeground":"#d8dee9","peekViewTitle.background":"#3b4252","peekViewTitleDescription.foreground":"#d8dee9","peekViewTitleLabel.foreground":"#88c0d0","pickerGroup.border":"#3b4252","pickerGroup.foreground":"#88c0d0","progressBar.background":"#88c0d0","quickInputList.focusBackground":"#88c0d0","quickInputList.focusForeground":"#2e3440","sash.hoverBorder":"#88c0d0","scrollbar.shadow":"#00000066","scrollbarSlider.activeBackground":"#434c5eaa","scrollbarSlider.background":"#434c5e99","scrollbarSlider.hoverBackground":"#434c5eaa","selection.background":"#88c0d099","sideBar.background":"#2e3440","sideBar.foreground":"#d8dee9","sideBar.border":"#3b4252","sideBarSectionHeader.background":"#3b4252","sideBarSectionHeader.foreground":"#d8dee9","sideBarTitle.foreground":"#d8dee9","statusBar.background":"#3b4252","statusBar.debuggingBackground":"#5e81ac","statusBar.debuggingForeground":"#d8dee9","statusBar.noFolderForeground":"#d8dee9","statusBar.noFolderBackground":"#3b4252","statusBar.foreground":"#d8dee9","statusBarItem.activeBackground":"#4c566a","statusBarItem.hoverBackground":"#434c5e","statusBarItem.prominentBackground":"#3b4252","statusBarItem.prominentHoverBackground":"#434c5e","statusBarItem.errorBackground":"#3b4252","statusBarItem.errorForeground":"#bf616a","statusBarItem.warningBackground":"#ebcb8b","statusBarItem.warningForeground":"#2e3440","statusBar.border":"#3b425200","tab.activeBackground":"#3b4252","tab.activeForeground":"#d8dee9","tab.border":"#3b425200","tab.activeBorder":"#88c0d000","tab.unfocusedActiveBorder":"#88c0d000","tab.inactiveBackground":"#2e3440","tab.inactiveForeground":"#d8dee966","tab.unfocusedActiveForeground":"#d8dee999","tab.unfocusedInactiveForeground":"#d8dee966","tab.hoverBackground":"#3b4252cc","tab.unfocusedHoverBackground":"#3b4252b3","tab.hoverBorder":"#88c0d000","tab.unfocusedHoverBorder":"#88c0d000","tab.activeBorderTop":"#88c0d000","tab.unfocusedActiveBorderTop":"#88c0d000","tab.lastPinnedBorder":"#4c566a","terminal.background":"#2e3440","terminal.foreground":"#d8dee9","terminal.ansiBlack":"#3b4252","terminal.ansiRed":"#bf616a","terminal.ansiGreen":"#a3be8c","terminal.ansiYellow":"#ebcb8b","terminal.ansiBlue":"#81a1c1","terminal.ansiMagenta":"#b48ead","terminal.ansiCyan":"#88c0d0","terminal.ansiWhite":"#e5e9f0","terminal.ansiBrightBlack":"#4c566a","terminal.ansiBrightRed":"#bf616a","terminal.ansiBrightGreen":"#a3be8c","terminal.ansiBrightYellow":"#ebcb8b","terminal.ansiBrightBlue":"#81a1c1","terminal.ansiBrightMagenta":"#b48ead","terminal.ansiBrightCyan":"#8fbcbb","terminal.ansiBrightWhite":"#eceff4","terminal.tab.activeBorder":"#88c0d0","textBlockQuote.background":"#3b4252","textBlockQuote.border":"#81a1c1","textCodeBlock.background":"#4c566a","textLink.activeForeground":"#88c0d0","textLink.foreground":"#88c0d0","textPreformat.foreground":"#8fbcbb","textSeparator.foreground":"#eceff4","titleBar.activeBackground":"#2e3440","titleBar.activeForeground":"#d8dee9","titleBar.border":"#2e344000","titleBar.inactiveBackground":"#2e3440","titleBar.inactiveForeground":"#d8dee966","tree.indentGuidesStroke":"#616e88","walkThrough.embeddedEditorBackground":"#2e3440","welcomePage.buttonBackground":"#434c5e","welcomePage.buttonHoverBackground":"#4c566a","widget.shadow":"#00000066"},tokenColors:[{settings:{foreground:"#d8dee9ff",background:"#2e3440ff"}},{scope:"emphasis",settings:{fontStyle:"italic"}},{scope:"strong",settings:{fontStyle:"bold"}},{name:"Comment",scope:"comment",settings:{foreground:"#616E88"}},{name:"Constant Character",scope:"constant.character",settings:{foreground:"#EBCB8B"}},{name:"Constant Character Escape",scope:"constant.character.escape",settings:{foreground:"#EBCB8B"}},{name:"Constant Language",scope:"constant.language",settings:{foreground:"#81A1C1"}},{name:"Constant Numeric",scope:"constant.numeric",settings:{foreground:"#B48EAD"}},{name:"Constant Regexp",scope:"constant.regexp",settings:{foreground:"#EBCB8B"}},{name:"Entity Name Class/Type",scope:["entity.name.class","entity.name.type.class"],settings:{foreground:"#8FBCBB"}},{name:"Entity Name Function",scope:"entity.name.function",settings:{foreground:"#88C0D0"}},{name:"Entity Name Tag",scope:"entity.name.tag",settings:{foreground:"#81A1C1"}},{name:"Entity Other Attribute Name",scope:"entity.other.attribute-name",settings:{foreground:"#8FBCBB"}},{name:"Entity Other Inherited Class",scope:"entity.other.inherited-class",settings:{fontStyle:"bold",foreground:"#8FBCBB"}},{name:"Invalid Deprecated",scope:"invalid.deprecated",settings:{foreground:"#D8DEE9",background:"#EBCB8B"}},{name:"Invalid Illegal",scope:"invalid.illegal",settings:{foreground:"#D8DEE9",background:"#BF616A"}},{name:"Keyword",scope:"keyword",settings:{foreground:"#81A1C1"}},{name:"Keyword Operator",scope:"keyword.operator",settings:{foreground:"#81A1C1"}},{name:"Keyword Other New",scope:"keyword.other.new",settings:{foreground:"#81A1C1"}},{name:"Markup Bold",scope:"markup.bold",settings:{fontStyle:"bold"}},{name:"Markup Changed",scope:"markup.changed",settings:{foreground:"#EBCB8B"}},{name:"Markup Deleted",scope:"markup.deleted",settings:{foreground:"#BF616A"}},{name:"Markup Inserted",scope:"markup.inserted",settings:{foreground:"#A3BE8C"}},{name:"Meta Preprocessor",scope:"meta.preprocessor",settings:{foreground:"#5E81AC"}},{name:"Punctuation",scope:"punctuation",settings:{foreground:"#ECEFF4"}},{name:"Punctuation Definition Parameters",scope:["punctuation.definition.method-parameters","punctuation.definition.function-parameters","punctuation.definition.parameters"],settings:{foreground:"#ECEFF4"}},{name:"Punctuation Definition Tag",scope:"punctuation.definition.tag",settings:{foreground:"#81A1C1"}},{name:"Punctuation Definition Comment",scope:["punctuation.definition.comment","punctuation.end.definition.comment","punctuation.start.definition.comment"],settings:{foreground:"#616E88"}},{name:"Punctuation Section",scope:"punctuation.section",settings:{foreground:"#ECEFF4"}},{name:"Punctuation Section Embedded",scope:["punctuation.section.embedded.begin","punctuation.section.embedded.end"],settings:{foreground:"#81A1C1"}},{name:"Punctuation Terminator",scope:"punctuation.terminator",settings:{foreground:"#81A1C1"}},{name:"Punctuation Variable",scope:"punctuation.definition.variable",settings:{foreground:"#81A1C1"}},{name:"Storage",scope:"storage",settings:{foreground:"#81A1C1"}},{name:"String",scope:"string",settings:{foreground:"#A3BE8C"}},{name:"String Regexp",scope:"string.regexp",settings:{foreground:"#EBCB8B"}},{name:"Support Class",scope:"support.class",settings:{foreground:"#8FBCBB"}},{name:"Support Constant",scope:"support.constant",settings:{foreground:"#81A1C1"}},{name:"Support Function",scope:"support.function",settings:{foreground:"#88C0D0"}},{name:"Support Function Construct",scope:"support.function.construct",settings:{foreground:"#81A1C1"}},{name:"Support Type",scope:"support.type",settings:{foreground:"#8FBCBB"}},{name:"Support Type Exception",scope:"support.type.exception",settings:{foreground:"#8FBCBB"}},{name:"Token Debug",scope:"token.debug-token",settings:{foreground:"#b48ead"}},{name:"Token Error",scope:"token.error-token",settings:{foreground:"#bf616a"}},{name:"Token Info",scope:"token.info-token",settings:{foreground:"#88c0d0"}},{name:"Token Warning",scope:"token.warn-token",settings:{foreground:"#ebcb8b"}},{name:"Variable",scope:"variable.other",settings:{foreground:"#D8DEE9"}},{name:"Variable Language",scope:"variable.language",settings:{foreground:"#81A1C1"}},{name:"Variable Parameter",scope:"variable.parameter",settings:{foreground:"#D8DEE9"}},{name:"[C/CPP] Punctuation Separator Pointer-Access",scope:"punctuation.separator.pointer-access.c",settings:{foreground:"#81A1C1"}},{name:"[C/CPP] Meta Preprocessor Include",scope:["source.c meta.preprocessor.include","source.c string.quoted.other.lt-gt.include"],settings:{foreground:"#8FBCBB"}},{name:"[C/CPP] Conditional Directive",scope:["source.cpp keyword.control.directive.conditional","source.cpp punctuation.definition.directive","source.c keyword.control.directive.conditional","source.c punctuation.definition.directive"],settings:{foreground:"#5E81AC",fontStyle:"bold"}},{name:"[CSS] Constant Other Color RGB Value",scope:"source.css constant.other.color.rgb-value",settings:{foreground:"#B48EAD"}},{name:"[CSS](Function) Meta Property-Value",scope:"source.css meta.property-value",settings:{foreground:"#88C0D0"}},{name:"[CSS] Media Queries",scope:["source.css keyword.control.at-rule.media","source.css keyword.control.at-rule.media punctuation.definition.keyword"],settings:{foreground:"#D08770"}},{name:"[CSS] Punctuation Definition Keyword",scope:"source.css punctuation.definition.keyword",settings:{foreground:"#81A1C1"}},{name:"[CSS] Support Type Property Name",scope:"source.css support.type.property-name",settings:{foreground:"#D8DEE9"}},{name:"[diff] Meta Range Context",scope:"source.diff meta.diff.range.context",settings:{foreground:"#8FBCBB"}},{name:"[diff] Meta Header From-File",scope:"source.diff meta.diff.header.from-file",settings:{foreground:"#8FBCBB"}},{name:"[diff] Punctuation Definition From-File",scope:"source.diff punctuation.definition.from-file",settings:{foreground:"#8FBCBB"}},{name:"[diff] Punctuation Definition Range",scope:"source.diff punctuation.definition.range",settings:{foreground:"#8FBCBB"}},{name:"[diff] Punctuation Definition Separator",scope:"source.diff punctuation.definition.separator",settings:{foreground:"#81A1C1"}},{name:"[Elixir](JakeBecker.elixir-ls) module names",scope:"entity.name.type.module.elixir",settings:{foreground:"#8FBCBB"}},{name:"[Elixir](JakeBecker.elixir-ls) module attributes",scope:"variable.other.readwrite.module.elixir",settings:{foreground:"#D8DEE9",fontStyle:"bold"}},{name:"[Elixir](JakeBecker.elixir-ls) atoms",scope:"constant.other.symbol.elixir",settings:{foreground:"#D8DEE9",fontStyle:"bold"}},{name:"[Elixir](JakeBecker.elixir-ls) modules",scope:"variable.other.constant.elixir",settings:{foreground:"#8FBCBB"}},{name:"[Go] String Format Placeholder",scope:"source.go constant.other.placeholder.go",settings:{foreground:"#EBCB8B"}},{name:"[Java](JavaDoc) Comment Block Documentation HTML Entities",scope:"source.java comment.block.documentation.javadoc punctuation.definition.entity.html",settings:{foreground:"#81A1C1"}},{name:"[Java](JavaDoc) Constant Other",scope:"source.java constant.other",settings:{foreground:"#D8DEE9"}},{name:"[Java](JavaDoc) Keyword Other Documentation",scope:"source.java keyword.other.documentation",settings:{foreground:"#8FBCBB"}},{name:"[Java](JavaDoc) Keyword Other Documentation Author",scope:"source.java keyword.other.documentation.author.javadoc",settings:{foreground:"#8FBCBB"}},{name:"[Java](JavaDoc) Keyword Other Documentation Directive/Custom",scope:["source.java keyword.other.documentation.directive","source.java keyword.other.documentation.custom"],settings:{foreground:"#8FBCBB"}},{name:"[Java](JavaDoc) Keyword Other Documentation See",scope:"source.java keyword.other.documentation.see.javadoc",settings:{foreground:"#8FBCBB"}},{name:"[Java] Meta Method-Call",scope:"source.java meta.method-call meta.method",settings:{foreground:"#88C0D0"}},{name:"[Java](JavaDoc) Meta Tag Template Link",scope:["source.java meta.tag.template.link.javadoc","source.java string.other.link.title.javadoc"],settings:{foreground:"#8FBCBB"}},{name:"[Java](JavaDoc) Meta Tag Template Value",scope:"source.java meta.tag.template.value.javadoc",settings:{foreground:"#88C0D0"}},{name:"[Java](JavaDoc) Punctuation Definition Keyword",scope:"source.java punctuation.definition.keyword.javadoc",settings:{foreground:"#8FBCBB"}},{name:"[Java](JavaDoc) Punctuation Definition Tag",scope:["source.java punctuation.definition.tag.begin.javadoc","source.java punctuation.definition.tag.end.javadoc"],settings:{foreground:"#616E88"}},{name:"[Java] Storage Modifier Import",scope:"source.java storage.modifier.import",settings:{foreground:"#8FBCBB"}},{name:"[Java] Storage Modifier Package",scope:"source.java storage.modifier.package",settings:{foreground:"#8FBCBB"}},{name:"[Java] Storage Type",scope:"source.java storage.type",settings:{foreground:"#8FBCBB"}},{name:"[Java] Storage Type Annotation",scope:"source.java storage.type.annotation",settings:{foreground:"#D08770"}},{name:"[Java] Storage Type Generic",scope:"source.java storage.type.generic",settings:{foreground:"#8FBCBB"}},{name:"[Java] Storage Type Primitive",scope:"source.java storage.type.primitive",settings:{foreground:"#81A1C1"}},{name:"[JavaScript] Decorator",scope:["source.js punctuation.decorator","source.js meta.decorator variable.other.readwrite","source.js meta.decorator entity.name.function"],settings:{foreground:"#D08770"}},{name:"[JavaScript] Meta Object-Literal Key",scope:"source.js meta.object-literal.key",settings:{foreground:"#88C0D0"}},{name:"[JavaScript](JSDoc) Storage Type Class",scope:"source.js storage.type.class.jsdoc",settings:{foreground:"#8FBCBB"}},{name:"[JavaScript] String Template Literals Punctuation",scope:["source.js string.quoted.template punctuation.quasi.element.begin","source.js string.quoted.template punctuation.quasi.element.end","source.js string.template punctuation.definition.template-expression"],settings:{foreground:"#81A1C1"}},{name:"[JavaScript] Interpolated String Template Punctuation Functions",scope:"source.js string.quoted.template meta.method-call.with-arguments",settings:{foreground:"#ECEFF4"}},{name:"[JavaScript] String Template Literal Variable",scope:["source.js string.template meta.template.expression support.variable.property","source.js string.template meta.template.expression variable.other.object"],settings:{foreground:"#D8DEE9"}},{name:"[JavaScript] Support Type Primitive",scope:"source.js support.type.primitive",settings:{foreground:"#81A1C1"}},{name:"[JavaScript] Variable Other Object",scope:"source.js variable.other.object",settings:{foreground:"#D8DEE9"}},{name:"[JavaScript] Variable Other Read-Write Alias",scope:"source.js variable.other.readwrite.alias",settings:{foreground:"#8FBCBB"}},{name:"[JavaScript] Parentheses in Template Strings",scope:["source.js meta.embedded.line meta.brace.square","source.js meta.embedded.line meta.brace.round","source.js string.quoted.template meta.brace.square","source.js string.quoted.template meta.brace.round"],settings:{foreground:"#ECEFF4"}},{name:"[HTML] Constant Character Entity",scope:"text.html.basic constant.character.entity.html",settings:{foreground:"#EBCB8B"}},{name:"[HTML] Constant Other Inline-Data",scope:"text.html.basic constant.other.inline-data",settings:{foreground:"#D08770",fontStyle:"italic"}},{name:"[HTML] Meta Tag SGML Doctype",scope:"text.html.basic meta.tag.sgml.doctype",settings:{foreground:"#5E81AC"}},{name:"[HTML] Punctuation Definition Entity",scope:"text.html.basic punctuation.definition.entity",settings:{foreground:"#81A1C1"}},{name:"[INI] Entity Name Section Group-Title",scope:"source.properties entity.name.section.group-title.ini",settings:{foreground:"#88C0D0"}},{name:"[INI] Punctuation Separator Key-Value",scope:"source.properties punctuation.separator.key-value.ini",settings:{foreground:"#81A1C1"}},{name:"[Markdown] Markup Fenced Code Block",scope:["text.html.markdown markup.fenced_code.block","text.html.markdown markup.fenced_code.block punctuation.definition"],settings:{foreground:"#8FBCBB"}},{name:"[Markdown] Markup Heading",scope:"markup.heading",settings:{foreground:"#88C0D0"}},{name:"[Markdown] Markup Inline",scope:["text.html.markdown markup.inline.raw","text.html.markdown markup.inline.raw punctuation.definition.raw"],settings:{foreground:"#8FBCBB"}},{name:"[Markdown] Markup Italic",scope:"text.html.markdown markup.italic",settings:{fontStyle:"italic"}},{name:"[Markdown] Markup Link",scope:"text.html.markdown markup.underline.link",settings:{fontStyle:"underline"}},{name:"[Markdown] Markup List Numbered/Unnumbered",scope:"text.html.markdown beginning.punctuation.definition.list",settings:{foreground:"#81A1C1"}},{name:"[Markdown] Markup Quote Punctuation Definition",scope:"text.html.markdown beginning.punctuation.definition.quote",settings:{foreground:"#8FBCBB"}},{name:"[Markdown] Markup Quote Punctuation Definition",scope:"text.html.markdown markup.quote",settings:{foreground:"#616E88"}},{name:"[Markdown] Markup Math Constant",scope:"text.html.markdown constant.character.math.tex",settings:{foreground:"#81A1C1"}},{name:"[Markdown] Markup Math Definition Marker",scope:["text.html.markdown punctuation.definition.math.begin","text.html.markdown punctuation.definition.math.end"],settings:{foreground:"#5E81AC"}},{name:"[Markdown] Markup Math Function Definition Marker",scope:"text.html.markdown punctuation.definition.function.math.tex",settings:{foreground:"#88C0D0"}},{name:"[Markdown] Markup Math Operator",scope:"text.html.markdown punctuation.math.operator.latex",settings:{foreground:"#81A1C1"}},{name:"[Markdown] Punctuation Definition Heading",scope:"text.html.markdown punctuation.definition.heading",settings:{foreground:"#81A1C1"}},{name:"[Markdown] Punctuation Definition Constant/String",scope:["text.html.markdown punctuation.definition.constant","text.html.markdown punctuation.definition.string"],settings:{foreground:"#81A1C1"}},{name:"[Markdown] String Other Link Description/Title",scope:["text.html.markdown constant.other.reference.link","text.html.markdown string.other.link.description","text.html.markdown string.other.link.title"],settings:{foreground:"#88C0D0"}},{name:"[Perl] Perl Sigils",scope:"source.perl punctuation.definition.variable",settings:{foreground:"#D8DEE9"}},{name:"[PHP] Meta Function-Call Object",scope:["source.php meta.function-call","source.php meta.function-call.object"],settings:{foreground:"#88C0D0"}},{name:"[Python] Decorator",scope:["source.python entity.name.function.decorator","source.python meta.function.decorator support.type"],settings:{foreground:"#D08770"}},{name:"[Python] Function Call",scope:"source.python meta.function-call.generic",settings:{foreground:"#88C0D0"}},{name:"[Python] Support Type",scope:"source.python support.type",settings:{foreground:"#88C0D0"}},{name:"[Python] Function Parameter",scope:["source.python variable.parameter.function.language"],settings:{foreground:"#D8DEE9"}},{name:"[Python] Function Parameter Special",scope:["source.python meta.function.parameters variable.parameter.function.language.special.self"],settings:{foreground:"#81A1C1"}},{name:"[Rust] Entity types",scope:"source.rust entity.name.type",settings:{foreground:"#8FBCBB"}},{name:"[Rust] Macro",scope:"source.rust meta.macro entity.name.function",settings:{fontStyle:"bold",foreground:"#88C0D0"}},{name:"[Rust] Attributes",scope:["source.rust meta.attribute","source.rust meta.attribute punctuation","source.rust meta.attribute keyword.operator"],settings:{foreground:"#5E81AC"}},{name:"[Rust] Traits",scope:"source.rust entity.name.type.trait",settings:{fontStyle:"bold"}},{name:"[Rust] Interpolation Bracket Curly",scope:"source.rust punctuation.definition.interpolation",settings:{foreground:"#EBCB8B"}},{name:"[SCSS] Punctuation Definition Interpolation Bracket Curly",scope:["source.css.scss punctuation.definition.interpolation.begin.bracket.curly","source.css.scss punctuation.definition.interpolation.end.bracket.curly"],settings:{foreground:"#81A1C1"}},{name:"[SCSS] Variable Interpolation",scope:"source.css.scss variable.interpolation",settings:{foreground:"#D8DEE9",fontStyle:"italic"}},{name:"[TypeScript] Decorators",scope:["source.ts punctuation.decorator","source.ts meta.decorator variable.other.readwrite","source.ts meta.decorator entity.name.function","source.tsx punctuation.decorator","source.tsx meta.decorator variable.other.readwrite","source.tsx meta.decorator entity.name.function"],settings:{foreground:"#D08770"}},{name:"[TypeScript] Object-literal keys",scope:["source.ts meta.object-literal.key","source.tsx meta.object-literal.key"],settings:{foreground:"#D8DEE9"}},{name:"[TypeScript] Object-literal functions",scope:["source.ts meta.object-literal.key entity.name.function","source.tsx meta.object-literal.key entity.name.function"],settings:{foreground:"#88C0D0"}},{name:"[TypeScript] Type/Class",scope:["source.ts support.class","source.ts support.type","source.ts entity.name.type","source.ts entity.name.class","source.tsx support.class","source.tsx support.type","source.tsx entity.name.type","source.tsx entity.name.class"],settings:{foreground:"#8FBCBB"}},{name:"[TypeScript] Static Class Support",scope:["source.ts support.constant.math","source.ts support.constant.dom","source.ts support.constant.json","source.tsx support.constant.math","source.tsx support.constant.dom","source.tsx support.constant.json"],settings:{foreground:"#8FBCBB"}},{name:"[TypeScript] Variables",scope:["source.ts support.variable","source.tsx support.variable"],settings:{foreground:"#D8DEE9"}},{name:"[TypeScript] Parentheses in Template Strings",scope:["source.ts meta.embedded.line meta.brace.square","source.ts meta.embedded.line meta.brace.round","source.tsx meta.embedded.line meta.brace.square","source.tsx meta.embedded.line meta.brace.round"],settings:{foreground:"#ECEFF4"}},{name:"[XML] Entity Name Tag Namespace",scope:"text.xml entity.name.tag.namespace",settings:{foreground:"#8FBCBB"}},{name:"[XML] Keyword Other Doctype",scope:"text.xml keyword.other.doctype",settings:{foreground:"#5E81AC"}},{name:"[XML] Meta Tag Preprocessor",scope:"text.xml meta.tag.preprocessor entity.name.tag",settings:{foreground:"#5E81AC"}},{name:"[XML] Entity Name Tag Namespace",scope:["text.xml string.unquoted.cdata","text.xml string.unquoted.cdata punctuation.definition.string"],settings:{foreground:"#D08770",fontStyle:"italic"}},{name:"[YAML] Entity Name Tag",scope:"source.yaml entity.name.tag",settings:{foreground:"#8FBCBB"}}]},autoImport:!0,showCopyButton:!0,enableSpa:!0,skipLanguages:[],filepath:"/Users/targeral/github/targeral-modern-js/website/module-tools/docs/en/guide/advance/build-umd.mdx"},g=void 0,C=[{id:"third-party-dependency-handling-for-umd-products",text:"Third-party dependency handling for umd products",depth:2},{id:"changing-the-name-of-a-global-variable-in-a-project",text:"Changing the name of a global variable in a project",depth:2}],f="Build umd products";function p(s){const o=Object.assign({h1:"h1",a:"a",p:"p",strong:"strong",ul:"ul",li:"li",h2:"h2",code:"code"},s.components);return n||l("CH",!1),n.Code||l("CH.Code",!0),n.CodeSlot||l("CH.CodeSlot",!0),n.Spotlight||l("CH.Spotlight",!0),t(r,{children:[t(o.h1,{id:"build-umd-products",children:[e(o.a,{className:"header-anchor","aria-hidden":"true",href:"#build-umd-products",children:"#"}),"Build umd products"]}),`
2
+ `,t(o.p,{children:["The full name of umd is ",e(o.strong,{children:"Universal Module Definition"}),", and JS files in this format can run in multiple runtime environments: the"]}),`
3
+ `,t(o.ul,{children:[`
4
+ `,e(o.li,{children:"Browser environment: module loading based on AMD specification"}),`
5
+ `,e(o.li,{children:"Node.js environment: module loading based on CommonJS"}),`
6
+ `,e(o.li,{children:"Other cases: mount the module on a global object."}),`
7
+ `]}),`
8
+ `,e(o.p,{children:"We can therefore specify the build product of the project as an umd product in the following way:"}),`
9
+ `,e(n.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"defineConfig",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"format",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"umd",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"ts"},annotations:[]}]}),`
10
+ `,t(o.h2,{id:"third-party-dependency-handling-for-umd-products",children:[e(o.a,{className:"header-anchor","aria-hidden":"true",href:"#third-party-dependency-handling-for-umd-products",children:"#"}),"Third-party dependency handling for umd products"]}),`
11
+ `,t(o.p,{children:["In the ",e(o.a,{href:"/en/guide/advance/external-dependency.html",children:"[How to handle third-party dependencies]"})," chapter, we know that we can control whether or not the project packages third-party dependencies via the ",e(o.a,{href:"/en/api/build-config.html#autoexternal",children:e(o.code,{children:"autoExternals"})})," and ",e(o.a,{href:"/en/api/build-config.html#externals",children:e(o.code,{children:"externals"})}),` APIs.
12
+ So when building umd products, we can also use it like this:`]}),`
13
+ `,t(n.Spotlight,{codeConfig:c,editorSteps:[{northPanel:{tabs:["package.json"],active:"package.json",heightRatio:1},files:[{name:"package.json",focus:"",code:{lines:[{tokens:[{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"dependencies",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"react",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"^17",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"//...other dependencies",props:{style:{color:"#616E88"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"json"},annotations:[]}]},{northPanel:{tabs:["package.json"],active:"package.json",heightRatio:1},files:[{name:"package.json",focus:"",code:{lines:[{tokens:[{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"dependencies",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"react",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"^17",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"//...other dependencies",props:{style:{color:"#616E88"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"json"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:["package.json",""],active:"",heightRatio:1},files:[{name:"package.json",focus:"",code:{lines:[{tokens:[{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"dependencies",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"react",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"^17",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"//...other dependencies",props:{style:{color:"#616E88"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"json"},annotations:[]},{name:"",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"defineConfig",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"format",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"umd",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"autoExternal",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"false",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"externals",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" [",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"react",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"ts"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:["package.json","src/index.ts"],active:"src/index.ts",heightRatio:1},files:[{name:"package.json",focus:"",code:{lines:[{tokens:[{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"dependencies",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"react",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"^17",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"//...other dependencies",props:{style:{color:"#616E88"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"json"},annotations:[]},{name:"src/index.ts",focus:"",code:{lines:[{tokens:[{content:"import",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"React",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"from",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"react",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"console",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"info",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"React",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:["package.json","dist/index.js"],active:"dist/index.js",heightRatio:1},files:[{name:"package.json",focus:"",code:{lines:[{tokens:[{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"dependencies",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"react",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"^17",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"//...other dependencies",props:{style:{color:"#616E88"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"json"},annotations:[]},{name:"dist/index.js",focus:"1:7",code:{lines:[{tokens:[{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"function",props:{style:{color:"#81A1C1"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"global",props:{style:{color:"#D8DEE9"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"factory",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"if",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}},{content:"typeof",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"module",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"===",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"object",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"&&",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"typeof",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"module",props:{style:{color:"#8FBCBB"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"exports",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"===",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"object",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:") ",props:{style:{color:"#D8DEE9FF"}}},{content:"factory",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"exports",props:{style:{color:"#8FBCBB"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"require",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"react",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"))",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"else",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"if",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}},{content:"typeof",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"define",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"===",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"function",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"&&",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"define",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"amd",props:{style:{color:"#D8DEE9"}}},{content:") ",props:{style:{color:"#D8DEE9FF"}}},{content:"define",props:{style:{color:"#88C0D0"}}},{content:"([",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"exports",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"react",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"factory",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"else",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"if",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}},{content:"global",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"typeof",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"globalThis",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"!==",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"undefined",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"?",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"globalThis",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"global",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"||",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"self",props:{style:{color:"#D8DEE9"}}},{content:") ",props:{style:{color:"#D8DEE9FF"}}},{content:"factory",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"global",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"index",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{},",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"global",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"react",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")(",props:{style:{color:"#D8DEE9FF"}}},{content:"this",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"function",props:{style:{color:"#81A1C1"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"exports",props:{style:{color:"#D8DEE9"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"_react",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"use strict",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"Object",props:{style:{color:"#8FBCBB"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"defineProperty",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"exports",props:{style:{color:"#8FBCBB"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"__esModule",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"value",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"true",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"_react",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"/*#__PURE__*/",props:{style:{color:"#616E88"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"_interopRequireDefault",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"_react",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"function",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"_interopRequireDefault",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"obj",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"return",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"obj",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"&&",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"obj",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"__esModule",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"?",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"obj",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#88C0D0"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"obj",props:{style:{color:"#D8DEE9"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"console",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"info",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"_react",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"default",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}],southPanel:void 0}],children:[e(r,{children:e(n.CodeSlot,{})}),t(r,{children:[t(o.p,{children:["If the project depends on ",e(o.code,{children:"react"}),"."]}),e(n.CodeSlot,{})]}),t(r,{children:[t(o.p,{children:[e(o.code,{children:"modern.config.ts"}),"."]}),e(n.CodeSlot,{})]}),t(r,{children:[t(o.p,{children:["When a ",e(o.code,{children:"react"})," dependency is used in the source code."]}),e(n.CodeSlot,{})]}),t(r,{children:[t(o.p,{children:["The ",e(o.code,{children:"react"})," code is not packaged into the product at this point."]}),e(n.CodeSlot,{})]})]}),`
14
+ `,t(o.p,{children:["We know from the above example that when using the ",e(o.code,{children:"autoExternal"})," and ",e(o.code,{children:"externals"})," APIs."]}),`
15
+ `,t(o.ul,{children:[`
16
+ `,t(o.li,{children:["In a Node.js environment, you can get the react dependency with ",e(o.code,{children:"require('react')"}),"."]}),`
17
+ `,t(o.li,{children:["In a browser environment, you can get the react dependency via ",e(o.code,{children:"global.react"}),"."]}),`
18
+ `]}),`
19
+ `,t(o.p,{children:["However, in the browser environment, when getting third-party dependencies, ",e(o.strong,{children:"global variable names are not necessarily identical to the dependency names"}),", so you have to use the ",e(o.a,{href:"/en/api/build-config.html#umdglobals",children:e(o.code,{children:"buildConfig.umdGlobals"})})," API."]}),`
20
+ `,t(o.p,{children:["Again using the previous example, when the ",e(o.code,{children:"react"})," dependency exists in the browser environment as a ",e(o.code,{children:"windows.React"})," or ",e(o.code,{children:"global.React"})," global variable, then:"]}),`
21
+ `,t(n.Spotlight,{codeConfig:c,editorSteps:[{northPanel:{tabs:["package.json"],active:"package.json",heightRatio:1},files:[{name:"package.json",focus:"",code:{lines:[{tokens:[{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"devDependencies",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"react",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"^17",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"json"},annotations:[]}]},{northPanel:{tabs:["package.json"],active:"package.json",heightRatio:1},files:[{name:"package.json",focus:"",code:{lines:[{tokens:[{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"devDependencies",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"react",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"^17",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"json"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:["package.json",""],active:"",heightRatio:1},files:[{name:"package.json",focus:"",code:{lines:[{tokens:[{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"devDependencies",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"react",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"^17",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"json"},annotations:[]},{name:"",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"defineConfig",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"format",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"umd",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"umdGlobals",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"react",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"React",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"},",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"ts"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:["package.json","src/index.ts"],active:"src/index.ts",heightRatio:1},files:[{name:"package.json",focus:"",code:{lines:[{tokens:[{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"devDependencies",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"react",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"^17",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"json"},annotations:[]},{name:"src/index.ts",focus:"",code:{lines:[{tokens:[{content:"import",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"React",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"from",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"react",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"console",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"info",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"React",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"tsx"},annotations:[]}],southPanel:void 0},{northPanel:{tabs:["package.json","dist/index.js"],active:"dist/index.js",heightRatio:1},files:[{name:"package.json",focus:"",code:{lines:[{tokens:[{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"devDependencies",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"react",props:{style:{color:"#8FBCBB"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"^17",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"json"},annotations:[]},{name:"dist/index.js",focus:"7:12",code:{lines:[{tokens:[{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"function",props:{style:{color:"#81A1C1"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"global",props:{style:{color:"#D8DEE9"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"factory",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"if",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}},{content:"typeof",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"module",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"===",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"object",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"&&",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"typeof",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"module",props:{style:{color:"#8FBCBB"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"exports",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"===",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"object",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:") ",props:{style:{color:"#D8DEE9FF"}}},{content:"factory",props:{style:{color:"#88C0D0"}}},{content:"()",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"else",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"if",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}},{content:"typeof",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"define",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"===",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"function",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"&&",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"define",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"amd",props:{style:{color:"#D8DEE9"}}},{content:") ",props:{style:{color:"#D8DEE9FF"}}},{content:"define",props:{style:{color:"#88C0D0"}}},{content:"([]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"factory",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"else",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"if",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}},{content:"global",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"typeof",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"globalThis",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"!==",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"undefined",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"?",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"globalThis",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"global",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"||",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"self",props:{style:{color:"#D8DEE9"}}},{content:") ",props:{style:{color:"#D8DEE9FF"}}},{content:"factory",props:{style:{color:"#88C0D0"}}},{content:"()",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")(",props:{style:{color:"#D8DEE9FF"}}},{content:"this",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"function",props:{style:{color:"#81A1C1"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#ECEFF4"}}},{content:"// ...",props:{style:{color:"#616E88"}}}]},{tokens:[{content:" ",props:{style:{color:"#ECEFF4"}}},{content:"// libuild:globals:react",props:{style:{color:"#616E88"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"var",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"require_react",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"__commonJS",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"libuild:globals:react",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"exports",props:{style:{color:"#D8DEE9"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"module1",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"module1",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"exports",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"Function",props:{style:{color:"#8FBCBB"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"return this",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:")()[",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"React",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"]",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#ECEFF4"}}},{content:"// src/index.ts",props:{style:{color:"#616E88"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"var",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"import_react",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"__toESM",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"require_react",props:{style:{color:"#88C0D0"}}},{content:"())",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"console",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"info",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"import_react",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"default",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}],southPanel:void 0}],children:[e(r,{children:e(n.CodeSlot,{})}),t(r,{children:[t(o.p,{children:["If the project depends on ",e(o.code,{children:"react"}),"."]}),e(n.CodeSlot,{})]}),t(r,{children:[t(o.p,{children:[e(o.code,{children:"modern.config.ts"})," config file\u3002"]}),e(n.CodeSlot,{})]}),t(r,{children:[t(o.p,{children:["When a ",e(o.code,{children:"react"})," dependency is used in the source code."]}),e(n.CodeSlot,{})]}),t(r,{children:[e(o.p,{children:"At this point we will see the product code like this."}),e(n.CodeSlot,{})]})]}),`
22
+ `,t(o.p,{children:["The project can then run in the browser and use the ",e(o.code,{children:"React"})," variables that exist on the global object."]}),`
23
+ `,t(o.h2,{id:"changing-the-name-of-a-global-variable-in-a-project",children:[e(o.a,{className:"header-anchor","aria-hidden":"true",href:"#changing-the-name-of-a-global-variable-in-a-project",children:"#"}),"Changing the name of a global variable in a project"]}),`
24
+ `,t(o.p,{children:["When we package the following code into an umd product and run it in the browser, we can use the module via ",e(o.code,{children:"window.index"}),"."]}),`
25
+ `,e(n.Code,{codeConfig:c,northPanel:{tabs:["./src/index.ts"],active:"./src/index.ts",heightRatio:1},files:[{name:"./src/index.ts",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"()",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=>",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"console",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"info",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"hello world",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}}]}],lang:"ts"},annotations:[]}]}),`
26
+ `,e(o.p,{children:"** By default, the name of the source file is used as the name of the module's global variable in the browser. **For the above example, the product would read as follows:"}),`
27
+ `,e(n.Code,{codeConfig:c,northPanel:{tabs:["./dist/index.js"],active:"./dist/index.js",heightRatio:1},files:[{name:"./dist/index.js",focus:"6:6",code:{lines:[{tokens:[{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"function",props:{style:{color:"#81A1C1"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"global",props:{style:{color:"#D8DEE9"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"factory",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"if",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}},{content:"typeof",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"module",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"===",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"object",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"&&",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"typeof",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"module",props:{style:{color:"#8FBCBB"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"exports",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"===",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"object",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:") ",props:{style:{color:"#D8DEE9FF"}}},{content:"factory",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"exports",props:{style:{color:"#8FBCBB"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"else",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"if",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}},{content:"typeof",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"define",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"===",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"function",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"&&",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"define",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"amd",props:{style:{color:"#D8DEE9"}}},{content:") ",props:{style:{color:"#D8DEE9FF"}}},{content:"define",props:{style:{color:"#88C0D0"}}},{content:"([",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"exports",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"factory",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"else",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"if",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}},{content:"global",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"typeof",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"globalThis",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"!==",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"undefined",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"?",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"globalThis",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"global",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"||",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"self",props:{style:{color:"#D8DEE9"}}},{content:") ",props:{style:{color:"#D8DEE9FF"}}},{content:"factory",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"global",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"index",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")(",props:{style:{color:"#D8DEE9FF"}}},{content:"this",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"function",props:{style:{color:"#81A1C1"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"exports",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#ECEFF4"}}},{content:"//...",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]}),`
28
+ `,t(o.p,{children:["If you need to modify it, you need to use the ",e(o.a,{href:"/en/api/build-config.html#umdmodulename",children:e(o.code,{children:"buildConfig.umdModuleName"})})," API."]}),`
29
+ `,e(o.p,{children:"When this API is used:"}),`
30
+ `,e(n.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"export",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"default",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"defineConfig",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"buildConfig",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"format",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"umd",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"umdModuleName",props:{style:{color:"#D8DEE9"}}},{content:":",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:"myLib",props:{style:{color:"#A3BE8C"}}},{content:"'",props:{style:{color:"#ECEFF4"}}},{content:",",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"}",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"ts"},annotations:[]}]}),`
31
+ `,e(o.p,{children:"The construction products at this point are:"}),`
32
+ `,e(n.Code,{codeConfig:c,northPanel:{tabs:["./dist/index.js"],active:"./dist/index.js",heightRatio:1},files:[{name:"./dist/index.js",focus:"6:6",code:{lines:[{tokens:[{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"function",props:{style:{color:"#81A1C1"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"global",props:{style:{color:"#D8DEE9"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"factory",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"if",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}},{content:"typeof",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"module",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"===",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"object",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"&&",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"typeof",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"module",props:{style:{color:"#8FBCBB"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"exports",props:{style:{color:"#8FBCBB"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"===",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"object",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:") ",props:{style:{color:"#D8DEE9FF"}}},{content:"factory",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"exports",props:{style:{color:"#8FBCBB"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"else",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"if",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}},{content:"typeof",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"define",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"===",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"function",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"&&",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"define",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"amd",props:{style:{color:"#D8DEE9"}}},{content:") ",props:{style:{color:"#D8DEE9FF"}}},{content:"define",props:{style:{color:"#88C0D0"}}},{content:"([",props:{style:{color:"#D8DEE9FF"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"exports",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ]",props:{style:{color:"#D8DEE9FF"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"factory",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"else",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"if",props:{style:{color:"#81A1C1"}}},{content:" (",props:{style:{color:"#D8DEE9FF"}}},{content:"global",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"typeof",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"globalThis",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"!==",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:"undefined",props:{style:{color:"#A3BE8C"}}},{content:'"',props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"?",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"globalThis",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:":",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"global",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"||",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"self",props:{style:{color:"#D8DEE9"}}},{content:") ",props:{style:{color:"#D8DEE9FF"}}},{content:"factory",props:{style:{color:"#88C0D0"}}},{content:"(",props:{style:{color:"#D8DEE9FF"}}},{content:"global",props:{style:{color:"#D8DEE9"}}},{content:".",props:{style:{color:"#ECEFF4"}}},{content:"myLib",props:{style:{color:"#D8DEE9"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"=",props:{style:{color:"#81A1C1"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")(",props:{style:{color:"#D8DEE9FF"}}},{content:"this",props:{style:{color:"#81A1C1"}}},{content:",",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"function",props:{style:{color:"#81A1C1"}}},{content:"(",props:{style:{color:"#ECEFF4"}}},{content:"exports",props:{style:{color:"#D8DEE9"}}},{content:")",props:{style:{color:"#ECEFF4"}}},{content:" ",props:{style:{color:"#D8DEE9FF"}}},{content:"{",props:{style:{color:"#ECEFF4"}}}]},{tokens:[{content:" ",props:{style:{color:"#ECEFF4"}}},{content:"//...",props:{style:{color:"#616E88"}}}]},{tokens:[{content:"}",props:{style:{color:"#ECEFF4"}}},{content:")",props:{style:{color:"#D8DEE9FF"}}},{content:";",props:{style:{color:"#81A1C1"}}}]}],lang:"js"},annotations:[]}]})]})}function m(s={}){const{wrapper:o}=s.components||{};return o?e(o,Object.assign({},s,{children:e(p,s)})):p(s)}function l(s,o){throw new Error("Expected "+(o?"component":"object")+" `"+s+"` to be defined: you likely forgot to import, pass, or provide it.")}const h="2022/12/16 11:50:03",b=`# Build umd products
33
+
34
+ The full name of umd is **Universal Module Definition**, and JS files in this format can run in multiple runtime environments: the
35
+
36
+ * Browser environment: module loading based on AMD specification
37
+ * Node.js environment: module loading based on CommonJS
38
+ * Other cases: mount the module on a global object.
39
+
40
+ We can therefore specify the build product of the project as an umd product in the following way:
41
+
42
+ \`\`\` ts
43
+ export default defineConfig({
44
+ buildConfig: {
45
+ format: 'umd',
46
+ }
47
+ });
48
+ \`\`\`
49
+
50
+ ## Third-party dependency handling for umd products
51
+
52
+ In the [[How to handle third-party dependencies]](/en/guide/advance/external-dependency) chapter, we know that we can control whether or not the project packages third-party dependencies via the [\`autoExternals\`](/en/api/build-config#autoexternal) and [\`externals\`](/en/api/build-config#externals) APIs.
53
+ So when building umd products, we can also use it like this:
54
+
55
+ <CH.Spotlight>
56
+
57
+ \`\`\`json package.json
58
+ {
59
+ "dependencies": {
60
+ "react": "^17"
61
+ //...other dependencies
62
+ }
63
+ }
64
+ \`\`\`
65
+
66
+ ---
67
+
68
+ If the project depends on \`react\`.
69
+
70
+ \`\`\`json package.json
71
+ {
72
+ "dependencies": {
73
+ "react": "^17"
74
+ //...other dependencies
75
+ }
76
+ }
77
+ \`\`\`
78
+
79
+ ---
80
+
81
+ \`modern.config.ts\`.
82
+
83
+ \`\`\` ts
84
+ export default defineConfig({
85
+ buildConfig: {
86
+ format: 'umd',
87
+ autoExternal: false,
88
+ externals: ['react'],
89
+ }
90
+ });
91
+ \`\`\`
92
+
93
+ ---
94
+
95
+ When a \`react\` dependency is used in the source code.
96
+
97
+ \`\`\` tsx src/index.ts
98
+ import React from "react";
99
+ console.info(React);
100
+ \`\`\`
101
+
102
+ ---
103
+
104
+ The \`react\` code is not packaged into the product at this point.
105
+
106
+ \`\`\` js dist/index.js focus=1:7
107
+ (function(global, factory) {
108
+ if (typeof module === "object" && typeof module.exports === "object") factory(exports, require("react"));
109
+ else if (typeof define === "function" && define.amd) define([
110
+ "exports",
111
+ "react"
112
+ ], factory);
113
+ else if (global = typeof globalThis !== "undefined" ? globalThis : global || self) factory(global.index = {}, global.react);
114
+ })(this, function(exports, _react) {
115
+ "use strict";
116
+ Object.defineProperty(exports, "__esModule", {
117
+ value: true
118
+ });
119
+ _react = /*#__PURE__*/ _interopRequireDefault(_react);
120
+ function _interopRequireDefault(obj) {
121
+ return obj && obj.__esModule ? obj : {
122
+ default: obj
123
+ };
124
+ }
125
+ console.info(_react.default);
126
+ });
127
+ \`\`\`
128
+
129
+ </CH.Spotlight>
130
+
131
+ We know from the above example that when using the \`autoExternal\` and \`externals\` APIs.
132
+
133
+ * In a Node.js environment, you can get the react dependency with \`require('react')\`.
134
+ * In a browser environment, you can get the react dependency via \`global.react\`.
135
+
136
+ However, in the browser environment, when getting third-party dependencies, **global variable names are not necessarily identical to the dependency names**, so you have to use the [\`buildConfig.umdGlobals\`](/en/api/build-config#umdglobals) API.
137
+
138
+ Again using the previous example, when the \`react\` dependency exists in the browser environment as a \`windows.React\` or \`global.React\` global variable, then:
139
+
140
+
141
+ <CH.Spotlight>
142
+
143
+ \`\`\`json package.json
144
+ {
145
+ "devDependencies": {
146
+ "react": "^17"
147
+ }
148
+ }
149
+ \`\`\`
150
+
151
+ ---
152
+
153
+ If the project depends on \`react\`.
154
+
155
+ \`\`\`json package.json
156
+ {
157
+ "devDependencies": {
158
+ "react": "^17"
159
+ }
160
+ }
161
+ \`\`\`
162
+
163
+ ---
164
+
165
+ \`modern.config.ts\` config file\u3002
166
+
167
+ \`\`\` ts
168
+ export default defineConfig({
169
+ buildConfig: {
170
+ format: 'umd',
171
+ umdGlobals: {
172
+ react: 'React',
173
+ },
174
+ }
175
+ });
176
+ \`\`\`
177
+
178
+ ---
179
+
180
+ When a \`react\` dependency is used in the source code.
181
+
182
+ \`\`\` tsx src/index.ts
183
+ import React from "react";
184
+ console.info(React);
185
+ \`\`\`
186
+
187
+ ---
188
+
189
+ At this point we will see the product code like this.
190
+
191
+ \`\`\` js dist/index.js focus=7:12
192
+ (function(global, factory) {
193
+ if (typeof module === "object" && typeof module.exports === "object") factory();
194
+ else if (typeof define === "function" && define.amd) define([], factory);
195
+ else if (global = typeof globalThis !== "undefined" ? globalThis : global || self) factory();
196
+ })(this, function() {
197
+ // ...
198
+ // libuild:globals:react
199
+ var require_react = __commonJS({
200
+ "libuild:globals:react" (exports, module1) {
201
+ module1.exports = Function("return this")()["React"];
202
+ }
203
+ });
204
+ // src/index.ts
205
+ var import_react = __toESM(require_react());
206
+ console.info(import_react.default);
207
+ });
208
+ \`\`\`
209
+
210
+ </CH.Spotlight>
211
+
212
+ The project can then run in the browser and use the \`React\` variables that exist on the global object.
213
+
214
+
215
+ ## Changing the name of a global variable in a project
216
+
217
+ When we package the following code into an umd product and run it in the browser, we can use the module via \`window.index\`.
218
+
219
+ \`\`\` ts ./src/index.ts
220
+ export default () => {
221
+ console.info('hello world');
222
+ }
223
+ \`\`\`
224
+
225
+ ** By default, the name of the source file is used as the name of the module's global variable in the browser. **For the above example, the product would read as follows:
226
+
227
+ \`\`\` js ./dist/index.js focus=6:6
228
+ (function(global, factory) {
229
+ if (typeof module === "object" && typeof module.exports === "object") factory(exports);
230
+ else if (typeof define === "function" && define.amd) define([
231
+ "exports"
232
+ ], factory);
233
+ else if (global = typeof globalThis !== "undefined" ? globalThis : global || self) factory(global.index = {});
234
+ })(this, function(exports) {
235
+ //...
236
+ });
237
+ \`\`\`
238
+
239
+ If you need to modify it, you need to use the [\`buildConfig.umdModuleName\`](/en/api/build-config#umdmodulename) API.
240
+
241
+ When this API is used:
242
+
243
+ \`\`\` ts
244
+ export default defineConfig({
245
+ buildConfig: {
246
+ format: 'umd',
247
+ umdModuleName: 'myLib',
248
+ }
249
+ });
250
+ \`\`\`
251
+
252
+ The construction products at this point are:
253
+
254
+ \`\`\` js ./dist/index.js focus=6:6
255
+ (function(global, factory) {
256
+ if (typeof module === "object" && typeof module.exports === "object") factory(exports);
257
+ else if (typeof define === "function" && define.amd) define([
258
+ "exports"
259
+ ], factory);
260
+ else if (global = typeof globalThis !== "undefined" ? globalThis : global || self) factory(global.myLib = {});
261
+ })(this, function(exports) {
262
+ //...
263
+ });
264
+ \`\`\`
265
+
266
+
267
+
268
+
269
+
270
+
271
+
272
+
273
+ `;export{n as CH,c as chCodeConfig,b as content,m as default,g as frontmatter,h as lastUpdatedTime,f as title,C as toc};