如何使用 Webpack 创建与容器应用程序共享库的微前端捆绑包?

2024-02-15

我有一个任务。

拥有具有单 Spa 框架的微前端。

  1. 门户/主应用程序(通过 url 加载所有其他 js 代码)
  2. 微前端 1(基于 React)
  3. 微前端 2(基于 React)

所以我的问题只有一个:我不想重复供应商库,如react、react-dom(任何其他库)。我想让它们在其他微前端之间共享(与 webpack 捆绑在一起)

我知道拥有一些全局的东西是什么不好的做法(它违反了与 webpack 捆绑的整个想法)。但是如何解决供应商库重复的问题呢?

我发现一个解决方案只是使用 SystemJs 加载礼仪,例如 html 中的分隔标签,但我只是想知道也许还有另一种解决方案。

谢谢。

SystemJs 方法按需求加载依赖项,但从 CDN 加载依赖项,我只想做同样的事情,但使用 React 和其他东西从“共享”webpack 包加载所有依赖项。

window.SystemJS = window.System

function insertNewImportMap(newMapJSON) {
  const newScript = document.createElement('script')
  newScript.type = 'systemjs-importmap'
  newScript.text = JSON.stringify(newMapJSON)
  const allMaps = document.querySelectorAll('script[type="systemjs-importmap"]')

  allMaps[allMaps.length - 1].insertAdjacentElement(
    'afterEnd',
    newScript
  )
}

const devDependencies = {
  imports: {
    react: 'https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.development.js',
    'react-dom': 'https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.development.js',
    'react-dom/server': 'https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom-server.browser.development.js',
    'single-spa': 'https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/lib/umd/single-spa.min.js',
    lodash: 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js',
    rxjs: 'https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/bundles/rxjs.umd.js',
  }
}

const prodDependencies = {
  imports: {
    react: 'https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js',
    'react-dom': 'https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js',
    'react-dom/server': 'https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom-server.browser.production.min.js',
    'single-spa': 'https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/lib/umd/single-spa.min.js',
    lodash: 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js',
    rxjs: 'https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/bundles/rxjs.umd.min.js',
  }
}

const devMode = true // you will need to figure out a way to use a set of production dependencies instead
if (devMode) {
  insertNewImportMap(devDependencies)
} else {
  insertNewImportMap(prodDependencies)
}


Update:

刚刚意识到,你的问题是针对微 前端 https://micro-frontends.org/(不仅是微服务),因此一般来说并不是与 Webpack 共享库。将微前端添加到您的标签/标题中,并更新了答案以更加关注此主题。


所以我的问题只有一个:我不想重复供应商库,如react、react-dom(任何其他库)。我想让它们在其他[微前端](与 webpack 捆绑在一起)之间共享

您可以做的是通过添加一个从微前端的输出包中排除依赖项Webpack 外部组件 https://webpack.js.org/configuration/externals/属性到配置。

微前端的 webpack 配置:

module.exports = {
  ...
  externals = {
    react: 'React',
    'react-dom': 'ReactDOM'
  }
}

上面的配置将排除react and react-dom并期望它们出现在全局变量中React and ReactDOM。然后,您可以通过将库包含在脚本中来共享这些依赖项index.html你的根应用程序又名缝合层:

<html>
  ...
  <body>
    ...
    <script src="<your-host>/react.prod-16.9.0.min.js"></script>
    <script src="<your-host>/react-dom.prod-16.9.0.min.js"></script>
  </body>
</html>

如果您有其他通用组件要共享,您还可以将库脚本集成到元件库 https://martinfowler.com/articles/micro-frontends.html#SharedComponentLibraries.

包含为脚本的原因是:我们不希望我们的容器必须在构建时需要/导入微前端 https://martinfowler.com/articles/micro-frontends.html#Build-timeIntegration为了避免所有应用程序之间的构建/发布/版本管理的耦合。相反,微前端的目的之一是完全实现独立部署 https://martinfowler.com/articles/micro-frontends.html#IndependentDeployment各个部分,其中包括从构建、测试到发布的持续交付步骤。

我知道拥有一些全局的东西是什么不好的做法(它违反了与 webpack 捆绑的整个想法)。

当然,您可以在应用程序之间创建某种形式的耦合。但如果你有一个成熟、稳定、所有部分共享的通用库,那么这是一个合理的决定。

希望,它有帮助(现在)!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 Webpack 创建与容器应用程序共享库的微前端捆绑包? 的相关文章

