使用 Module Federation Vite 的 Monorepo 和微前端-js教程-PHP中文网

Monorepo and Micro-Frontends Using Module Federation Vite

✨简介✨：

莫诺雷波

monorepo 是管理多个相关但独立项目的单个存储库。与单独的存储库相比，它通过实现代码重用、简化依赖关系并促进更好的团队协作来简化开发。

微前端

前端的 Web 应用程序架构，可将其分解为更小的、可单独部署的独立单元。微前端可以独立于其他代码库创建和部署，这意味着它们具有更好的灵活性和可扩展性。

模块联盟和Vite

模块联合：这是 Webpack 中非常强大的功能，可以从远程位置动态加载代码。

Vite：这是一种更现代的前端构建工具，它允许快速开发服务器启动和即时热模块替换，对现代 JavaScript 功能有很好的支持，并通过插件系统扩展其功能.

这些工具可以解决的问题：

扩展团队
管理依赖关系
提高开发速度

通过结合这些模式和工具，我们可以构建可扩展、可维护且高性能的前端应用程序，以满足现代 Web 开发的需求。

结合 Monorepos、微前端、模块联盟和 Vite ??：

影响

通过结合这些技术，您可以创建一个强大而灵活的架构，用于构建大规模、复杂的 Web 应用程序。以下是主要影响的细分：

增强的可扩展性：在单一存储库中独立部署和更新微前端。
改善开发者体验：使用 Vite 和简化的工作流程加快开发速度。
优化性能： 使用模块联合按需加载代码可减少初始加载时间。
更好的可维护性：模块化微前端改进代码组织并减少耦合。

??这个理论已经够多了，让我们看看一些行动吧！ ??

怎么做？

1：设置 Monorepo

选择单一存储库管理工具，例如 Lerna 或 Nx。（让我们为这个演示项目选择Nx）

让我们创建一个文件夹并在其中初始化 Nx 工作区。

mkdir my-monorepo
cd my-monorepo

登录后复制

2：安装Nx CLI：

全局安装 Nx CLI 到您的系统中

npm add --global nx@latest

登录后复制

初始化Nx工作区

npx create-nx-workspace@latest

登录后复制

使用 Nx CLI 在您的工作区中生成新的应用程序和库

nx g @nx/next:application host-app
.
.
.
nx g @nx/react:application my-remote-app
.
.
.
nx g @nx/react:library my-utils

登录后复制

3：配置Vite并实现模块联盟：

在每个微前端的 vite.config.js 中安装 @originjs/vite-plugin-federation 插件。

npm i @originjs/vite-plugin-federation -D

登录后复制

创建一个 vite.config.js （如果不是由 Nx 创建的）并配置它。
实现模块联合包。

主机-应用程序Vite配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
     react(),
     federation({
      name: 'host-app',
      remoteApp: {},  // add Urls of your remote apps here
     shared: {
        react: {
          singleton: true,
          requiredVersion: '18.2.0',
        },
        'react-dom': {
          singleton: true,
          requiredVersion: '18.2.0',
        },
      },
    }),
  ],
});

登录后复制

远程应用程序 Vite 配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
     react(),
     name: 'my-remote-app', // unique app name for your remote module
     filename: 'remoteEntry.js',
     exposes: {}, // add the path of any components you want to expose to the host app
     shared: {
       react: {
         singleton: true,
         requiredVersion: '18.2.0',
       },
       'react-dom': {
         singleton: true,
         requiredVersion: '18.2.0',
       },
     },
    }),
  ],
});

登录后复制

您的项目结构应如下所示

my-monorepo/
├── apps/
│   ├── host-app/
│   │   ├── package.json
│   │   ├── vite.config.js
│   │   ├── src/
│   │   └── ...
│   ├── my-utils/
│   │   ├── package.json
│   │   ├── src/
│   │   └── ...
│   └── my-remote-app/
│       ├── package.json
│       ├── vite.config.js
│       ├── src/
│       └── ...
└── nx.json

登录后复制

？恭喜，您的应用程序现已配置完毕。？
现在，继续创建一个组件并将其公开给主机应用程序。

如何向主机添加远程组件？

假设您已将组件公开为“AppComponent”，并且您的远程名称为“remoteApp”

const RemoteComponent = React.lazy(() => import('remoteApp/AppComponent'));

<Suspense fallback={<>Loading....</>}>
  <RemoteComponent />
</Suspense>

登录后复制

*注意：* 确保将远程 URL 添加到主机的 vite.config.js 文件中。

现实世界场景??：

大型电商平台：同一个团队可以独立处理产品页面、结帐流程和用户帐户。
企业应用：功能可以由共享平台内的不同部门管理。
不同的团队可以创建和维护单独的小部件或仪表板。

？在这里查看我的演示项目代码??：Monorepo 项目

结论

Monorepos、微前端、模块联盟和 Vite，利用上述所有技术的优势，可以帮助组织构建可扩展、可维护和高性能的 Web 应用程序，满足现代开发和业务需求。

其他资源：

Nx 文档
Vite文档
Webpack 模块联盟
微前端架构

如果您在为您的项目实施此设置时有疑问或需要帮助，请随时与我们联系。让我们构建一些令人惊奇的东西！？

以上是使用 Module Federation Vite 的 Monorepo 和微前端的详细内容。更多信息请关注PHP中文网其他相关文章！