我有一个任务。

拥有带有单spa框架的微前端。

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

所以我的问题只有一个：我不想复制像 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/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 …

哪个是微前端开发的最佳方法/框架？

我有超过 5 个基于 angular、react 和 vue 的应用程序，并希望在单个 UI 上显示所有 5 个应用程序。我们有许多微前端框架，如单个 spa、piral、moisaic 项目、Podium 等等......现在市场上可用。需要一个清晰的图片来帮助我使用任何框架来实现它。

微服务#前端开发

（找朋友 ;-) ）

我正在与 Web（反应）和移动（IOS、Android）团队合作。我发现即使使用微服务架构，我们最终总是在前端/客户端级别做重复的工作。如何实施微前端架构，以减少前端工作的重复，但仍为本地客户端提供高质量的体验？

更多背景：

我阅读了 Cam Jackson 的microfrontends 文章并浏览了Michael Geers 的 microfrontends blog。我意识到我们更接近微服务模式：

比微前端之一：

这主要是由于康威定律。即使拥有拥有完整产品的专门团队，我们仍然有专门的团队仅用于 IOS 和 Android 原生工作。每一个新的离散功能，即使在 API/服务级别有明确的有界上下文，最终都会被分割成相同功能/组件的多个不同前端实现，主要是为了支持原生应用程序（这要求每个组件运行在本机应用程序必须是本机）。这让我想到了实施微前端。在理想情况下，不会有任何专门的本地应用程序团队，而 ios 和 android 开发人员将集成相应的产品团队（如上图所示）。但这不是一个选择。

鉴于我们的网络应用程序具有与移动应用程序相同的外观和感觉。创建单个 Web 组件作为微前端的一部分并在具有嵌入式 Web 视图的本机应用程序中使用它是否是个好主意？这会被视为微前端架构吗？这种方法有什么缺点？

这样，构建响应式 Web 组件的同一团队将负责端到端的功能。并且只留下核心用户旅程和本机特定功能（如 AR 和条形码扫描）作为本机组件运行。

我正在使用 webpack5 和 CLI11 开发模块联合原型，主要如下所述：https ://www.angulararchitects.io/aktuelles/the-microfrontend-revolution-part-2-module-federation-with-angular/ 。

基本上，我有一个主机应用程序，它从页面 b 加载共享模块。那么该共享模块应该在主机中使用。它设置了一个RouterModule.forChild()并通过 webpack 公开共享。到目前为止，这有效。

现在我添加了我们的一个组件，它在内部使用动画，但事情正在崩溃。使用 BrowserAnimationsModule 或任何与平台相关的模块（例如 BrowserModule 或 NoopAnimationsModule 本身）导入到我的共享模块中，主机应用程序将不再工作。每次我导航到路由器时，路由器都会将我的共享内容的新副本添加到另一个副本下面。我假设它每次加载模块时都会创建一个新平台，但我怎样才能防止这种情况发生呢？

我还尝试在应用程序和主机之间共享@angular/platform-b​​rowser/animations，但没有运气。

我知道 webpack 5 不是当前 CLI 的官方部分，但我想知道是否有人已经偶然发现了这一点。我认为这作为一个用例并不少见。

我已经设置了一个存储库来重现该问题：https://github.com/paad/module-federation

它已经是一个已知问题了吗？也许有人有建议？

我正在尝试使用 Module Federation 来使用 gatsby 的微前端应用程序。当我尝试调用在 localhost:3001 运行的组件时，出现 CORS 错误。知道如何解决这个问题吗？

这是我的gatsby-node.js

const packageJsonDeps = require('./package.json').dependencies;
const { ModuleFederationPlugin } = require("webpack").container;

