微前端，qiankun的简单搭建（仅限开发环境，没验证过生产环境）
主应用
1使用react搭建基座应用reactmain
create-react-app reactmain
2.安装qiankun
npm i qiankun -S
3.删除没有用的文件
4.添加路由，运行程序
npm i react-router-dom -S
5.创建registerApps.js
import {
registerMicroApps, start } from 'qiankun';
const loader = (loading) => {
console.log(loading);
}
registerMicroApps([
{
name: 'm-react',
entry: '//localhost:3002',
container: '#container',
activeRule: '/react',
loader,
//props
}
], {
beforeLoad: () => {
console.log("加载前。。。");
},
beforeMount: () => {
console.log("挂载前。。。");
}
});
start();
注：子应用接入qiankun
导出三个必要的生命周期钩子函数，不用安装qiankun
创建微应用react
1.使用react搭建微应用react版本18
create-react-app m-react
2.修改webpack配置
npm i -D @rescripts/cli
注意安装时会遇到安装不成功react-scripts版本过高，安装不上，修改版本到4.0.3
在根目录下创建.rescriptsrc.js文件
module.exports = {
webpack: (config) => {
config.output.library = `m-react`;
config.output.libraryTarget = 'umd';
config.output.globalObject = 'window';
// config.output.publicPath = '//localhost:3008'
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;
},
};
3.导入生命周期，18版的createRoot渲染不出来组件，猜测是降了react-scripts的版本导致的，暂用17版本的
import React from 'react';
// import { createRoot } from 'react-dom/client';
import ReactDOM from "react-dom";
import './index.css';
import App from './App';
function render(props) {
const {
container } = props;
console.log("方法进入，开始渲染");
const list = container ? container.querySelector('#root') : document.querySelector('#root');
// const root = createRoot(list);
// root.render(<App />);
ReactDOM.render(<App />, list);
}
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;
console.log("卸载。。。")
ReactDOM.unmountComponentAtNode(container ? container.querySelector('#root') : document.querySelector('#root'));
// root.unmount()
}
创建vue微应用（3.x新版本+ts）
1.安装vue脚手架
npm install -g @vue/cli
2.创建项目
vue create x-vue
3.修改vue.config.js的配置
module.exports = {
devServer: {
port: 3003,
headers: {
'Access-Control-Allow-Origin': '*',
},
},
configureWebpack: {
output: {
library: `m-vue`,
libraryTarget: 'umd', // 把微应用打包成 umd 库格式
// jsonpFunction: `m-vue`,
},
},
};
4.修改router/index.ts文件
- const router = createRouter({
- history: createWebHistory(process.env.BASE_URL),
- routes
- })
- export default router
+ export default routes
4.在main.js文件中修改render,暴露出生命周期函数
import {
createApp, toRaw } from 'vue'
import {
createRouter, createWebHistory } from 'vue-router';
import App from './App.vue'
import routes from './router'
import store from './store';
// import './public-path';//这个文件在开发环境中没有用到
// createApp(App).use(store).use(routes).mount('#app');
//
let history;
let app;
let router;
function render(props: any) {
// @ts-ignore
history = createWebHistory(window.__POWERED_BY_QIANKUN__ ? '/vue':'/');
router = createRouter({
history,
routes
})
app = createApp(App);
const {
container } = props;
app.use(router).mount(container ? container.querySelector('#app') : '#app');
}
// @ts-ignore
// if (window.__POWERED_BY_QIANKUN__) {
// //@ts-ignore // eslint-disable-next-line no-undef
// __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
// }
// 独立运行
// @ts-ignore
if (!window.__POWERED_BY_QIANKUN__) {
render({
});
}
// 引入钩子函数
export async function bootstrap() {
console.log('%c ', 'color: green;', '[vue] react app bootstraped');
}
//挂载
export async function mount(props: any) {
console.log('%c ', 'color: green;', '[vue3.0] props from main framework');
render(props);
}
//卸载
export async function unmount() {
//const { container } = props;
console.log("卸载。。。")
history = null;
app = null;
router = null;
}
5.在判断子应用是独立运行还是处于微应用环境中
// @ts-ignore
if (!window.__POWERED_BY_QIANKUN__) {
render({
});
}
创建webpack+react+ts微应用
遇到问题，找不到生命周期，webpack5.x+react18，react项目搭建过程参考
output: {
filename: 'js/[name].js',
path: path.resolve(PROJECT_PATH, './dist'),
publicPath: '/',
//解决：增加下面两行
library: "tsreact",//项目名称，package.json中的name
libraryTarget: 'umd',
},