遂宁市网站建设_网站建设公司_产品经理_seo优化-海东市网站建设公司

微前端乾坤方案

qiankun 的使用

主应用

0、安装 qiankun

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

1、引入

import { registerMicroApps, start } from 'qiankun';

2-1、注册子应用，并启动

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', }, ]); // 启动 qiankun start();

备注
自动注册模式：当微应用信息注册完之后，一旦浏览器的 url 发生变化，便会自动触发 qiankun 的匹配逻辑，所有activeRule规则匹配上的微应用就会被插入到指定的container中，同时依次调用微应用暴露出的生命周期钩子。
主应用不限技术栈，只需要提供一个容器 DOM，然后注册微应用并start即可。

2-2、手动加载子应用

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

import { loadMicroApp } from 'qiankun'; loadMicroApp({ name: 'app', entry: '//localhost:7100', container: '#yourContainer', });

子应用改造

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

1、前提

子应用的资源和接口的请求都在主域名发起，所以会有跨域问题，子应用必须做cors 设置。

// webpack const { name } = require('./package'); module.exports = { devServer: (config) => { // 因为内部请求都是 fetch 来请求资源，所以子应用必须允许跨域 config.headers = { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Credentials': true, 'Access-Control-Allow-Headers': 'X-Requested-With,Content-Type', 'Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS', 'Content-Type': 'application/json; charset=utf-8', }; return config; }, };

2、生命周期改造

微应用需要在应用的入口文件 (通常就是你配置的 webpack 的 entry js) 导出bootstrap、mount、unmount、update四个生命周期钩子，以供主应用在适当的时机调用。

具体操作可以参考下面示例

步骤一：在`src`目录新增`public-path.js`，用于修改运行时的`publicPath`。

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

备注
什么是运行时的 publicPath ？
运行时的publicPath和构建时的publicPath是不同的，两者不能等价替代。

步骤二：修改入口文件

主要改动：

引入public-path.js
export生命周期函数
- 将子应用路由的创建、实例的创建渲染挂载到mount函数上
- 将实例的销毁挂载到unmount上

// vue 2 // 入口文件 `main.js` 修改，为了避免根 id `#app` 与其他的 DOM 冲突，需要限制查找范围。 import './public-path'; import Vue from 'vue'; import App from './App.vue'; import VueRouter from 'vue-router'; import routes from './router'; import store from './store'; Vue.config.productionTip = false; let router = null; let instance = null; function render(props = { }) { const { container } = props; router = new VueRouter({ // histroy模式的路由需要设置base。app-vue 根据项目名称来定 base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/', mode: 'history', // hash模式则不需要设置base routes, }); instance = new Vue({ router, store, render: (h) => h(App), }).$mount(container ? container.querySelector('#app') : '#app'); } // 独立运行时 if (!window.__POWERED_BY_QIANKUN__) { render(); } export async function bootstrap() { console.log('[vue] vue app bootstraped'); } export async function mount(props) { console.log('[vue] props from main framework', props); render(props); } export async function unmount() { instance.$destroy(); instance.$el.innerHTML = ''; instance = null; router = null; }

// react 16 // 以 `create react app` 生成的 `react 16` 项目为例，搭配 `react-router-dom` 5.x。 // 入口文件 `index.js` 修改，为了避免根 id `#root` 与其他的 DOM 冲突，需要限制查找范围。 // 这里需要特别注意的是，通过 ReactDOM.render 挂载子应用时，需要保证每次子应用加载都应使用一个新的路由实例。 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')); }

备注
qiankun 基于 single-spa，所以你可以在这里找到更多关于微应用生命周期相关的文档说明。
无 webpack 等构建工具的应用接入方式请见这里

