【微前端】10分鐘學(xué)會乾坤大挪移

前言

今天剛剛學(xué)習(xí)了一個(gè)微前端框架——乾坤，正著熱乎勁，寫一篇入門博客。這篇文章不會討論太多的原理和實(shí)現(xiàn)，只是一個(gè)入門寫 Hello World 的教程。

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

想直接看代碼的，我寫了個(gè)比官網(wǎng)更簡單的例子，點(diǎn)擊即可學(xué)會。

什么是微前端

首先，來了解一下微前端是個(gè)啥。

當(dāng)我們寫了一個(gè)又一個(gè)的 SPA 應(yīng)用。突然有一天，老板說要將這些應(yīng)用合并，前端工程們就頭大了——每個(gè)應(yīng)用的代碼都是一座搖搖欲墜的??山，別說合并了，就算動都不敢動呀。

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

為什么要微前端

“多個(gè) SPA 合并成一個(gè) Web App？”，可能有人會想到用 <iframe/> 也可以實(shí)現(xiàn)一個(gè)網(wǎng)頁里內(nèi)嵌多個(gè)網(wǎng)頁呀。原因有：

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

而微前端正好可以補(bǔ)足上面的缺點(diǎn)。

微前端的優(yōu)勢

除了解決了上面的問題，微前端還有如下的優(yōu)點(diǎn)：

  • 子應(yīng)用技術(shù)棧無關(guān)，即類似上頁說的頁面硬隔離，但是是以 sandbox 的方式實(shí)現(xiàn)的
  • 合并多個(gè)子應(yīng)用，相對地，也可以將大應(yīng)用拆解成多個(gè)應(yīng)用，實(shí)現(xiàn)業(yè)務(wù)解耦
  • 子應(yīng)用高度自治，發(fā)布、報(bào)錯(cuò)、測試流程僅限于子應(yīng)用，不會受別的業(yè)務(wù)影響，同時(shí)也不影響別的業(yè)務(wù)

乾坤由來

最原始的微前端框架并不是乾坤，而是 single-spa。但是這個(gè)框架只提供最基本的功能，而且全是英文，文檔寫得也很繁瑣，應(yīng)該沒人想去看。

阿里的乾坤則是基于 single-spa 開發(fā)的又一個(gè)微前端框架，提供了更多的功能，也解決一些坑，官網(wǎng)也很簡潔。

不過，個(gè)人覺得有點(diǎn)太簡潔了，寫 Hello World 的時(shí)候還是遇到一些坑，只能看 Github 的 /examples 目錄學(xué)習(xí)。

主應(yīng)用 VS 子應(yīng)用

首先，要知道現(xiàn)在項(xiàng)目并不是只有一個(gè)了，而是區(qū)分出 主應(yīng)用 和 子應(yīng)用，關(guān)系如下：

兩者區(qū)別：

  • 主應(yīng)用

    • 概念：就是要統(tǒng)治各個(gè)子應(yīng)用的應(yīng)用，也即合并結(jié)果頁面
    • 負(fù)責(zé)子應(yīng)用的注冊、路由分發(fā)?？梢院唵卫斫鉃?React.js 和 Vue.js 里的 App 組件，主要做一些初始化、路由注冊、全局狀態(tài)注冊、銷毀時(shí)的動作

  • 子應(yīng)用

    • 概念：各個(gè) SPA 應(yīng)用，可以理解為 SPA 里的頁面組件
    • 負(fù)責(zé)暴露一些函數(shù)，以此對接主應(yīng)用，讓主應(yīng)用知道：哦，原來你是子應(yīng)用，要和我對接。常見的對應(yīng)函數(shù)有：bootstrap, mount, unmount

項(xiàng)目創(chuàng)建

乾坤官網(wǎng)最推薦的做法是將主應(yīng)用和子應(yīng)用分成兩個(gè)項(xiàng)目，各自管理。當(dāng)然，也可以一個(gè)項(xiàng)目里分成不同的目錄來存放。

├── main    # 主應(yīng)用
├── baidu   # 子應(yīng)用
└── taobao # 子應(yīng)用

如果你覺得 官方的例子 太復(fù)雜，也可以看我自己建的 qiankun-bigass-app，子應(yīng)用只有兩個(gè)用 React.js 的項(xiàng)目。我把很多無關(guān)的代碼都刪了。

實(shí)現(xiàn)主應(yīng)用

理清上面的關(guān)系后，我們直接干代碼，先看主應(yīng)用。

首先，我們弄一個(gè) .html 文件出來，作為主頁面的 HTML 模板：

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

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

然后，使用 Webpack，指定為 template HTML，并配置 dev server，注意一定要配置 headers，不然會有跨域的問題，子應(yīng)用同理：

// 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 就比較重要了，需要完成主應(yīng)用的很多事情：

