手把手教你如何使用 webpack5 的模块联邦新特性
想象一下,在webpack5还没出来前,前端使用第三方组件库,例如使用 dayjs
日期处理库,都是通过 npm i dayjs -s
安装 dayjs
模块到项目里,然后就可以通过 require
或者 import
来使用。整个过程也不是很麻烦,但是如果某一天 dayjs
这个库修复了一个重大bug,我们得重新通过 npm 来安装最新版本,然后重启项目,那么有没有一个更简单的方案呢?
本文首发于:https://www.1024nav.com/blog/webpck5-module-federation
模块联邦
为了减少对 npm 包的安装频率,还有避免本地安装 node_modules 包,webpack开发团队想出了一个解决方案,能否将第三方库放到网络上单独部署,如果项目需要使用再从该库的地址上直接拉取下来使用,这样就不需要通过 npm 来安装,更新指定依赖包,也方便实时保持库的新版本。感觉有点类似以前通过 cdn 引入第三方js库的感觉
模块联邦还可以实现微前端服务
什么是微前端
微前端是一个技术栈无关的多应用集成思想,将一个大应用拆分成多个子应用来开发,每个子应用可以使用自己的技术栈(vue,angularjs,reactjs,jquery)进行独立开发,部署。最后通过主应用基座来集成各个子应用。具体细节这里不展开讲
模块联邦如何实现模块共享
webpack提供了一个 ModuleFederationPlugin
插件,能够实现模块的发布和引入, ModuleFederationPlugin
插件常用的配置有以下几个
- name : 必须,唯一的库名,使用者通过 [name]/[exposes]使用
- filename :必须,暴露的文件名,在使用者通过 remotes 来引入
- library :可选, umd的名称,类似于jQuery的$,lodash的_
- exposes : 可选,配置暴露指定的模块,供其他人使用
- remotes : 可选,表示使用其他远程的模块
- shared :可选, 配置共享库,例如
shared: ['react', 'react-dom']
意思是宿主和引用依赖的模块共享配置的库,如果host有该库则不需要再次下载,直接使用host已有的库
接下来一步一步实现一个模块联邦功能
模块的开发和部署
通过CRA(create react app)来创建一个应用。我们创建一个 common-component 项目
然后配置 ModuleFederationPlugin ,在 config-overrides.js 文件里面新增以下配置。关于 cra 如何自定义 webpack 配置可以查看这篇文章
module.exports = override(
config => {
config.output.publicPath = 'http://localhost:3000/';
return config;
},
addWebpackPlugin(new ModuleFederationPlugin({
name: 'ccomponent',
filename: "remoteEntry.js",
exposes: {
'./button': './src/button/index.jsx',
}
})),
);
注意这里的 publicPath 是必须的,获取组件的时候会从当前 host 下获取 button 这个组件,通过 ModuleFederationPlugin 的 exposes 选项暴露 button 组件。
我们在 src 新建一个 button 组件
// src/button/index.jsx
import React from 'react'
import PropTypes from 'prop-types'
const Button = props => {
const {
children
} = props;
return (
<button>
{ children }
</button>
)
}
Button.propTypes = {
children: PropTypes.node.isRequired
}
export default Button
通过 npm run start 启动,这时候可以访问到 http://localhost:3000/remoteEntry.js
模块的使用
我们再通过 CRA 创建一个名称 app 的项目,同样的在 config-overrides.js 里面引入 ModuleFederationPlugin
module.exports = override(
addWebpackPlugin(new ModuleFederationPlugin({
name: 'app',
remotes: {
'ccomponent': 'ccomponent@http://localhost:3000/remoteEntry.js',
}
})),
);
cccomponent 是上面 common-component 项目里面配置的 name
然后在 app 里面使用 common-component 的 button 组件,这里使用 React.lazy 来异步加载该组件
const Button = React.lazy(() => import("ccomponent/button"));
function App() {
return (
<div className="App">
<React.Suspense fallback="Loading Component">
<Button>hello</Button>
</React.Suspense>
</div>
);
}
到此为止,就可以在 app 项目里面看到 button 了,666~
总结
webpack提供对模块联邦会使以后模块使用更加方便,快捷,一切工具都是为了方便开发,给 webpack 的贡献者点个赞!
手把手教你如何使用 webpack5 的模块联邦新特性的更多相关文章
- 17、手把手教你Extjs5(十七)模块的新增、修改、删除操作
上节在Grid展示时做了一个金额单位可以手工选择的功能,如果你要加入其他功能,也只要按照这个模式来操作就行了,比如说你想改变金额字段的颜色.小数位数.零值是否显示.货币符号.单位显示在标题栏或者跟在金 ...
- 13、手把手教你Extjs5(十三)模块字段和Grid列的定义[1]
这一节加入模块自定义字段,并根据这些字段生成model.然后再定义grid中的分组和列.从这一切开始真正进入到了模块自定义的节奏当中,代码的复杂度和技巧性也大大提高.先从模块字段的自定义开始.先看一下 ...
- 11、手把手教你Extjs5(十一)模块界面的总体设计
上一节中设计了一些模块自定义中用到的要素,为了直观起见,这一节先建立一个模块的主界面.看过我 模块管理常规功能自定义系统的设计与实现 博客的人应该会有所了解了.一个模块的主界面是一个Grid,在其上方 ...
- 手把手教你写LKM rookit! 之 第一个lkm程序及模块隐藏(一)
唉,一开始在纠结起个什么名字,感觉名字常常的很装逼,于是起了个这<手把手教你写LKM rookit> 我觉得: 你们觉得:...... 开始之前,我们先来理解一句话:一切的操作都是系统调用 ...
- 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- 手把手教你做JavaWeb项目:登录模块
现如今,无论是客户端还是移动端,无论是游戏登陆还是社交平台登陆,无处不在的“登陆”.那么你知道怎么制作吗?今天就为你娓娓道来: 用户登录 在各大信息管理系统中,登录功能是必不可少的,他的作用就是验证用 ...
- 手把手教Linux驱动2-之模块参数和符号导出
通过<手把手教Linux驱动1-模块化编程,玩转module>的学习,我们已经掌握了如何向内核加载一个模块,现在我们学习模块之间如何传递参数. 一.给模块传递参数 当我们加载一个模块到Li ...
- 30分钟手把手教你学webpack实战
30分钟手把手教你学webpack实战 阅读目录 一:什么是webpack? 他有什么优点? 二:如何安装和配置 三:理解webpack加载器 四:理解less-loader加载器的使用 五:理解ba ...
- 手把手教你用动软.NET代码生成器实例教程
动软实战攻略 手把手教你用动软 文档编号:20110421 版权所有 © 2004-2011 动软 在线帮助:http://help.maticsoft.com 目录 一. 产品介绍 ...
随机推荐
- 模版 动态 dp
模版 动态 dp 终于来写这个东西了.. LG 模版:给定 n 个点的数,点有点权, $ m $ 次修改点权,求修改完后这个树的最大独立集大小. 我们先来考虑朴素的最大独立集的 dp \[dp[u][ ...
- Codeforces 870F - Path(数论+分类讨论+正难则反)
Codeforces 题目传送门 & 洛谷题目传送门 首先考虑 \(d(u,v)\) 是个什么东西,分情况讨论: \(u\not\perp v\),\(d(u,v)=1\) \(u\perp ...
- LOJ #6044 -「雅礼集训 2017 Day8」共(矩阵树定理+手推行列式)
题面传送门 一道代码让你觉得它是道给初学者做的题,然鹅我竟没想到? 首先考虑做一步转化,我们考虑将整棵树按深度奇偶性转化为一张二分图,即将深度为奇数的点视作二分图的左部,深度为偶数的点视作二分图的右部 ...
- R语言与医学统计图形-【29】地图的绘制
R绘制地图原理: R使用一个个多边形(polygon)来表示每个区域,通过顺次连接GIS数据提供的每个区域多边形的坐标来逐点绘制这些多边形,所以理论上只要得到GIS数据就可绘制相应的地图. 地图绘制说 ...
- MAC下如何连接安卓(小米)手机进行互传文件?
命令行: brew cask install android-file-transfer AndroidFileTransfer, 在andorid设备和您的mac电脑之间浏览和传输文件: 不论通过什 ...
- 暂时lvs
负载均衡集群是 load balance 集群的简写,翻译成中文就是负载均衡集群.常用的负载均衡开源软件有nginx.lvs.haproxy,商业的硬件负载均衡设备F5.Netscale.这里主要是学 ...
- 重新整理 .net core 实践篇——— endpoint[四十七]
前言 简单整理一些endpoint的一些东西,主要是介绍一个这个endpoint是什么. 正文 endpoint 从表面意思是端点的意思,也就是说比如客户端的某一个action 是一个点,那么服务端的 ...
- JAVA中数组的基本概念与用法
JAVA中数组的基本概念与用法 1. 数组的定义与特点 数组的一种引用数据类型 数组中可以同时存放多个数据,但是数据的类型必须统一 数组的长度在开始时就需要确定,在程序运行期间是不可改变的 虽然可以使 ...
- Tomcat类加载机制和JAVA类加载机制的比较
图解Tomcat类加载机制 说到本篇的tomcat类加载机制,不得不说翻译学习tomcat的初衷. 之前实习的时候学习javaMelody的源码,但是它是一个Maven的项目,与我们自己的 ...
- 学会这几步,简单集成视频编辑原子能力SDK
华为视频编辑服务6.2.0版本上线后,我们为大家带来了两大变化:分别是丰富多样的AI能力和灵活选择的集成方式.为让开发者更快上手使用,今天小编带来了视频编辑原子能力SDK的具体集成方法.快来试试吧! ...