注意点
容器名
修改index.html中项目初始化容器的根 id，不要使用#app或#root，避免与其他的项目冲突，建议换成项目name的驼峰写法
微应用建议使用history路由模式。
路由模式为history时，同时需要设置路由base，值和它的activeRule是一样的：
vue:
router = new VueRouter({ mode: 'history', base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/', });
react:
<BrowserRouter basename={window.__POWERED_BY_QIANKUN__ ? '/app-react' : '/'}>

3、构建工具配置

微应用分为有webpack构建和无webpack构建项目。

注意
qiankun v2 及以下版本只支持webpack，并不支持vite！！！

下面以webpack为构建工具的微应用为例（主要是指 Vue、React）的配置说明

配置点说明

构建工具的配置主要有两个：

允许跨域
打包成umd格式

为什么要打包成umd格式呢？是为了让qiankun拿到其export的生命周期函数。我们可以看下其打包后的app.js就知道了:

配置示例

微应用的打包工具需要增加如下配置：

react

修改webpack配置

安装插件@rescripts/cli，当然也可以选择其他的插件，例如react-app-rewired。

npm i -D @rescripts/cli

根目录新增.rescriptsrc.js：

// webpack const { name } = require('./package'); module.exports = { webpack: (config) => { config.output.library = `${ name}-[name]`; config.output.libraryTarget = 'umd'; // webpack 5 需要把 jsonpFunction 替换成 chunkLoadingGlobal config.output.jsonpFunction = `webpackJsonp_${ name}`; config.output.globalObject = 'window'; return config; }, devServer: (_) => { const config = _; config.headers = { 'Access-Control-Allow-Origin': '*', }; config.historyApiFallback = true; config.hot = false; config.watchContentBase = false; config.liveReload = false; return config; }, };

修改package.json：

- "start": "react-scripts start", + "start": "rescripts start", - "build": "react-scripts build", + "build": "rescripts build", - "test": "react-scripts test", + "test": "rescripts test", - "eject": "react-scripts eject"

vue

// vue.config.js const { name } = require('./package'); module.exports = { devServer: { headers: { 'Access-Control-Allow-Credentials': true, 'Access-Control-Allow-Origin': req.headers.origin || '*', 'Access-Control-Allow-Headers': 'X-Requested-With,Content-Type', 'Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS', 'Content-Type': 'application/json; charset=utf-8', }, }, // 自定义webpack配置 configureWebpack: { output: { library: `${ name}-[name]`, // 微应用的包名，这里与主应用中注册的微应用名称一致 libraryTarget: 'umd', // 把微应用打包成 umd 库格式，可以在 AMD 或 CommonJS 的 require 访问。 // webpack 5 需要把 jsonpFunction 替换成 chunkLoadingGlobal jsonpFunction: `webpackJsonp_${ name}`, // webpack 用来异步加载 chunk 的 JSONP 函数。 }, }, };

注意
这个name默认从package.json获取，可以自定义，只要和父项目注册时的name保持一致即可。qiankun拿这三个生命周期，是根据注册应用时，你给的name值，name不一致则会导致拿不到生命周期函数。

webpack 不同版本的配置

webpack v5:

const packageName = require('./package.json').name; module.exports = { output: { library: `${ packageName}-[name]`, libraryTarget: 'umd', chunkLoadingGlobal: `webpackJsonp_${ packageName}`, }, };

webpack v4:

const packageName = require('./package.json').name; module.exports = { output: { library: `${ packageName}-[name]`, libraryTarget: 'umd', // webpack 5 需要把 jsonpFunction 替换成 chunkLoadingGlobal jsonpFunction: `webpackJsonp_${ packageName}`, }, };

备注
更多相关配置介绍可以查看 webpack 相关文档

子项目开发的一些注意事项

js 相关

给 body 、 document 等绑定的事件，请在 unmount 周期清除

js 沙箱只劫持了window.addEventListener，而使用了document.body.addEventListener或者document.body.onClick添加的事件并不会被沙箱移除，会对其他的页面产生影响，因此请在unmount生命周期清除绑定的事件。

css 相关

避免 css 污染

组件内样式的css-scoped是必须的。

对于一些插入到body的弹窗，无法使用scoped，请不要直接使用原class修改样式，请添加自己的class，来修改样式。

.el-dialog { /* 不推荐使用组件原有的class */ } .my-el-dialog { /* 推荐使用自定义组件的class */ }

谨慎使用 position：fixed

在父项目中，浮动定位未必准确，应尽量避免使用，确有相对于浏览器窗口定位需求，可以用 position: sticky，但是会有兼容性问题（IE 不支持）。如果定位使用的是 bottom 和 right，则问题不大。

还有个办法，位置可以写成动态绑定 style 的形式:

<div :style="{ top: isQiankun ? '10px' : '0'}"></div>

静态资源相关

所有的资源（图片/音视频等）都应该放到 src 目录下，不要放在 public 或者 static

资源放src目录，会经过webpack处理，能统一注入publicPath。否则在主项目中会 404。

参考：vue-cli3 的官方文档介绍：何时使用-public-文件夹

第三方库相关

请给 axios 实例添加拦截器，而不是 axios 对象

后续会考虑子项目共享公共插件，这时就需要避免公共插件的污染

// 正确做法：给 axios 实例添加拦截器 const instance = axios.create(); instance.interceptors.request.use(function () { // ... }); // 错误用法：直接给 axios 对象添加拦截器 axios.interceptors.request.use(function () { // ... });

qiankun 功能介绍

运行模式

乾坤只有一种运行模式：单例模式

在微前端框架中，子应用会随着主应用页面的打开和关闭反复的激活和销毁（单例模式：生命周期模式）。

单例模式

子应用页面如果切走，会调用unmount销毁子应用当前实例，子应用页面如果切换回来,会调用mount渲染子应用新的实例。

在单例式下，改变url子应用的路由会发生跳转到对应路由。

生命周期

微应用需要在应用的入口文件导出bootstrap、mount、unmount、update四个生命周期钩子，以供主应用在适当的时机调用。

注意
💡 qiankun 生命周期函数都必须要export暴露
💡 qiankun 生命周期函数都必须是Promise函数，使用async会返回一个 Promise 对象

/** * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。 */ export async function bootstrap() { console.log('app bootstraped'); } /** * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法 */ export async function mount(props) { // ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root')); console.log('app mount'); } /** * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例 */ export async function unmount(props) { // ReactDOM.unmountComponentAtNode(props.container ? props.container.querySelector('#root') : document.getElementById('root')); console.log('app unmount'); } /** * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效 */ export async function update(props) { console.log('update props', props); }

通讯方式

项目之间的不要有太多的数据依赖，毕竟项目还是要独立运行的。通信操作需要判断是否qiankun模式，做兼容处理。

props 通信

如果父子应用都是vue项目，通过props传递父项目的Vuex store，可以实现响应式；但假如子项目是不同的技术栈（jQuery/react/angular），这是就不能很好的监听到数据的变化了。

注意
vue 项目之间数据传递还是使用共享父组件的Vuex比较方便，与其他技术栈的项目之间的通信使用 qiankun 提供的initGlobalState。

通过 vuex/pinia 实现通信

第一步：在主应用中创建一个 store

// src/store/index.ts const personModule = { state: { id: 0, name: '', age: 0, }, mutations: { setId(state: Object, id: number) { state.id = id; }, setName(state: Object, name: string) { state.name = name; }, setAge(state: Object, age: number) { state.age = age; }, }, actions: { setId(context: Object, id: number) { context.commit('setId', id); }, setName(context: Object, name: string) { context.commit('setName', name); }, setAge(context: Object, age: number

2025开年，AI技术打得火热，正在改变前端人的职业命运：