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

2022年01月28日 04:51 · 阅读 3109

哈喽大家好，我是海怪。

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

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

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

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

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

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

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

8f2c95279ec341b5b9157932f7a28dc3~tplv-k3u1fbpfcp-watermark.awebp

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

b1282eed6d80429b97dda7eb54b14676~tplv-k3u1fbpfcp-watermark.awebp

有下面的优势：

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

下面我们直接开箱看看 micro-app 能给我们带来什么样的惊喜吧。

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

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

e960badc279544f4993c7eae209cdca1~tplv-k3u1fbpfcp-watermark.awebp

主应用使用 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>
  );
}
复制代码

就有最简单的路由了：

f2578a247ecd45bd8b9765d42f1570f3~tplv-k3u1fbpfcp-watermark.awebp

添加 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 里访问它了。

9619b83fda7547df8a01401775015181~tplv-k3u1fbpfcp-watermark.awebp

接入 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</h1>
      <micro-app
        name='react-app'
        url='http://localhost:3001/'
        baseroute='/react-app'
      >
      </micro-app>
    </div>
  )
}
复制代码

最后在 App 组件中添加 react-app 的路由：

const App = () => {
  return (
    <BrowserRouter>
      <div>
        <header className={styles.header}>
          <Link to="/">基座 Home</Link>
          <Link to="/about">基座 About</Link>
          <Link to="/react-app">React 子应用</Link>
        </header>

        <Routes>
          <Route path="/" element={<Home/>}/>
          <Route path="/about" element={<About/>}/>
          <Route path='/react-app' element={<ReactMicroApp/>}/>
        </Routes>
      </div>
    </BrowserRouter>
  );
}
复制代码

现在我们就已经完美地接入了 React 应用了：

整个接入的过程非常的简单，侵入性的操作总结有：

主应用
- microApp.start()
- 添加微应用的容器组件
- 添加路由指向这个容器组件
微应用
- 修改 public-path
- 添加跨域访问
- 自动切换路由的 basename

对比 qiankun

在完成一个 Hello World 后，我们来对比一下 qiankun 的起手式。

micro-appqiankun指定 container element添加自定义标签元素registerMicroApps普通路由切换start()microApp.start()

micro-appqiankun更改 public path更改 public path指定路由的 basename指定路由的 basename-导出生命周期配置跨域访问配置跨域访问-配置 Webpack 的 output

不得不说，micro-app 确实对新手更友好了，使用上也更简洁明了。

接入 Vue 微应用

有了上面的了解后，接入 Vue 微应用就更快了。

直接用 vue-cli 创建 Vue 项目，这里我选用了 Vue3。

第一步，添加 public-path.js：

// public-path.js
if (window.__MICRO_APP_ENVIRONMENT__) {
  // eslint-disable-next-line
  __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__
}
复制代码

并在入口 main.js 引入：

// main.js
import './public-path'
import {createApp} from 'vue'
...
复制代码

第二步，更改 Vue Router 的 basename：

// main.js
const router = createRouter({
  history: createWebHistory(window.__MICRO_APP_BASE_ROUTE__ || process.env.BASE_URL),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ],
})

const app = createApp(App).use(router)

app.mount('#app')

// 监听卸载操作
window.addEventListener('unmount', function () {
  app.unmount()
})
复制代码

第三步，更改 Webpack DevServer 的跨域访问：

// vue.config.js
module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    }
  }
}
复制代码

添加 Vue3MicroApp 容器：

const Vue3MicroApp = () => {
  return (
    <div>
      <h1>vue3-app</h1>

      <button onClick={sendVue3AppData}>基座 => vue3-app</button>

      <p>子应用消息 {microAppState ? microAppState.msg : '无'}</p>
      <micro-app
        name='vue3-app'
        url='http://localhost:3002/'
        baseroute='/vue3-app'
      >
      </micro-app>
    </div>
  )
}
复制代码

然后添加路由：

