初探 MicroApp，一个极致简洁的微前端框架

前言

哈喽大家好，我是海怪。

在微前端的领域里，相信大家都听说过阿里的 qiankun。我自己在上几个月也一直用它来做一些实践：

在使用过程中我发现 qiankun 还是有一些缺点的：

项目的侵入性依然很强。之前为了在组内推广，都做了 3 次分享，可把我口水说干了
qiankun 在沙箱方面依然有不少坑。看去年 qiankun 一年的 Change Log，发现都是在修复沙箱相关的问题

不仅我用 qiankun 难受，京东的小伙伴也用得很难受，所以，京东在去年 7 月推出了自己微前端解决方案 —— MicroApp。今天就带大家初探一下这个新星微前端框架吧。

特色

MicroApp 一上来就表明了自己的立场：

micro-appsingle-spa

WebComponentmicro-appCustomElementShadowDomWebComponent

它在 基座应用 和 子应用 之间充当桥梁胶水的作用。

有下面的优势：

使用简单。 将功能封装到 WebComponent 中
零依赖。 无依赖、更高的扩展性
兼容所有框架 技术栈无关

micro-app

注：所有代码都放在 Github 项目中。

架构

虽然官方也给出了完整的样例，不过里面代码太多了，所以我就弄一个简单一点的项目，架构如下：

起步

主应用使用 create-react-app 创建 React 项目：

npx create-react-app bigass-micro-app

micro-app

npm i @micro-zoe/micro-app --save

创建完了后，先用 React Router 来搭建基座应用的路由系统：

const App = () => {
   
  return (
    <BrowserRouter>
      <div>
        <header className={
   styles.header}>
          <Link to="/">基座 Home</Link>
          <Link to="/about">基座 About</Link>
        </header>

        <Routes>
          <Route path="/" element={
   <Home/>}/>
          <Route path="/about" element={
   <About/>}/>
        </Routes>
      </div>
    </BrowserRouter>
  );
}

就有最简单的路由了：

添加 React 微应用

/appscreate-react-apppcakge.json

"scripts": {
   
  "start": "BROWSER=none PORT=3001 react-scripts start",
}

public-path.js

// __MICRO_APP_ENVIRONMENT__和__MICRO_APP_PUBLIC_PATH__是由micro-app注入的全局变量
if (window.__MICRO_APP_ENVIRONMENT__) {
   
  // eslint-disable-next-line
  __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__
}

在微应用的 入口的第一行 引入它：

import './public-path'
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

这一步主要是避免子应用的静态资源使用相对地址时加载失败的情况。

并在 devServer 设置跨域访问：

headers: {
   
  'Access-Control-Allow-Origin': '*',
}

同样添加简单的路由：

function App() {
   
  return (
    <div>
      <BrowserRouter basename={
   window.__MICRO_APP_BASE_ROUTE__ || '/'}>
        <div>
          <header className={
   styles.header}>
            <Link to="/">react-app Home</Link>
            <Link to="/about">react-app About</Link>
          </header>

          <Routes>
            <Route path="/" element={
   <Home/>}/>
            <Route path="/about" element={
   <About/>}/>
          </Routes>
        </div>
      </BrowserRouter>
    </div>
  );
}

npm run starthttp://localhost:3001

接入 React 微应用

micro-app

// index.jsx
import microApp from '@micro-zoe/micro-app'

microApp.start()

ReactDOM.render(<App />, document.getElementById('root'));

ReactMicroApp

// ReactMicroApp.jsx
const ReactMicroApp = () => {
   
  return (
    <div>
      <h1>react-app<