qiankun微前端

最新推荐文章于 2024-09-28 19:02:04 发布

wwwwyouxiu

最新推荐文章于 2024-09-28 19:02:04 发布

阅读量64

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/wwwwyouxiu/article/details/129639048

版权

文章介绍了微前端的概念，它是将微服务理念应用到前端开发中，通过qiankun库将多个小型前端应用整合成一个应用。主应用通过注册微应用的入口、容器和激活规则进行管理，而每个微应用则可以独立运行、开发和部署。在微应用中，通过public-path.js处理静态资源路径，并定义bootstrap、mount、unmount等生命周期函数来控制应用的加载、渲染和卸载。

摘要由CSDN通过智能技术生成

微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以技术栈无关、独立运行、独立开发、独立部署。

主应用

//在主应用的index.js入口文件内，写入注册代码

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'react_app', // app name registered
    entry: '//localhost:7101',  //微应用的ip
    container: '#react_app',  //dom id
    activeRule: '/react_app',  //地址
  }, 
  {
    name: 'vue_app',
    entry: '//localhost:7102',  //微应用的ip
    container: '#vue_app',  //dom id
    activeRule: '/vue_app',   //地址
  },
]);

start();

在App.jsx写入挂载点

function App() {
  return (
    <div className="App">
      <div id="react_app"></div>
      <div id="vue_app"></div>
    </div>
  );
}

export default App;

微应用

在 src 目录新增 public-path.js：


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

//微应用的index.js入口文件写入

//在最顶部引入path文件，避免找不到静态资源

import "public-path.js"

//不是qiankun走的，渲染这个
function render(props) {
  const { container } = props;
  ReactDOM.render(<App />, container ? container.querySelector('#root') : document.querySelector('#root'));
}

if (!window.__POWERED_BY_QIANKUN__) {
  render({});
}

/**
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap() {
  console.log('react app bootstraped');
}

/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount(props) {
  ReactDOM.render(
<BrowserRouter basename={window.__POWERED_BY_QIANKUN__ ? '/app-react' : '/'}>
    <App />
</BrowserRouter>,
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'),
  );
}

/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update(props) {
  console.log('update props', props);
}