Module Federation最佳实践-阿里云开发者社区

Module Federation[1]官方称为模块联邦，模块联邦是webpack5支持的一个最新特性，多个独立构建的应用，可以组成一个应用，这些独立的应用不存在依赖关系，可以独立部署，官方称为微前端。

什么模块联邦,微前端，瞬间高大上了，但是官方那解释和示例似乎看起来还是似懂非懂。

正文开始...

在阅读本文前，本文将会从以下几点去探讨MDF

为什么会有MDF
MDF给我解决了什么样的问题
MDF在多个应用中如何使用
写了一个例子感受MDF的强大

为什么会有Module Federation

我们先看一下图

在以前，我们每一个项目都会是一个独立的仓库，一个独立项目，一个独立的应用，多个项目应用之间都是互相独立，独立构建，独立部署。

现在假设application-a项目有一个组件是Example,假设application-b中也有一个组件需要这个组件Example

我们之前的做法就是把a项目的Example拷贝到b项目中，如果这个Example组件有依赖第三方插件，那么我们在b项目也需要安装对应的第三方插件，而且有一种场景，就是哪天这个Example组件需要更新了，那么两个应用得重复修改两次。

于是你想到另外一种方案，我是不是可以把这个独立的组件可以抽象成一个独立的组件仓库，用npm去管理这个组件库，而且这样有组件的版本控制，看起来是一种非常不错的办法。

但是...，请看下面，MDF解决的问题

MDF解决的问题

webpack5升级了，module Federation允许一个应用可以动态的加载另一个应用的代码，而且共享依赖项

现在就变成了一个项目A中可以动态加载项目B，项目B也可以动态加载项目A,A应用的任何应用可以通过MFD共享给其他应用使用。

我们可以用下面一张图理解下

甚至你可以把B应用利用模块联邦导出，在A应用中使用。

现在终于明白为啥会有module federation了吧，本质上就是多个独立的应用之间，可以相互引用，可以减少重复的代码，更好的维护多个应用。我在A项目写的一个组件，我发现B项目也有用，那么我可以把这个组件共享给B使用。而不是cv操作，或者把这个组件搞个独立npm仓库(这也是一种比较可靠的方案)

举个栗子

新建一个目录module-federation,然后新建一个packages目录，对应的目录结构如下

|---packages
      |
|-----application-a
        |---src
            |---App.jsx
            |---app.js
        |---public
        |---index.js
        |---...
        |---package.json
|-----application-b
        |---...
|----package.json

wsrun

我们在application-a与application-b中新建一个package.json,我们使用一个工具wsrun，可以批量启动或者打包多个应用

{
  "name": "module-federation",
  "version": "1.0.0",
  "description": "模块联邦demo测试",
  "main": "index.js",
  "private": true,
  "workspaces": [
    "packages/*"
  ],
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "wsrun --parallel start",
    "build": "yarn workspaces run build",
    "dev": "wsrun --parallel dev"
  },
  "keywords": [],
  "author": "maicFir",
  "license": "ISC",
  "devDependencies": {
    "wsrun": "^5.2.4"
  }
}

在application-a应用中，我们主要看下以下几个文件

package.json

{
  "name": "application_a",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack server --port=8081 --open",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.18.2",
    "@babel/preset-env": "^7.18.2",
    "@babel/preset-react": "^7.17.12",
    "babel-loader": "^8.2.5",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

webpack.config.js

// application-a/webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入moduleFed插件
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const { dependencies } = require("./package.json");
module.exports = {
  mode: 'development',
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  },
  resolve: {
    extensions: ['.jsx', '.js', '.json'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/env']
        }
      }
    ]
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'application_a',
      library: { type: 'var', name: 'application_a' },
      // 另外一个应用html中引入的模块联邦入口文件
      filename: 'remoteEntry.js',
      // 选择暴露当前应用需要给外部使用的组件，供其他应用使用
      exposes: {
        './Example': './src/compments/Example',
      },
      // 这里是选择关联其他应用的组件
      remotes: {
        'application_b': 'application_b',
      },
      // react react-dom会独立分包加载
     shared: {
        ...dependencies,
        react: {
          singleton: true,
          requiredVersion: dependencies["react"],
        },
        "react-dom": {
          singleton: true,
          requiredVersion: dependencies["react-dom"],
        },
      }
      // shared: ['react', 'react-dom'], 这样会error
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    }),
    // 热加载
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    hot: true
  }
};

我们在看下入口entry文件

// application-a/index.js
import('./src/app.js')

app.js

// application-a/src/app.js
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
const appDom = document.getElementById('app');
const root = createRoot(appDom);
root.render(<App />);

在App.jsx

// application-a/src/App.jsx
import React from 'react';
// 引入application_b应用的Example，Example2组件
// import Example1 from 'application_b/Example';
// import Example2 from 'application_b/Example2';
//or
const Example1 = React.lazy(() => import('application_b/Example'));
const Example2 = React.lazy(() => import('application_b/Example2'));
function App() {
  return (
    <div>
      <p>this is applicatin a</p>
      <Example1 />
      <Example2 />
    </div>
  );
}
export default App;

Example.jsx

// application-a/src/compments/Example.jsx
import React from 'react';
export default function Example1() {
  return <h1>我是A应用的一个组件-example1</h1>;
}

至此我们application-a这个项目已经ok了

我们再看下application-b

