Webpack5联邦模块如何实现跨项目模块共享与优化？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1251个文字，预计阅读时间需要6分钟。
webpack+5 引入了一项新特性——模块联邦（Module Federation），它允许代码的共享与复用，尤其适用于大型项目或微服务架构。以下是关于模块联邦的简要介绍：
模块联邦特性概述：- 联邦模块特性： 允许不同项目的代码在构建时相互导入和导出。- 使用方法： 通过配置 `output` 字段中的 `expose` 和 `library` 选项，使模块可在其他项目中使用。- 适用范围： 适用于需要跨项目共享代码的场景，如微服务架构或模块化的大型项目。
特性优势：- 更好的代码共享： 通过联邦模块，可以轻松地在不同项目中共享代码，提高开发效率。- 灵活的构建流程： 联邦模块支持动态导入，使得构建过程更加灵活。
应用场景：- 微服务架构： 在微服务架构中，不同服务之间可以通过模块联邦共享代码库。- 大型项目模块化： 将大型项目为多个模块，通过模块联邦实现模块间的代码共享。
本文主要介绍webpack 5 的新特性之一 "module federation"(联邦模块)，涉及联邦模块特性、使用方法、适用范围。
特性
webpack 5引入联邦模式是为了 更好的共享代码 。 在此之前，我们共享代码一般用npm发包来解决。 npm发包需要经历构建，发布，引用三阶段，而联邦模块可以 直接引用其他应用代码 ,实现热插拔效果。对比npm的方式更加简洁、快速、方便。
使用方法
- 引入远程js
- webpack配置
- 模块使用
引入远程JS
假设我们有app1，app2两个应用，端口分别为3001，3002。 app1应用要想引用app2里面的js，直接用script标签即可。
例如app1应用里面index.html引入app2应用remoteEntry.js
<head> <script src="localhost:3002/remoteEntry.js"></script> </head>
webpack配置
app1的webpack配置：
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin"); module.exports = { //.... plugins: [ new ModuleFederationPlugin({ name: "app1", library: { type: "var", name: "app1" }, remotes: { app2: "app2", }, shared: ["react", "react-dom"], }), ], };
对于app2的webpack配置如下
plugins: [ new ModuleFederationPlugin({ name: "app2", library: { type: "var", name: "app2" }, filename: "remoteEntry.js", exposes: { "./Button": "./src/Button", }, shared: ["react", "react-dom"], }) ],
可以看到app1和app2的配置基本相同，除了app2 多了filename和exposes以外。
参数解释
- name 应用名，全局唯一，不可冲突。
- library 。UMD标准导出，和name保持一致即可。
- remotes 声明需要引用的远程应用。如上图app1配置了需要的远程应用app2.
- filename 远程应用时被其他应用引入的js文件名称。对应上面的 remoteEntry.js
- exposes 远程应用暴露出的模块名。
- shared 依赖的包。
- 如果配置了这个属性。webpack在加载的时候会先判断本地应用是否存在对应的包，如果不存在，则加载远程应用的依赖包。
- 以app2来说，因为它是一个远程应用，配置了["react", "react-dom"] ，而它被app1所消费，所以webpack会先查找app1是否存在这两个包，如果不存在就使用app2自带包。 app1里面同样申明了这两个参数，因为app1是本地应用，所以会直接用app1的依赖。
模块使用
对于app1/App.js代码使用app2的组件，代码如下：
import React from "react"; const RemoteButton = React.lazy(() => import("app2/Button")); const App = () => ( <div> <h1>Basic Host-Remote</h1> <h2>App 1</h2> <React.Suspense fallback="Loading Button"> <RemoteButton /> </React.Suspense> </div> ); export default App;
具体这一行
const RemoteButton = React.lazy(() => import("app2/Button"));
使用方式为：import('远程应用名/暴露的模块名'），对应webpack配置里面的name和expose。使用方式和引入一个普通异步组件无差别。
适用范围
由于share这个属性的存在，所以本地应用和远程应用的技术栈和版本必须兼容，统一用同一套。比如js用react，css用sass等。
联邦模块和微前端的关系：因为expose这个属性即可以暴露单个组件，也可以把整个应用暴露出去。同时由于share属性存在，技术栈必须一致。所以加上路由，可以用来实现single-spa这种模式的微前端。
使用场景：新建专门的组件应用服务来管理所有组件和应用，其他业务层只需要根据自己业务所需载入对应的组件和功能模块即可。模块管理统一管理，代码质量高，搭建速度快。特别适用矩阵app，或者可视化页面搭建等场景。
例子的 github地址
到此这篇关于webpack5 联邦模块介绍详解的文章就介绍到这了,更多相关webpack5 联邦模块 内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！
本文共计1251个文字，预计阅读时间需要6分钟。
webpack+5 引入了一项新特性——模块联邦（Module Federation），它允许代码的共享与复用，尤其适用于大型项目或微服务架构。以下是关于模块联邦的简要介绍：
模块联邦特性概述：- 联邦模块特性： 允许不同项目的代码在构建时相互导入和导出。- 使用方法： 通过配置 `output` 字段中的 `expose` 和 `library` 选项，使模块可在其他项目中使用。- 适用范围： 适用于需要跨项目共享代码的场景，如微服务架构或模块化的大型项目。
特性优势：- 更好的代码共享： 通过联邦模块，可以轻松地在不同项目中共享代码，提高开发效率。- 灵活的构建流程： 联邦模块支持动态导入，使得构建过程更加灵活。
应用场景：- 微服务架构： 在微服务架构中，不同服务之间可以通过模块联邦共享代码库。- 大型项目模块化： 将大型项目为多个模块，通过模块联邦实现模块间的代码共享。
本文主要介绍webpack 5 的新特性之一 "module federation"(联邦模块)，涉及联邦模块特性、使用方法、适用范围。
特性
webpack 5引入联邦模式是为了 更好的共享代码 。 在此之前，我们共享代码一般用npm发包来解决。 npm发包需要经历构建，发布，引用三阶段，而联邦模块可以 直接引用其他应用代码 ,实现热插拔效果。对比npm的方式更加简洁、快速、方便。
使用方法
- 引入远程js
- webpack配置
- 模块使用
引入远程JS
假设我们有app1，app2两个应用，端口分别为3001，3002。 app1应用要想引用app2里面的js，直接用script标签即可。
例如app1应用里面index.html引入app2应用remoteEntry.js
<head> <script src="localhost:3002/remoteEntry.js"></script> </head>
webpack配置
app1的webpack配置：
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin"); module.exports = { //.... plugins: [ new ModuleFederationPlugin({ name: "app1", library: { type: "var", name: "app1" }, remotes: { app2: "app2", }, shared: ["react", "react-dom"], }), ], };
对于app2的webpack配置如下
plugins: [ new ModuleFederationPlugin({ name: "app2", library: { type: "var", name: "app2" }, filename: "remoteEntry.js", exposes: { "./Button": "./src/Button", }, shared: ["react", "react-dom"], }) ],
可以看到app1和app2的配置基本相同，除了app2 多了filename和exposes以外。
参数解释
- name 应用名，全局唯一，不可冲突。
- library 。UMD标准导出，和name保持一致即可。
- remotes 声明需要引用的远程应用。如上图app1配置了需要的远程应用app2.
- filename 远程应用时被其他应用引入的js文件名称。对应上面的 remoteEntry.js
- exposes 远程应用暴露出的模块名。
- shared 依赖的包。
- 如果配置了这个属性。webpack在加载的时候会先判断本地应用是否存在对应的包，如果不存在，则加载远程应用的依赖包。
- 以app2来说，因为它是一个远程应用，配置了["react", "react-dom"] ，而它被app1所消费，所以webpack会先查找app1是否存在这两个包，如果不存在就使用app2自带包。 app1里面同样申明了这两个参数，因为app1是本地应用，所以会直接用app1的依赖。
模块使用
对于app1/App.js代码使用app2的组件，代码如下：
import React from "react"; const RemoteButton = React.lazy(() => import("app2/Button")); const App = () => ( <div> <h1>Basic Host-Remote</h1> <h2>App 1</h2> <React.Suspense fallback="Loading Button"> <RemoteButton /> </React.Suspense> </div> ); export default App;
具体这一行
const RemoteButton = React.lazy(() => import("app2/Button"));
使用方式为：import('远程应用名/暴露的模块名'），对应webpack配置里面的name和expose。使用方式和引入一个普通异步组件无差别。
适用范围
由于share这个属性的存在，所以本地应用和远程应用的技术栈和版本必须兼容，统一用同一套。比如js用react，css用sass等。
联邦模块和微前端的关系：因为expose这个属性即可以暴露单个组件，也可以把整个应用暴露出去。同时由于share属性存在，技术栈必须一致。所以加上路由，可以用来实现single-spa这种模式的微前端。
使用场景：新建专门的组件应用服务来管理所有组件和应用，其他业务层只需要根据自己业务所需载入对应的组件和功能模块即可。模块管理统一管理，代码质量高，搭建速度快。特别适用矩阵app，或者可视化页面搭建等场景。
例子的 github地址
到此这篇关于webpack5 联邦模块介绍详解的文章就介绍到这了,更多相关webpack5 联邦模块 内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！