如何与Webpack一起创建一个与容器应用程序共享库的微前端包？
我有个任务。
有一个单一水疗框架的微前沿。
- 门户/主应用程序(它通过url加载所有其他js代码)
- 微前端1(基于反应)
- 微前端2(基于反应)
所以我的问题只有一个:我不想复制供应商库，比如react，react(任何其他的)。我想让其他微前沿(和webpack捆绑在一起)分享它们。
我知道什么是不好的做法，有一些全球性的东西(这违反了整个想法与webpack捆绑)。但是如何解决供应商库的复制问题呢？
我找到了一种解决方案，就是用SystemJ加载体面，就像html中的分隔标记一样，但我只是在想，也许还有另一种解决方案。
谢谢。
SystemJ按需求加载依赖关系的方法，但从CDN，我只想做同样的，但加载所有依赖的“共享”webpack包与react等。
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/single-spa@4.3.2/lib/umd/single-spa.min.js',
lodash: 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js',
rxjs: 'https://unpkg.com/rxjs@6.4.0/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/single-spa@4.3.2/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/rxjs@6.4.0/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)
}回答 2
Stack Overflow用户
发布于 2019-08-06 11:32:47
更新：
刚刚意识到，你的问题是针对微 前沿的(不仅仅是微观服务)，因此不是一般与Webpack共享图书馆的问题。在标签/标题中添加了微前端，并更新了答案，以便更多地关注这个主题。
所以我的问题只有一个:我不想复制供应商库，比如react，react(任何其他的)。我想让其他微锋共享它们
您可以做的是通过向配置中添加一个Webpack外部性属性，从而将依赖项排除在Micro的输出包中。
您的微前沿的webpack配置：
module.exports = {
...
externals = {
react: 'React',
'react-dom': 'ReactDOM'
}
}上面的配置将排除react和react-dom，并期望它们位于全局变量React和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>如果要共享其他公共组件，还可以在构件库中集成库脚本。
include的原因是:我们不希望容器必须使用在构建时要求/导入微边界来避免所有应用程序之间的构建/发布/版本管理的耦合。“微前沿”的目的之一是实现零件的全面独立部署，包括从构建、测试到发布的连续交付步骤。
我知道什么是不好的做法，有一些全球性的东西(这违反了整个想法与webpack捆绑)。
当然，您可以在应用程序之间创建某种形式的耦合。但是，如果您拥有一个由所有部分共享的成熟、稳定和通用的库，则这是一个合理的决定。
希望，它(现在)有帮助！
Stack Overflow用户
发布于 2020-11-21 18:20:20
今天实现这一目标的最好方法是使用Webpack在v5中发布的新模块联邦技术。这种方法不使用SystemJS，而是使用Webpack的内部结构。我们尝试了几种不同的微前端方法，但这一种方法比它们都出色&目前正在生产中成功地为我们运行。设置它肯定会遇到一些挑战，但这是值得开发人员提高生产力的。
这是创建者Zack Jackson创建的信息站点，它应该提供您所需的所有资源：https://module-federation.github.io/
下面是webpack文档的链接，它更多地处理技术问题，而不是如何实际地建立一个完整的微前端体系结构：https://webpack.js.org/concepts/module-federation/
https://stackoverflow.com/questions/57370433
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号