微前端應用框架——Micro-App

一、概述

隨着前端技術的發展和應用要求的提高，傳統單體應用已經無法滿足當下的需求，微服務架構的模式被越來越多的企業接受和運用。為了更好地滿足企業級前端架構的需求，微前端應運而生。Micro-App基於微前端框架的思想，可以將一個單體應用按照功能進行拆分，形成多個子應用，每個子應用之間可以自由組合，同時每個子應用都可以獨立開發、部署、運行，從而實現多人協同開發、測試、部署，保證前端頁面在微服務架構的整體拆分中的高可用性、高可擴展性及高容錯性。

二、優點

Micro-App有以下幾個優點：

1、模塊化開發，能夠快速構建整個項目。

2、子應用之間相對獨立，方便擴展與維護。

3、子應用之間可以互相通訊，快速實現接口調用。

4、子應用開發時不需要考慮整個應用的結構，易於開發。

三、技術棧

Micro-App的技術棧主要包括Vue.js、React.js、Angular.js等前端框架、Webpack、Babel等構建工具。

以下展示一個示例Vue.js應用的代碼：

// 主應用
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import singleSpaVue from 'single-spa-vue';

const vueOptions = {
  el: '#vue-app',
  router,
  render: h => h(App),
};

if (!window.singleSpaNavigate) {
  delete vueOptions.el;
  new Vue(vueOptions).$mount('#app');
}

const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: vueOptions,
});

export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;

四、如何使用

Micro-App可以通過以下步驟使用：

1、安裝Micro-App

npm install micro-app

2、在主應用中引入Micro-App

import microApp from 'micro-app';

// 註冊微應用
 microApp.registerMicroApps([
   {
     name: 'react-app',
     entry: '//localhost:8081',
     container: '#yourContainer',
     activeRule: '/react',
   },
   {
     name: 'vue-app',
     entry: '//localhost:8082',
     container: '#yourContainer',
     activeRule: '/vue',
   },
 ]);

 // 啟動Micro-App
 microApp.start();

3、運行子應用

在子應用中，需要調用registerMicroApps方法註冊子應用，同時使用start方法啟動子應用：

import singleSpaVue from 'single-spa-vue';
import Vue from 'vue';
import App from './App.vue';

const vueOptions = {
  el: '#vue-app',
  render: h => h(App),
};

const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: vueOptions,
});

export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;

// 註冊該應用
const { name } = require('./package.json');
if (!window.singleSpaNavigate) {
  delete vueOptions.el;
  new Vue(vueOptions).$mount('#app');
}

if (process.env.NODE_ENV === 'development') {
  // 本地開發，註冊此應用
  vueLifecycles.mount(microApp, {
    name,
    el: '#yourContainer',
    activeRule: '/vue',
  });
} else {
  // 生產環境，使用raw.githubusercontent.com作為入口，不需要註冊此應用，由主應用主動載入
  __webpack_public_path__ = `//raw.githubusercontent.com/youngjuning/micro-app/master/dist/vue-app/`;
}

五、總結

Micro-App是一個非常有前景的框架，可以幫助我們更好地實現前端的微服務拆分，具有良好的擴展性、可維護性和易於開發等優點。希望大家可以嘗試使用Micro-App來實現自己的前端項目。