import { registerMicroApps, runAfterFirstMounted, setDefaultMountApp, start, initGlobalState } from 'qiankun';
import './index.less';

/**
 * 主應(yīng)用 **可以使用任意技術(shù)棧**
 * 以下分別是 React 和 Vue 的示例，可切換嘗試
 */
import render from './Render';
// import render from './render/VueRender';

/**
 * Step1 初始化應(yīng)用（可選）
 */
render({ loading: true });

const loader = loading => render({ loading });

/**
 * Step2 注冊子應(yīng)用
 */

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 設(shè)置默認(rèn)進(jìn)入的子應(yīng)用
 */
setDefaultMountApp('/taobao');

/**
 * Step4 啟動應(yīng)用
 */
start();

runAfterFirstMounted(() => {
  console.log('[MainApp] first app mounted');
});

上面主要完成：初始化、注冊子應(yīng)用、設(shè)置配置全局狀態(tài)、設(shè)置默認(rèn)進(jìn)入子應(yīng)用、啟動應(yīng)用。

至于初始渲染函數(shù)，可以這么寫：

import React from 'react';
import ReactDOM from 'react-dom';

/**
 * 渲染子應(yīng)用
 */
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);
}

實(shí)現(xiàn)子應(yīng)用

子應(yīng)用其實(shí)和官網(wǎng)的差不多，這里以 React.js 子應(yīng)用舉例。首先用 create-react-app 來創(chuàng)建子應(yīng)用：

create-react-app baidu

在 src 目錄下新增 public-path.js：

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

設(shè)置 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__ 用于判斷現(xiàn)在是否作為子應(yīng)用被訪問，其它地方與普通 React.js App 沒差別。

去掉一些無用的文件后，在入口配置子應(yīng)用：

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

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

// 監(jiān)聽全局狀態(tài)
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 出去，不然沒人知道這個(gè)是子應(yīng)用。

下一步，是修改 Webpack 的配置。但是 creat-react-app 造出來的 React App 不 eject 出來就改不了，這里官網(wǎng)推薦使用 @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 配置同樣很重要，一個(gè)是配置 historyApiFallback 處理單頁的 404 問題，另一個(gè)是通過 Access-Control-Allow-Origin 解決主應(yīng)用訪問子應(yīng)用的跨域問題。

在上面的主應(yīng)用里看到我們是要訪問不同的端口的，那端口要怎么配置呢？可以通過 .env 來配置：

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

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

API 粗講

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

API 用處 類比
registerMicroApps 主應(yīng)用用來注冊多個(gè)子應(yīng)用的函數(shù) 類似于 Vue 和 React 的路由
start 啟動主應(yīng)用 類似于 React.js 的 render 函數(shù)和 Vue.js 的 new Vue()
loadMicroApp 手動加載子應(yīng)用 也類似于 React.js 的 render 函數(shù)和 Vue.js 的 new Vue()，只不過更自由了
prefetchApps 預(yù)加載子應(yīng)用 類似于 Webpack 的 prefetch 功能
addGlobalUncaughtErrorHandler 頁面報(bào)錯(cuò)時(shí)可以用于上報(bào)和兜底 -
removeGlobalUncaughtErrorHandler 都懂的 -
initGlobalState 初始化全局狀態(tài) 類似于 Redux 的 createStore 和 Vue 的 new Vue.Store()

FAQ

請看 常見問題，最佳實(shí)踐和遇到的問題都能在這里解決。

（完）

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 背景 近幾年前端技術(shù)發(fā)展迅猛，框架組件層出不窮，導(dǎo)致企業(yè)中慢慢沉淀了很多不同技術(shù)棧的前端應(yīng)用。同時(shí)隨著前端業(yè)務(wù)復(fù)雜...
    cd2001cjm閱讀 1,255評論 1贊 2
  • 微前端是一種類似于后端微服務(wù)的架構(gòu)，它將微服務(wù)的理念應(yīng)用于瀏覽器端，即將單頁面前端應(yīng)用由單一的單體應(yīng)用轉(zhuǎn)變?yōu)槎鄠€(gè)小...
    空無一碼閱讀 686評論 0贊 0
  • 一、什么是微前端 Techniques, strategies and recipes for building ...
    梅西愛騎車閱讀 3,520評論 0贊 15
  • 什么是微前端 微前端是一種多個(gè)團(tuán)隊(duì)通過獨(dú)立發(fā)布功能的方式來共同構(gòu)建現(xiàn)代化 web 應(yīng)用的技術(shù)手段及方法策略. 微前...
    lean_閱讀 2,767評論 0贊 7
  • 我是黑夜里大雨紛飛的人啊 1 “又到一年六月，有人笑有人哭，有人歡樂有人憂愁，有人驚喜有人失落，有的覺得收獲滿滿有...
    陌忘宇閱讀 8,832評論 28贊 54

友情鏈接更多精彩內(nèi)容