【微前端】手把手教你从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
分享
相关文章
深入了解Webpack:模块打包的革命
【10月更文挑战第11天】深入了解Webpack:模块打包的革命
|
5月前
|
前端浮动模块
前端浮动模块
35 0
前端浮动模块
前端模块打包器的深度解析
【10月更文挑战第13天】前端模块打包器的深度解析
Webpack技术深度解析:模块打包与性能优化
【10月更文挑战第13天】Webpack技术深度解析:模块打包与性能优化
在前端开发中,webpack 作为一个强大的模块打包工具,为我们提供了丰富的功能和扩展性
【9月更文挑战第1天】在前端开发中,Webpack 作为强大的模块打包工具,提供了丰富的功能和扩展性。本文重点介绍 DefinePlugin 插件,详细探讨其原理、功能及实际应用。DefinePlugin 可在编译过程中动态定义全局变量,适用于环境变量配置、动态加载资源、接口地址配置等场景,有助于提升代码质量和开发效率。通过具体配置示例和注意事项,帮助开发者更好地利用此插件优化项目。
109 13
开发指南047-前端模块版本
平台前端框架内置了一个文件version.vue
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
346 14
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
113 6
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
126 1

热门文章

最新文章

  • 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接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    12
  • 9
    课程预告|前端开发者如何用好通义灵码,这份实战指南请查收
    82
  • 10
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    3