npm - @modern-js/module-tools-docs - Versions diffs - 2.59.0 → 2.60.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (207) hide show

package/doc_build/guide/faq/build.html ADDED Viewed

@@ -0,0 +1,234 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="generator" content="Rspress v1.31.0">
+  <title data-rh="true">构建相关问题 - Modern.js Module</title><meta data-rh="true" name="description" content="模块工程解决方案"/>
+<script>{;const saved = localStorage.getItem('rspress-theme-appearance');const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;const isDark = !saved || saved === 'auto' ? preferDark : saved === 'dark';document.documentElement.classList.toggle('dark', isDark);document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';}</script><link rel="icon" href="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/logo-1x-0104.png"><script defer src="/module-tools/static/js/styles.3f5a6140.js"></script><script defer src="/module-tools/static/js/lib-react.a93218f7.js"></script><script defer src="/module-tools/static/js/lib-router.f8d11890.js"></script><script defer src="/module-tools/static/js/490.a066dbc0.js"></script><script defer src="/module-tools/static/js/index.6a5d779d.js"></script><link href="/module-tools/static/css/styles.0b88df3a.css" rel="stylesheet"></head>
+<body >
+  <div id="root"><div><div class="navContainer_f6cde rspress-nav px-6 " style="position:sticky"><div class="container_f6cde flex justify-between items-center h-full"><div class="navBarTitle_f6cde"><a href="/module-tools/" class="flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><span>Modern.js Module</span></a></div><div class="flex flex-1 justify-end items-center"><div class="rightNav_f6cde"><div class="flex sm:flex-1 items-center sm:pl-4 sm:pr-2"><div class="rspress-nav-search-button navSearchButton_6e282"><button><svg width="18" height="18" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9Z"></path></svg><p class="searchWord_6e282">Search Docs</p><div style="opacity:0"><span></span><span>K</span></div></button></div><div class="mobileNavSearchButton_6e282"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9Z"></path></svg></div></div><div class="rspress-nav-menu menu h-14"><a class="link_03735  cursor-pointer" target="" href="/module-tools/guide/intro/welcome.html"><div class="rspress-nav-menu-item singleItem_f6cde activeItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">指南</div></a><a class="link_03735  cursor-pointer" target="" href="/module-tools/api/index.html"><div class="rspress-nav-menu-item singleItem_f6cde  text-sm font-medium mx-1.5 px-3 py-2 flex items-center">API</div></a><a class="link_03735  cursor-pointer" target="" href="/module-tools/plugins/guide/getting-started.html"><div class="rspress-nav-menu-item singleItem_f6cde  text-sm font-medium mx-1.5 px-3 py-2 flex items-center">插件</div></a><div class="mx-3 last:mr-0"><div class="relative flex-center h-14"><button class="rspress-nav-menu-group-button flex-center items-center font-medium text-sm text-text-1 hover:text-text-2 transition-colors duration-200"><span class="text-sm font-medium flex" style="margin-right:2px">v2.60.1</span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div class="rspress-nav-menu-group-content absolute mx-0.8 transition-opacity duration-300" style="opacity:0;visibility:hidden;right:0;top:52px"><div class="p-3 pr-2 w-full h-full max-h-100vh whitespace-nowrap" style="box-shadow:var(--rp-shadow-3);z-index:100;border:1px solid var(--rp-c-divider-light);border-radius:var(--rp-radius-large);background:var(--rp-c-bg)"><div><div class="font-medium my-1"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="link_03735 "><div class="rounded-2xl hover:bg-mute" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><div class="flex"><span>更新日志</span></div></div></a></div></div><div><div class="font-medium my-1"><a href="https://modernjs.dev/en/community/contributing-guide.html" target="_blank" rel="noopener noreferrer" class="link_03735 "><div class="rounded-2xl hover:bg-mute" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><div class="flex"><span>贡献指南</span></div></div></a></div></div></div></div></div></div></div><div class="flex-center flex-row"><div class="translation menu-item_f6cde flex text-sm font-bold items-center px-3 py-2"><div><div class="relative flex-center h-14"><button class="rspress-nav-menu-group-button flex-center items-center font-medium text-sm text-text-1 hover:text-text-2 transition-colors duration-200"><span class="text-sm font-medium flex" style="margin-right:2px"><svg width="18" height="18" viewBox="0 0 32 32" style="width:18px;height:18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6 2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div class="rspress-nav-menu-group-content absolute mx-0.8 transition-opacity duration-300" style="opacity:0;visibility:hidden;right:0;top:52px"><div class="p-3 pr-2 w-full h-full max-h-100vh whitespace-nowrap" style="box-shadow:var(--rp-shadow-3);z-index:100;border:1px solid var(--rp-c-divider-light);border-radius:var(--rp-radius-large);background:var(--rp-c-bg)"><div><div class="rounded-2xl my-1 flex" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><span class="text-brand">简体中文</span></div></div><div><div class="font-medium my-1"><a class="link_03735  cursor-pointer" target="" href="/module-tools/en/guide/faq/build.html"><div class="rounded-2xl hover:bg-mute" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><div class="flex"><span>English</span></div></div></a></div></div></div></div></div></div></div><div class="mx-2"><div class="md:mr-2 rspress-nav-appearance"><div class="p-1 border border-solid border-gray-300 text-gray-400  cursor-pointer rounded-md hover:border-gray-600 hover:text-gray-600 dark:hover:border-gray-200 dark:hover:text-gray-200 transition-all duration-300 w-7 h-7"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="dark:hidden" width="18" height="18" fill="currentColor"><path d="M12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM12 4c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1zM12 24c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1zM5.6 6.6c-.3 0-.5-.1-.7-.3L3.5 4.9c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.1.2-.4.3-.7.3zM19.8 20.8c-.3 0-.5-.1-.7-.3l-1.4-1.4c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.2.2-.5.3-.7.3zM3 13H1c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1zM23 13h-2c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1zM4.2 20.8c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.4.3-.7.3zM18.4 6.6c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.5.3-.7.3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="hidden dark:block" width="18" height="18" fill="currentColor"><path d="M12.1 22h-.9c-5.5-.5-9.5-5.4-9-10.9.4-4.8 4.2-8.6 9-9 .4 0 .8.2 1 .5.2.3.2.8-.1 1.1-2 2.7-1.4 6.4 1.3 8.4 2.1 1.6 5 1.6 7.1 0 .3-.2.7-.3 1.1-.1.3.2.5.6.5 1-.2 2.7-1.5 5.1-3.6 6.8-1.9 1.4-4.1 2.2-6.4 2.2zM9.3 4.4c-2.9 1-5 3.6-5.2 6.8-.4 4.4 2.8 8.3 7.2 8.7 2.1.2 4.2-.4 5.8-1.8 1.1-.9 1.9-2.1 2.4-3.4-2.5.9-5.3.5-7.5-1.1-2.8-2.2-3.9-5.9-2.7-9.2z"></path></svg></div></div></div><div class="social-links menu-item_93d67 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_93d67"><svg role="img" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div><div class="mobileNavMenu_f6cde"><div class="navScreen_457e8 " id="navScreen"><div class="container_457e8"><div class="navMenu_457e8"><div class="navMenuItem_457e8 w-full"><a class="link_03735  cursor-pointer" target="" href="/module-tools/guide/intro/welcome.html"><div class="rspress-nav-menu-item singleItem_f6cde activeItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">指南</div></a></div><div class="navMenuItem_457e8 w-full"><a class="link_03735  cursor-pointer" target="" href="/module-tools/api/index.html"><div class="rspress-nav-menu-item singleItem_f6cde  text-sm font-medium mx-1.5 px-3 py-2 flex items-center">API</div></a></div><div class="navMenuItem_457e8 w-full"><a class="link_03735  cursor-pointer" target="" href="/module-tools/plugins/guide/getting-started.html"><div class="rspress-nav-menu-item singleItem_f6cde  text-sm font-medium mx-1.5 px-3 py-2 flex items-center">插件</div></a></div><div class="navMenuItem_457e8 w-full"><div class="mx-3 last:mr-0"><div class=" navScreenMenuGroup_457e8 relative"><button class="button_457e8"><span class="buttonSpan_457e8">v2.60.1</span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" down_457e8 "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div><div class="items_457e8"><div><div class="py-1 font-medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="link_03735 "><div><div class="flex justify-center"><span>更新日志</span></div></div></a></div></div><div><div class="py-1 font-medium"><a href="https://modernjs.dev/en/community/contributing-guide.html" target="_blank" rel="noopener noreferrer" class="link_03735 "><div><div class="flex justify-center"><span>贡献指南</span></div></div></a></div></div></div></div></div></div></div></div><div class="flex-center flex-col gap-2"><div class="mt-2 navAppearance_457e8 flex justify-center"></div><div class="flex text-sm font-bold justify-center"><div class="mx-1.5 my-1"><div class=" navScreenMenuGroup_457e8 relative"><button class="button_457e8"><span class="buttonSpan_457e8"><svg width="18" height="18" viewBox="0 0 32 32" style="width:18px;height:18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6 2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" down_457e8 "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div><div class="items_457e8"><div><div class="p-1 text-center"><span class="text-brand">简体中文</span></div></div><div><div class="py-1 font-medium"><a class="link_03735  cursor-pointer" target="" href="/module-tools/en/guide/faq/build.html"><div><div class="flex justify-center"><span>English</span></div></div></a></div></div></div></div></div></div></div><div class="social-links menu-item_93d67 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_93d67"><svg role="img" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div></div><button aria-label="mobile hamburger" class=" navHamburger_e7b06 text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="currentColor"><circle cx="8" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="24" cy="16" r="2" fill="currentColor"></circle></svg></button></div></div></div></div><section><div class="docLayout_edeb4 pt-0"><div class="rspress-sidebar-menu"><button class="flex-center mr-auto"><div class="text-md mr-2"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"></path></svg></div><span class="text-sm">Menu</span></button><button class="flex-center ml-auto"><span class="text-sm">目录</span><div class="text-md mr-2" style="transform:rotate(0deg);transition:transform 0.2s ease-out;margin-top:2px"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></button></div><aside class="sidebar_71eca rspress-sidebar "><div class="navTitleMask_71eca"><div class="navBarTitle_f6cde"><a href="/module-tools/" class="flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><span>Modern.js Module</span></a></div></div><div class="rspress-scrollbar sidebarContent_71eca"><nav class="pb-2"><section class="mt-0.5 block" style="margin-left:0"><div class="flex justify-between items-center menuItem_71eca" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">介绍</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/intro/welcome.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>欢迎使用</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/intro/why-module-engineering-solution.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>为什么需要 Modern.js Module</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/intro/getting-started.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>快速开始</span></div></a></div></div></div></section><section class="mt-0.5 block" style="margin-left:0"><div class="flex justify-between items-center menuItem_71eca" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">基础使用</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/basic/before-getting-started.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>开始之前</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/basic/command-preview.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>CLI 命令</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/basic/modify-output-product.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>修改输出产物</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/basic/use-micro-generator.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>使用微生成器</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/basic/use-module-doc.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>开发模块文档</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/basic/using-storybook.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>使用 Storybook</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/basic/publish-your-project.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>版本管理与发布</span></div></a></div></div></div></section><section class="mt-0.5 block" style="margin-left:0"><div class="flex justify-between items-center menuItem_71eca" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">进阶指南</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/advance/in-depth-about-build.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>深入理解构建</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/advance/in-depth-about-dev-command.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>深入理解 dev 命令</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/advance/copy.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>使用 Copy 工具</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/advance/external-dependency.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>处理三方依赖</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/advance/build-umd.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>构建 umd 产物</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/advance/asset.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>处理静态资源</span></div></a></div></div></div></section><section class="mt-0.5 block" style="margin-left:0"><div class="flex justify-between items-center menuItem_71eca" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">最佳实践</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/best-practices/components.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>开发组件</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/best-practices/use-tailwindcss.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>使用 Tailwind CSS</span></div></a></div></div></div></section><section class="mt-0.5 block" style="margin-left:0"><div class="flex justify-between items-center menuItem_71eca" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">常见问题</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/faq/basic.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>通用类问题</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/faq/build.html"><div class="menuItemActive_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>构建相关问题</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/faq/storybook.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Storybook 相关问题</span></div></a></div></div></div></section></nav></div></aside><div class="content_edeb4 rspress-doc-container flex flex-shrink-0 mx-auto"><div class="w-full flex-1"><div><div class="rspress-doc"><!--$--><h1 id="构建相关问题" class="text-3xl mb-10 leading-10 tracking-tight title_3b154">构建相关问题<a class="link_3b154 header-anchor" aria-hidden="true" href="#构建相关问题">#</a></h1>
+<p class="my-4 leading-7">这里只记录了一些常见问题和 bad case。</p>
+<p class="my-4 leading-7"><strong class="font-semibold">如果是构建产物不符合预期的场景，尤其是配置了 <a class="link_03735  link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/api/config/build-preset.html">buildPreset</a> 的情况下，
+请先了解 buildPreset 代表了哪些配置项，再根据所有的配置项逐个检查</strong></p>
+<h2 id="产物问题" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">产物问题<a class="link_3b154 header-anchor" aria-hidden="true" href="#产物问题">#</a></h2>
+<h3 id="class-fields-的初始化处理" class="mt-10 mb-2 leading-7 text-xl title_3b154">Class Fields 的初始化处理<a class="link_3b154 header-anchor" aria-hidden="true" href="#class-fields-的初始化处理">#</a></h3>
+<p class="my-4 leading-7">TypeSript 提供了 <code>useDefineForClassFields</code> 配置用于控制对于 <code>public class fields</code> 的转换处理。</p>
+<p class="my-4 leading-7">如果有一段代码：</p>
+<div class="language-ts"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">class</span><span> </span><span class="token class-name" style="color:var(--code-token-constant)">C</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  foo </span><span class="token operator">=</span><span> </span><span class="token number">100</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  bar</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">string</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
+<p class="my-4 leading-7">当 <code>useDefineForClassFields</code> 为 <code>false</code> 的时候，则编译后的代码会变为：</p>
+<div class="language-ts"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">class</span><span> </span><span class="token class-name" style="color:var(--code-token-constant)">C</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token" style="color:var(--code-token-function)">constructor</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>    </span><span class="token" style="color:var(--code-token-keyword)">this</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>foo </span><span class="token operator">=</span><span> </span><span class="token number">100</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
+<p class="my-4 leading-7">当 <code>useDefineForClassFields</code> 为 <code>true</code> 的时候，则编译后的代码会变为：</p>
+<div class="language-ts"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">class</span><span> </span><span class="token class-name" style="color:var(--code-token-constant)">C</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token" style="color:var(--code-token-function)">constructor</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>    Object</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">defineProperty</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-keyword)">this</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;foo&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      enumerable</span><span class="token operator">:</span><span> </span><span class="token boolean">true</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      configurable</span><span class="token operator">:</span><span> </span><span class="token boolean">true</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      writable</span><span class="token operator">:</span><span> </span><span class="token boolean">true</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      value</span><span class="token operator">:</span><span> </span><span class="token number">100</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>    </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>    Object</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">defineProperty</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-keyword)">this</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;bar&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      enumerable</span><span class="token operator">:</span><span> </span><span class="token boolean">true</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      configurable</span><span class="token operator">:</span><span> </span><span class="token boolean">true</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      writable</span><span class="token operator">:</span><span> </span><span class="token boolean">true</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      value</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-keyword)">void</span><span> </span><span class="token number">0</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>    </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
+<p class="my-4 leading-7">同时该配置的默认值会根据 tsconfig.json 的 <a target="_blank" rel="noopener noreferrer" href="https://www.typescriptlang.org/tsconfig#target" class="link_03735  link_3b154 inline-link_3b154"><code>target</code></a> 配置而变化：<strong class="font-semibold">当 <code>target</code> 是 ES2022 或者更高的时候，则 <code>useDefineForClassFields</code> 默认配置为 <code>true</code>，否则就是默认为 <code>false</code></strong>。</p>
+<p class="my-4 leading-7">关于 TypeScript 这个配置的更多信息，可以参考下面的链接：</p>
+<ul class="list-disc pl-5 my-4 leading-7">
+<li class="[&amp;:not(:first-child)]:mt-2"><a target="_blank" rel="noopener noreferrer" href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#the-usedefineforclassfields-flag-and-the-declare-property-modifier" class="link_03735  link_3b154 inline-link_3b154">The useDefineForClassFields Flag and The declare Property Modifier</a></li>
+</ul>
+<p class="my-4 leading-7">Modern.js Module 目前会根据下面的逻辑进行处理：</p>
+<ol class="list-decimal pl-5 my-4 leading-7">
+<li class="[&amp;:not(:first-child)]:mt-2">首先根据当前项目的 tsconfig.json 的 <code>useDefineForClassFields</code> 配置确定在 Modern.js Module 内部如何处理。目前只会读取当前项目路径下的 tsconfig.json 文件的内容，暂时不支持根据 <a target="_blank" rel="noopener noreferrer" href="https://www.typescriptlang.org/tsconfig#extends" class="link_03735  link_3b154 inline-link_3b154"><code>extends</code></a> 配置来获取最终的 tsconfig 配置。</li>
+<li class="[&amp;:not(:first-child)]:mt-2">如果没有检测 tsconfig.json 的 <code>useDefineForClassFields</code> 配置，则会根据 tsconfig.json 的 <code>target</code> 配置来确定默认值。如果 <code>target</code> 大于 <code>ES2022</code>（包含 <code>EsNext</code>），则<code>useDefineForClassFields</code>默认为 <code>true</code>，否则为 <code>false</code>。</li>
+<li class="[&amp;:not(:first-child)]:mt-2">如果没有检测到 tsconfig.json 的 <code>target</code>，则按照 <code>useDefineForClassFields</code>的值 为 <code>true</code> 进行处理。</li>
+</ol>
+<h3 id="babel-plugin-lodash-将引入的-lodash-处理成-undefined" class="mt-10 mb-2 leading-7 text-xl title_3b154">babel-plugin-lodash 将引入的 lodash 处理成 <code>undefined</code><a class="link_3b154 header-anchor" aria-hidden="true" href="#babel-plugin-lodash-将引入的-lodash-处理成-undefined">#</a></h3>
+<p class="my-4 leading-7">当使用类似下面的方式的时候，会出现这个问题：</p>
+<div class="language-ts"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token operator">*</span><span> </span><span class="token" style="color:var(--code-token-keyword)">as</span><span> Lodash </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;lodash&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
+</span></span><span style="display:block;padding:0 1.25rem">
+</span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">const</span><span> libs </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  _</span><span class="token operator">:</span><span> Lodash</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
+<p class="my-4 leading-7">目前在 <code>babel-plugin-lodash</code> Github 上的相关 Issue：</p>
+<ul class="list-disc pl-5 my-4 leading-7">
+<li class="[&amp;:not(:first-child)]:mt-2"><a target="_blank" rel="noopener noreferrer" href="https://github.com/lodash/babel-plugin-lodash/issues/235" class="link_03735  link_3b154 inline-link_3b154">#235</a></li>
+</ul>
+<p class="my-4 leading-7">这个问题的解决办法是移除 <code>babel-plugin-lodash</code>，因为此时不需要该插件进行按需引用，使用该插件会产生副作用。</p>
+<p class="my-4 leading-7">类似的情况在 <code>babel-plugin-import</code> 上也可能会出现。比如有类似如下的代码：</p>
+<div class="language-ts"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token operator">*</span><span> </span><span class="token" style="color:var(--code-token-keyword)">as</span><span> Comps </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;components&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
+</span></span><span style="display:block;padding:0 1.25rem">
+</span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">const</span><span> libs </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  comps</span><span class="token operator">:</span><span> Comps</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
+<p class="my-4 leading-7">此时 <code>babel-plugin-import</code> 也可能会导致 <code>Comps</code> 变为 <code>undefined</code>。因此也需要移除对应的 <code>babel-plugin-import</code>。</p>
+<h3 id="cannot-find-module-http" class="mt-10 mb-2 leading-7 text-xl title_3b154">Cannot find module &#x27;http&#x27;<a class="link_3b154 header-anchor" aria-hidden="true" href="#cannot-find-module-http">#</a></h3>
+<p class="my-4 leading-7">如果产物在浏览器运行时报了类似 <code>Cannot find module &#x27;http&#x27;</code> 的错误，说明你的产物打包进了 node 模块。
+这可能会发生于你的依赖里有一些同时支持 browser 和 node 的三方包，例如 <code>axios</code>，此时只需要将 <a class="link_03735  link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/api/config/build-config.html#platform">platform</a> 设置为 <code>browser</code> 即可。
+如果一些三方包不支持 browser, 你可能需要手动注入 <a class="link_03735  link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/plugins/official-list/plugin-node-polyfill.html">node polyfill</a>。</p>
+<h2 id="异常类问题" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">异常类问题<a class="link_3b154 header-anchor" aria-hidden="true" href="#异常类问题">#</a></h2>
+<h3 id="dynamic-require-of-react-is-not-supported" class="mt-10 mb-2 leading-7 text-xl title_3b154">Dynamic require of &quot;react&quot; is not supported<a class="link_3b154 header-anchor" aria-hidden="true" href="#dynamic-require-of-react-is-not-supported">#</a></h3>
+<h4 id="问题描述" class="mt-8 leading-6 text-lg title_3b154">问题描述<a class="link_3b154 header-anchor" aria-hidden="true" href="#问题描述">#</a></h4>
+<p class="my-4 leading-7">当构建的产物配置中产物格式为 ES modules 的时候：</p>
+<div class="language-ts"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>    format</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;esm&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
+<p class="my-4 leading-7">如果导入了的第三方 npm 包的 cjs 产物，那么生成的产物可能会在 webpack 下有可能无法正常运行。</p>
+<p class="my-4 leading-7"><img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/shylnyhaeh7uldvivhn/1280X1280.png" alt=""/></p>
+<h4 id="解决办法" class="mt-8 leading-6 text-lg title_3b154">解决办法<a class="link_3b154 header-anchor" aria-hidden="true" href="#解决办法">#</a></h4>
+<ol class="list-decimal pl-5 my-4 leading-7">
+<li class="[&amp;:not(:first-child)]:mt-2"><strong class="font-semibold">首先需要找到是哪个第三方包引起的问题</strong>。例如报错信息中指向了 <code>react</code> 这个包，那么就要寻找在哪个第三方包里存在 <code>require(&#x27;react&#x27;)</code> 这样的代码。比如 <a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/react-draggable" class="link_03735  link_3b154 inline-link_3b154"><code>react-draggable</code></a> ，这个包仅包含 <code>cjs</code> 产物，那么问题定位到 <code>react-draggable</code> 这个包。</li>
+<li class="[&amp;:not(:first-child)]:mt-2">然后我们需要将这个包通过下面的配置进行排除，即<strong class="font-semibold">不打包存在问题的第三方包</strong>。</li>
+</ol>
+<div class="language-ts"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>    externals</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span class="token" style="color:var(--code-token-string)">&#x27;react-draggable&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
+<h4 id="参考链接" class="mt-8 leading-6 text-lg title_3b154">参考链接<a class="link_3b154 header-anchor" aria-hidden="true" href="#参考链接">#</a></h4>
+<ul class="list-disc pl-5 my-4 leading-7">
+<li class="[&amp;:not(:first-child)]:mt-2"><a target="_blank" rel="noopener noreferrer" href="https://stackoverflow.com/questions/68423950/when-using-esbuild-with-external-react-i-get-dynamic-require-of-react-is-not-s" class="link_03735  link_3b154 inline-link_3b154">When using esbuild with external react I get Dynamic require of &quot;react&quot; is not supported</a></li>
+</ul>
+<h3 id="编译过程中因为某个组件库的-less-文件报错operation-on-an-invalid-type" class="mt-10 mb-2 leading-7 text-xl title_3b154">编译过程中，因为某个组件库的 less 文件报错：<code>&#x27;Operation on an invalid type&#x27;</code><a class="link_3b154 header-anchor" aria-hidden="true" href="#编译过程中因为某个组件库的-less-文件报错operation-on-an-invalid-type">#</a></h3>
+<p class="my-4 leading-7">可能是因为该组件库依赖的 Less 版本是 v3，而 Modern.js Module 默认是 v4。v3 与 v4 在 <code>math</code> 配置上存在有 Break Change，可以查看这个<a target="_blank" rel="noopener noreferrer" href="https://stackoverflow.com/questions/73298187/less-error-operation-on-an-invalid-type-in-antd-dependency" class="link_03735  link_3b154 inline-link_3b154">链接</a> 了解详情。</p>
+<p class="my-4 leading-7">因此，如果是在源码中使用了类似这样的组件库：</p>
+<p class="my-4 leading-7">在构建配置中使用了 <code>buildPreset</code> 的情况下，按照下面进行修改：</p>
+<div class="language-js"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span>module</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>exports </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token" style="color:var(--code-token-function)">buildPreset</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token parameter" style="color:var(--code-token-punctuation)">{</span><span class="token parameter"> extendPreset </span><span class="token parameter" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>    </span><span class="token" style="color:var(--code-token-keyword)">return</span><span> </span><span class="token" style="color:var(--code-token-function)">extendPreset</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">&#x27;your-build-preset&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      </span><span class="token literal-property" style="color:var(--code-token-parameter)">style</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>        </span><span class="token literal-property" style="color:var(--code-token-parameter)">less</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>          </span><span class="token literal-property" style="color:var(--code-token-parameter)">lessOptions</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>            </span><span class="token literal-property" style="color:var(--code-token-parameter)">math</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;always&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>          </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>        </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>    </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
+<p class="my-4 leading-7">或者使用了自定义的 <code>buildConfig</code> 的情况下，按照下面进行修改：</p>
+<div class="language-js"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span>module</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>exports </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>    </span><span class="token literal-property" style="color:var(--code-token-parameter)">style</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      </span><span class="token literal-property" style="color:var(--code-token-parameter)">less</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>        </span><span class="token literal-property" style="color:var(--code-token-parameter)">lessOptions</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>          </span><span class="token literal-property" style="color:var(--code-token-parameter)">math</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;always&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>        </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>    </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
+<p class="my-4 leading-7">如果是在 Storybook 中使用了类似这样的组件，则需要修改 Storybook 的调试配置：</p>
+<div class="language-js"><div class="rspress-code-title">.storybook/main.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span>module</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>exports </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token literal-property" style="color:var(--code-token-parameter)">framework</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>    </span><span class="token literal-property" style="color:var(--code-token-parameter)">options</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      </span><span class="token literal-property" style="color:var(--code-token-parameter)">builderConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>        </span><span class="token literal-property" style="color:var(--code-token-parameter)">tools</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>          </span><span class="token" style="color:var(--code-token-function)">webpackChain</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token parameter">chain</span><span class="token parameter" style="color:var(--code-token-punctuation)">,</span><span class="token parameter"> </span><span class="token parameter" style="color:var(--code-token-punctuation)">{</span><span class="token parameter"> </span><span class="token parameter" style="color:var(--code-token-constant)">CHAIN_ID</span><span class="token parameter"> </span><span class="token parameter" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>            chain</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>module
+</span></span><span style="display:block;padding:0 1.25rem"><span>              </span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">rule</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-constant)">CHAIN_ID</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-constant)">RULE</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-constant)">LESS</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>              </span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">use</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-constant)">CHAIN_ID</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-constant)">USE</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-constant)">LESS</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>              </span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">tap</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token parameter">options</span><span> </span><span class="token operator">=&gt;</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>                options</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>lessOptions </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>                  </span><span class="token operator">...</span><span>options</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>lessOptions</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>                  </span><span class="token literal-property" style="color:var(--code-token-parameter)">math</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;always&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>                </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>                </span><span class="token" style="color:var(--code-token-keyword)">return</span><span> options</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>              </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>          </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>        </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>    </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
+<h3 id="bundleless-dts-failed" class="mt-10 mb-2 leading-7 text-xl title_3b154">Bundleless DTS failed<a class="link_3b154 header-anchor" aria-hidden="true" href="#bundleless-dts-failed">#</a></h3>
+<p class="my-4 leading-7">在不打包的场景下，是直接 <code>tsc</code> 生成类型声明文件。通过终端打印的错误信息，你可以找到问题文件。对于源码文件，推荐将类型问题进行修复，这能够更好地使你的包得到复用。但如果遇到三方包的类型检查问题：</p>
+<ol class="list-decimal pl-5 my-4 leading-7">
+<li class="[&amp;:not(:first-child)]:mt-2">开启 <a target="_blank" rel="noopener noreferrer" href="https://www.typescriptlang.org/tsconfig#skipLibCheck" class="link_03735  link_3b154 inline-link_3b154">skipLibCheck</a> 来跳过三方包的 d.ts 检查。</li>
+<li class="[&amp;:not(:first-child)]:mt-2">如果三方包直接导出 ts 文件， skipLibCheck 将会失效，因为其只能跳过 d.ts 检查，因此你只能关闭 <a class="link_03735  link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/api/config/build-config.html#dtsabortonerror">dts.abortOnError</a> 来忽略这些错误。</li>
+</ol>
+<h3 id="bundle-dts-failed" class="mt-10 mb-2 leading-7 text-xl title_3b154">Bundle DTS failed<a class="link_3b154 header-anchor" aria-hidden="true" href="#bundle-dts-failed">#</a></h3>
+<p class="my-4 leading-7">Modern.js Module 直接使用 <a target="_blank" rel="noopener noreferrer" href="https://github.com/Swatinem/rollup-plugin-dts" class="link_03735  link_3b154 inline-link_3b154">rollup-plugin-dts</a> 来打包你的类型描述文件。
+<strong class="font-semibold">它可能无法处理某些第三方依赖的类型文件</strong>。</p>
+<p class="my-4 leading-7">如果遇到 Modern.js Module 构建过程中出现 <code>Bundle DTS failed</code> 的错误信息标题的时候，可以观察报错信息是来自某个第三方依赖。尝试设置 <a class="link_03735  link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/api/config/build-config.html#dtsrespectexternal"><code>dts.respectExternal</code></a> 为 <code>false</code> 来关闭打包第三方依赖的类型文件的行为。</p>
+<h3 id="defineconfig-函数类型报错如果没有引用-则无法命名-default-的推断类型" class="mt-10 mb-2 leading-7 text-xl title_3b154"><code>defineConfig</code> 函数类型报错：<code>如果没有引用 &quot;...&quot;，则无法命名 &quot;default&quot; 的推断类型</code><a class="link_3b154 header-anchor" aria-hidden="true" href="#defineconfig-函数类型报错如果没有引用-则无法命名-default-的推断类型">#</a></h3>
+<p class="my-4 leading-7">检查项目的 tsconfig.json 文件中是否存在 <a target="_blank" rel="noopener noreferrer" href="https://www.typescriptlang.org/tsconfig#include" class="link_03735  link_3b154 inline-link_3b154"><code>include</code></a> 配置，如果没有，则尝试增加下面的内容：</p>
+<div class="language-json"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-json" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token" style="color:var(--code-token-parameter)">&quot;include&quot;</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span class="token" style="color:var(--code-token-string)">&quot;src&quot;</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
+<h2 id="其他" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">其他<a class="link_3b154 header-anchor" aria-hidden="true" href="#其他">#</a></h2>
+<h3 id="bundleless-如何跳过对-less--scss-文件的预处理" class="mt-10 mb-2 leading-7 text-xl title_3b154">bundleless 如何跳过对 less / scss 文件的预处理<a class="link_3b154 header-anchor" aria-hidden="true" href="#bundleless-如何跳过对-less--scss-文件的预处理">#</a></h3>
+<p class="my-4 leading-7">bundleless 是单文件编译的方式，只需要将你的 less / scss 文件从入口里移除并且将其拷贝到产物里即可。
+注意我们还会把 js 引用 less / scss 的 moduleId 进行改写，你可以通过 <a class="link_03735  link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/api/config/build-config.html#redirect">redirect</a> 配置关闭它。</p>
+<p class="my-4 leading-7">下面是一个跳过 less 文件处理的例子，你会发现 src 里面所有的 less 文件都被拷贝到 dist 里并且保留了一致的相对路径。</p>
+<div class="language-ts"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  buildType</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;bundleless&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>    input</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span class="token" style="color:var(--code-token-string)">&#x27;src&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;!src/**/*.less&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>    redirect</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      style</span><span class="token operator">:</span><span> </span><span class="token boolean">false</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>    </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>    copy</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      patterns</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>        </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>          from</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;./**/*.less&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>          to</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;./&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>        </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      </span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      options</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>        enableCopySync</span><span class="token operator">:</span><span> </span><span class="token boolean">true</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>    </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
+<h3 id="增加额外的编译能力" class="mt-10 mb-2 leading-7 text-xl title_3b154">增加额外的编译能力<a class="link_3b154 header-anchor" aria-hidden="true" href="#增加额外的编译能力">#</a></h3>
+<p class="my-4 leading-7">Modern.js Module 基于 esbuild 实现，因此如果有特殊需求或者想要增加额外的编译能力，可以通过实现 esbuild 插件来解决。</p>
+<p class="my-4 leading-7">Modern.js Module 提供了 <a class="link_03735  link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/api/config/build-config.html#esbuildoptions"><code>esbuildOptions</code></a> 配置允许修改 Modern.js Module 内部的 esbuild 配置，因此可以通过该配置来增加自定义的 esbuild 插件：</p>
+<div class="language-js"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-js" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> myEsbuildPlugin </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;./myEsbuildPlugin&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
+</span></span><span style="display:block;padding:0 1.25rem">
+</span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token literal-property" style="color:var(--code-token-parameter)">buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>    </span><span class="token function-variable" style="color:var(--code-token-function)">esbuildOptions</span><span class="token operator">:</span><span> </span><span class="token parameter">options</span><span> </span><span class="token operator">=&gt;</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      options</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>plugins </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span>myEsbuildPlugin</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token operator">...</span><span>options</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>plugins</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      </span><span class="token" style="color:var(--code-token-keyword)">return</span><span> options</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>    </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
+<p class="my-4 leading-7">在增加 esbuild 插件时，请注意你需要将插件加在 plugins 数组的头部，因为 Modern.js Module 内部也是通过一个 esbuild 插件介入到整个构建流程中去的，因此需要将自定义插件优先注册。</p>
+<h3 id="支持生成-css-modules-的-typescript-声明文件" class="mt-10 mb-2 leading-7 text-xl title_3b154">支持生成 CSS Modules 的 TypeScript 声明文件<a class="link_3b154 header-anchor" aria-hidden="true" href="#支持生成-css-modules-的-typescript-声明文件">#</a></h3>
+<ul class="list-disc pl-5 my-4 leading-7">
+<li class="[&amp;:not(:first-child)]:mt-2">方案一：<a target="_blank" rel="noopener noreferrer" href="https://github.com/Quramy/typed-css-modules" class="link_03735  link_3b154 inline-link_3b154">typed-css-modules</a></li>
+<li class="[&amp;:not(:first-child)]:mt-2">方案二：<a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/@guanghechen/postcss-modules-dts" class="link_03735  link_3b154 inline-link_3b154">postcss-modules-dts</a></li>
+</ul>
+<div class="language-ts"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> defineConfig </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;@modern-js/module-tools&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
+</span></span><span style="display:block;padding:0 1.25rem">
+</span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-keyword)">async</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token operator">=&gt;</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token" style="color:var(--code-token-keyword)">const</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> dts </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-keyword)">await</span><span> </span><span class="token" style="color:var(--code-token-keyword)">import</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-string)">&#x27;@guanghechen/postcss-modules-dts&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token" style="color:var(--code-token-keyword)">return</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>    buildConfig</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      style</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>        modules</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> </span><span class="token operator">...</span><span>dts </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>    </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>    </span><span class="token" style="color:var(--code-token-comment)">// 你的自定义配置</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div><!--/$--></div><div class="rspress-doc-footer"><footer class="mt-8"><div class="xs:flex pb-5 px-2 justify-end items-center"></div><div class="flex flex-col"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/document/module-doc/docs/zh/guide/faq/build.mdx" target="_blank" class="editLink_2a169">Edit this page on GitHub</a></div><div class="flex flex-col sm:flex-row sm:justify-around gap-4 pt-6"><div class="prev_e7091 flex flex-col"><a class="link_03735 pager-link_9b9a7 cursor-pointer" target="" href="/module-tools/guide/faq/basic.html"><span class="desc_9b9a7">上一页</span><span class="title_9b9a7">通用类问题</span></a></div><div class="next_e7091 flex flex-col"><a class="link_03735 pager-link_9b9a7 next_9b9a7 cursor-pointer" target="" href="/module-tools/guide/faq/storybook.html"><span class="desc_9b9a7">下一页</span><span class="title_9b9a7">Storybook 相关问题</span></a></div></div></footer></div></div></div><div class="aside-container_edeb4"><div><div class="flex flex-col"><div class="&lt;lg:hidden"><div id="aside-container" class="relative text-sm font-medium"><div class="leading-7 block text-sm font-semibold pl-3">目录</div><nav class="mt-1"><ul class="relative"><li><a href="#产物问题" title="产物问题" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">产物问题</span></a></li><li><a href="#class-fields-的初始化处理" title="Class Fields 的初始化处理" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">Class Fields 的初始化处理</span></a></li><li><a href="#babel-plugin-lodash-将引入的-lodash-处理成-undefined" title="babel-plugin-lodash 将引入的 lodash 处理成 undefined" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">babel-plugin-lodash 将引入的 lodash 处理成 <code>undefined</code></span></a></li><li><a href="#cannot-find-module-http" title="Cannot find module &#x27;http&#x27;" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">Cannot find module &#x27;http&#x27;</span></a></li><li><a href="#异常类问题" title="异常类问题" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">异常类问题</span></a></li><li><a href="#dynamic-require-of-react-is-not-supported" title="Dynamic require of &quot;react&quot; is not supported" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">Dynamic require of &quot;react&quot; is not supported</span></a></li><li><a href="#问题描述" title="问题描述" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:24px;font-weight:semibold"><span class="aside-link-text block">问题描述</span></a></li><li><a href="#解决办法" title="解决办法" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:24px;font-weight:semibold"><span class="aside-link-text block">解决办法</span></a></li><li><a href="#参考链接" title="参考链接" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:24px;font-weight:semibold"><span class="aside-link-text block">参考链接</span></a></li><li><a href="#编译过程中因为某个组件库的-less-文件报错operation-on-an-invalid-type" title="编译过程中，因为某个组件库的 less 文件报错：&#x27;Operation on an invalid type&#x27;" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">编译过程中，因为某个组件库的 less 文件报错：<code>&#x27;Operation on an invalid type&#x27;</code></span></a></li><li><a href="#bundleless-dts-failed" title="Bundleless DTS failed" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">Bundleless DTS failed</span></a></li><li><a href="#bundle-dts-failed" title="Bundle DTS failed" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">Bundle DTS failed</span></a></li><li><a href="#defineconfig-函数类型报错如果没有引用-则无法命名-default-的推断类型" title="defineConfig 函数类型报错：如果没有引用 &quot;...&quot;，则无法命名 &quot;default&quot; 的推断类型" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block"><code>defineConfig</code> 函数类型报错：<code>如果没有引用 &quot;...&quot;，则无法命名 &quot;default&quot; 的推断类型</code></span></a></li><li><a href="#其他" title="其他" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">其他</span></a></li><li><a href="#bundleless-如何跳过对-less--scss-文件的预处理" title="bundleless 如何跳过对 less / scss 文件的预处理" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">bundleless 如何跳过对 less / scss 文件的预处理</span></a></li><li><a href="#增加额外的编译能力" title="增加额外的编译能力" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">增加额外的编译能力</span></a></li><li><a href="#支持生成-css-modules-的-typescript-声明文件" title="支持生成 CSS Modules 的 TypeScript 声明文件" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">支持生成 CSS Modules 的 TypeScript 声明文件</span></a></li></ul></nav></div></div></div></div></div></div></div></section></div></div>
+  <div id="search-container"></div>
+</body>
+</html>