【微前端】手把手教你从0到1实现基于Webpack5 模块联邦(Module Federation)的微前端~(中)

简介: 【微前端】手把手教你从0到1实现基于Webpack5 模块联邦(Module Federation)的微前端~(中)

2.2 改造 micro-front-end-1

cd micro-front-end-1

先安装webpack相关的依赖:

yarn add webpack webpack-cli webpack-server html-webpack-plugin webpack-dev-server -D

删除 micro-front-end-1/src/index.js 中的所有代码,并将其替换为:
image.png
micro-front-end-1 项目根目录中创建 webpack.config.js

module.exports = {
  mode: "development",
};

image.png
package.json 中加入 script
image.png
然后使用 webpack 打包 micro-front-end-1 代码:

yarn webpack

将会在根目录生成一个 dist 的产物文件夹:image.png

接着添加 webpack server 配置:

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: "development",
  devServer: {
    port: 8081,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
};

修改 package.jsonwebpack script:

 "scripts": {
    "webpack": "webpack serve",
    // ...
  },

清理掉 public/index.html 中的一些无用的代码:

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
  <div id="root"></div>
</body>
</html>

并将 src/index.js 中的代码改成:

document.querySelector("#root").innerHTML = `<h1>Micro-Front-End-1</h1>`;

然后运行 yarn webpack,这将启动一个位于 8081端口 的本地服务,在控制台,你就可以看到我们在 src/index.js 中写的代码:
image.png

2.3 改造 Container

cd container

安装一些必要的依赖

yarn add webpack webpack-cli webpack-server html-webpack-plugin -D

container 的根目录也配置一个 webapck.config.js 文件:

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: "development",
  devServer: {
    port: 8080,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
};

image.png
也在 package.jsonscripts 中加入:

 "webpack": "webpack serve",

改造 public/index.htmlsrc/index.js

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <div id="root"></div>
</body>
</html>
console.log("Container");

执行 yarn webpack,打开 http://localhost:8080/

image.png

2.4 在 container 中引入 micro-front-end-1

2.4.1 引入 Module Federation

micro-front-end-1/webpack.config.js 中加入:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
  mode: "development",
  devServer: {
    port: 8081,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "microFrontEnd1",
      filename: "remoteEntry.js",
      exposes: {
        "./MicroFrontEnd1Index": "./src/index",
      },
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
};

这将从 micro-front-end-1 暴露出 index.js。(注意:这里使用了驼峰命名法)

2.4.2 在 container 中引入

container/webpack.config.js 中添加:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
  mode: "development",
  devServer: {
    port: 8080,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "container",
      remotes: {
        microFrontEnd1: "microFrontEnd1@http://localhost:8081/remoteEntry.js",
      },
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
};

然后,将 container/src/index.js 重命名为 container/src/bootstrap.js,并导入microFrontEnd1/MicroFrontEnd1Index(这是为了异步运行文件,直到它从 micro-front-end-1 获得数据到容器中。)

// container/src/bootstrap.js
import "microFrontEnd1/MicroFrontEnd1Index";
console.log("Container!");

创建一个新的 container/src/index.js 并导入 bootstrap.js

// container/src/index.js
import("./bootstrap");

重新运行两个项目:
image.png
打开控制台,选择网络,禁用缓存,如下图所示:
image.png
刷新页面:
image.png
右键单击名称旁边的标题,从菜单中选择Url,以显示被调用的URL
image.png
image.png
整个流程是这样的:

  1. 它首先在 http://localhost:8080/main.js 上调用 main.js,这就是容器。
  2. http://localhost:8081/remoteEntry.js 上调用了 remoteEntry.js。这是 micro-front-end-1
  3. 再次回到容器中调用 bootstrap
  4. 最后从 micro-front-end-1(index.js) 调用 src_index_js.js,将其输出渲染在屏幕上

所有这些都基于 ModuleFederationPlugin:

image.pngwebpack 使用 micro-front-end-1/webpack.config.js 的这个配置来创建http://localhost:8081/remoteEntry.jshttp://localhost:8081/src_index_js.js

然后 container/webpack.config.js 上的配置告诉服务器如何获取 http://localhost:8081/remoteEntry.js

image.pnghttp://localhost:8081/remoteEntry.js 里获取 src_index_js.js 所需的信息:
image.png
模块联邦允许 JavaScript 在运行时将代码从 micro-front-end-1 动态地导入到 container 中。

2.5 改造并引入 micro-front-end-2

2.5.1 改造 micro-front-end-2

cd mirco-front-end-2

安装必要的依赖:

yarn add webpack webpack-cli webpack-server html-webpack-plugin -D

micro-front-end-2 的根目录下新建 webapck.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
  mode: "development",
  devServer: {
    port: 8082,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "microFrontEnd2",
      filename: "remoteEntry.js",
      exposes: {
        "./MicroFrontEnd2Index": "./src/index",
      },
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
};

接着在 package.json 中增加 webpack script:

 "scripts": {
    "webpack": "webpack serve",
    // ...
  },

删除 micro-front-end-2/public/index.html 的内容,并将 micro-front-end-1/public/index.html 的内容复制到其中。用一个新的id替换,如下所示:

// micro-front-end-2/public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
  <div id="microFrontend2"></div>