// application-b/webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入moduleFederation
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const { dependencies } = require("./package.json");
module.exports = {
  mode: 'development',
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/env']
        }
      }
    ]
  },
  resolve: {
    extensions: ['.jsx', '.js', '.json'],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'application_b',
      library: { type: 'var', name: 'application_b' },
      filename: 'remoteEntry.js',
      // 当前组件需要暴露出去的组件
      exposes: {
        './Example': './src/compments/Example',
        './Example2': './src/compments/Example2',
      },
      // 关联需要引入的其他应用
      remotes: {
        'application_a': 'application_a',
      },
      shared: {
        ...dependencies,
        react: {
          singleton: true,
          requiredVersion: dependencies["react"],
        },
        "react-dom": {
          singleton: true,
          requiredVersion: dependencies["react-dom"],
        },
      },
      // shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    hot: true
  }
};

我们在application-b/src/compments新建了两个组件

Example

import React from 'react';
export default function Example() {
  return <h1>我是B应用-example1</h1>;
}

Example1

import React from 'react';
export default function Example2() {
  return <h1>我是B应用-example2</h1>;
}

在webpack.config.js中我们在exposes中导出了，这样能给其他应用使用

...
 plugin: [
     new ModuleFederationPlugin({
      name: 'application_b',
      library: { type: 'var', name: 'application_b' },
      filename: 'remoteEntry.js',
      exposes: {
        './Example': './src/compments/Example',
        './Example2': './src/compments/Example2',
      },
      ...
    }),
 ]

在html中引入`remoteEntry.js`

由于我需要在application-a中使用application-b暴露出来的组件

因此我需要在application-a的模版页面中引入

<!--application-a/public/index.html-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>application-a</title>
    <script src="http://localhost:8082/remoteEntry.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

如果我需要在application-b中需要application-a中的组件，同样需要引入

<!--application-b/public/index.html-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>application-b</title>
    <script src="http://localhost:8081/remoteEntry.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

在根目录下执行npm run start,注意子应用里面的名字也必须是start，相当于批量开启应用

application-a

application-b

至此你会发现application-a需要application-b应用的两个组件就已经无缝的应用到了自己应用中去

我们会发现，在application-a应用共享出来的模块，在application-b中的要提前在html中下载引入。

注意的一些问题

exposes 使用错误

// error
 exposes: {
   'Example': './src/compments/Example',
 },

这样会导致在application-a中的Example`无法使用

正确的做法是

exposes: {
   './Example': './src/compments/Example',
   /*
   './App': './src/App' // 这样会报错，另外一个应用引入会报错
   */
 },

另外exposes只能暴露内部jsx的组件，不能是js文件，不能是整个App.jsx应用。

主要是App.jsx有引用application-a的引用

如果application-b中,App.jsx改成以下

import React from 'react';
function App() {
  return (
    <div>
      <h3>hello application B</h3>
    </div>
  );
}
export default App;

那么此时我可以把整个application-b应用当成组件在application-a中使用，但是得把当前应用暴露出去

// application-b/webpack.config.js
  exposes: {
        './Example': './src/compments/Example',
        './Example2': './src/compments/Example2',
        './App': './src/App'
 },

在application-a的App.jsx

// application-a/src/App.jsx
import React from 'react';
// import Example1 from 'application_b/Example';
// import Example2 from 'application_b/Example2';
// or
const Example1 = React.lazy(() => import('application_b/Example'));
const Example2 = React.lazy(() => import('application_b/Example2'));
const AppFromB = React.lazy(() => import('application_b/App'));
function App() {
  return (
    <div>
      <p>this is applicatin a</p>
      <Example1 />
      <Example2 />
      <p>下面是从另外一个应用动态加载过来的</p>
      <AppFromB></AppFromB>
    </div>
  );
}
export default App;

MDF真的是太强了，这不是妥妥的可以替代传统的那种iframe嵌套另外一个独立的项目

shared 提示版本问题

...
shared: ['react', 'react-dom'],

正确做法

const { dependencies } = require("./package.json");
...
shared: {
  ...dependencies,
  react: {
    singleton: true,
    requiredVersion: dependencies["react"],
  },
  "react-dom": {
    singleton: true,
    requiredVersion: dependencies["react-dom"],
  },
},

另外推荐几篇关于MDF的参考资料以及不错的文章

ModuleFederationWebpack5[2]
how-to-use-webpack-module-federation[3]
module-federation-examples[4]
federated-libraries[5]

经本地不断的测试，终于了解webpack5 MDF的一些使用场景以及它在具体业务使用的可能性，更多关于MDF信息参考官方文档[6]

总结

了解module federation，官方解释就是模块联邦,主要依赖内部webpack提供的一个插件ModuleFederationPlugin,可以将内部的组件共享给其他应用使用
MDF解决了什么样的问题，允许一个应用A加载另外一个应用B,并且依赖共享，两个独立的应用之间互不影响
写了一个例子，进一步理解MDF
本文示例code example[7]

Module Federation最佳实践

为什么会有Module Federation

MDF解决的问题

举个栗子

wsrun

在html中引入`remoteEntry.js`

注意的一些问题

总结

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Module Federation最佳实践

为什么会有Module Federation

MDF解决的问题

举个栗子

wsrun

在html中引入remoteEntry.js

注意的一些问题

总结

热门文章

最新文章

相关电子书

相关实验场景

在html中引入`remoteEntry.js`