【微前端】10分鐘學會乾坤大挪移

前言

今天剛剛學習了一個微前端框架——乾坤，正着熱乎勁，寫一篇入門博客。這篇文章不會討論太多的原理和實現，只是一個入門寫 Hello World 的教程。

文章的很多地方都參考官網，但是官網的教程太簡潔了，個人覺得還是做不到無腦上手，希望這篇文章可以幫到正在入門微前端的夥伴。

想直接看代碼的，我寫了個比官網更簡單的例子，點擊即可學會。

什麼是微前端

首先，來了解一下微前端是個啥。

當我們寫了一個又一個的 SPA 應用。突然有一天，老闆說要將這些應用合併，前端工程們就頭大了——每個應用的代碼都是一座搖搖欲墜的💩山，別說合併了，就算動都不敢動呀。

雖然很麻煩，但是前端工程師還是把這個問題解決了，而這個將多個 SPA 合併成一個 Web App 的解決方案就是微前端。

爲什麼要微前端

“多個 SPA 合併成一個 Web App？”，可能有人會想到用 <iframe/> 也可以實現一個網頁裏內嵌多個網頁呀。原因有：

不感知 url 狀態，比如前進、後退沒法玩
UI 不同步、DOM 不同享。<iframe/> 本質上是頁面的硬隔離，所以如果你有個遮罩層，可能只能在那一小片區域才展示遮罩層
頁面之間的通信很麻煩
每次都要加載子應用，速度很慢

而微前端正好可以補足上面的缺點。

微前端的優勢

除了解決了上面的問題，微前端還有如下的優點：

子應用技術棧無關，即類似上頁說的頁面硬隔離，但是是以 sandbox 的方式實現的
合併多個子應用，相對地，也可以將大應用拆解成多個應用，實現業務解耦
子應用高度自治，發佈、報錯、測試流程僅限於子應用，不會受別的業務影響，同時也不影響別的業務

乾坤由來

最原始的微前端框架並不是乾坤，而是 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 模板：

<body>
  <div class="mainapp">
    <!-- 標題欄 -->
    <header class="mainapp-header">
      <h1>QianKun</h1>
    </header>
    <div class="mainapp-main">
      <!-- 側邊欄 -->
      <ul class="mainapp-sidemenu">
        <li onclick="push('/taobao')">淘寶</li>
        <li onclick="push('/baidu')">百度</li>
      </ul>
      <!-- 子應用  -->
      <main id="subapp-container"></main>
    </div>
  </div>

  <script>
    function push(subapp) { history.pushState(null, subapp, subapp) }
  </script>
</body>

然後，使用 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 && <h4 className="subapp-loading">Loading...</h4>}
      <div id="subapp-viewport" />
    </>
  );
}

export default function render({ loading }) {
  const container = document.getElementById('subapp-container');
  ReactDOM.render(<Render loading={loading} />, 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' : '/'}>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Suspense fallback={null}>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Suspense>
    </Router>
  );
};

export default function App() {
  return (
    <div className="app-main">
      <h1>淘寶Taobao</h1>

      <hr/>

      <RouteExample />
    </div>
  );
}

__POWERED_BY_QIANKUN__ 用於判斷現在是否作爲子應用被訪問，其它地方與普通 React.js App 沒差別。

去掉一些無用的文件後，在入口配置子應用：

function render(props) {
  const { container } = props;
  ReactDOM.render(<App />, container ? container.querySelector('#root') : document.querySelector('#root'));
}

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

// 監聽全局狀態
function storeTest(props) {
  props.onGlobalStateChange((value, prev) => console.log('淘寶', `[onGlobalStateChange - ${props.name}]:`, value, prev), true);
  props.setGlobalState({
    ignore: props.name,
    user: {
      name: props.name,
    },
  });
}

export async function bootstrap() {
  console.log('[淘寶] react app bootstraped');
}

export async function mount(props) {
  console.log('[淘寶] props from main framework', props);
  storeTest(props);
  render(props);
}

export async function unmount(props) {
  const { container } = props;
  ReactDOM.unmountComponentAtNode(container ? container.querySelector('#root') : document.querySelector('#root'));
}

注意上面的 bootstrap, mount 和 unmount 一定要 export 出去，不然沒人知道這個是子應用。

下一步，是修改 Webpack 的配置。但是 creat-react-app 造出來的 React App 不 eject 出來就改不了，這裏官網推薦使用 @rescripts/cli 來修改：

yarn add -D @rescript/cli

在根目錄添加 .rescriptsrc.js，並加上：

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

module.exports = {
  webpack: config => {
    config.output.library = `${name}-[name]`;
    config.output.libraryTarget = 'umd';
    config.output.jsonpFunction = `webpackJsonp_${name}`;
    config.output.globalObject = 'window';

    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;
  },
};

Webpack 配置同樣很重要，一個是配置 historyApiFallback 處理單頁的 404 問題，另一個是通過 Access-Control-Allow-Origin 解決主應用訪問子應用的跨域問題。

在上面的主應用裏看到我們是要訪問不同的端口的，那端口要怎麼配置呢？可以通過 .env 來配置：

SKIP_PREFLIGHT_CHECK=true
BROWSER=none
PORT=7101
WDS_SOCKET_PORT=7102

更多框架的配置可見這裏。

API 粗講

乾坤的 API 也不是很多，詳見這裏。簡單講一下用處：

API	用處	類比
registerMicroApps	主應用用來註冊多個子應用的函數	類似於 Vue 和 React 的路由
start	啓動主應用	類似於 React.js 的 `render` 函數和 Vue.js 的 `new Vue()`
loadMicroApp	手動加載子應用	也類似於 React.js 的 `render` 函數和 Vue.js 的 `new Vue()`，只不過更自由了
prefetchApps	預加載子應用	類似於 Webpack 的 prefetch 功能
addGlobalUncaughtErrorHandler	頁面報錯時可以用於上報和兜底	-
removeGlobalUncaughtErrorHandler	都懂的	-
initGlobalState	初始化全局狀態	類似於 Redux 的 `createStore` 和 Vue 的 `new Vue.Store()`

FAQ

請看常見問題，最佳實踐和遇到的問題都能在這裏解決。

（完）

【微前端】10分鐘學會乾坤大挪移

前言

什麼是微前端

爲什麼要微前端

微前端的優勢

乾坤由來

主應用 VS 子應用

項目創建

實現主應用

實現子應用

API 粗講

FAQ

爲什麼要⽤ Foundry

【筆記】動手學深度學習-預備知識

py發送email

MySQL 分庫分表方案，總結太全了。。

Qt/C++音視頻開發71-指定mjpeg/h264格式採集本地攝像頭/存儲文件到mp4/設備推流/採集推流

WPF開源輕便、快速的桌面啓動器

公司來了個新同事，把 DDD 運用得爐火純青！

【微前端】qiankun 到底是個什麼鬼

【微前端】single-spa 到底是個什麼鬼

【面試題】debounce vs throttle

【面試題】如何用 CSS 畫一個正方體

【微前端】10分鐘學會乾坤大挪移

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結