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 捆绑的整个想法)。
当然,您可以在应用程序之间创建某种形式的耦合。但如果你有一个成熟、稳定、所有部分共享的通用库,那么这是一个合理的决定。
希望,它有帮助(现在)!