前端微服务-qiankun实践
背景
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
随着SPA大规模的应用，紧接着就带来一个新问题：一个规模化应用需要拆分。
微前端框架的优点
-
技术栈无关 主框架不限制子应用的技术栈
-
独立开发、独立部署、仓库独立
-
在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略
-
独立运行时 微应用状态隔离
理论就不多说了，也不贴图了，直接上代码
新建主应用
使用vue创建main应用，在主应用中引入qiankun
-
vue create main
-
新增router文件(这里使用的是4.0)，这里使用history模式
import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/home";
import About from "../views/abort";
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
component: About,
},
];
const router = createRouter({
routes,
base: "",
history: createWebHistory()
});
export default router;
- 新建actions.js，处理全局变量,这里简单列了几个初始变量，也可以不写
import { initGlobalState } from 'qiankun'
const initialState = {
username: null,
email: null,
cake: null
}
const actions = initGlobalState(initialState);
actions.onGlobalStateChange((state, prev) => {
for (const key in state) {
initialState[key] = state[key]
}
})
actions.getGlobalState = (key) => {
return key ? initialState[key] : initialState
}
export default actions
- 在app.vue中配置下测试链接和子应用的容器
<template>
<div class="child-app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/vue2/home">vue Home</router-link> |
<router-link to="/vue2/about">vue About</router-link> |
<router-link to="/vue3/home">vue3 Home</router-link> |
<router-link to="/vue3/about">vue3 about</router-link> |
<router-link to="/react">react Home</router-link>
</div>
<router-view />
<div id="vue2"></div>
<div id="vue3"></div>
<div id="react"></div>
</div>
</template>
- 在main.js中引入qiankun并注册子应用，开启沙箱模式。需要注意处理不同子应用之间跳转undefined问题。apps中配置子应用，这里以vue和react做了举例，props中可以添加自定义参数传输到子应用。子应用的域名在.env中根据环境变量配置，如开发环境可以配置http://localhost:8081 （配置地址需要和对应子应用一致）
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { registerMicroApps, start } from "qiankun";
import actions from './actions'
// 解决不同路由跳转undefined问题
import _ from "lodash"
router.beforeEach((to, from, next) => {
if (_.isEmpty(history.state.current)) {
console.log(history.state, from.fullPath)
_.assign(history.state, { current: from.fullPath });
}
next();
});
const apps = [
{
name: "vue2", //子应用的名称
entry: process.env.VUE_APP_SUB_VUE2, //子应用的域名
container: "#vue2", //承载子应用的容器，在上面App.vue中定义
activeRule: "/vue2", // 被激活的子应用的路由
props: {
baseUrl: '/vue2',
getGlobalState: actions.getGlobalState
}
},
{
name: "vue3",
entry: process.env.VUE_APP_SUB_VUE3,
container: "#vue3",
activeRule: "/vue3",
props: {
baseUrl: '/vue3',
getGlobalState: actions.getGlobalState
}
},
{
name: "react", //子应用的名称
entry: process.env.VUE_APP_SUB_REACT,
container: "#react",
activeRule: "/react",
props: {
baseUrl: '/react',
getGlobalState: actions.getGlobalState
}
},
];
registerMicroApps(apps); //注册子应用
start({
sandbox: true // 开启沙箱模式
}); //启动qiankun
createApp(App).use(router).mount("#app");
新建子应用-vue2
-
新建流程同主应用
-
添加router文件，这里只添加基础配置，在main中去初始化，因为需要用到父应用传入的baseUrl
import Home from "../views/home.vue";
import About from "../views/about.vue";
const routes = [
{
path: "/",
redirect: '/home',
},
{
path: "/home",
name: "home",
component: Home,
},
{
path: "/about",
name: "About2",
component: About,
},
];
export default routes;
- 新建actions.js
const empty = () => {
console.log('empty now')
}
// 使用父actions暴露的函数覆盖此
class Actions {
actions = {
onGlobalStateChange: empty,
setGlobalState: empty,
getGlobalState: empty
}
setActions(actions) {
this.actions = actions
}
onGlobalStateChange(...args) {
return this.actions.onGlobalStateChange(...args);
}
setGlobalState(...args) {
return this.actions.setGlobalState(...args);
}
getGlobalState(key) {
return this.actions.getGlobalState(key);
}
}
export default new Actions();
- main.js中注册router，配置__webpack_public_path__
import { createApp } from 'vue'
import App from './App.vue'
import routes from './router'
import { createRouter, createWebHistory } from "vue-router";
import actions from './actions'
let instance;
function render(props = {}) {
// 加载vue实例
const { container, baseUrl } = props
actions.setActions(props) // props中有onGlobalStateChange、setGlobalState等函数
const router = createRouter({
routes,
base: window.__POWERED_BY_QIANKUN__ ? baseUrl : process.env.BASE_URL,
history: createWebHistory(baseUrl)
});
instance = createApp(App)
instance.use(router).mount(container ? container.querySelector('#sub-vue2') : '#sub-vue2')
// #sub-vue2为index中的容器div id
}
// 独立运行微应用
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
// 被主应用使用时
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
// 抛出三个生命周期钩子，供主应用调用
export async function bootstrap() {}
export async function mount(props) {
render(props)
}
export async function unmount() {
instance?.unmount();
instance = null;
}
- main.js中__webpack_public_path__会报错undefined,需要在package.json中配置
"eslintConfig": {
"globals": {
"__webpack_public_path__": true
},
},
- 在vue.config.js中，导出格式需要设置成umd（为了让各种规范的模块可以通用，在不同的环境下都可以正常运行，就出现了umd这个通用格式），开发环境记得配置下跨域哦，生产环境需要nginx配置下白名单
devServer: {
port: 8081,
headers: {
"Access-Control-Allow-Origin": "*", // 主应用获取子应用时跨域响应头
},
},
configureWebpack: {
output: {
library: `vue2`,
libraryTarget: "umd",
},
},
新建子应用vue3
-
使用vite创建
-
vue3的router.js、actions.js参考vue2
-
qiankun不兼容vite，所以需要第三方插件vite-plugin-qiankun支持，在main.js中引入
import { createApp } from 'vue'
import App from './App.vue'
import routes from './router'
import { createRouter, createWebHistory } from "vue-router";
import {
renderWithQiankun,
qiankunWindow
} from 'vite-plugin-qiankun/dist/helper'
import actions from './actions'
let instance;
function render(props = {}) {
// 加载vue实例
const { container, baseUrl } = props
actions.setActions(props) // props中有onGlobalStateChange、setGlobalState等函数
const router = createRouter({
routes,
base: qiankunWindow.__POWERED_BY_QIANKUN__ ? baseUrl : '/',
history: createWebHistory(baseUrl)
});
instance = createApp(App)
instance.use(router).mount(container ? container.querySelector('#sub-vue3') : '#sub-vue3')
}
const initQianKun = () => {
renderWithQiankun({
bootstrap() {},
mount(props) {
render(props)
},
unmount() {
instance.unmount()
instance = null
}
})
}
qiankunWindow.__POWERED_BY_QIANKUN__ ? initQianKun() : render()
- vite.config中配置跨域
server: {
port: 8083,
headers: {
'Access-Control-Allow-Origin': '*'
}
},
新建react子应用
-
npx create-react-app subreact
-
安装react-router-dom、react-app-rewired（重写部分webpack配置，需新建config-overrides）
-
新建action.js和package.json globals配置同vue2
-
index.js中添加基础配置
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from 'react-router-dom'
import actions from './actions'
let root = null
function render({ baseUrl } = {}) {
root = ReactDOM.createRoot(document.getElementById("sub-react"));
root.render(
<React.StrictMode>
<BrowserRouter basename={window.__POWERED_BY_QIANKUN__ ? baseUrl : '/'}>
<App />
</BrowserRouter>
</React.StrictMode>
);
}
// 被主应用使用时
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
// 独立运行微应用
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
// 导出生命周期函数
export async function bootstrap() {}
export async function mount(props) {
actions.setActions(props)
render(props);
}
export async function unmount(props) {
root.unmount();
}
export async function update() {
// 更新微应用
}
reportWebVitals();
- App.js中添加路由配置
import './App.css';
import { Routes, Route, Link, Navigate } from "react-router-dom"
import Home from './views/home'
import About from './views/about'
function App() {
return (
<div className="App">
<header className="App-header">
<Link to='/home'>首页</Link>
<Link to='/about'>关于</Link>
</header>
<div className='content'>
<Routes>
<Route path="/" element={<Navigate to="/home"/>} />
<Route path="/home" element={<Home />}></Route>
<Route path="/about" element={<About />}></Route>
</Routes>
</div>
</div>
);
}
export default App;
- 根目录下新建config-overrides.js,导出umd格式，并支持跨域
module.exports = {
webpack:(config)=>{
config.output.library = 'react';
config.output.libraryTarget = 'umd';
return config;
},
devServer:(configFunction)=>{
return function (proxy,allowedHost){
const config = configFunction(proxy,allowedHost);
config.headers = {
"Access-Control-Allow-Origin":'*'
}
return config
}
}
}
- 修改package.json中命令，使用react-app-rewired（build）
"start": "set PORT=8082 && react-app-rewired start"，
"build": "react-app-rewired build",
子应用和主应用数据交互
- 子应用更新数据
- 如vue文件，引入actions.js，调用actions.setGlobalState({ XXX: XXX })设置数据，
- actions.getGlobalState('XXX')获取数据，
- actions.onGlobalStateChange((state, prev) => { console.log(state, prev) })监听数据变化
打包部署
- 这里项目都放在一起，打包的话可以并行
"build": "npm-run-all build:* && ./scripts/bundle.sh",
"build:vue2": "cd vue2 && yarn build",
"build:vue3": "cd vue3 && yarn build",
"build:react": "cd subreact && yarn build",
"build:main": "cd main && yarn build",
- bundle.sh写入执行脚本，复制各子应用文件到dist中
#!/bin/bash
rm -rf ./dist
mkdir ./dist
mkdir ./dist/subapp
cp -r ./subreact/build/ ./dist/subapp/react/
cp -r ./vue2/dist/ ./dist/subapp/vue2/
cp -r ./vue3/dist/ ./dist/subapp/vue3/
cp -r ./main/dist/ ./dist/main/
echo 'bundle.sh over and leile.'
- 如果子应用部署在不同服务器下，nginx部署，记得配置下跨域，主应用的域名
投递淘天集团等公司10个岗位
