webpack5 联邦模块介绍详解


Posted in Javascript onJuly 08, 2020

本文主要介绍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="http://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,或者可视化页面搭建等场景。

webpack5 联邦模块介绍详解

例子的 github地址

到此这篇关于webpack5 联邦模块介绍详解的文章就介绍到这了,更多相关webpack5 联邦模块 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
解析JavaScript中的标签语句
Jun 19 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
js检测iframe是否加载完成的方法
Nov 26 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
Javascript地址引用代码实例解析
Feb 25 Javascript
JS实现省市县三级下拉联动
Apr 10 Javascript
实例讲解React 组件
Jul 07 #Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 #Javascript
详解React 元素渲染
Jul 07 #Javascript
JS数据类型判断的几种常用方法
Jul 07 #Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 #Javascript
jQuery 实现扁平式小清新导航
Jul 07 #jQuery
vue@cli3项目模板怎么使用public目录下的静态文件
Jul 07 #Javascript
You might like
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
php获取根域名方法汇总
2014/10/28 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
封装的原生javascript弹出层代码
2010/09/24 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
js微信支付实现代码
2016/12/22 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
python中as用法实例分析
2015/04/30 Python
Python探索之自定义实现线程池
2017/10/27 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
python numpy元素的区间查找方法
2018/11/14 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
Django之PopUp的具体实现方法
2019/08/31 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
keras 权重保存和权重载入方式
2020/05/21 Python
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
大学应届生的自我评价
2014/03/06 职场文书
学校学期工作总结
2015/08/13 职场文书
九年级语文教学反思
2016/03/03 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
使用python绘制横竖条形图
2022/04/21 Python
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS