标签: micro-frontend

我们计划采用微前端，我们的项目是在 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 应用程序中？

我们的平台建立在带有 Web 组件的微前端架构上。我们正在为其中一些使用 Stencil，这意味着我们在一个网页中有多个 Stencil 应用程序。此外，我们还有一个 UI 库，也是用 Stencil 构建的，我们希望在这些微前端组件中使用它。

我们希望使用 Stencil UI 库作为 Stencil 微前端组件的构建时依赖项。但由于标签名称冲突，目前这是不可能的：

理论上，两个微前端可以提供两个不同版本的 UI 库。但是，在运行时，它们会发生冲突，因为它们都试图用customElements.define. 当然，这不会发生，因为 Stencil 在注册新名称之前检查现有名称 - 但结果同样糟糕：第一个加载的组件总是获胜，如果它是旧版本或具有不同的 API，其他组件会打破。

一个解决方案是在构建或运行时命名空间/前缀标记名称，但网络标准中没有任何内容（尚未）。虽然namespaceStencil 中有一个配置选项，但这似乎并不能解决此类问题。

使用纯 ES6，我们至少可以执行以下操作（即使用动态标签名称注册自定义元素）：

export class InnerComponent extends HTMLElement
{
    static register(prefix) {
        customElements.define(`my-${prefix}-inner-component`, InnerComponent)
    }

    constructor() {
        super()
        this.shadow = this.attachShadow({ mode: "open" })
    }

    connectedCallback() {
        this.shadow.innerHTML = `<span>this is some UI component</span>`
    }
}

而且我确信我们可以在 Webpack 等中使用某种构建时解决方案来实现相同的目标。

但是 Stencil 是否有类似的可能？或者还有什么办法可以解决这个问题？

使用 Webpack 5 模块联合，如果远程入口被修改，你不需要重新部署主模块/应用程序，当浏览器请求时，将加载最新版本的模块。

我想知道：由于远程 URL 保持不变（例如http://localhost:8081/remoteEntry.js），浏览器可能会缓存文件和每次加载主模块时加载的缓存版本。另一方面，如果您为远程条目添加缓存破坏，您将没有缓存。

假设有一个使用 Webpack 5 Module federation 的具有微前端架构的应用程序。有一个远程微前端，其配置如下：

output: {
  publicPath: "http://localhost:8081/",
},
plugins: [
  new ModuleFederationPlugin({
    name: "app1",
    filename: "remoteEntry.js",
    exposes: {
      "./Component1": "./src/Component1",
      "./someModule1": "./src/someModule1",
    },
  })
]

然后主模块配置：

output: {
  publicPath: "http://localhost:8080/",
},
plugins: [
  new ModuleFederationPlugin({
    name: "mainApp",
    filename: "remoteEntry.js",
    remotes: {
      app1: "app1@http://localhost:8081/remoteEntry.js"
    }
  })
]

这两个模块都部署在生产环境中。

然后我改变Component1从app1和部署app1模块。

如何处理远程模块缓存？

更新：

在我的情况下，浏览器似乎使用启发式缓存（https://tools.ietf.org/html/rfc7234#section-4.2.2），remoteEntry.js因为服务器不提供明确的到期时间。

因此，当remoteEntry.js更新时，主应用程序仍会从缓存中加载该文件，该文件可以缓存数周。对于块，这不是问题，因为 webpack 可以配置为在文件名中包含哈希。

因为remoteEntry.js …

我正在尝试使用 webpack 模块联合将大型单体 React 应用程序拆分为微前端。我已经部署了远程模块，并且在本地运行开发服务器时运行良好，一切正常。但是在运行 yarn build 并部署消费者应用程序后，它失败并显示以下错误：

Uncaught (in promise) ChunkLoadError: Loading chunk 935 failed.

注释掉延迟加载的远程模块时，一切正常。

任何人都知道如何使用远程加载的模块让 webpack 正确构建？

这是我的消费者组件：

import WorkOrderTrackingErrorBoundary from './work_order_tracking_error_boundary'
const WorkOrderTracking = lazy(() => import('dMove/WorkOrderTracking'))

const WorkOrderTrackingPage = (props) => {
    const spinner = (
        <SpinnerContainer>
            <Spinner type="bars" color="#3e145e" width="48px"/>
        </SpinnerContainer>
    )


    return (
        <Suspense fallback={spinner}>
            <WorkOrderTrackingErrorBoundary>
                <WorkOrderTracking/>
            </WorkOrderTrackingErrorBoundary>
        </Suspense>
    );
};

export default WorkOrderTrackingPage;

这是我的 webpack.prod.config.js 文件：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const StringReplacePlugin = require('string-replace-webpack-plugin');
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin") …

我有一个使用 vue 3 的微前端项目。我已经完成了 yarn install 和 yarn serve:standalone。但我有这样的错误

这是我的 vue.config.js

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    devServer: {
      headers: {
        "Access-Control-Allow-Origin": "*",
      },
      disableHostCheck: true,
      sockPort: 9003,
      sockHost: "localhost",
      https: true,
      port: 9003,
    },
    externals: ["vue-router"],
  },
  filenameHashing: false,
};

关于与Webpack捆绑后注入环境变量的问题已经被提出并回答。