const App = () => {
  return (
    <BrowserRouter>
      <div>
        <header className={styles.header}>
          <Link to="/">基座 Home</Link>
          <Link to="/about">基座 About</Link>
          <Link to="/react-app">React 子应用</Link>
          <Link to="/vue3-app">Vue3 子应用</Link>
        </header>

        <Routes>
          <Route path="/" element={<Home/>}/>
          <Route path="/about" element={<About/>}/>
          <Route path='/react-app' element={<ReactMicroApp/>}/>
          <Route path='/vue3-app' element={<Vue3MicroApp/>}/>
        </Routes>
      </div>
    </BrowserRouter>
  );
}
复制代码

很快啊（马保国.jpg）就接入了新的微应用了：

数据通信也是 micro-app 的一大亮点，在使用层面上比 qiankun 的 EventBus 要好用那么 一丢丢。啊对，也就是那么一丢丢，因为使用方式还是比较 Hacky 的。

在基座应用的容器组件里添加一个 microApp.setData 就好了：

// ReactMicroApp
const ReactMicroApp = () => {
  const [microAppState, setMicroAppState] = useState(microApp.getData('react-app'));

  // 发送数据给 react-app
  const sendReactAppData = () => {
    microApp.setData('react-app', {
      name: `react-app 随机数: ${Math.random()}`
    })
  }

  return (
    <div>
      <h1>react-app</h1>
      <button onClick={sendReactAppData}>基座 => react-app</button>

      <p>子应用消息 {microAppState ? microAppState.msg : '无'}</p>

      <micro-app
        name='react-app'
        url='http://localhost:3001/'
        baseroute='/react-app'
      >
      </micro-app>
    </div>
  )
}
复制代码

需要注意的是 setData 的值必须为对象！

微应用在接收数据的时候也是一样通过事件监听来获取：

// react-app App.js
function App() {
  const [mainAppData, setMainAppData] = useState( window.microApp.getData());

  // 监听基座数据
  useEffect(() => {
    if (window.microApp) {
      const dataListener = (data) => {
        console.log('主应用传的数据', data);
        setMainAppData(data);
      }

      window.microApp.addDataListener(dataListener)
      return () => {
        window.microApp.clearDataListener()
      }
    }
  })

  return (
    <div>
      <p>主应用的数据：{mainAppData ? mainAppData.name : '无'}</p>

      <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>
  );
}
复制代码

同时地，微应用发送数据也是一行 window.microApp.dispatch 就 OK 了，而且入参必须也为对象：

// react-app App.js
function App() {
  const [mainAppData, setMainAppData] = useState( window.microApp.getData());

  useEffect(() => {
    if (window.microApp) {
      const dataListener = (data) => {
        console.log('主应用传的数据', data);
        setMainAppData(data);
      }

      window.microApp.addDataListener(dataListener)
      return () => {
        window.microApp.clearDataListener()
      }
    }
  })

  // 发送数据给基座
  const sendToMain = () => {
    window.microApp.dispatch({msg: `我是 react-app 随机数 ${Math.random()}`})
  }

  return (
    <div>
      <p>主应用的数据：{mainAppData ? mainAppData.name : '无'}</p>

      <button onClick={sendToMain}>给基座应用发送</button>

      <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>
  );
}
复制代码

基座的监听稍微有点 Hacky：

// ReactMicroApp.js
import microApp from '@micro-zoe/micro-app'
import {useState} from "react";
/** @jsxRuntime classic */
/** @jsx jsxCustomEvent */
import jsxCustomEvent from '@micro-zoe/micro-app/polyfill/jsx-custom-event'

const ReactMicroApp = () => {
  const [microAppState, setMicroAppState] = useState(microApp.getData('react-app'));

  const sendReactAppData = () => {
    microApp.setData('react-app', {
      name: `react-app 随机数: ${Math.random()}`
    })
  }

  const onDataChange = (e) => {
    console.log('react-app onDataChange', e);
    console.log('react-app 数据', e.detail.data);
    setMicroAppState(e.detail.data);
  }

  return (
    <div>
      <h1>react-app</h1>
      <button onClick={sendReactAppData}>基座 => react-app</button>

      <p>子应用消息 {microAppState ? microAppState.msg : '无'}</p>

      <micro-app
        name='react-app'
        url='http://localhost:3001/'
        baseroute='/react-app'
        onDataChange={onDataChange}
      >
      </micro-app>
    </div>
  )
}
复制代码

