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

前言

哈喽大家好，我是海怪。

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

• 微前端x重构实践落地总结
• 当企微侧边栏遇上微前端

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

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

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

特色

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

micro-app 并没有沿袭 single-spa 的思路 。

借鉴了 WebComponent 的思想，micro-app 通过 CustomElement 结合自定义的 ShadowDom，将微前端封装成一个类 WebComponent 组件，从而实现微前端的组件化渲染。

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

有下面的优势：

• 使用简单。 将功能封装到 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 微应用

接下来我们再添加一个 React 应用作为这个项目的微应用。 /apps 目录下也用 create-react-app 创建一个新的 React 应用，并在 pcakge.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 start 后就可以在 http://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