微前端及Vue + qiankun 实现案例 - 简书

标签: | 发表时间:2021-05-31 14:51 | 作者:
出处:https://www.jianshu.com
微前端架构

微前端特征

一、什么是微前端

Techniques, strategies and recipes for building a modern web appwith multiple teamsthat can ship features independently. -- Micro Frontends

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

微前端的概念出现于2016年末,其将微服务的概念引入前端世界。用以解决在需求、人员、技术栈等因素不断更迭下前端工程演变成巨石应用(Frontend Monolith)**而不可维护的问题。这类问题尤其常见于企业级Web项目中。

微前端架构具备以下几个核心价值:

  • 技术栈无关
    主框架不限制接入应用的技术栈,微应用具备完全自主权

  • 独立开发、独立部署
    微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新

  • 增量升级

    在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略

  • 独立运行时
    每个微应用之间状态隔离,运行时状态不共享

微前端架构旨在解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石应用( Frontend Monolith)后,随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。

更多关于微前端的相关介绍,推荐大家可以去看这几篇文章:

二、 qiankun

qiankun 是蚂蚁金服开源的一套完整的微前端解决方案。具体描述可查看 文档Github
链接: https://qiankun.umijs.org/zh/guide是qiankun的说明以及API教程 。

2.1 qiankun 的核心设计理念

🥄 简单

由于主应用微应用都能做到技术栈无关,qiankun 对于用户而言只是一个类似 jQuery 的库,你需要调用几个 qiankun 的 API 即可完成应用的微前端改造。同时由于 qiankun 的 HTML entry 及沙箱的设计,使得微应用的接入像使用 iframe 一样简单。

🍡 解耦/技术栈无关

微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用,而 qiankun 的诸多设计均是秉持这一原则,如 HTML entry、沙箱、应用间通信等。这样才能确保微应用真正具备 独立开发、独立运行 的能力。

2.2 Why Not Iframe

为什么不用 iframe,这几乎是所有微前端方案第一个会被 challenge 的问题。但是大部分微前端方案又不约而同放弃了 iframe 方案,自然是有原因的,并不是为了 "炫技" 或者刻意追求 "特立独行"。

如果不考虑体验问题,iframe 几乎是最完美的微前端解决方案了。

iframe 最大的特性就是提供了浏览器原生的硬隔离方案,不论是样式隔离、js 隔离这类问题统统都能被完美解决。但他的最大问题也在于他的隔离性无法被突破,导致应用间上下文无法被共享,随之带来的开发体验、产品体验的问题。

其实这个问题之前 这篇也提到过,这里再单独拿出来回顾一下好了。

  1. url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
  2. UI 不同步,DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框,同时我们要求这个弹框要浏览器居中显示,还要浏览器 resize 时自动居中..
  3. 全局上下文完全隔离,内存变量不共享。iframe 内外系统的通信、数据同步等需求,主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
  4. 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

其中有的问题比较好解决(问题1),有的问题我们可以睁一只眼闭一只眼(问题4),但有的问题我们则很难解决(问题3)甚至无法解决(问题2),而这些无法解决的问题恰恰又会给产品带来非常严重的体验问题, 最终导致我们舍弃了 iframe 方案。

2.3 特性

  • 📦 基于 single-spa封装,提供了更加开箱即用的 API。
  • 📱 技术栈无关,任意技术栈的应用均可 使用/接入,不论是 React/Vue/Angular/JQuery 还是其他等框架。
  • 💪 HTML Entry 接入方式,让你接入微应用像使用 iframe 一样简单。
  • 🛡 样式隔离,确保微应用之间样式互相不干扰。
  • 🧳 JS 沙箱,确保微应用之间 全局变量/事件 不冲突。
  • ⚡️ 资源预加载,在浏览器空闲时间预加载未打开的微应用资源,加速微应用打开速度。
  • 🔌 umi 插件,提供了 @umijs/plugin-qiankun供 umi 应用一键切换成微前端架构系统。

2.4 qiankun快速上手

2.4.1 主应用

2.4.1.1 安装 qiankun

$ yarn add qiankun # 或者 npm i qiankun -S

2.4.1.2 在主应用中注册微应用

    import  { registerMicroApps, start }  from  'qiankun';

