【微前端】手把手教你从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

相关文章
|
3天前
|
前端开发
前端浮动模块
前端浮动模块
10 0
前端浮动模块
|
14天前
|
前端开发 JavaScript 架构师
了解微前端,深入前端架构的前世今生
该文章深入探讨了微前端架构的起源、发展及其解决的问题,并详细讲解了微前端在现代Web应用中的实现方式与优势,帮助读者理解微前端的设计理念和技术细节。
|
3天前
|
前端开发
开发指南047-前端模块版本
平台前端框架内置了一个文件version.vue
|
1月前
|
前端开发 开发者
在前端开发中,webpack 作为一个强大的模块打包工具,为我们提供了丰富的功能和扩展性
【9月更文挑战第1天】在前端开发中,Webpack 作为强大的模块打包工具,提供了丰富的功能和扩展性。本文重点介绍 DefinePlugin 插件,详细探讨其原理、功能及实际应用。DefinePlugin 可在编译过程中动态定义全局变量,适用于环境变量配置、动态加载资源、接口地址配置等场景,有助于提升代码质量和开发效率。通过具体配置示例和注意事项,帮助开发者更好地利用此插件优化项目。
70 13
|
16天前
|
前端开发 测试技术 API
探索微前端架构:构建现代化的前端应用
在软件开发中,传统单体架构已难以满足快速迭代需求,微前端架构应运而生。它将前端应用拆分成多个小型、独立的服务,每个服务均可独立开发、测试和部署。本文介绍微前端架构的概念与优势,并指导如何实施。微前端架构具备自治性、技术多样性和共享核心的特点,能够加速开发、提高可维护性,并支持灵活部署策略。实施步骤包括定义服务边界、选择架构模式、建立共享核心、配置跨服务通信及实现独立部署。尽管面临服务耦合、状态同步等挑战,合理规划仍可有效应对。
|
2月前
|
前端开发 安全 测试技术
[译]一种基于模块联邦的插件前端
[译]一种基于模块联邦的插件前端
|
2月前
|
JavaScript 前端开发 API
解锁前端开发新境界:Vue.js携手Webpack,打造高效构建流程,你的项目值得拥有!
【8月更文挑战第30天】随着前端技术的发展,模块化与组件化趋势愈发显著。Vue.js 以其简洁的 API 和灵活的组件系统,深受开发者喜爱;Webpack 则凭借强大的模块打包能力成为前端工程化的基石。两者结合,不仅简化了组件编写与引用,还通过模块热替换、代码分割等功能大幅提升开发效率。本文将通过具体示例,展示如何利用 Vue.js 和 Webpack 构建高效、有序的前端开发环境。从安装配置到实际应用,逐步解析这一组合的优势所在。
39 0
|
29天前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
2月前
|
存储 前端开发 JavaScript
前端语言串讲 | 青训营笔记
前端语言串讲 | 青训营笔记
34 0
|
4月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
77 2