前端框架
前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。
以 Vue 为例，我整理了如下的面试题。
如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
合并多个子应用，相对地，也可以将大应用拆解成多个应用，实现业务解耦
-
子应用高度自治，发布、报错、测试流程仅限于子应用，不会受别的业务影响，同时也不影响别的业务
乾坤由来
最原始的微前端框架并不是乾坤，而是 single-spa。但是这个框架只提供最基本的功能，而且全是英文，文档写得也很繁琐，应该没人想去看。
阿里的乾坤则是基于 single-spa 开发的又一个微前端框架，提供了更多的功能，也解决一些坑，官网也很简洁。
不过，个人觉得有点太简洁了，写 Hello World 的时候还是遇到一些坑，只能看 Github 的 /examples 目录学习。
主应用 VS 子应用
首先，要知道现在项目并不是只有一个了，而是区分出 主应用 和 子应用，关系如下：
两者区别：
-
主应用
-
概念：就是要统治各个子应用的应用，也即合并结果页面
-
负责子应用的注册、路由分发。可以简单理解为 React.js 和 Vue.js 里的 App 组件，主要做一些初始化、路由注册、全局状态注册、销毁时的动作
-
子应用
-
概念：各个 SPA 应用，可以理解为 SPA 里的页面组件
-
负责暴露一些函数，以此对接主应用，让主应用知道：哦，原来你是子应用，要和我对接。常见的对应函数有：
bootstrap,mount,unmount
项目创建
乾坤官网最推荐的做法是将主应用和子应用分成两个项目，各自管理。当然，也可以一个项目里分成不同的目录来存放。
├── main # 主应用
├── baidu # 子应用
└── taobao # 子应用
如果你觉得 官方的例子 太复杂，也可以看我自己建的 qiankun-bigass-app，子应用只有两个用 React.js 的项目。我把很多无关的代码都删了。
实现主应用
理清上面的关系后，我们直接干代码，先看主应用。
首先，我们弄一个 .html 文件出来，作为主页面的 HTML 模板：
QianKun
- 淘宝
- 百度
然后，使用 Webpack，指定为 template HTML，并配置 dev server，注意一定要配置 headers，不然会有跨域的问题，子应用同理：
// webpack.config.js
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
module.exports = {
entry: ‘./index.js’,
devtool: ‘source-map’,
devServer: {
open: true,
port: ‘7099’,
clientLogLevel: ‘warning’,
disableHostCheck: true,
compress: true,
headers: {
‘Access-Control-Allow-Origin’: ‘*’,
},
historyApiFallback: true,
overlay: { warnings: false, errors: true },
},
output: {
publicPath: ‘/’,
},
mode: ‘development’,
resolve: {
extensions: [‘.js’, ‘.jsx’, ‘.ts’, ‘.tsx’],
},
module: {
rules: [
{
test: /.jsx?$/,
exclude: /node_modules/,
use: {
loader: ‘babel-loader’,
options: {
presets: [‘@babel/preset-env’],
plugins: [‘@babel/plugin-transform-react-jsx’],
},
},
},
{
test: /.(le|c)ss$/,
use: [‘style-loader’, ‘css-loader’, ‘less-loader’],
},
],
},
plugins: [
new HtmlWebpackPlugin({
filename: ‘index.html’,
template: process.env.MODE === ‘multiple’ ? ‘./multiple.html’ : ‘./index.html’,
minify: {
removeComments: true,
collapseWhitespace: true,
},
}),
],
};
入口文件 index.js 就比较重要了，需要完成主应用的很多事情：
import { registerMicroApps, runAfterFirstMounted, setDefaultMountApp, start, initGlobalState } from ‘qiankun’;
import ‘./index.less’;
/**
* 主应用 可以使用任意技术栈
* 以下分别是 React 和 Vue 的示例，可切换尝试
*/
import render from ‘./Render’;
// import render from ‘./render/VueRender’;
/**
* Step1 初始化应用（可选）
*/
render({ loading: true });
const loader = loading => render({ loading });
/**
* Step2 注册子应用
*/
registerMicroApps(
[
{
name: ‘taobao’,
entry: ‘//localhost:7101’,
container: ‘#subapp-viewport’,
loader,
activeRule: ‘/taobao’,
},
{
name: ‘baidu’,
entry: ‘//localhost:7102’,
container: ‘#subapp-viewport’,
loader,
activeRule: ‘/baidu’,
},
],
{
beforeLoad: [
app => {
console.log(‘[LifeCycle] before load %c%s’, ‘color: green;’, app.name);
},
],
beforeMount: [
app => {
console.log(‘[LifeCycle] before mount %c%s’, ‘color: green;’, app.name);
},
],
afterUnmount: [
app => {
console.log(‘[LifeCycle] after unmount %c%s’, ‘color: green;’, app.name);
},
],
},
);
const { onGlobalStateChange, setGlobalState } = initGlobalState({
user: ‘qiankun’,
});
onGlobalStateChange((value, prev) => console.log(‘[onGlobalStateChange - master]:’, value, prev), true);
setGlobalState({
ignore: ‘master’,
user: {
name: ‘master’,
},
});
/**
* Step3 设置默认进入的子应用
*/
setDefaultMountApp(‘/taobao’);
/**
* Step4 启动应用
*/
start();
runAfterFirstMounted(() => {
console.log(‘[MainApp] first app mounted’);
});
上面主要完成：初始化、注册子应用、设置配置全局状态、设置默认进入子应用、启动应用。
至于初始渲染函数，可以这么写：
import React from ‘react’;
import ReactDOM from ‘react-dom’;
/**
* 渲染子应用
*/
function Render(props) {
const { loading } = props;
return (
<>
{loading &&
Loading…
}</>
);
}
export default function render({ loading }) {
const container = document.getElementById(‘subapp-container’);
ReactDOM.render(, container);
}
实现子应用
子应用其实和官网的差不多，这里以 React.js 子应用举例。首先用
create-react-app来创建子应用：create-react-app baidu
在
src目录下新增public-path.js：if (window.POWERED_BY_QIANKUN) {
webpack_public_path = window.INJECTED_PUBLIC_PATH_BY_QIANKUN;
}
设置 history 模式路由的 base：
const RouteExample = () => {
return (
<Router basename={window.POWERED_BY_QIANKUN ? ‘/baidu’ : ‘/’}>
Home About最后
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
BLIC_PATH_BY_QIANKUN__;
}
设置 history 模式路由的 base：
const RouteExample = () => {
return (
<Router basename={window.POWERED_BY_QIANKUN ? ‘/baidu’ : ‘/’}>
Home About最后
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-UDSr5KMa-1715485668907)]
384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