exports.onCreateWebpackConfig = ({
                                     stage,
                                     rules,
                                     loaders,
                                     plugins,
                                     actions,
                                 }) => {
    actions.setWebpackConfig({
        plugins: [
            new ModuleFederationPlugin( {
                name: "app2",
                remotes: {
                    app1: "app1@http://localhost:3001/remoteEntry.js",
                },
                shared: {
                    ...packageJsonDeps,
                    react: { singleton: true, eager: true, requiredVersion: packageJsonDeps.react },
                    "react-dom": { singleton: true, eager: true, requiredVersion: packageJsonDeps["react-dom"] },
                    "styled-components": { singleton: true, eager: true, requiredVersion: packageJsonDeps["styled-components"] },
                    "gatsby":{singleton: true, eager: true, …

发生的情况是，我通过模块联合使用微前端，但即使使用 React.Lazy，捆绑包 (remoteEntry) 也会在应用程序启动时加载，而无需访问导入组件的路径。

要模拟该场景，您可以访问存储库并按照描述的步骤操作。单击此处访问。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const dependencies = require('./package.json').dependencies;
const ModuleFederationPlugin =
  require('webpack').container.ModuleFederationPlugin;
const path = require('path');
const dotenv = require('dotenv');

module.exports = (_, args) => {
  return {
    mode: args.mode,
    entry: './src/index.js',
    output: {
      filename:
        process.env.NODE_ENV === 'development'
          ? 'main.js'
          : 'main.[contenthash].js',
      publicPath: process.env.NODE_ENV === 'development' ? '/' : '/app/',
      path: path.resolve(__dirname, 'build')
    },
    devServer: {
      static: {
        directory: …

我们计划采用微前端，我们的项目是在 Asp.Net Core MVC 中，我们想要多个应用程序，每个应用程序由不同的团队拥有，他们可以在其中独立开发、测试、部署。我正在寻找的是，如果前端的每个组件都有自己的 URL，因为我们希望组件可以独立部署，那么单独的 URL 意味着它有自己的服务器和主机环境，那么我们如何管理跨多个组件的会话？如果有人可以指导微前端考虑：

1. 安全
2. 独立可部署组件
3. 在组件之间传递事件或共享数据
4. 按母版页编排组件

我正在尝试按照微前端文章创建一个小项目来实现微前端架构。我正在为每个 MFE（微前端）创建多个存储库，并为应用程序使用 Redux。我有以下架构：

1. Frame- 一个集中式（主）存储库，负责根据路由呈现主应用程序部分和 MFE（我正在使用connected-react-router）。它初始化 Redux 存储并添加一个injectReducer函数来动态添加减速器，如redux文档中的代码拆分中所述。该框架获取特定 MFE 的清单并呈现它。该框架还具有一些用于身份验证的 redux 数据。
2. MFEs - 这些是单独的功能应用程序，按帧呈现。

现在我有一个问题，我想在injectReducer我的 MFE 中使用函数来动态添加减速器来存储。为此，我需要访问store由框架创建的同一个实例。正如这个答案中提到的，理想的方法是导出创建的商店实例并使用它，但是我们如何在多个存储库中共享同一个商店实例？

我在微前端架构上有多个应用程序。我曾用于Lerna在单个存储库中管理多包存储库。这是我的应用程序的结构。

packages
 - main-app
 - feature-based-apps
    - feature-01-app
    - feature-02-app
    - feature-03-app
    - feature-04-app
    - feature-05-app
    ...
 - shared-components

用于和shared-components中。运行时在主应用程序中全部渲染。所有包的构建都是分开的，并且都需要部署在特定的位置。对于开发，所有应用程序都在本地设置、 和 中的特定端口上运行。我已经移动了所有内置的包feature-based-appsmain-appfeature-based-apps300130023003feature-based-appsmain-app移至构建文件夹中，并在本地设置中运行生产构建。我如何在实际生产部署中存档这个东西？

Netlify我们已经在、 、上部署了单个应用程序Vercel，Github pages但是我如何在单个存储库中部署多个应用程序。

我有一个要求，我想为 React 应用程序内的特定 URL 运行 Flutter 应用程序，而对于其余的 URL，React 应用程序将运行。

我将拥有 flutter build 文件夹，并且还将使用浏览器的通信通道来传递数据，但是有什么方法可以将 flutter 应用程序集成到此页面的 React 应用程序中？