Qiankun框架对于微前端的解耦和沙盒与实战探索心得

Posted 黎燃黎燃

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Qiankun框架对于微前端的解耦和沙盒与实战探索心得相关的知识,希望对你有一定的参考价值。

@[toc]

qiankun框架

由于主应用程序和微应用程序可以独立于技术堆栈,所以qiankun只是一个面向用户的类似jQuery的库。需要调用几个API来完成应用程序的微前端转换。同时,由于qiankunhtml入口和沙盒的设计,微应用程序的访问与使用iframe一样简单。

解耦

微前端的核心目标是将巨石应用程序分解为几个松散耦合的、可以自主的微应用程序,而乾坤的许多设计都遵循这一原则,例如HTML输入、沙盒和应用程序间通信。只有这样,才能确保微应用真正具有自主开发和自主运行的能力。

微应用信息注册

微应用信息注册后,一旦浏览器URL发生变化,将自动触发qiankun的匹配逻辑。所有与activerule规则匹配的微应用程序将被插入到指定的容器中,并依次调用微应用程序公开的生命周期钩子。

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

如果微应用程序与路由没有直接关联,还可以选择手动加载微应用程序:

import  loadMicroApp  from qiankun;

loadMicroApp(
  name: app,
  entry: //localhost:7100,
  container: #yourContainer,
);

微应用

1.微应用分为网页包构建和非网页包构建项目。使用webpack的微应用程序(主要是Vue、react和angular)需要执行以下操作:

2.微应用程序建议使用历史模式路由。需要设置路由基础。该值与其activerule相同。
3.引入公共路径。js在条目文件的顶部,修改和导出三个生命周期函数。
4.修改webpack打包以允许跨域和UMD打包开发环境。

主要修改为上述四项,可能会根据项目的不同情况而变化。
例如,项目是索引HTML,所有其他文件都是单独部署的。
这意味着在构建时已将publicpath设置为完整路径。运行时不需要修改publicpath(可以保存第一步)。

添加公共路径。SRC目录中的js:

if (window.__POWERED_BY_QIANKUN__) 
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;

设置历史模式路由的基础:

<BrowserRouter basename=window.__POWERED_BY_QIANKUN__ ? /app-react : />

这个条目是JS的文件索引。为了避免根ID#root与其他DOM之间的冲突,需要限制搜索范围。

import ./public-path;
import React from react;
import ReactDOM from react-dom;
import App from ./App;

function render(props) 
  const  container  = props;
  ReactDOM.render(<App />, container ? container.querySelector(#root) : document.querySelector(#root));


if (!window.__POWERED_BY_QIANKUN__) 
  render();


export async function bootstrap() 
  console.log([react16] react app bootstraped);


export async function mount(props) 
  console.log([react16] props from main framework, props);
  render(props);


export async function unmount(props) 
  const  container  = props;
  ReactDOM.unmountComponentAtNode(container ? container.querySelector(#root) : document.querySelector(#root));

非 webpack 构建的微应用

一些非webpack构建的项目,如jQuery项目和JSP项目,可以根据此进行处理。

<script src="//yourhost/entry.js" entry></script>

在访问之前,请确保项目中的图片、音频和视频资源能够正常加载。如果这些资源的地址是完整路径(例如https://qiankun.umijs.org/logo.png)是的,很好。
如果它们是相对路径,则需要首先将这些资源上载到服务器并使用完整路径。
在 entry js 里声明 lifecycles:

((global) => 
  global[purehtml] = 
    bootstrap: () => 
      console.log(purehtml bootstrap);
      return Promise.resolve();
    ,
    mount: () => 
      console.log(purehtml mount);
      return render($);
    ,
    unmount: () => 
      console.log(purehtml unmount);
      return Promise.resolve();
    ,
  ;
)(window);

访问非常简单。只需要声明一个脚本来导出相应的生命周期。

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

除了在代码中暴露相应的生命周期钩子之外,为了使主应用程序能够正确识别微应用程序暴露的一些信息,微应用程序的打包工具需要添加以下配置:

module.exports = 
  output: 
    library: `$packageName-[name]`,
    libraryTarget: umd,
    jsonpFunction: `webpackJsonp_$packageName`,
  ,
;

实现思路

1.预加载资源如果在应用程序注册配置中存在需要预加载的应用程序,则应在初始化的同时加载这些应用程序。
初始化路由根据配置的路由规则匹配当前页面路径,并查找当前有效的应用程序信息。popstate监控页面路由变化,并根据路由变化获取当前有效应用
3.代理一些窗口事件。
由于每个应用程序可能会绑定一些窗口事件,因此它会劫持窗口Addeventlistener,后者记录每个应用程序绑定的事件,以便在以后切换路由时清除这些事件。
4.加载资源目标页面,分析各种资源,然后加载并执行
5.在每个应用程序执行之前记录全局变量,记录当前全局变量,然后在卸载应用程序时清除所有全局变量,以避免影响下一个应用程序的执行。

qiankun沙盒模型

我们知道所有全局方法、全局变量/常量和全局对象都属于窗口对象,这些全局方法和对象可能会造成JS污染。
它可以在加载子系统之前创建窗口对象的快照(副本),然后在卸载子系统时恢复快照。
也就是说,它可以确保每次子系统运行时,都是一个新的窗口对象环境。
实际上,一般原则是记录子系统运行过程中添加、修改和删除的窗口对象的属性和方法,然后在卸载子系统时恢复这些操作。

应用每次进入都会调用 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),
  );

以上是关于Qiankun框架对于微前端的解耦和沙盒与实战探索心得的主要内容,如果未能解决你的问题,请参考以下文章

微前端vue项目实战 -- 乾坤qiankun框架

微前端框架(qiankun)配置

qiankun 实战(一)

深入浅出解析阿里成熟的微前端框架 qiankun 源码图文并茂

qiankun微前端改造实战,超级详细vue代码干货篇!(伸手党福利)

qiankun微前端改造实战,超级详细vue代码干货篇!(伸手党福利)