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 "React umd å
±äº«"">â</a></h1><h2 id="å¯å¨å½ä»¤" tabindex="-1">å¯å¨å½ä»¤ <a class="header-anchor" href="#å¯å¨å½ä»¤" aria-label="Permalink to "å¯å¨å½ä»¤"">â</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 "项ç®ä¾èµ"">â</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;">"axios": "^0.21.4",</span></span> 26<span class="line"><span style="color:#e1e4e8;">"mobx": "^6.3.7",</span></span> 27<span class="line"><span style="color:#e1e4e8;">"mobx-react": "^7.2.1",</span></span> 28<span class="line"><span style="color:#e1e4e8;">"mobx-react-lite": "^3.2.2",</span></span> 29<span class="line"><span style="color:#e1e4e8;">"react": "^17.0.2",</span></span> 30<span class="line"><span style="color:#e1e4e8;">"react-dom": "^17.0.2",</span></span> 31<span class="line"><span style="color:#e1e4e8;">"react-router-dom": "5"</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">"axios": "^0.21.4",</span></span> 32<span class="line"><span style="color:#24292e;">"mobx": "^6.3.7",</span></span> 33<span class="line"><span style="color:#24292e;">"mobx-react": "^7.2.1",</span></span> 34<span class="line"><span style="color:#24292e;">"mobx-react-lite": "^3.2.2",</span></span> 35<span class="line"><span style="color:#24292e;">"react": "^17.0.2",</span></span> 36<span class="line"><span style="color:#24292e;">"react-dom": "^17.0.2",</span></span> 37<span class="line"><span style="color:#24292e;">"react-router-dom": "5"</span></span></code></pre></div><h2 id="项ç®ç»æ" tabindex="-1">项ç®ç»æ <a class="header-anchor" href="#项ç®ç»æ" aria-label="Permalink to "项ç®ç»æ"">â</a></h2><h3 id="åºç«é¡¹ç®-å ±äº«åº" tabindex="-1">åºç«é¡¹ç® - å ±äº«åº <a class="header-anchor" href="#åºç«é¡¹ç®-å ±äº«åº" aria-label="Permalink to "åºç«é¡¹ç® - å ±äº«åº"">â</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 "emp-config.js"">â</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;">'@efox/emp'</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;">=></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;">'mfHost'</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;">'./App'</span><span style="color:#E1E4E8;">: </span><span style="color:#9ECBFF;">'./src/App'</span><span style="color:#E1E4E8;">,</span></span> 47<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'./incStore'</span><span style="color:#E1E4E8;">: </span><span style="color:#9ECBFF;">'./src/store/incStore'</span><span style="color:#E1E4E8;">,</span></span> 48<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'./css'</span><span style="color:#E1E4E8;">: </span><span style="color:#9ECBFF;">'./src/Button/Button.module.css'</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;">'^17.0.1'</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;">'react-dom'</span><span style="color:#E1E4E8;">: {requiredVersion: </span><span style="color:#9ECBFF;">'^17.0.1'</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;">'@efox/emp'</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;">=></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;">'mfHost'</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;">'./App'</span><span style="color:#24292E;">: </span><span style="color:#032F62;">'./src/App'</span><span style="color:#24292E;">,</span></span> 66<span class="line"><span style="color:#24292E;"> </span><span style="color:#032F62;">'./incStore'</span><span style="color:#24292E;">: </span><span style="color:#032F62;">'./src/store/incStore'</span><span style="color:#24292E;">,</span></span> 67<span class="line"><span style="color:#24292E;"> </span><span style="color:#032F62;">'./css'</span><span style="color:#24292E;">: </span><span style="color:#032F62;">'./src/Button/Button.module.css'</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;">'^17.0.1'</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;">'react-dom'</span><span style="color:#24292E;">: {requiredVersion: </span><span style="color:#032F62;">'
71^17.0.1'</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 "å ±äº«æ¨¡å é»è¾"">â</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;">'mobx'</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;">''</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;">'https://unpkg.com/[email protected]'</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;">=></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;">'mobx'</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;">''</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;">'https://unpkg.com/[email protected]'</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;">=></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;">'src/Button'</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;">'./StoreComp'</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;">=></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;"> <></span></span> 113<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">h1</span><span style="color:#E1E4E8;">>Micro Host</</span><span style="color:#85E89D;">h1</span><span style="color:#E1E4E8;">></span></span> 114<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#79B8FF;">StoreComp</span><span style="color:#E1E4E8;"> /></span></span> 115<span class="line"><span style="color:#E1E4E8;"> <</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;">"HOST"</span><span style="color:#E1E4E8;"> /></span></span> 116<span class="line"><span style="color:#E1E4E8;"> </></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;">'src/Button'</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;">'./StoreComp'</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;">=></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;"> <></span></span> 125<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">h1</span><span style="color:#24292E;">>Micro Host</</span><span style="color:#22863A;">h1</span><span style="color:#24292E;">></span></span> 126<span class="line"><span style="color:#24292E;"> <</span><span style="color:#005CC5;">StoreComp</span><span style="color:#24292E;"> /></span></span> 127<span class="line"><span style="color:#24292E;"> <</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;">"HOST"</span><span style="color:#24292E;"> /></span></span> 128<span class="line"><span style="color:#24292E;"> </></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;">'mobx-react'</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;">'./store/incStore'</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;">=></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;"> <></span></span> 136<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">>{incStore.num}</</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">></span></span> 137<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">pre</span><span style="color:#E1E4E8;">>{incStore.code}</</span><span style="color:#85E89D;">pre</span><span style="color:#E1E4E8;">></span></span> 138<span class="line"><span style="color:#E1E4E8;"> <</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;">=></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;"> ></span></span> 144<span class="line"><span style="color:#E1E4E8;"> +1</span></span> 145<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">button</span><span style="color:#E1E4E8;">></span></span> 146<span class="line"><span style="color:#E1E4E8;"> </></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;">'mobx-react'</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;">'./store/incStore'</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;">=></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;"> <></span></span> 154<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">p</span><span style="color:#24292E;">>{incStore.num}</</span><span style="color:#22863A;">p</span><span style="color:#24292E;">></span></span> 155<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">pre</span><span style="color:#24292E;">>{incStore.code}</</span><span style="color:#22863A;">pre</span><span style="color:#24292E;">></span></span> 156<span class="line"><span style="color:#24292E;"> <</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;">=></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;"> ></span></span> 162<span class="line"><span style="color:#24292E;"> +1</span></span> 163<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">button</span><span style="color:#24292E;">></span></span> 164<span class="line"><span style="color:#24292E;"> </></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 "tsconfig.json"">â</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;">"extends"</span><span style="color:#E1E4E8;">: </span><span style="color:#9ECBFF;">"@efox/emp/emp-tsconfig"</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;">"compilerOptions"</span><span style="color:#E1E4E8;">: {</span></span> 170<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">"types"</span><span style="color:#E1E4E8;">: [</span></span> 171<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">"@efox/emp/client"</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;">"baseUrl"</span><span style="color:#E1E4E8;">: </span><span style="color:#9ECBFF;">"."</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;">"include"</span><span style="color:#E1E4E8;">: [</span></span> 176<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">"src"</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;">"extends"</span><span style="color:#24292E;">: </span><span style="color:#032F62;">"@efox/emp/emp-tsconfig"</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;">"compilerOptions"</span><span style="color:#24292E;">: {</span></span> 181<span class="line"><span style="color:#24292E;"> </span><span style="color:#005CC5;">"types"</span><span style="color:#24292E;">: [</span></span> 182<span class="line"><span style="color:#24292E;"> </span><span style="color:#032F62;">"@efox/emp/client"</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;">"baseUrl"</span><span style="color:#24292E;">: </span><span style="color:#032F62;">"."</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;">"include"</span><span style="color:#24292E;">: [</span></span> 187<span class="line"><span style="color:#24292E;"> </span><span style="color:#032F62;">"src"</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 "d.ts çæä¸å ±äº«"">â</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 "ä¸»é¡¹ç® - åºç¨"">â</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 "Step 1"">â</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;">'@efox/emp'</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;">=></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;">'mfApp'</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;">'@mfHost'</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;">'./App'</span><span style="color:#E1E4E8;">: </span><span style="color:#9ECBFF;">'./src/App'</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;">'^17.0.1'</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;">'react-dom'</span><span style="color:#E1E4E8;">: {requiredVersion: </span><span style="color:#9ECBFF;">'^17.0.1'</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;">'@efox/emp'</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;">=></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;">'mfApp'</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;">'@mfHost'</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;">'./App'</span><span style="color:#24292E;">: </span><span style="color:#032F62;">'./src/App'</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;">'
226^17.0.1'</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;">'react-dom'</span><span style="color:#24292E;">: {requiredVersion: </span><span style="color:#032F62;">'^17.0.1'</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 "Step 2"">â</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;">'@mfHost/App'</span><span style="color:#E1E4E8;"> {</span></span> 232<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">/// <reference types="react" /></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;">'@mfHost/Button'</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;">'@mfHost/StoreComp'</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;">=></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;">'@mfHost/bootstrap'</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;">'@mfHost'</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;">'@mfHost/StoreComp'</span><span style="color:#E1E4E8;"> {</span></span> 244<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">/// <reference types="react" /></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;">=></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;">'@mfHost/Button'</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;">'react'</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;"><</span><span style="color:#B392F0;">HTMLButtonElement</span><span style="color:#E1E4E8;">> {</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;">=></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;">'@mfHost/incStore'</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;"><</span><span style="color:#79B8FF;">void</span><span style="color:#E1E4E8;">></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;">'@mfHost/App'</span><span style="color:#24292E;"> {</span></span> 267<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">/// <reference types="react" /></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;">'@mfHost/Button'</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;">'@mfHost/StoreComp'</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;">=></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;">'@mfHost/bootstrap'</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;">'@mfHost'</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;">'@mfHost/StoreComp'</span><span style="color:#24292E;"> {</span></span> 279<span class="line"><span style="color:#24292E;"> </span><span style="color:#6A737D;">/// <reference types="react" /></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;">=></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;">'@mfHost/Button'</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;">'react'</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;"><</span><span style="color:#6F42C1;">HTMLButtonElement</span><span style="color:#24292E;">> {</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;">=></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;">'@mfHost/incStore'</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;"><</span><span style="color:#005CC5;">void</span><span style="color:#24292E;">></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 "Step3"">â</a></h4><blockquote><p>å¼ç¨ åºç«å 容</p></blockquote><ul><li>css å¼ç¨ææ¶æ æ³åæ¥ç±»å å¯ä»¥åè <code>projects/mf-app/src/types.d.ts</code></li><li>æ ·å¼å¼ç¨ <code>import css from '@mfHost/css'</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.