iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >Umi使用webpack5 Module Federation
  • 366
分享到

Umi使用webpack5 Module Federation

Umi 2023-09-21 14:09:59 366人浏览 薄情痞子
摘要

Umi 可以使用 webpack5 的 Module Federation 插件来实现模块联邦。首先,你需要确保你的 Umi 版本大

Umi 可以使用 webpack5 的 Module Federation 插件来实现模块联邦。
首先,你需要确保你的 Umi 版本大于或等于 3.4.0。
然后,你需要在你的 Umi 项目中安装 WEBpack5 和 @umijs/plugin-mf 插件:
```bash
npm install webpack@latest @umijs/plugin-mf@latest
```
接下来,在你的 Umi 配置文件(.umirc.ts 或 config/config.ts)中添加插件配置:
```javascript
export default {
plugins: [
['@umijs/plugin-mf'],
],
}
```
在你的入口文件中,你可以使用 `__webpack_init_sharing__` 和 `__webpack_share_scopes__` 全局变量来配置模块联邦:
```javascript
import { loadMicroApp } from 'qiankun';
// 定义共享范围
const shareScope = 'umi';
// 初始化模块联邦
if (window.__POWERED_BY_QIANKUN__) {
__webpack_init_sharing__('umi')
.then(() => import( 'umi'))
.then((umi) => {
// 注册共享模块
umi.reGISterMicroApps([
{
name: 'app1',
entry: '//localhost:8001',
container: '#container',
activeRule: '/app1',
},
]);
// 启动应用
umi.start();
});
} else {
// 启动普通应用
loadMicroApp({
name: 'app1',
entry: '//localhost:8001',
container: '#container',
activeRule: '/app1',
props: {},
});
}
```
这样,你就可以在 Umi 中使用 webpack5 的 Module Federation 插件来实现模块联邦了。

--结束END--

本文标题: Umi使用webpack5 Module Federation

本文链接: https://www.lsjlt.com/news/414098.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Umi使用webpack5 Module Federation
    Umi 可以使用 webpack5 的 Module Federation 插件来实现模块联邦。首先,你需要确保你的 Umi 版本大...
    99+
    2023-09-21
    Umi
  • JavaScript webpack5如何配置及使用
    这篇文章主要讲解了“JavaScript webpack5如何配置及使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript&nbs...
    99+
    2024-04-02
  • webpack5的功能怎么使用
    这篇文章主要介绍了webpack5的功能怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇webpack5的功能怎么使用文章都会有所收获,下面我们一起来看看吧。功能清除清理已弃用的功能所有在 webpack...
    99+
    2023-06-27
  • 怎么使用React+umi+typeScript创建项目
    本篇内容主要讲解“怎么使用React+umi+typeScript创建项目”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么使用React+umi+typeScript创建项目”吧!项目框架搭建...
    99+
    2023-07-05
  • CSS Module如何使用
    本文小编为大家详细介绍“CSS Module如何使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“CSS Module如何使用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。CSS Modules 用法示例库首先...
    99+
    2023-07-05
  • 如何使用go module
    这篇文章给大家分享的是有关如何使用go module的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。go module 使用go module 在 go 1.14 版本之后被推出一、go module 使用介绍go...
    99+
    2023-06-26
  • ES6中怎么使用module
    这篇文章主要介绍“ES6中怎么使用module”,在日常操作中,相信很多人在ES6中怎么使用module问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”ES6中怎么使用modu...
    99+
    2024-04-02
  • Flex中 module如何使用
    这篇文章将为大家详细讲解有关Flex中 module如何使用,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。Flex module的使用用Flex来开发应用难免不了要使用到Module,Fle...
    99+
    2023-06-17
  • module怎么在python中使用
    今天就跟大家聊聊有关module怎么在python中使用,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。Python的优点有哪些1、简单易用,与C/C++、Java、C# 等传统语言相...
    99+
    2023-06-14
  • CommonJS与ES6 Module怎么使用
    本篇内容介绍了“CommonJS与ES6 Module怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!前言学了JS并且用过N...
    99+
    2023-06-30
  • rust的package,crate,module怎么使用
    这篇文章主要介绍“rust的package,crate,module怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“rust的package,crate,module怎么使用”文章能帮助大家解...
    99+
    2023-07-06
  • Python 中OS module的使用详解
    Python的os模块是用于与操作系统进行交互的标准库之一,它提供了许多有用的函数和变量,以便处理文件和目录。下面是一些常见的os模块函数的用法: 1.获取当前工作目录: impor...
    99+
    2023-03-15
    Python OS module使用 Python OS模块
  • Python中的OS module如何使用
    这篇“Python中的OS module如何使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Python中的OS...
    99+
    2023-07-05
  • 独立使用umi的核心插件模块示例详解
    目录引言实践结语引言 今天我们做一个有趣的尝试,将 umi 的核心插件模块独立出来作为另一个框架的基础架构,这里我们将它称为 konos。 介于 umi 自身的源码的独立拆分,要实...
    99+
    2023-01-12
    umi 核心插件模块 umi 插件
  • GoLang中Module的基本使用方法
    目录前言1、开启go module2、用goland打开项目(1)设置镜像地址(2)导入Gin包检查go module是否使用正常(3)使用Gin(4)执行、发送请求3、go mod...
    99+
    2023-01-09
    go module实现原理 go module使用
  • go module是如何使用本地包的
    小编给大家分享一下go module是如何使用本地包的,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!go module的使用非常简单初始化go.modgo&nbs...
    99+
    2023-06-21
  • idea中的project、module、artifact的具体使用
    目录一、Project【工程】二、Modules【模块,一个poject可包含多个】三、Libraries四、Facets【设置 Tomcat读取的web.xml配置文件 和 Web...
    99+
    2024-04-02
  • CommonJS与ES6 Module的使用区别分析
    目录前言1. CommonJS1.1 导出1.2 导入2. ES6 Module2.1 导出2.2 导入3. CommonJS 与 ES6 Module 的区别3.1 区别一3.2 ...
    99+
    2024-04-02
  • 如何在golang中使用module依赖包
    今天就跟大家聊聊有关如何在golang中使用module依赖包,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。module介绍go module是go新的依赖包管理系统,go modu...
    99+
    2023-06-14
  • Visual Studio 2022 Preview 使用 C++20 Module的详细过程
            作为C++20的一大特性,据说Module能够大大加快项目的编译速度,最近正好看到微软推出了Vi...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作