registerMicroApps([

  {

 name:  'react app',  // app name registered

 entry:  '//localhost:7100',

 container:  '#yourContainer',

 activeRule:  '/yourActiveRule',

  },

  {

 name:  'vue app',

 entry:  { scripts:  ['//localhost:7100/main.js']  },

 container:  '#yourContainer2',

 activeRule:  '/yourActiveRule2',

  },

]);

start();

当微应用信息注册完之后,一旦浏览器的 url 发生变化,便会自动触发 qiankun 的匹配逻辑,所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中,同时依次调用微应用暴露出的生命周期钩子。

如果微应用不是直接跟路由关联的时候,你也可以选择手动加载微应用的方式:

    import  { loadMicroApp }  from  'qiankun';

loadMicroApp(

  {  

 name:  'app',  

 entry:  '//localhost:7100',

 container:  '#yourContainer',  

  }

);

2.4.2 微应用

微应用不需要额外安装任何其他依赖即可接入 qiankun 主应用。

2.4.2.1 导出相应的生命周期钩子

微应用需要在自己的入口 js (通常就是你配置的 webpack 的 entry js) 导出 bootstrapmountunmount三个生命周期钩子,以供主应用在适当的时机调用。

    /**

 * bootstrap 只会在微应用初始化的时候调用一次,下次微应用重新进入时会直接调用 mount 钩子,不会再重复触发 bootstrap。

 * 通常我们可以在这里做一些全局变量的初始化,比如不会在 unmount 阶段被销毁的应用级别的缓存等。

 */

export  async  function  bootstrap()  {

 console.log('react app bootstraped');

}

/**

 * 应用每次进入都会调用 mount 方法,通常我们在这里触发应用的渲染方法

 */

export  async  function  mount(props)  {

 ReactDOM.render(<App  />, props.container ? props.container.querySelector('#root')  : document.getElementById('root'));

}

/**

 * 应用每次 切出/卸载 会调用的方法,通常在这里我们会卸载微应用的应用实例

 */

export  async  function  unmount(props)  {

 ReactDOM.unmountComponentAtNode(props.container ? props.container.querySelector('#root')  : document.getElementById('root'));

}

/**

 * 可选生命周期钩子,仅使用 loadMicroApp 方式加载微应用时生效

 */

export  async  function  update(props)  {

 console.log('update props', props);

}

qiankun 基于 single-spa,所以你可以在 这里找到更多关于微应用生命周期相关的文档说明。

无 webpack 等构建工具的应用接入方式请见 这里

2.4.2.2 配置微应用的打包工具

除了代码中暴露出相应的生命周期钩子之外,为了让主应用能正确识别微应用暴露出来的一些信息,微应用的打包工具需要增加如下配置:

webpack:
    const packageName =  require('./package.json').name;

module.exports  =  {

 output:  {

 library:  `${packageName}-[name]`,

 libraryTarget:  'umd',

 jsonpFunction:  `webpackJsonp_${packageName}`,

  },

};

2.4.3 官方项目实践

参考链接: https://qiankun.umijs.org/zh/guide/tutorial

三、Vue+qiankun实现案例

首先分别创建我们的 项目基座 和 子项目 在这里我分别创建了 qiankun-base qiankun-vue qiankun-react 三个基础的前端项目,直接用vue 和react的官方脚手架创建即可。
vue create qiankun-base然后 install或者 add qiankun
vue create qiankun-vue
npx create-reacte-app qiankun-react

为了美观 创建结束后 在基座应用中 引用一下 element-ui ,基座的app.vue这里就是简单的配置了一个项目路由的显示。

    <template>
  <div>
    <el-menu :router="true"
             mode="horizontal">
      <!-- 基座内不可以放自己的路由 -->
      <el-menu-item index="/">Home</el-menu-item>
 
      <!-- 引用vue子路由 -->
      <el-menu-item index="/vue">vue应用</el-menu-item>
 
      <!-- 引用react子路由 -->
      <el-menu-item index="/react">react应用</el-menu-item>
    </el-menu>
    <router-view></router-view>
    <div id="vue"></div>
    <div id="react"></div>
  </div>
</template>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
 
#nav {
  padding: 30px;
}
 
#nav a {
  font-weight: bold;
  color: #2c3e50;
}
 
#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

然后再main.js中正式注册子项目 详细代码意义 的内容代码里做了注释。

    import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Elementui from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import { registerMicroApps, start } from 'qiankun'
 
// Vue.config.productionTip = false
 
