PageSourceSearch

https://emp2.netlify.app/demo/react-umd

html emp2.netlify.app collected 2026-10-03 10:41:53 UTC 83,244 bytes, 305 lines download raw bytes

1<!DOCTYPE html>
2<html lang="zh-CN" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5<!-- This site is hosted on Netlify. Anyone can build and deploy a site
6     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=bc7171f1-19e3-47df-9728-9bf50906475a
7     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
8    <meta name="viewport" content="width=device-width,initial-scale=1">
9    <title>React umd 共享 | EMP</title>
10    <meta name="description" content="下一代微前端构建方案">
11    <link rel="preload stylesheet" href="/assets/style.c140320b.css" as="style">
12    
13    
13<script type="module" src="/assets/app.fc37350c.js"></script>
13
14    <link rel="preload" href="/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
15    <link rel="modulepreload" href="/assets/chunks/framework.5372f097.js">
16    <link rel="modulepreload" href="/assets/chunks/theme.35e8fafc.js">
17    <link rel="modulepreload" href="/assets/demo_react-umd.md.66816e69.lean.js">
18    <link rel="icon" type="image/svg+xml" href="/favicon.ico">
19    <meta name="theme-color" content="#3700b3">
20    
20<script>var _hmt=_hmt||[];(function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?467209d2ca945747528b2be4c124f5c1";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();</script>
20
21    
21<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
21
22    
22<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
22
23  </head>
24  <body>
25    <div id="app"><div class="Layout" data-v-53240a10><!--[--><!--]--><!--[--><span tabindex="-1" data-v-b1f67baa></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-b1f67baa> Skip to content </a><!--]--><!----><header class="VPNav" data-v-53240a10 data-v-f6641a5b><div class="VPNavBar has-sidebar" data-v-f6641a5b data-v-f0422255><div class="container" data-v-f0422255><div class="title" data-v-f0422255><div class="VPNavBarTitle has-sidebar" data-v-f0422255 data-v-913560ad><a class="title" href="/" data-v-913560ad><!--[--><!--]--><!----><!--[-->EMP<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-f0422255><div class="curtain" data-v-f0422255></div><div class="content-body" data-v-f0422255><!--[--><!--]--><div class="VPNavBarSearch search" data-v-f0422255><!----><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><span class="DocSearch-Button-Key">Meta</span><span class="DocSearch-Button-Key">K</span></span></button></div></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-f0422255 data-v-ab213da7><span id="main-nav-aria-label" class="visually-hidden" data-v-ab213da7>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/develop/" tabindex="0" data-v-ab213da7 data-v-32f46c97><!--[--><span data-v-32f46c97>开发</span><!--]--></a><!--]--><!--[--><a class='VPLink link VPNavBarMenuLink active' data-v-32f46c97 data-v-ab213da7 href='/demo/react-umd' tabindex='0'><!--[--><span data-v-32f46c97>用例</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/config/" tabindex="0" data-v-ab213da7 data-v-32f46c97><!--[--><span data-v-32f46c97>配置</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/plugin/" tabindex="0" data-v-ab213da7 data-v-32f46c97><!--[--><span data-v-32f46c97>插件</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://github.com/efoxTeam/emp" target="_blank" rel="noreferrer" tabindex="0" data-v-ab213da7 data-v-32f46c97><!--[--><span data-v-32f46c97>v2.7.2</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-f0422255 data-v-43756d3f><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-43756d3f data-v-1fd9f46d data-v-db80ed91><span class="check" data-v-db80ed91><span class="icon" data-v-db80ed91><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-1fd9f46d><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-1fd9f46d><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-f0422255 data-v-782acf74 data-v-43ee506b><!--[--><a class="VPSocialLink no-icon" href="https://github.com/efoxTeam/emp" aria-label="github" target="_blank" rel="noopener" data-v-43ee506b data-v-641bc9c5><svg role="img" viewBox="0 0 24 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"/></svg></a>
25<!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-f0422255 data-v-87235a08 data-v-dc8694bb><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-dc8694bb><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-dc8694bb><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-dc8694bb><div class="VPMenu" data-v-dc8694bb data-v-b5460e0b><!----><!--[--><!--[--><!----><div class="group" data-v-87235a08><div class="item appearance" data-v-87235a08><p class="label" data-v-87235a08>Appearance</p><div class="appearance-action" data-v-87235a08><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-87235a08 data-v-1fd9f46d data-v-db80ed91><span class="check" data-v-db80ed91><span class="icon" data-v-db80ed91><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-1fd9f46d><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-1fd9f46d><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-87235a08><div class="item social-links" data-v-87235a08><div class="VPSocialLinks social-links-list" data-v-87235a08 data-v-43ee506b><!--[--><a class="VPSocialLink no-icon" href="https://github.com/efoxTeam/emp" aria-label="github" target="_blank" rel="noopener" data-v-43ee506b data-v-641bc9c5><svg role="img" viewBox="0 0 24 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"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-f0422255 data-v-346184d4><span class="container" data-v-346184d4><span class="top" data-v-346184d4></span><span class="middle" data-v-346184d4></span><span class="bottom" data-v-346184d4></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-53240a10 data-v-70c56f48><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-70c56f48><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-70c56f48>
25<path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-70c56f48>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-70c56f48 data-v-2f7ad0d6><button data-v-2f7ad0d6>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-53240a10 data-v-6ee7bf83><div class="curtain" data-v-6ee7bf83></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-6ee7bf83><span class="visually-hidden" id="sidebar-aria-label" data-v-6ee7bf83> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-6ee7bf83><section class="VPSidebarItem level-0 has-active" data-v-6ee7bf83 data-v-06a754bf><div class="item" role="button" tabindex="0" data-v-06a754bf><div class="indicator" data-v-06a754bf></div><h2 class="text" data-v-06a754bf>用例</h2><!----></div><div class="items" data-v-06a754bf><!--[--><div class="VPSidebarItem level-1 is-link" data-v-06a754bf data-v-06a754bf><div class="item" data-v-06a754bf><div class="indicator" data-v-06a754bf></div><a class='VPLink link link' data-v-06a754bf href='/demo/react-umd'><!--[--><p class="text" data-v-06a754bf>React umd</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-06a754bf data-v-06a754bf><div class="item" data-v-06a754bf><div class="indicator" data-v-06a754bf></div><a class='VPLink link link' data-v-06a754bf href='/demo/react-swc'><!--[--><p class="text" data-v-06a754bf>Swc React</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-53240a10 data-v-412f97d5><div class="VPDoc has-sidebar has-aside" data-v-412f97d5 data-v-215c7d52><!--[--><!--]--><div class="container" data-v-215c7d52><div class="aside" data-v-215c7d52><div class="aside-curtain" data-v-215c7d52></div><div class="aside-container" data-v-215c7d52><div class="aside-content" data-v-215c7d52><div class="VPDocAside" data-v-215c7d52 data-v-6abe8d12><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-6abe8d12 data-v-c7070588><div class="content" data-v-c7070588><div class="outline-marker" data-v-c7070588></div><div class="outline-title" role="heading" aria-level="2" data-v-c7070588>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-c7070588><span class="visually-hidden" id="doc-outline-aria-label" data-v-c7070588> Table of Contents for current page </span><ul class="root" data-v-c7070588 data-v-70ca2416><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-6abe8d12></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-215c7d52><div class="content-container" data-v-215c7d52><!--[--><!--]--><!----><main class="main" data-v-215c7d52><div style="position:relative;" class="vp-doc _demo_react-umd" data-v-215c7d52><div><h1 id="react-umd-共享" tabindex="-1">React umd 共享 <a class="header-anchor" href="#react-umd-共享" aria-label="Permalink to &quot;React umd 共享&quot;">​</a></h1><h2 id="启动命令" tabindex="-1">启动命令 <a class="header-anchor" href="#启动命令" aria-label="Permalink to &quot;启动命令&quot;">​</a></h2><blockquote><p>根目录执行</p></blockquote><div class="language-sh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#B392F0;">pnpm</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">react:umd</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6F42C1;">pnpm</span><span style="color:#24292E;"> </span><span style="color:#032F62;">react:umd</span></span></code></pre></div><h2 id="项目依赖" tabindex="-1">项目依赖 <a class="header-anchor" href="#项目依赖" aria-label="Permalink to &quot;项目依赖&quot;">​</a></h2><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span>
25<pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">&quot;axios&quot;: &quot;^0.21.4&quot;,</span></span>
26<span class="line"><span style="color:#e1e4e8;">&quot;mobx&quot;: &quot;^6.3.7&quot;,</span></span>
27<span class="line"><span style="color:#e1e4e8;">&quot;mobx-react&quot;: &quot;^7.2.1&quot;,</span></span>
28<span class="line"><span style="color:#e1e4e8;">&quot;mobx-react-lite&quot;: &quot;^3.2.2&quot;,</span></span>
29<span class="line"><span style="color:#e1e4e8;">&quot;react&quot;: &quot;^17.0.2&quot;,</span></span>
30<span class="line"><span style="color:#e1e4e8;">&quot;react-dom&quot;: &quot;^17.0.2&quot;,</span></span>
31<span class="line"><span style="color:#e1e4e8;">&quot;react-router-dom&quot;: &quot;5&quot;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">&quot;axios&quot;: &quot;^0.21.4&quot;,</span></span>
32<span class="line"><span style="color:#24292e;">&quot;mobx&quot;: &quot;^6.3.7&quot;,</span></span>
33<span class="line"><span style="color:#24292e;">&quot;mobx-react&quot;: &quot;^7.2.1&quot;,</span></span>
34<span class="line"><span style="color:#24292e;">&quot;mobx-react-lite&quot;: &quot;^3.2.2&quot;,</span></span>
35<span class="line"><span style="color:#24292e;">&quot;react&quot;: &quot;^17.0.2&quot;,</span></span>
36<span class="line"><span style="color:#24292e;">&quot;react-dom&quot;: &quot;^17.0.2&quot;,</span></span>
37<span class="line"><span style="color:#24292e;">&quot;react-router-dom&quot;: &quot;5&quot;</span></span></code></pre></div><h2 id="项目结构" tabindex="-1">项目结构 <a class="header-anchor" href="#项目结构" aria-label="Permalink to &quot;项目结构&quot;">​</a></h2><h3 id="基站项目-共享库" tabindex="-1">基站项目 - 共享库 <a class="header-anchor" href="#基站项目-共享库" aria-label="Permalink to &quot;基站项目 - 共享库&quot;">​</a></h3><blockquote><p>project/mf-host</p></blockquote><h4 id="emp-config-js" tabindex="-1">emp-config.js <a class="header-anchor" href="#emp-config-js" aria-label="Permalink to &quot;emp-config.js&quot;">​</a></h4><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> {</span><span style="color:#79B8FF;">defineConfig</span><span style="color:#E1E4E8;">} </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">require</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;@efox/emp&#39;</span><span style="color:#E1E4E8;">)</span></span>
38<span class="line"><span style="color:#79B8FF;">module</span><span style="color:#E1E4E8;">.</span><span style="color:#79B8FF;">exports</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">defineConfig</span><span style="color:#E1E4E8;">(() </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
39<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> {</span></span>
40<span class="line"><span style="color:#E1E4E8;">    server: {</span></span>
41<span class="line"><span style="color:#E1E4E8;">      port: </span><span style="color:#79B8FF;">8881</span><span style="color:#E1E4E8;">,</span></span>
42<span class="line"><span style="color:#E1E4E8;">    },</span></span>
43<span class="line"><span style="color:#E1E4E8;">    empShare: {</span></span>
44<span class="line"><span style="color:#E1E4E8;">      name: </span><span style="color:#9ECBFF;">&#39;mfHost&#39;</span><span style="color:#E1E4E8;">, </span><span style="color:#6A737D;">//共享名称</span></span>
45<span class="line"><span style="color:#E1E4E8;">      exposes: {</span><span style="color:#6A737D;">// 共享组件</span></span>
46<span class="line"><span style="color:#E1E4E8;">        </span><span style="color:#9ECBFF;">&#39;./App&#39;</span><span style="color:#E1E4E8;">: </span><span style="color:#9ECBFF;">&#39;./src/App&#39;</span><span style="color:#E1E4E8;">,</span></span>
47<span class="line"><span style="color:#E1E4E8;">        </span><span style="color:#9ECBFF;">&#39;./incStore&#39;</span><span style="color:#E1E4E8;">: </span><span style="color:#9ECBFF;">&#39;./src/store/incStore&#39;</span><span style="color:#E1E4E8;">,</span></span>
48<span class="line"><span style="color:#E1E4E8;">        </span><span style="color:#9ECBFF;">&#39;./css&#39;</span><span style="color:#E1E4E8;">: </span><span style="color:#9ECBFF;">&#39;./src/Button/Button.module.css&#39;</span><span style="color:#E1E4E8;">,</span><span style="color:#6A737D;">//共享样式</span></span>
49<span class="line"><span style="color:#E1E4E8;">      },</span></span>
50<span class="line"><span style="color:#E1E4E8;">      shared: {</span><span style="color:#6A737D;">
50//公用库</span></span>
51<span class="line"><span style="color:#E1E4E8;">        react: {requiredVersion: </span><span style="color:#9ECBFF;">&#39;^17.0.1&#39;</span><span style="color:#E1E4E8;">, singleton: </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">},</span></span>
52<span class="line"><span style="color:#E1E4E8;">        </span><span style="color:#9ECBFF;">&#39;react-dom&#39;</span><span style="color:#E1E4E8;">: {requiredVersion: </span><span style="color:#9ECBFF;">&#39;^17.0.1&#39;</span><span style="color:#E1E4E8;">, singleton: </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">},</span></span>
53<span class="line"><span style="color:#E1E4E8;">      },</span></span>
54<span class="line"><span style="color:#E1E4E8;">    },</span></span>
55<span class="line"><span style="color:#E1E4E8;">  }</span></span>
56<span class="line"><span style="color:#E1E4E8;">})</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> {</span><span style="color:#005CC5;">defineConfig</span><span style="color:#24292E;">} </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">require</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;@efox/emp&#39;</span><span style="color:#24292E;">)</span></span>
57<span class="line"><span style="color:#005CC5;">module</span><span style="color:#24292E;">.</span><span style="color:#005CC5;">exports</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">defineConfig</span><span style="color:#24292E;">(() </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
58<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> {</span></span>
59<span class="line"><span style="color:#24292E;">    server: {</span></span>
60<span class="line"><span style="color:#24292E;">      port: </span><span style="color:#005CC5;">8881</span><span style="color:#24292E;">,</span></span>
61<span class="line"><span style="color:#24292E;">    },</span></span>
62<span class="line"><span style="color:#24292E;">    empShare: {</span></span>
63<span class="line"><span style="color:#24292E;">      name: </span><span style="color:#032F62;">&#39;mfHost&#39;</span><span style="color:#24292E;">, </span><span style="color:#6A737D;">//共享名称</span></span>
64<span class="line"><span style="color:#24292E;">      exposes: {</span><span style="color:#6A737D;">// 共享组件</span></span>
65<span class="line"><span style="color:#24292E;">        </span><span style="color:#032F62;">&#39;./App&#39;</span><span style="color:#24292E;">: </span><span style="color:#032F62;">&#39;./src/App&#39;</span><span style="color:#24292E;">,</span></span>
66<span class="line"><span style="color:#24292E;">        </span><span style="color:#032F62;">&#39;./incStore&#39;</span><span style="color:#24292E;">: </span><span style="color:#032F62;">&#39;./src/store/incStore&#39;</span><span style="color:#24292E;">,</span></span>
67<span class="line"><span style="color:#24292E;">        </span><span style="color:#032F62;">&#39;./css&#39;</span><span style="color:#24292E;">: </span><span style="color:#032F62;">&#39;./src/Button/Button.module.css&#39;</span><span style="color:#24292E;">,</span><span style="color:#6A737D;">//共享样式</span></span>
68<span class="line"><span style="color:#24292E;">      },</span></span>
69<span class="line"><span style="color:#24292E;">      shared: {</span><span style="color:#6A737D;">//公用库</span></span>
70<span class="line"><span style="color:#24292E;">        react: {requiredVersion: </span><span style="color:#032F62;">&#39;^17.0.1&#39;</span><span style="color:#24292E;">, singleton: </span><span style="color:#005CC5;">true</span><span style="color:#24292E;">},</span></span>
71<span class="line"><span style="color:#24292E;">        </span><span style="color:#032F62;">&#39;react-dom&#39;</span><span style="color:#24292E;">: {requiredVersion: </span><span style="color:#032F62;">&#39;
71^17.0.1&#39;</span><span style="color:#24292E;">, singleton: </span><span style="color:#005CC5;">true</span><span style="color:#24292E;">},</span></span>
72<span class="line"><span style="color:#24292E;">      },</span></span>
73<span class="line"><span style="color:#24292E;">    },</span></span>
74<span class="line"><span style="color:#24292E;">  }</span></span>
75<span class="line"><span style="color:#24292E;">})</span></span></code></pre></div><h4 id="共享模块-逻辑" tabindex="-1">共享模块 逻辑 <a class="header-anchor" href="#共享模块-逻辑" aria-label="Permalink to &quot;共享模块 逻辑&quot;">​</a></h4><ul><li>Store 状态管理 <a href="https://github.com/efoxTeam/emp/blob/main/projects/mf-host/src/store/incStore.ts" target="_blank" rel="noreferrer">store/incStore.ts</a></li></ul><div class="tip custom-block"><p class="custom-block-title">提示</p><ul><li>使用状态管理同时需要共享需求,最好使用去中心化的方式导出 不用 provider 进行封装</li><li>共享 Store 可以让主应用调用,从而操作基站相关逻辑</li></ul></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> {makeAutoObservable} </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;mobx&#39;</span></span>
76<span class="line"><span style="color:#F97583;">class</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">IncStore</span><span style="color:#E1E4E8;"> {</span></span>
77<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#FFAB70;">num</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span></span>
78<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#FFAB70;">code</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">any</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;&#39;</span></span>
79<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">constructor</span><span style="color:#E1E4E8;">() {</span></span>
80<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">makeAutoObservable</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">this</span><span style="color:#E1E4E8;">)</span></span>
81<span class="line"><span style="color:#E1E4E8;">  }</span></span>
82<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#B392F0;">inc</span><span style="color:#E1E4E8;">() {</span></span>
83<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#79B8FF;">this</span><span style="color:#E1E4E8;">.num </span><span style="color:#F97583;">+=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">1</span></span>
84<span class="line"><span style="color:#E1E4E8;">  }</span></span>
85<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">async</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">loadData</span><span style="color:#E1E4E8;">() {</span></span>
86<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">d</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">await</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fetch</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;https://unpkg.com/[email protected]&#39;</span><span style="color:#E1E4E8;">).</span><span style="color:#B392F0;">then</span><span style="color:#E1E4E8;">(</span><span style="color:#FFAB70;">res</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> res.</span><span style="color:#B392F0;">text</span><span style="color:#E1E4E8;">())</span></span>
87<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#79B8FF;">this</span><span style="color:#E1E4E8;">.code </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> d</span></span>
88<span class="line"><span style="color:#E1E4E8;">  }</span></span>
89<span class="line"><span style="color:#E1E4E8;">}</span></span>
90<span class="line"></span>
91<span class="line"><span style="color:#F97583;">export</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">default</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">new</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">IncStore</span><span style="color:#E1E4E8;">()</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">
91import</span><span style="color:#24292E;"> {makeAutoObservable} </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;mobx&#39;</span></span>
92<span class="line"><span style="color:#D73A49;">class</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">IncStore</span><span style="color:#24292E;"> {</span></span>
93<span class="line"><span style="color:#24292E;">  </span><span style="color:#E36209;">num</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">0</span></span>
94<span class="line"><span style="color:#24292E;">  </span><span style="color:#E36209;">code</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">any</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;&#39;</span></span>
95<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">constructor</span><span style="color:#24292E;">() {</span></span>
96<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">makeAutoObservable</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">this</span><span style="color:#24292E;">)</span></span>
97<span class="line"><span style="color:#24292E;">  }</span></span>
98<span class="line"><span style="color:#24292E;">  </span><span style="color:#6F42C1;">inc</span><span style="color:#24292E;">() {</span></span>
99<span class="line"><span style="color:#24292E;">    </span><span style="color:#005CC5;">this</span><span style="color:#24292E;">.num </span><span style="color:#D73A49;">+=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">1</span></span>
100<span class="line"><span style="color:#24292E;">  }</span></span>
101<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">async</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">loadData</span><span style="color:#24292E;">() {</span></span>
102<span class="line"><span style="color:#24292E;">    </span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">d</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">await</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fetch</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;https://unpkg.com/[email protected]&#39;</span><span style="color:#24292E;">).</span><span style="color:#6F42C1;">then</span><span style="color:#24292E;">(</span><span style="color:#E36209;">res</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> res.</span><span style="color:#6F42C1;">text</span><span style="color:#24292E;">())</span></span>
103<span class="line"><span style="color:#24292E;">    </span><span style="color:#005CC5;">this</span><span style="color:#24292E;">.code </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> d</span></span>
104<span class="line"><span style="color:#24292E;">  }</span></span>
105<span class="line"><span style="color:#24292E;">}</span></span>
106<span class="line"></span>
107<span class="line"><span style="color:#D73A49;">export</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">default</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">new</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">IncStore</span><span style="color:#24292E;">()</span></span></code></pre></div><ul><li>App 组件 <a href="https://github.com/efoxTeam/emp/blob/main/projects/mf-host/src/App.tsx" target="_blank" rel="noreferrer">App.tsx</a></li></ul><div class="tip custom-block"><p class="custom-block-title">App的作用</p><ul><li>App为基站的组件 expose 出口</li><li>整合 <code>button</code> <code>StoreComp</code> 等组件,形成带业务形态的共享组件</li></ul></div><blockquote><p>组合 作为业务组件 并 导出</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span>
107<pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> {Button} </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;src/Button&#39;</span></span>
108<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> StoreComp </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;./StoreComp&#39;</span></span>
109<span class="line"><span style="color:#F97583;">export</span><span style="color:#E1E4E8;"> {Button, StoreComp}</span></span>
110<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">App</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> () </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
111<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> (</span></span>
112<span class="line"><span style="color:#E1E4E8;">    &lt;&gt;</span></span>
113<span class="line"><span style="color:#E1E4E8;">      &lt;</span><span style="color:#85E89D;">h1</span><span style="color:#E1E4E8;">&gt;Micro Host&lt;/</span><span style="color:#85E89D;">h1</span><span style="color:#E1E4E8;">&gt;</span></span>
114<span class="line"><span style="color:#E1E4E8;">      &lt;</span><span style="color:#79B8FF;">StoreComp</span><span style="color:#E1E4E8;"> /&gt;</span></span>
115<span class="line"><span style="color:#E1E4E8;">      &lt;</span><span style="color:#79B8FF;">Button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">customLabel</span><span style="color:#F97583;">=</span><span style="color:#9ECBFF;">&quot;HOST&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
116<span class="line"><span style="color:#E1E4E8;">    &lt;/&gt;</span></span>
117<span class="line"><span style="color:#E1E4E8;">  )</span></span>
118<span class="line"><span style="color:#E1E4E8;">}</span></span>
119<span class="line"><span style="color:#F97583;">export</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">default</span><span style="color:#E1E4E8;"> App</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> {Button} </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;src/Button&#39;</span></span>
120<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> StoreComp </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;./StoreComp&#39;</span></span>
121<span class="line"><span style="color:#D73A49;">export</span><span style="color:#24292E;"> {Button, StoreComp}</span></span>
122<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">App</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> () </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
123<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> (</span></span>
124<span class="line"><span style="color:#24292E;">    &lt;&gt;</span></span>
125<span class="line"><span style="color:#24292E;">      &lt;</span><span style="color:#22863A;">h1</span><span style="color:#24292E;">&gt;Micro Host&lt;/</span><span style="color:#22863A;">h1</span><span style="color:#24292E;">&gt;</span></span>
126<span class="line"><span style="color:#24292E;">      &lt;</span><span style="color:#005CC5;">StoreComp</span><span style="color:#24292E;"> /&gt;</span></span>
127<span class="line"><span style="color:#24292E;">      &lt;</span><span style="color:#005CC5;">Button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">customLabel</span><span style="color:#D73A49;">=</span><span style="color:#032F62;">&quot;HOST&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
128<span class="line"><span style="color:#24292E;">    &lt;/&gt;</span></span>
129<span class="line"><span style="color:#24292E;">  )</span></span>
130<span class="line"><span style="color:#24292E;">}</span></span>
131<span class="line"><span style="color:#D73A49;">export</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">default</span><span style="color:#24292E;"> App</span></span></code></pre></div><ul><li>StoreComp 组件 <a href="https://github.com/efoxTeam/emp/blob/main/projects/mf-host/src/StoreComp.tsx" target="_blank" rel="noreferrer">StoreComp.tsx</a></li></ul><blockquote><p>利用Mobx 绑定进行状态管理组件 与 IncStore 联动</p></blockquote><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span>
131<pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> {observer} </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;mobx-react&#39;</span></span>
132<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> incStore </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;./store/incStore&#39;</span></span>
133<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">StoreComp</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">observer</span><span style="color:#E1E4E8;">(() </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
134<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> (</span></span>
135<span class="line"><span style="color:#E1E4E8;">    &lt;&gt;</span></span>
136<span class="line"><span style="color:#E1E4E8;">      &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;{incStore.num}&lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
137<span class="line"><span style="color:#E1E4E8;">      &lt;</span><span style="color:#85E89D;">pre</span><span style="color:#E1E4E8;">&gt;{incStore.code}&lt;/</span><span style="color:#85E89D;">pre</span><span style="color:#E1E4E8;">&gt;</span></span>
138<span class="line"><span style="color:#E1E4E8;">      &lt;</span><span style="color:#85E89D;">button</span></span>
139<span class="line"><span style="color:#E1E4E8;">        </span><span style="color:#B392F0;">onClick</span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;">{() </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
140<span class="line"><span style="color:#E1E4E8;">          incStore.</span><span style="color:#B392F0;">inc</span><span style="color:#E1E4E8;">()</span></span>
141<span class="line"><span style="color:#E1E4E8;">          incStore.</span><span style="color:#B392F0;">loadData</span><span style="color:#E1E4E8;">()</span></span>
142<span class="line"><span style="color:#E1E4E8;">        }}</span></span>
143<span class="line"><span style="color:#E1E4E8;">      &gt;</span></span>
144<span class="line"><span style="color:#E1E4E8;">        +1</span></span>
145<span class="line"><span style="color:#E1E4E8;">      &lt;/</span><span style="color:#85E89D;">button</span><span style="color:#E1E4E8;">&gt;</span></span>
146<span class="line"><span style="color:#E1E4E8;">    &lt;/&gt;</span></span>
147<span class="line"><span style="color:#E1E4E8;">  )</span></span>
148<span class="line"><span style="color:#E1E4E8;">})</span></span>
149<span class="line"><span style="color:#F97583;">export</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">default</span><span style="color:#E1E4E8;"> StoreComp</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> {observer} </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;mobx-react&#39;</span></span>
150<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> incStore </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;./store/incStore&#39;</span></span>
151<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">StoreComp</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">observer</span><span style="color:#24292E;">(() </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
152<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> (</span></span>
153<span class="line"><span style="color:#24292E;">    &lt;&gt;</span></span>
154<span class="line"><span style="color:#24292E;">      &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;{incStore.num}&lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
155<span class="line"><span style="color:#24292E;">      &lt;</span><span style="color:#22863A;">pre</span><span style="color:#24292E;">&gt;{incStore.code}&lt;/</span><span style="color:#22863A;">pre</span><span style="color:#24292E;">&gt;</span></span>
156<span class="line"><span style="color:#24292E;">      &lt;</span><span style="color:#22863A;">button</span></span>
157<span class="line"><span style="color:#24292E;">        </span><span style="color:#6F42C1;">onClick</span><span style="color:#D73A49;">=</span><span style="color:#24292E;">{() </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
158<span class="line"><span style="color:#24292E;">          incStore.</span><span style="color:#6F42C1;">inc</span><span style="color:#24292E;">()</span></span>
159<span class="line"><span style="color:#24292E;">          incStore.</span><span style="color:#6F42C1;">loadData</span><span style="color:#24292E;">()</span></span>
160<span class="line"><span style="color:#24292E;">        }}</span></span>
161<span class="line"><span style="color:#24292E;">      &gt;</span></span>
162<span class="line"><span style="color:#24292E;">        +1</span></span>
163<span class="line"><span style="color:#24292E;">      &lt;/</span><span style="color:#22863A;">button</span><span style="color:#24292E;">&gt;</span></span>
164<span class="line"><span style="color:#24292E;">    &lt;/&gt;</span></span>
165<span class="line"><span style="color:#24292E;">  )</span></span>
166<span class="line"><span style="color:#24292E;">})</span></span>
167<span class="line"><span style="color:#D73A49;">export</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">default</span><span style="color:#24292E;"> StoreComp</span></span></code></pre></div><ul><li>Button 组件 <a href="https://github.com/efoxTeam/emp/blob/main/projects/mf-host/src/Button/index.tsx" target="_blank" rel="noreferrer">Button/index.tsx</a></li></ul><h4 id="tsconfig-json" tabindex="-1">tsconfig.json <a class="header-anchor" href="#tsconfig-json" aria-label="Permalink to &quot;tsconfig.json&quot;">​</a></h4><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</span>
167<pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">{</span></span>
168<span class="line"><span style="color:#E1E4E8;">	</span><span style="color:#79B8FF;">&quot;extends&quot;</span><span style="color:#E1E4E8;">: </span><span style="color:#9ECBFF;">&quot;@efox/emp/emp-tsconfig&quot;</span><span style="color:#E1E4E8;">, </span><span style="color:#6A737D;">//集成emp配置</span></span>
169<span class="line"><span style="color:#E1E4E8;">	</span><span style="color:#79B8FF;">&quot;compilerOptions&quot;</span><span style="color:#E1E4E8;">: {</span></span>
170<span class="line"><span style="color:#E1E4E8;">		</span><span style="color:#79B8FF;">&quot;types&quot;</span><span style="color:#E1E4E8;">: [</span></span>
171<span class="line"><span style="color:#E1E4E8;">			</span><span style="color:#9ECBFF;">&quot;@efox/emp/client&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">//加入 emp类型提示</span></span>
172<span class="line"><span style="color:#E1E4E8;">		],</span></span>
173<span class="line"><span style="color:#E1E4E8;">		</span><span style="color:#79B8FF;">&quot;baseUrl&quot;</span><span style="color:#E1E4E8;">: </span><span style="color:#9ECBFF;">&quot;.&quot;</span><span style="color:#E1E4E8;">,</span></span>
174<span class="line"><span style="color:#E1E4E8;">	},</span></span>
175<span class="line"><span style="color:#E1E4E8;">	</span><span style="color:#79B8FF;">&quot;include&quot;</span><span style="color:#E1E4E8;">: [</span></span>
176<span class="line"><span style="color:#E1E4E8;">		</span><span style="color:#9ECBFF;">&quot;src&quot;</span><span style="color:#E1E4E8;">,</span></span>
177<span class="line"><span style="color:#E1E4E8;">	]</span></span>
178<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">{</span></span>
179<span class="line"><span style="color:#24292E;">	</span><span style="color:#005CC5;">&quot;extends&quot;</span><span style="color:#24292E;">: </span><span style="color:#032F62;">&quot;@efox/emp/emp-tsconfig&quot;</span><span style="color:#24292E;">, </span><span style="color:#6A737D;">//集成emp配置</span></span>
180<span class="line"><span style="color:#24292E;">	</span><span style="color:#005CC5;">&quot;compilerOptions&quot;</span><span style="color:#24292E;">: {</span></span>
181<span class="line"><span style="color:#24292E;">		</span><span style="color:#005CC5;">&quot;types&quot;</span><span style="color:#24292E;">: [</span></span>
182<span class="line"><span style="color:#24292E;">			</span><span style="color:#032F62;">&quot;@efox/emp/client&quot;</span><span style="color:#24292E;"> </span><span style="color:#6A737D;">//加入 emp类型提示</span></span>
183<span class="line"><span style="color:#24292E;">		],</span></span>
184<span class="line"><span style="color:#24292E;">		</span><span style="color:#005CC5;">&quot;baseUrl&quot;</span><span style="color:#24292E;">: </span><span style="color:#032F62;">&quot;.&quot;</span><span style="color:#24292E;">,</span></span>
185<span class="line"><span style="color:#24292E;">	},</span></span>
186<span class="line"><span style="color:#24292E;">	</span><span style="color:#005CC5;">&quot;include&quot;</span><span style="color:#24292E;">: [</span></span>
187<span class="line"><span style="color:#24292E;">		</span><span style="color:#032F62;">&quot;src&quot;</span><span style="color:#24292E;">,</span></span>
188<span class="line"><span style="color:#24292E;">	]</span></span>
189<span class="line"><span style="color:#24292E;">}</span></span></code></pre></div><h4 id="d-ts-生成与共享" tabindex="-1">d.ts 生成与共享 <a class="header-anchor" href="#d-ts-生成与共享" aria-label="Permalink to &quot;d.ts 生成与共享&quot;">​</a></h4><p>执行命令</p><div class="language-sh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#79B8FF;">cd</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">projects/mf-host</span></span>
190<span class="line"><span style="color:#B392F0;">pnpm</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">build:ts</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#005CC5;">cd</span><span style="color:#24292E;"> </span><span style="color:#032F62;">projects/mf-host</span></span>
191<span class="line"><span style="color:#6F42C1;">pnpm</span><span style="color:#24292E;"> </span><span style="color:#032F62;">build:ts</span></span></code></pre></div><ul><li><code>projects/mf-host</code> 目录会生成 <code>dist/empShareTypes</code> 目录提供给主项目进行同步</li><li>通过 <code>pnpm start</code> 即可发布共享给主应用</li><li>通过 <code>pnpm dev</code> 也可以访问 <code>index.d.ts</code> 文件 <code>dev环境 为保证调试性能 默认不生成 d.ts</code></li></ul><h3 id="主项目-应用" tabindex="-1">主项目 - 应用 <a class="header-anchor" href="#主项目-应用" aria-label="Permalink to &quot;主项目 - 应用&quot;">​</a></h3><blockquote><p>project/mf-app</p></blockquote><h4 id="step-1" tabindex="-1">Step 1 <a class="header-anchor" href="#step-1" aria-label="Permalink to &quot;Step 1&quot;">​</a></h4><p>配置 emp-config.js 声明使用远程内容 如</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span>
191<pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> {</span><span style="color:#79B8FF;">defineConfig</span><span style="color:#E1E4E8;">} </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">require</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;@efox/emp&#39;</span><span style="color:#E1E4E8;">)</span></span>
192<span class="line"><span style="color:#79B8FF;">module</span><span style="color:#E1E4E8;">.</span><span style="color:#79B8FF;">exports</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">defineConfig</span><span style="color:#E1E4E8;">(() </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> {</span></span>
193<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> {</span></span>
194<span class="line"><span style="color:#E1E4E8;">    server: {</span></span>
195<span class="line"><span style="color:#E1E4E8;">      port: </span><span style="color:#79B8FF;">8882</span><span style="color:#E1E4E8;">,</span></span>
196<span class="line"><span style="color:#E1E4E8;">    },</span></span>
197<span class="line"><span style="color:#E1E4E8;">    empShare: {</span></span>
198<span class="line"><span style="color:#E1E4E8;">      name: </span><span style="color:#9ECBFF;">&#39;mfApp&#39;</span><span style="color:#E1E4E8;">,</span></span>
199<span class="line"><span style="color:#E1E4E8;">      remotes: {</span></span>
200<span class="line"><span style="color:#E1E4E8;">        </span><span style="color:#9ECBFF;">&#39;@mfHost&#39;</span><span style="color:#E1E4E8;">: </span><span style="color:#9ECBFF;">`mfHost@http://127.0.0.1:8881/emp.js`</span><span style="color:#E1E4E8;">,</span><span style="color:#6A737D;">//远程基站地址</span></span>
201<span class="line"><span style="color:#E1E4E8;">      },</span></span>
202<span class="line"><span style="color:#E1E4E8;">      exposes: {</span></span>
203<span class="line"><span style="color:#E1E4E8;">        </span><span style="color:#9ECBFF;">&#39;./App&#39;</span><span style="color:#E1E4E8;">: </span><span style="color:#9ECBFF;">&#39;./src/App&#39;</span><span style="color:#E1E4E8;">,</span></span>
204<span class="line"><span style="color:#E1E4E8;">      },</span></span>
205<span class="line"><span style="color:#E1E4E8;">      shared: {</span></span>
206<span class="line"><span style="color:#E1E4E8;">        react: {requiredVersion: </span><span style="color:#9ECBFF;">&#39;^17.0.1&#39;</span><span style="color:#E1E4E8;">, singleton: </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">},</span></span>
207<span class="line"><span style="color:#E1E4E8;">        </span><span style="color:#9ECBFF;">&#39;react-dom&#39;</span><span style="color:#E1E4E8;">: {requiredVersion: </span><span style="color:#9ECBFF;">&#39;^17.0.1&#39;</span><span style="color:#E1E4E8;">, singleton: </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">},</span></span>
208<span class="line"><span style="color:#E1E4E8;">      },</span></span>
209<span class="line"><span style="color:#E1E4E8;">    },</span></span>
210<span class="line"><span style="color:#E1E4E8;">  }</span></span>
211<span class="line"><span style="color:#E1E4E8;">})</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> {</span><span style="color:#005CC5;">defineConfig</span><span style="color:#24292E;">} </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">require</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;@efox/emp&#39;</span><span style="color:#24292E;">)</span></span>
212<span class="line"><span style="color:#005CC5;">module</span><span style="color:#24292E;">.</span><span style="color:#005CC5;">exports</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">defineConfig</span><span style="color:#24292E;">(() </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> {</span></span>
213<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> {</span></span>
214<span class="line"><span style="color:#24292E;">    server: {</span></span>
215<span class="line"><span style="color:#24292E;">      port: </span><span style="color:#005CC5;">8882</span><span style="color:#24292E;">,</span></span>
216<span class="line"><span style="color:#24292E;">    },</span></span>
217<span class="line"><span style="color:#24292E;">    empShare: {</span></span>
218<span class="line"><span style="color:#24292E;">      name: </span><span style="color:#032F62;">&#39;mfApp&#39;</span><span style="color:#24292E;">,</span></span>
219<span class="line"><span style="color:#24292E;">      remotes: {</span></span>
220<span class="line"><span style="color:#24292E;">        </span><span style="color:#032F62;">&#39;@mfHost&#39;</span><span style="color:#24292E;">: </span><span style="color:#032F62;">`mfHost@http://127.0.0.1:8881/emp.js`</span><span style="color:#24292E;">,</span><span style="color:#6A737D;">//远程基站地址</span></span>
221<span class="line"><span style="color:#24292E;">      },</span></span>
222<span class="line"><span style="color:#24292E;">      exposes: {</span></span>
223<span class="line"><span style="color:#24292E;">        </span><span style="color:#032F62;">&#39;./App&#39;</span><span style="color:#24292E;">: </span><span style="color:#032F62;">&#39;./src/App&#39;</span><span style="color:#24292E;">,</span></span>
224<span class="line"><span style="color:#24292E;">      },</span></span>
225<span class="line"><span style="color:#24292E;">      shared: {</span></span>
226<span class="line"><span style="color:#24292E;">        react: {requiredVersion: </span><span style="color:#032F62;">&#39;
226^17.0.1&#39;</span><span style="color:#24292E;">, singleton: </span><span style="color:#005CC5;">true</span><span style="color:#24292E;">},</span></span>
227<span class="line"><span style="color:#24292E;">        </span><span style="color:#032F62;">&#39;react-dom&#39;</span><span style="color:#24292E;">: {requiredVersion: </span><span style="color:#032F62;">&#39;^17.0.1&#39;</span><span style="color:#24292E;">, singleton: </span><span style="color:#005CC5;">true</span><span style="color:#24292E;">},</span></span>
228<span class="line"><span style="color:#24292E;">      },</span></span>
229<span class="line"><span style="color:#24292E;">    },</span></span>
230<span class="line"><span style="color:#24292E;">  }</span></span>
231<span class="line"><span style="color:#24292E;">})</span></span></code></pre></div><h4 id="step-2" tabindex="-1">Step 2 <a class="header-anchor" href="#step-2" aria-label="Permalink to &quot;Step 2&quot;">​</a></h4><p>开发前,先同步 <code>d.ts</code> 执行 <code>emp dts</code>,同步后 代码同步到 <code>src/empShareypes</code></p><ul><li>@mfHost.d.ts</li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">declare</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">module</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;@mfHost/App&#39;</span><span style="color:#E1E4E8;"> {</span></span>
232<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#6A737D;">/// &lt;reference types=&quot;react&quot; /&gt;</span></span>
233<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> {Button} </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;@mfHost/Button&#39;</span></span>
234<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> StoreComp </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;@mfHost/StoreComp&#39;</span></span>
235<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">export</span><span style="color:#E1E4E8;"> {Button, StoreComp}</span></span>
236<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">App</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> () </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">JSX</span><span style="color:#E1E4E8;">.</span><span style="color:#B392F0;">Element</span></span>
237<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">export</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">default</span><span style="color:#E1E4E8;"> App</span></span>
238<span class="line"><span style="color:#E1E4E8;">}</span></span>
239<span class="line"><span style="color:#F97583;">declare</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">module</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;@mfHost/bootstrap&#39;</span><span style="color:#E1E4E8;"> {</span></span>
240<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">export</span><span style="color:#E1E4E8;"> {}</span></span>
241<span class="line"><span style="color:#E1E4E8;">}</span></span>
242<span class="line"><span style="color:#F97583;">declare</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">module</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;@mfHost&#39;</span><span style="color:#E1E4E8;"> {}</span></span>
243<span class="line"><span style="color:#F97583;">declare</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">module</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;@mfHost/StoreComp&#39;</span><span style="color:#E1E4E8;"> {</span></span>
244<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#6A737D;">/// &lt;reference types=&quot;react&quot; /&gt;</span></span>
245<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">StoreComp</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> () </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">JSX</span><span style="color:#E1E4E8;">.</span><span style="color:#B392F0;">Element</span></span>
246<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">export</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">default</span><span style="color:#E1E4E8;"> StoreComp</span></span>
247<span class="line"><span style="color:#E1E4E8;">}</span></span>
248<span class="line"><span style="color:#F97583;">declare</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">module</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;@mfHost/Button&#39;</span><span style="color:#E1E4E8;"> {</span></span>
249<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">
249import</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">*</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">as</span><span style="color:#E1E4E8;"> React </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;react&#39;</span></span>
250<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">interface</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ButtonProps</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">extends</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">React</span><span style="color:#E1E4E8;">.</span><span style="color:#B392F0;">ButtonHTMLAttributes</span><span style="color:#E1E4E8;">&lt;</span><span style="color:#B392F0;">HTMLButtonElement</span><span style="color:#E1E4E8;">&gt; {</span></span>
251<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#FFAB70;">customLabel</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">string</span></span>
252<span class="line"><span style="color:#E1E4E8;">  }</span></span>
253<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">export</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">Button</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> ({</span><span style="color:#FFAB70;">customLabel</span><span style="color:#E1E4E8;">, </span><span style="color:#F97583;">...</span><span style="color:#B392F0;">rest</span><span style="color:#E1E4E8;">}</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ButtonProps</span><span style="color:#E1E4E8;">) </span><span style="color:#F97583;">=&gt;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">JSX</span><span style="color:#E1E4E8;">.</span><span style="color:#B392F0;">Element</span></span>
254<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">export</span><span style="color:#E1E4E8;"> {}</span></span>
255<span class="line"><span style="color:#E1E4E8;">}</span></span>
256<span class="line"><span style="color:#F97583;">declare</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">module</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;@mfHost/incStore&#39;</span><span style="color:#E1E4E8;"> {</span></span>
257<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">class</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">IncStore</span><span style="color:#E1E4E8;"> {</span></span>
258<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#FFAB70;">num</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">number</span></span>
259<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#FFAB70;">code</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">any</span></span>
260<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#F97583;">constructor</span><span style="color:#E1E4E8;">()</span></span>
261<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">inc</span><span style="color:#E1E4E8;">()</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">void</span></span>
262<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">loadData</span><span style="color:#E1E4E8;">()</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">Promise</span><span style="color:#E1E4E8;">&lt;</span><span style="color:#79B8FF;">void</span><span style="color:#E1E4E8;">&gt;</span></span>
263<span class="line"><span style="color:#E1E4E8;">  }</span></span>
264<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">_default</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">IncStore</span></span>
265<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">export</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">default</span><span style="color:#E1E4E8;"> _default</span></span>
266<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">declare</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">module</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;@mfHost/App&#39;</span><span style="color:#24292E;"> {</span></span>
267<span class="line"><span style="color:#24292E;">  </span><span style="color:#6A737D;">/// &lt;reference types=&quot;react&quot; /&gt;</span></span>
268<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">
268import</span><span style="color:#24292E;"> {Button} </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;@mfHost/Button&#39;</span></span>
269<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">import</span><span style="color:#24292E;"> StoreComp </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;@mfHost/StoreComp&#39;</span></span>
270<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">export</span><span style="color:#24292E;"> {Button, StoreComp}</span></span>
271<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">App</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> () </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">JSX</span><span style="color:#24292E;">.</span><span style="color:#6F42C1;">Element</span></span>
272<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">export</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">default</span><span style="color:#24292E;"> App</span></span>
273<span class="line"><span style="color:#24292E;">}</span></span>
274<span class="line"><span style="color:#D73A49;">declare</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">module</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;@mfHost/bootstrap&#39;</span><span style="color:#24292E;"> {</span></span>
275<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">export</span><span style="color:#24292E;"> {}</span></span>
276<span class="line"><span style="color:#24292E;">}</span></span>
277<span class="line"><span style="color:#D73A49;">declare</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">module</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;@mfHost&#39;</span><span style="color:#24292E;"> {}</span></span>
278<span class="line"><span style="color:#D73A49;">declare</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">module</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;@mfHost/StoreComp&#39;</span><span style="color:#24292E;"> {</span></span>
279<span class="line"><span style="color:#24292E;">  </span><span style="color:#6A737D;">/// &lt;reference types=&quot;react&quot; /&gt;</span></span>
280<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">StoreComp</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> () </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">JSX</span><span style="color:#24292E;">.</span><span style="color:#6F42C1;">Element</span></span>
281<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">export</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">default</span><span style="color:#24292E;"> StoreComp</span></span>
282<span class="line"><span style="color:#24292E;">}</span></span>
283<span class="line"><span style="color:#D73A49;">declare</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">module</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;@mfHost/Button&#39;</span><span style="color:#24292E;"> {</span></span>
284<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">import</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">*</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">as</span><span style="color:#24292E;"> React </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;react&#39;</span></span>
285<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">interface</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ButtonProps</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">extends</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">React</span><span style="color:#24292E;">.</span><span style="color:#6F42C1;">ButtonHTMLAttributes</span><span style="color:#24292E;">&lt;</span><span style="color:#6F42C1;">HTMLButtonElement</span><span style="color:#24292E;">&gt; {</span></span>
286<span class="line"><span style="color:#24292E;">    </span><span style="color:#E36209;">customLabel</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">string</span></span>
287<span class="line"><span style="color:#24292E;">  }</span></span>
288<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">export</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">Button</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> ({</span><span style="color:#E36209;">customLabel</span><span style="color:#24292E;">, </span><span style="color:#D73A49;">...</span><span style="color:#6F42C1;">rest</span><span style="color:#24292E;">}</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ButtonProps</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">=&gt;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">JSX</span><span style="color:#24292E;">.</span><span style="color:#6F42C1;">Element</span></span>
289<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">export</span><span style="color:#24292E;"> {}</span></span>
290<span class="line"><span style="color:#24292E;">}</span></span>
291<span class="line"><span style="color:#D73A49;">declare</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">module</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;@mfHost/incStore&#39;</span><span style="color:#24292E;"> {</span></span>
292<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">class</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">IncStore</span><span style="color:#24292E;"> {</span></span>
293<span class="line"><span style="color:#24292E;">    </span><span style="color:#E36209;">num</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">number</span></span>
294<span class="line"><span style="color:#24292E;">    </span><span style="color:#E36209;">code</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">any</span></span>
295<span class="line"><span style="color:#24292E;">    </span><span style="color:#D73A49;">constructor</span><span style="color:#24292E;">()</span></span>
296<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">inc</span><span style="color:#24292E;">()</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">void</span></span>
297<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">loadData</span><span style="color:#24292E;">()</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">Promise</span><span style="color:#24292E;">&lt;</span><span style="color:#005CC5;">void</span><span style="color:#24292E;">&gt;</span></span>
298<span class="line"><span style="color:#24292E;">  }</span></span>
299<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">_default</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">IncStore</span></span>
300<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">export</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">default</span><span style="color:#24292E;"> _default</span></span>
301<span class="line"><span style="color:#24292E;">}</span></span></code></pre></div><h4 id="step3" tabindex="-1">Step3 <a class="header-anchor" href="#step3" aria-label="Permalink to &quot;Step3&quot;">​</a></h4><blockquote><p>引用 基站内容</p></blockquote><ul><li>css 引用暂时无法同步类型 可以参考 <code>projects/mf-app/src/types.d.ts</code></li><li>样式引用 <code>import css from &#39;@mfHost/css&#39;</code> 如 <code>projects/mf-app/src/StoreComp.tsx</code></li><li>共享Store 以及 本地Store 用例 如 <code>projects/mf-app/src/App.tsx</code></li></ul><p>详细内容可以参考 <a href="https://github.com/efoxTeam/emp/tree/main/projects/mf-app" target="_blank" rel="noreferrer">Demo</a></p></div></div></main><footer class="VPDocFooter" data-v-215c7d52 data-v-4b781f39><!--[--><!--]--><!----><nav class="prev-next" data-v-4b781f39><div class="pager" data-v-4b781f39><!----></div><div class="pager" data-v-4b781f39><a class='pager-link next' data-v-4b781f39 href='/demo/react-swc'><span class="desc" data-v-4b781f39>Next page</span><span class="title" data-v-4b781f39>Swc React</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-53240a10 data-v-71c419ee><div class="container" data-v-71c419ee><p class="message" data-v-71c419ee>Released under the MIT License.</p><p class="copyright" data-v-71c419ee>Copyright © 2022 Ken Xu</p></div></footer><!--[--><!--]--></div></div>
302    
302<script>window.__VP_HASH_MAP__=JSON.parse("{\"develop_cli.md\":\"14240d91\",\"demo_react-swc.md\":\"a9f58228\",\"config_build.md\":\"7b23e084\",\"guide_index.md\":\"9d955eb8\",\"index.md\":\"3dc0c33b\",\"config_global.md\":\"5228ca74\",\"config_css.md\":\"e5c409ba\",\"develop_dotenv.md\":\"ab46153a\",\"config_server.md\":\"1dc65779\",\"develop_multi.md\":\"40f6cf8a\",\"develop_index.md\":\"1d494652\",\"plugin_rule.md\":\"63388eac\",\"develop_lib.md\":\"91bbb963\",\"develop_typescript.md\":\"0690438f\",\"config_debug.md\":\"d5c0e896\",\"config_dts.md\":\"6763fe7a\",\"config_index.md\":\"9f1c371e\",\"develop_empshare.md\":\"2f112ce7\",\"plugin_index.md\":\"746241af\",\"config_module.md\":\"23856c4d\",\"demo_react-umd.md\":\"66816e69\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"EMP\",\"description\":\"下一代微前端构建方案\",\"base\":\"/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/efoxTeam/emp\"}],\"nav\":[{\"text\":\"开发\",\"link\":\"/develop/\",\"activeMatch\":\"/develop/\"},{\"text\":\"用例\",\"link\":\"/demo/react-umd\",\"activeMatch\":\"/demo/\"},{\"text\":\"配置\",\"link\":\"/config/\",\"activeMatch\":\"/config/\"},{\"text\":\"插件\",\"link\":\"/plugin/\",\"activeMatch\":\"/plugin/\"},{\"text\":\"v2.7.2\",\"link\":\"https://github.com/efoxTeam/emp\"}],\"sidebar\":{\"/develop/\":[{\"text\":\"开发\",\"items\":[{\"text\":\"安装\",\"link\":\"/develop/\"},{\"text\":\"指令\",\"link\":\"/develop/cli\"},{\"text\":\"微前端\",\"link\":\"/develop/empshare\"},{\"text\":\"多入口\",\"link\":\"/develop/multi\"},{\"text\":\"dotenv\",\"link\":\"/develop/dotenv\"},{\"text\":\"Typescript\",\"link\":\"/develop/typescript\"},{\"text\":\"库模式\",\"link\":\"/develop/lib\"}]}],\"/demo/\":[{\"text\":\"用例\",\"items\":[{\"text\":\"React umd\",\"link\":\"/demo/react-umd\"},{\"text\":\"Swc React\",\"link\":\"/demo/react-swc\"}]}],\"/config/\":[{\"text\":\"配置\",\"items\":[{\"text\":\"配置入口\",\"link\":\"/config/\"},{\"text\":\"全局\",\"link\":\"/config/global\"},{\"text\":\"构建\",\"link\":\"/config/build\"},{\"text\":\"CSS\",\"link\":\"/config/css\"},{\"text\":\"模块编译\",\"link\":\"/config/module\"},{\"text\":\"DTS\",\"link\":\"/config/dts\"},{\"text\":\"服务\",\"link\":\"/config/server\"},{\"text\":\"调试\",\"link\":\"/config/debug\"}]}],\"/plugin/\":[{\"text\":\"插件\",\"items\":[{\"text\":\"官方插件\",\"link\":\"/plugin/\"},{\"text\":\"规范\",\"link\":\"/plugin/rule\"}]}]},\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2022 Ken Xu\"}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}");</script>
302
303    
304  </body>
305</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.