使用 Module Federation Vite 的 Monorepo 和微前端

✨简介✨：

莫诺雷波

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中文网其他相关文章！