const apps = [
  {
    name: 'vueApp', // 应用名
    entry: 'http://localhost:8081/', // 默认会加载这个html 解析里面的js 动态的执行 (子应用必须支持跨域)
    // fetch
    container: '#vue', // 容器
    activeRule: '/vue' // 激活路由
  },
  {
    name: 'reactApp',
    entry: 'http://localhost:8082/', // 默认会加载这个html 解析里面的js 动态的执行 (子应用必须支持跨域)
    // fetch
    container: '#react',
    activeRule: '/react'
  }
]
registerMicroApps(apps, {
  // beforeMount()
  // beforeUnmount()
}) //注册app +生命周期
start({
  prefetch: false // 取消预加载
}) // 启动
Vue.use(Elementui)
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

这里的registerMicroApps 和start 都是qiankun内部的注册方法 我就没有过多的注释详细的内容讲解可以 查看官方的API文档,其中也可以加一些app生命周期的操作,到这里其实基座的准备已经结束了 其实基座的作用就是承接一个子应用的一个挂载 至于内部的样式隔离 js 隔离qiankun在挂载的时候已经做了处理 在这里就不需要我们另外处理了。

接下来我们修改我们的子应用。

main.js。

    import Vue from 'vue'
import App from './App.vue'
import router from './router'
 
// Vue.config.productionTip = false
 
let instance = null
function render (props) {
  instance = new Vue({
    router,
    //store:[],
    render: h => h(App)
    // props:{}
  }).$mount('#app') // 挂在到自己的HTML中 基座中会拿到这个挂载好的最终html 将其插入
}
 
if (window.__POWERED_BY_QIANKUN__) { // 判断是否为 qiankun挂载 不是的话自行启动挂载
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
} else {
  render();
}
// export const mount = async () => render();
 
// 子组件的渲染
export async function bootstrap (props) { };
 
export async function mount (props) {
  render(props)
};
 
export async function unmount (props) {
  instance.$destroy()
};

这里面有几个变量是qiankun的内置API变量和几个挂载方法,这里的render的判断条件 是为了区分独立运行和注入两种状态。

然后配置我们的vue.config.js。

    module.exports = {
  devServer: {
    port: 8081,
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  },
  configureWebpack: {
    output: {
      library: 'vueApp',
      libraryTarget: 'umd'
    }
  }
}

设置允许所有人访问 和导出模式,这样我们的vue子应用就配置完成了。

react 其实也是大同小异 但是为了改变react 默认的配置 我们需要安装一个插件 react-app-rewired

然后改变package.json配置。

    "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

创建 config-overrides.js。

    module.exports = {
  webpack: (config) => {
    config.output.library = 'reactApp'
    config.output.libraryTarget = 'umd'
    config.output.publicPath = '//localhost:8082'
    return config
  },
  devServer: (configFunction) => {
    return function (proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost)
      config.headers = {
        "Access-Control-Allow-Origin": '*'
      }
      return config
    }
  }
}

内容跟vue 基本一致。

修改index.js:

    import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// import * as serviceWorker from './serviceWorker';

function render () {
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById('root')
 );
}
if (!window.__POWERED_BY_QIANKUN__) { // 判断是否为 qiankun挂载 不是的话自行启动挂载
 render();
}
// export const mount = async () => render();

// 子组件的渲染
export async function bootstrap (props) { };

export async function mount (props) {
 render(props)
};

export async function unmount (props) {
 ReactDOM.unmountComponentAtNode(document.getElementById('root'))
};

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
// serviceWorker.unregister();

新建一个.env文件配置一下自己的启动端口。

    PORT=8082
WDS_SOCKET_PORT=8082

最后app.js:

    import React from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter, Route, Link } from 'react-router-dom'
 
function App () {
  return (
    <BrowserRouter basename="/react">
      <Link to="/">首页</Link>
      <Link to="/about">关于</Link>
      <Route path="/" exact render={() => (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
          </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
          </a>
          </header>
        </div>
      )}></Route>
      <Route path="/about" exact render={() => (
        <div>about页面</div>
      )}></Route>
    </BrowserRouter>
  );
}
 
export default App;

这样我们的开发步骤基本就结束了。
接下来看成果:

相关 [前端 vue qiankun] 推荐:

微前端及Vue + qiankun 实现案例 - 简书