</body>
</html>

删除 micro-front-end-2/src/index.js 的内容,并将 micro-front-end-1/public/index.html 的内容复制到其中。在<h1>标签中用你上面的id和服务名称替换:

// micro-front-end-2/src/index.js
document.querySelector('#microFrontend2').innerHTML = 
    `<h1>Micro-Front-End-2</h1>
    <p>This is the second Micro Frontend</p>
    <p> Fugiat exercitation irure in ex. Ut sunt qui nostrud sit nostrud aliquip minim excepteur irure tempor aute aute ad dolor. Sit elit consectetur ullamco dolor.
Incididunt tempor consectetur sint est. Eu incididunt in elit eiusmod in consectetur aliquip occaecat ipsum mollit commodo qui nulla. Ipsum Lorem minim magna tempor do nostrud enim dolor dolore laborum fugiat aliquip et. Duis esse nulla in ut cupidatat id. Commodo incididunt ex occaecat sunt fugiat dolor aliqua nostrud eiusmod dolor dolore commodo nulla fugiat. Est aute sunt excepteur proident eiusmod id officia quis. Officia non ea pariatur ea duis fugiat mollit sit duis.
Duis velit pariatur nostrud aliqua laboris irure amet Lorem amet. Eiusmod enim aliquip et ea ea quis irure occaecat qui in et nostrud. Elit est officia adipisicing qui fugiat sint non elit nisi tempor. Sint deserunt proident magna laboris esse velit mollit irure esse sint laborum eu veniam aliquip. Anim eu ipsum aliquip ullamco excepteur eu esse enim minim adipisicing nostrud magna veniam. Pariatur mollit ullamco commodo ea duis duis. Eu deserunt proident mollit aliqua nostrud voluptate consectetur Lorem nisi et qui sunt et deserunt.</p>`

然后执行 yarn webapck,打开 http://localhost:8082/,就可以看到:
image.png

目录
打赏
0
1
0
0
99
分享
相关文章
前端架构思考 :专注于多框架的并存可能并不是唯一的方向 — 探讨大模型时代前端的分层式微前端架构
随着前端技术的发展,微前端架构成为应对复杂大型应用的流行方案,允许多个团队使用不同技术栈并将其模块化集成。然而,这种设计在高交互性需求的应用中存在局限,如音视频处理、AI集成等。本文探讨了传统微前端架构的不足,并提出了一种新的分层式微前端架构,通过展示层与业务层的分离及基于功能的横向拆分,以更好地适应现代前端需求。
108 0
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
121 6
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
116 7
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
98 2
深入理解微前端架构:构建灵活、高效的前端应用
【10月更文挑战第23天】微前端架构是一种将前端应用分解为多个小型、独立、可复用的服务的方法。每个服务独立开发和部署,但共同提供一致的用户体验。本文探讨了微前端架构的核心概念、优势及实施方法,包括定义服务边界、建立通信机制、共享UI组件库和版本控制等。通过实际案例和职业心得,帮助读者更好地理解和应用微前端架构。
掌握微前端架构:构建未来前端应用的基石
【10月更文挑战第12天】随着前端技术的发展,传统的单体应用架构已无法满足现代应用的需求。微前端架构通过将大型应用拆分为独立的小模块,提供了更高的灵活性、可维护性和快速迭代能力。本文介绍了微前端架构的概念、核心优势及实施步骤,并探讨了其在复杂应用中的应用及实战技巧。
拥抱微前端架构:构建灵活、高效的前端应用
【10月更文挑战第17天】微前端架构是一种将前端应用拆分为多个小型、独立、可复用的服务的方法,每个服务可以独立开发、部署和维护。本文介绍了微前端架构的核心概念、优势及实施步骤,并分享了业界应用案例和职业心得,帮助读者理解和应用这一新兴架构模式。
掌握微前端架构:构建可扩展的前端应用
【10月更文挑战第6天】随着前端应用复杂性的增加,传统单体架构已难以满足需求。微前端架构通过将应用拆分为独立模块,提升了灵活性与可维护性。本文介绍微前端的概念、优势及实施步骤,包括定义边界、创建共享UI库、设置通信机制等,并探讨其在SPA扩展、大型项目模块化及遗留系统现代化中的应用。通过实战技巧如版本控制、配置管理和监控日志,帮助团队高效协作,保持应用灵活性。微前端架构为构建大型前端应用提供有效解决方案,适合希望提升项目可扩展性的开发者参考。
|
5月前
|
前端浮动模块
前端浮动模块
35 0
前端浮动模块
前端模块打包器的深度解析
【10月更文挑战第13天】前端模块打包器的深度解析

热门文章

最新文章

  • 1
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    16
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    8
  • 3
    从前端视角聊聊通义灵码使用经验,如何更好地提升研发效率
    144
  • 4
    详解智能编码在前端研发的创新应用
    6
  • 5
    巧用通义灵码,提升前端研发效率
    18
  • 6
    智能编码在前端研发的创新应用
    11
  • 7
    VSCode AI提效工具,通义灵码前端开发体验
    19
  • 8
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    11
  • 9
    课程预告|前端开发者如何用好通义灵码,这份实战指南请查收
    82
  • 10
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    3
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等