簡(jiǎn)介

Module federation 解決了一次構(gòu)建可以拆分為多次構(gòu)建的問(wèn)題，并且構(gòu)建產(chǎn)物也可以為其他應(yīng)用提供服務(wù)。

本質(zhì)上 webpack 的能力是用來(lái)增強(qiáng)不同 bundle 之間 code sharing 的能力。

Multiple separate builds should form a single application. These separate builds should not have dependencies between each other, so they can be developed and deployed individually.

This is often known as Micro-Frontends, but is not limited to that.

多個(gè)獨(dú)立的構(gòu)建可以形成一個(gè)應(yīng)用程序。這些獨(dú)立的構(gòu)建不會(huì)相互依賴，因此可以單獨(dú)開發(fā)和部署它們。這通常被稱為微前端，但并不僅限于此。

概念

從官網(wǎng)的描述可以簡(jiǎn)單看出，MF 希望做的事情就是將多個(gè)獨(dú)立部署構(gòu)建的應(yīng)用合并成一個(gè)。因此，MF 引出下面

概念：

Container: 一個(gè)被模塊聯(lián)邦插件打包出來(lái)的模塊稱為一個(gè) Container, 他可以被其他的 bundle 進(jìn)行消費(fèi)的。

host應(yīng)用：消費(fèi) webpack 構(gòu)建出的 Container 的 module。（引用了其他應(yīng)用的應(yīng)用）
remote應(yīng)用：被消費(fèi)的 Container.（被其他應(yīng)用所使用的應(yīng)用）

使用

MF 是webpack5 自帶的，我們只需要?jiǎng)?chuàng)建一個(gè) ModuleFederationPlugin 即可，簡(jiǎn)單的配置如下：

name：應(yīng)用名稱，當(dāng)作為 remote 被引用是，路徑為 ${name}/${expose}
library：聲明全局變量的方式，name為umd的name

filename：構(gòu)建輸出的文件名
remotes：遠(yuǎn)程引用的應(yīng)用名及其別名的映射，使用時(shí)以key值作為name，host 應(yīng)用需要配置

exposes：被遠(yuǎn)程引用時(shí)可暴露的資源路徑及其別名，rremote 應(yīng)用需要配置
shared：與其他應(yīng)用之間可以共享的第三方依賴，使你的代碼中不用重復(fù)加載同一份依賴

配置

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
	// 其他配置
    plugins: [
      new ModuleFederationPlugin({
        name: 'website2', // remote 子應(yīng)用名稱
        library: { type: 'var', name: 'website2' },//聲明全局變量的方式umd, cjs，name為umd的name
        filename: 'remoteEntry.js', // 打包出的文件名
        exposes: {
          './router': './src/entries/router.ts',
          './public-path': './config/public-path.js',
          ...appComponents,
          },
        // 優(yōu)先用 Host 的依賴，如果 Host 沒有，再用自己的
        shared: ['react', 'react-dom']
      }),
  ],
}

　　

使用

獲取遠(yuǎn)程應(yīng)用的模塊

import ('dpapp_catalog/router').then(data => {
	// console.log(data); // 遠(yuǎn)程子應(yīng)用模塊
})

import React, { lazy, Suspense, useState } from 'react';
import Footer from './Footer';
import Footer2 from 'website2/Footer'; // federated

const Title = lazy(() => import('website2/Title')); // federated

export default () => {
	return (
		<>
			<Suspense fallback={'fallback'}>
				<Title />
			</Suspense>
		
			<Footer />
			<Footer2 />
		</>
	);
};

　　

　

總結(jié)

以上是生活随笔為你收集整理的ModuleFederation-模块联邦的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。