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

小蓝 • 2024-11-11 13:41 • 编程

一、概述

随着前端技术的发展和应用要求的提高，传统单体应用已经无法满足当下的需求，微服务架构的模式被越来越多的企业接受和运用。为了更好地满足企业级前端架构的需求，微前端应运而生。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来实现自己的前端项目。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/151328.html