虽然没有用到 jsxCustomEvent，但是也一定要 import 进来，且不能把注释给干掉！

然后我们就可以看到数据通信的效果了：

上面都是 micro-app 入门的一些基础操作，它还提供了一些高级功能。

KeeyAlive

保持微应用的状态 Keep-Alive：

<micro-app name='xx' url='xx' keep-alive></micro-app>
复制代码

/** @jsxRuntime classic */
/** @jsx jsxCustomEvent */
import jsxCustomEvent from '@micro-zoe/micro-app/polyfill/jsx-custom-event'

const App = () => {
  return (
    <micro-app
      name='xx'
      url='xx'
      onCreated={() => console.log('micro-app元素被创建')}
      onBeforemount={() => console.log('即将被渲染，只在初始化时执行一次')}
      onMounted={() => console.log('已经渲染完成，只在初始化时执行一次')}
      onAfterhidden={() => console.log('已卸载')}
      onBeforeshow={() => console.log('即将重新渲染，初始化时不执行')}
      onAftershow={() => console.log('已经重新渲染，初始化时不执行')}
      onError={() => console.log('渲染出错')}
    />
  )
}
复制代码

应用之间跳转

window.history
通过数据通信控制跳转
传递路由实例方法

JS 方面使用 Proxy 拦截了用户全局操作的行为，防止对 window 的访问和修改，避免全局变量污染。

CSS 方面有两种隔离：

默认添加 CSS 选择器前缀
ShadowDOM

元素隔离方面，micro-app 模拟实现了类似 ShadowDom 的功能，元素不会逃离 <micro-app> 元素边界，子应用只能对自身的元素进行增、删、改、查的操作。

静态资源处理

使用 globalAssets 共享资源：

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

microApp.start({
  globalAssets: {
    js: ['js地址1', 'js地址2', ...], // js地址
    css: ['css地址1', 'css地址2', ...], // css地址
  }
})
复制代码

或者使用 global 属性：

<link rel="stylesheet" href="xx.css" global>
<script src="xx.js" global></script>
复制代码

以及对资源的过滤：

<link rel="stylesheet" href="xx.css" exclude>
<script src="xx.js" exclude></script>
<style exclude></style>
复制代码

渲染微前端模式

默认模式：每次都按顺序执行一次 JS，具有幂等性
umd 模式：只在初次渲染时执行所有 JS，对于需要频繁切换微应用的项目可以提高其性能

插件系统的主要作用就是对js进行修改，每一个js文件都会经过插件系统，我们可以对这些js进行拦截和处理，它通常用于修复js中的错误或向子应用注入一些全局变量。

这个插件系统主要可以在中间层处理一下 JS，避免一些由于固定模板而无法处理的 JS 报错。总的来说，这个系统还是个新生儿，需要后续其它开发者一起共建。

总的来说，micro-app 是一个京东推出的一个微前端新星框架，在使用上比较简洁易懂，配置方面也无需太多操作，类似 Vue 风格的 API 对新手算是十分友好了，也推荐大家一起玩玩这个新框架。

当然了因为这个项目也是 21 年 7 月才推出的，现在版本（2022年1月28号）为 0.8.4，还没到 1.0，所以想要在生产环境上使用的话，建议还是要谨慎一点。

qiankun 虽然侵入性较大，但是它有着 3 年的微前端使用场景以及 Issue 经验积累，在解决问题方面更稳一点。

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

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

添加 React 微应用

接入 React 微应用

对比 qiankun

接入 Vue 微应用

KeeyAlive

应用之间跳转

静态资源处理

渲染微前端模式

Recommend

如何在项目中用好 TypeScript 🤔

A data driven music tutor, smart recorder & midi controller

Friend Ranking & Removal for Facebook

Wordle Helper - Hacker tool to solve Wordles and play past days | Product Hunt

抖音 Android 性能优化系列：启动优化之理论和工具篇

SMS Checkout API by Parrot

Humanities Illustrations - Free hand-drawn illustration library for your website...

Close the gap between engagement surveys & well-being perks

CourseDB - The IMDb of online courses | Product Hunt

Extensionator - Turn a Bubble™ page into a Chrome extension | Product Hunt

About Joyk