随机推荐

  • Android Studio:如何将我的 .aar 库链接到多个项目?

    我有一个在多个项目中使用的库 每次更新 和重建 此库时 我不想将 aar 复制并粘贴到使用此库的每个项目中 实现这一目标最方便 最有效的方法是什么 注意 我在 Mac OSX 上运行 Android Studio 1 0 RC2 将您的 A
  • 从 Lock() 内调用 UI 线程上的方法

    我有两种方法 MethodA MethodB MethodB必须在 UI 线程上运行 我需要他们在不允许的情况下一个接一个地运行MethodC在他们之间奔跑 MethodC当用户单击一个可爱的小按钮时调用 我做了什么来确保这是一个Lock围
  • 像在 PHP 中那样获取 $_GET,但在 Visual Basic 中?

    我有一个名为 WebBrowser1 的网络浏览器 我希望能够像在 PHP 中那样检测 GET 并将其放在 Textlabel 中 就像网址是 www example com page php myget true Visual Basic
  • 将 NOT_NULL 约束添加到 SQL 列

    我正在尝试使用以下命令将 NOT NULL 约束添加到 SQL h2 数据库中的列 ALTER TABLE CHARACTERS ADD CONSTRAINT nn PID NOT NULL PLAYER ID 这遵循我发现的模式here
  • 寻找有关如何使用 PHP 构建私人消息系统的教程 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 正在寻找有关如何使用 PHP 构建安全的私人消息传递系统的教程 非常感谢 到目前为止我一直在关注这个http www astahost c
  • Laravel 5.2 迁移:无法添加 char 数据类型的外键

    我正在尝试创建一个char 数据类型的可为空外键 当我运行迁移命令时 我收到以下错误 我不确定我哪里做错了 Illuminate Database QueryException SQLSTATE HY000 一般错误 1215 无法添加外键
  • 显示 ContextMenuStrip 但不在任务栏中显示

    我发现 当我执行 contextmenustrip 右键单击菜单 的 show 方法时 如果该位置超出其所属表单的位置 它也会显示在任务栏上 我正在尝试为单击通知图标时创建一个右键单击菜单 但由于菜单悬停在系统托盘上方而不是在表单内 因为右
  • 在 wagtail 中批量上传和创建包含图像的页面(迁移)

    我正在使用 wagtail 创建一个网站来替换某人现有的 weebly 网站 重新创建数百个页面实例并上传每个页面的每个图像需要花费几个小时 我已经有了我需要的页面模型 并且我的网站看起来很像 wagtail 文档中的入门教程 我想知道如何
  • ASP.NET WebApi 与 MVC? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 使用 ASP NET MVC 控制器 您可以以不同的格式公开数据 AspNetWebAPI 是专门为创建 API 而设计的 但我可以使
  • 使用 simple-build-tool (sbt) 和 IntelliJ 调试 Scala 代码

    使用 IntelliJ 的内置调试器调试 sbt 管理的 Scala 代码的最简单方法是什么 文档来自来自 sbt 的 google 代码站点的 RunningSbt http code google com p simple build
  • Fluent NHibernate - 如何将外键列映射为属性

    我确信这是一个简单的问题 但请考虑以下问题 我对公司和部门之间的参考如下 public class Company public Guid ID get set public Sector Sector get set public Gui
  • 原声音频比较库

    我需要一个处理音频比较的软件或库 但不使用 mp3 内部的标签 它应该比较 2 个音频文件之间的相似性或置信度 或者如果我从音频文件中剪切一段 该软件应该指出它在哪里来自主音频文件的文件令牌 我希望我足够清楚 那么我怎么听说这项技术被称为音
  • 将 Jquery 手风琴扩展到表的行

    我有一张带有可折叠行的桌子 请检查here http jsfiddle net soumyazyx 8Xyjy 10 我只想使用 Jquery UI 手风琴 如图所示here http jqueryui com accordion 我正在尝
  • 在 ui-sref 中动态更改状态和参数

    使用 ui router 我想在 ng repeat 内动态设置 ui sref 指令 如下所示 a a Where steps是一个 状态对象 数组 每个对象都有自己的状态和参数对象 var steps state foo param i
  • 使用jquery设置输入html字符串的值

    我在字符串中有 HTML 片段 如下所示 var htmlString
  • NSSpeechSynthesizer 更改语言

    我正在编写一个基于 Cocoa Book 示例的简单程序 该程序使用 NSSpeechSynthesizer 来说出短语 我想知道如何更改用于合成阶段的语言 import PHAppDelegate h implementation PHA
  • 缺少 pdb 文件

    我正在 wince7 设备上调试我的应用程序 几分钟后 我收到一个错误 没有为任何调用堆栈帧加载任何符号 无法显示源代码 我注意到模块列表中有 1 个 dll 缺少 pdb 文件 它的名称是 System Drawing dll 我注意到在
  • 中止读取文件时 PHP 页面超时

    我有一个简单的 php 视图 如下所示 header Content Type image png readfile this gt image exit 在这个例子中 this gt image例如 data pictures thumb
  • 获取 Quicktime 视频信息

    有没有办法获取 QuickTime 视频信息 在谷歌搜索中 我发现 QT 的一个 cl 选项已损坏 我正在寻找 pasp 长度 音频通道 音频分配 拍手以及经常使用程序 Dumpster 找到的各种其他属性 使用 ffmpeg 无法获得大部
  • 如何使用 Webpack 创建与容器应用程序共享库的微前端捆绑包?

    我有一个任务 拥有具有单 Spa 框架的微前端 门户 主应用程序 通过 url 加载所有其他 js 代码 微前端 1 基于 React 微前端 2 基于 React 所以我的问题只有一个 我不想重复供应商库 如react react dom