微前端框架

目前相对知名的微前端框架有 single-spa，icestark，qiankun。本文主要记录基于 qiankun 跑一个基本的微前端 demo。

qiankun 框架

qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

qiankun 的核心设计理念：简单、解耦/技术栈无关。因此给我们广大前端开发者提供了开箱即用对便利。

实现：

构建主应用基座

本次实践以 react 为基座，首先创建一个 react 应用，

1
2
3

npx create-react-app my-app
cd my-app
npm start

然后安装 qiankun： yarn add qiankun # 或者 npm i qiankun -S

注册、启动微应用

在入口文件中注册微应用：

import { registerMicroApps, start } from "qiankun";

registerMicroApps([
  {
    name: "micro-react-test", // app name registered
    entry: "//localhost:7101",
    container: "#root",
    activeRule: "/react16",
    props: { msg: "传入子应用数据" },
  },
  {
    name: "vueTestMicro",
    entry: "//localhost:7100",
    container: "#root",
    activeRule: "/vue",
  },
]);

// 启动微应用
start();

当微应用信息注册完之后，一旦浏览器的 url 发生变化，便会自动触发 qiankun 的匹配逻辑，所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中，同时依次调用微应用暴露出的生命周期钩子。

接入微应用

微应用不需要安装 qiankun，只需要在入口文件导出相应的生命周期钩子，在入口 js (通常就是你配置的 webpack 的 entry js) 导出 bootstrap、mount、unmount 三个生命周期钩子，以供主应用在适当的时机调用。另外，由于主应用 fetch 微应用资源，可以是不同端口甚至不同域名，属于跨域行为，所以需要在微应用中配置允许跨域。

react 微应用项目接入

// 入口文件index.js
function render(props) {
  const { container } = props;
  console.log(props, "react app render function");
  ReactDOM.render(
    <App data={props} />,
    container
      ? container.querySelector("#root")
      : document.getElementById("root")
  );
}

// __POWERED_BY_QIANKUN__ 是 qiankun 应用的全局变量
if (!window.__POWERED_BY_QIANKUN__) {
  render({ container: null });
}

/*bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发bootstrap*/
export async function bootstrap() {}

/*应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法*/
export async function mount(props) {
  render(props);
}

/*应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例*/
export async function unmount(props) {
  const { container } = props;

  ReactDOM.unmountComponentAtNode(
    container
      ? container.querySelector("#root")
      : document.getElementById("root")
  );
}

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

注意：通过 create-react-app 工具构建的项目，需要安装依赖重写配置

重写 react 配置：

安装依赖：yarn add react-app-rewired -D
重新配置项目启动脚本，在 package.json 文件中修改如下

{
  "scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-app-rewired eject"
}

项目根目录下创建配置文件 config-overrides.js，其内容如下：

const path = require("path");
const { name } = require("./package.json");

module.exports = {
  webpack: (config) => {
    // 微应用的包名，这里与主应用中注册的微应用名称一致
    config.output.library = name;
    // 将你的 library 暴露为所有的模块定义下都可运行的方式
    config.output.libraryTarget = "umd";
    // 按需加载相关，设置为 webpackJsonp_VueMicroApp 即可
    config.output.jsonpFunction = `webpackJsonp_${name}`;

    config.resolve.alias = {
      ...config.resolve.alias,
      "@": path.resolve(__dirname, "src"),
    };
    return config;
  },

  devServer: function (configFunction) {
    return function (proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      // 关闭主机检查，使微应用可以被 fetch
      config.disableHostCheck = true;
      // 配置跨域请求头，解决开发环境的跨域问题
      config.headers = {
        "Access-Control-Allow-Origin": "*",
      };
      // 配置 history 模式
      config.historyApiFallback = true;

      return config;
    };
  },
};

vue 微应用项目接入

安装：npm install -g @vue/cli OR yarn global add @vue/cli
创建一个项目：vue create my-project

// 入口文件main.js
let instance = null;
function render() {
  instance = new Vue({
    render: (h) => h(App),
  }).$mount("#app");
}

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

export async function bootstrap() {
  console.log("react app bootstraped");
}

export async function mount(props) {
  console.log(props);
  render();
}

export async function unmount() {
  instance.$destroy();
  instance = null;
}

export async function update(props) {
  console.log("update props", props);
}

覆盖 vue 默认配置，新建 vue.config.js 文件:

const path = require("path");
const { name } = require("./package");

module.exports = {
  devServer: {
    // 监听端口
    port: 7100,
    // 关闭主机检查，使微应用可以被 fetch
    disableHostCheck: true,
    // 配置跨域请求头，解决开发环境的跨域问题
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
  },
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src"),
      },
    },
    output: {
      // 微应用的包名，这里与主应用中注册的微应用名称一致
      library: name,
      // 将你的 library 暴露为所有的模块定义下都可运行的方式
      libraryTarget: "umd",
      // 按需加载相关，设置为 webpackJsonp_VueMicroApp 即可
      jsonpFunction: `webpackJsonp_${name}`,
    },
  },
};

至此，能跑起来最简单的微前端环境了。

问题记录

主应用注册微应用的 name 必须和微应用 output.library 的名字一致并且所有微应用名称应该唯一，否则会报错：Application died in status LOADING_SOURCE_CODE

微应用的静态资源必须支持跨域，如果报错：

Access to fetch at ‘http://localhost:3002/' from origin ‘http://localhost:3001' has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
请在微应用中配置跨域允许

微前端实践之qiankun框架