- -
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略. 微前端的概念出现于2016年末,其将微服务的概念引入前端世界. 用以解决在需求、人员、技术栈等因素不断更迭下前端工程演变成巨石应用(Frontend Monolith)**而不可维护的问题. 这类问题尤其常见于企业级Web项目中.

微前端qiankun从搭建到部署的实践 - SegmentFault 思否

- -
qiankun,写篇文章分享下实战中遇到的一些问题和思考. 项目有个功能需求是需要内嵌公司内部的一个现有工具,该工具是独立部署的且是用. React写的,而我们的项目主要技术选型是. vue,因此需要考虑嵌入页面的方案. 两种方案都能满足我们的需求且是可行的. iframe方案虽然普通但很实用且成本也低,.

基于qiankun框架的微前端实战使用_DJYanggggg的博客-CSDN博客_qiankun框架使用教程

- -
   最近公司要整合目前所有的前端项目,希望放到同一个项目里面进行管理,但是项目使用的技术栈大体不相同,有原生js的,有用jq的也有用Vue的,整合的话要么重构,统一技术栈,不过这是不现实的,成本高,时间长,要么使用iframe,但是iframe也有很多缺点,通信不方便,刷新页面会导致路由丢失,这都是很不好的体验,于是我想起了最近很火的微前端概念,打算用微前端的技术来整合已有项目.

带你五步学会Vue SSR - 前端学习 - SegmentFault 思否

- -
SSR大家肯定都不陌生,通过服务端渲染,可以优化SEO抓取,提升首页加载速度等,我在学习SSR的时候,看过很多文章,有些对我有很大的启发作用,有些就只是照搬官网文档. 通过几天的学习,我对SSR有了一些了解,也从头开始完整的配置出了SSR的开发环境,所以想通过这篇文章,总结一些经验,同时希望能够对学习SSR的朋友起到一点帮助.

适合前端Vue开发童鞋的跨平台Weex - SegmentFault 思否

- -
基于 Vue 技术栈的你如果需要选用一种移动端跨平台框架,是 Weex. 无疑,相对于后两者,因为你现在已有比较熟练的 Vue 基础,如果在其他条件一致的情况,Weex 无疑是最佳选择;但是 Weex 真的适合在实际项目中进行移动端跨平台开发吗. Weex 的开发效率、Weex 的质量是否满足需求.

ssr vuejs/vue-hackernews-2.0: HackerNews clone built with Vue 2.0, vue-router & vuex, with server-side rendering

- -
This is a demo primarily aimed at explaining how to build a server-side rendered Vue app, as a companion to our SSR documentation. #install dependenciesnpm install#or yarn#serve in dev mode, with hot reload at localhost:8080npm run dev#build for productionnpm run build#serve in production modenpm start.

Vue 移动端框架

- - IT瘾-jianshu
vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约. 中文文档| github地址| 在线预览. vux 基于WeUI和Vue(2.x)开发的移动端UI组件库. 基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式.

vue路由权限校验

- - 掘金前端
做后台系统的时候,难免会有用户权限的判断. admin可以查看全部菜单,user只能查看部分菜单. 一开始接触这个需求的时候,完全是纯前端做的. 在配置路由的时候,加一个roles的属性,通过判断用户的roles是否与路由的roles属性相匹配来作为显示隐藏的依据. // 过滤路由 menuList-菜单 roles-用户角色 const checkMenuList = (menuList, roles) => { for (let i = 0; i < menuList.length; i++) {.

微豆 - Vue 2.0 实现豆瓣 Web App 教程

- - SegmentFault 最新的文章
一个使用 Vue.js 与 Material Design 重构 豆瓣 的项目. 项目网站 http://vdo.ralfz.com/. # 克隆项目到本地 git clone https://github.com/RalfZhang/Vdo.git # 安装依赖 npm install # 在 localhost:8080 启动项目 npm run dev.

浅谈Vue组件在实际项目中的应用

- - JDC | 京东设计中心
Vue.js 是一套构建用户界面的渐进式框架,目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 虽然目前 Vue 已经很火了,但不可否认的是,仍有很多人刚刚开始学习使用 Vue 来构建前端项目,从生疏的初学者到熟练运用 Vue 的过程中,不可避免地会走一些弯路. 为了实现某个功能,也许尝试过很多方法,最终蓦然回首,才发现当初犯下的错误是那么幼稚.