angularjs - 使用 webpack（或 webpack 模块联合）将 React MFE 与 Angular JS 项目（父项目）集成

Question

我们有一个在 Angular JS 上的父项目或宿主项目，我们正在创建一个新的 React 应用程序，并希望将 React 应用程序作为 MFE 与宿主项目集成。我们不想在宿主项目中进行大量更改，但想检查我们是否可以在 Angular JS 项目中使用 webpack/webpack 模块联合来进行 MFE 集成。

提前感谢您提供的任何示例或建议

标签： angularjswebpackwebpack-4micro-frontendwebpack-module-federation

Answer 1

Webpack 4 无法实现您想要做的事情（除非您使用 Single SPA JS 库来填充对 MFE 的支持）。您将需要 Angular 11 或更高版本（但我推荐版本 12，因为 Webpack 5 支持在该版本中是稳定的）。

一些例子和参考：

• https://javascript.plainenglish.io/create-micro-frontends-using-web-components-with-support-for-angular-and-react-2d6db18f557a
• https://webpack.js.org/concepts/module-federation/
• https://github.com/module-federation/module-federation-examples
• https://github.com/manfredsteyer/module-federation-plugin-example-nx
• https://www.angulararchitects.io/en/aktuelles/using-module-federation-with-monorepos-and-angular/
• https://www.angulararchitects.io/aktuelles/multi-framework-and-version-micro-frontends-with-module-federation-the-good-the-bad-the-ugly/