使

使用 Vite 的 React 微前端

2025-05-25

使用 Vite 的 React 微前端

本文的源代码可在GitHub上找到。

在本文中

介绍

微前端：使用 Vite 和模块联合增强 Web 开发

在本文中，我们将探讨微前端的概念——一种强大的 Web 应用架构方法。微前端允许您将前端代码划分为更小、独立开发且可部署的单元。这些单元被称为微前端，它们提供诸多优势，包括提升开发速度、可扩展性和灵活性。微前端允许不同的团队处理前端的不同部分，同时通过隔离层保持集成，从而有助于管理复杂性并提高前端开发的自主性。

什么是微前端？

微前端是一种 Web 应用的架构方法，将前端代码划分为更小、独立开发且可部署的单元，称为微前端。这种方法允许不同的团队分别处理前端的不同部分，同时通过隔离层保持集成，从而提高开发速度、可扩展性和灵活性。这是一种管理复杂性并促进前端开发自主性的方法。

模块联合

模块联合是一项关键技术，它使 JavaScript 应用能够从其他应用动态加载代码，同时共享依赖项。当使用联合模块的应用缺少所需的依赖项时，Webpack（底层技术）会自动从联合构建源中获取缺少的依赖项。这使得跨多个微前端高效共享和使用通用库成为可能。

为什么选择 Vite？

虽然模块联邦最初是在 Webpack 中引入的，但 JavaScript 开发的格局已经发生了变化。Vite 凭借其闪电般的构建速度，彻底改变了游戏规则。将 Vite 与模块联邦相结合，可以释放出巨大的潜力，快速高效地开发微前端。

使用 Vite + React 创建微前端

创建微前端通常涉及两个主要部分：

  1. 主机应用：这是用户交互的主要应用，它充当微前端的容器。

  2. 远程应用程序：这些是微前端本身，充当主机应用程序的构建块。

现在我们已经了解了将要使用的技术，让我们深入研究实际的实施。

设置主机应用程序

要使用 Vite 和 React 创建主机应用程序，请运行以下命令：



# Using npm 6.x
npm create vite@latest host-app --template react

# Using npm 7+, add an extra double-dash:
npm create vite@latest host-app -- --template react
Enter fullscreen mode Exit fullscreen mode

设置远程应用程序

对于远程应用程序，执行以下命令：



npm create vite@latest todo-components -- --template react
Enter fullscreen mode Exit fullscreen mode

这将创建两个文件夹，host-app和todo-components。接下来，安装两个应用程序的依赖项：



npm install
Enter fullscreen mode Exit fullscreen mode

在远程应用程序中创建组件

在todo-components应用程序中，创建以下组件：



// components/List.jsx
import React from "react";

const List = (props) => {
  const { items } = props;
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

export default List;
Enter fullscreen mode Exit fullscreen mode 


// components/Input.jsx
import React from "react";

const Input = (props) => {
  const { value, onChange, onSubmit } = props;
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        onSubmit(e);
      }}
    >
      <div className="flex-row">
        <input
          type="text"
          value={value}
          onChange={(e) => onChange(e.target.value)}
        />
        <button type="submit">Add</button>
      </div>
    </form>
  );
};

export default Input;
Enter fullscreen mode Exit fullscreen mode

现在组件已准备好，请对App.jsx文件进行以下更改：



// App.jsx
import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import Input from "./components/Input";
import List from "./components/List";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <Input value={count} onChange={setCount} onSubmit={console.log} />
      <List items={["Learn React", "Learn Vite", "Make an awesome app"]} />
    </>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

预览远程应用程序

要预览组件，请在todo-components应用程序中运行以下命令：



npm run dev
Enter fullscreen mode Exit fullscreen mode

您应该看到以下输出。

远程应用程序预览

将模块联合添加到远程应用程序

现在，让我们将 Module Federation 添加到todo-components应用中。首先，安装必要的依赖项：



npm install @originjs/vite-plugin-federation --save-dev
Enter fullscreen mode Exit fullscreen mode

接下来，在文件中配置模块联合vite.config.js：



// vite.config.js in todo-components
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "todo-components",
      filename: "remoteEntry.js",
      exposes: {
        "./List": "./src/components/List.jsx",
        "./Input": "./src/components/Input.jsx",
      },
      shared: ["react"],
    }),
  ],
  build: {
    modulePreload: false,
    target: "esnext",
    minify: false,
    cssCodeSplit: false,
  },
});
Enter fullscreen mode Exit fullscreen mode

在此配置中：

  • name：指定远程应用程序的名称。
  • filename：设置模块联合生成的文件的名称。
  • exposes：列出要从远程应用程序公开的组件。
  • shared：声明共享依赖项，例如 React，以优化捆绑包大小。

现在，构建远程应用程序：



npm run build
Enter fullscreen mode Exit fullscreen mode

这会dist在todo-components应用程序中生成一个包含remoteEntry.js文件的文件夹。

服务远程应用程序

在本地提供远程应用程序：



npm run preview
Enter fullscreen mode Exit fullscreen mode

这将为端口 4173 上的远程应用程序提供服务。

将模块联合添加到主机应用程序

要在主机应用程序中使用远程应用程序组件，请在vite.config.js主机应用程序的文件中设置模块联合：



// vite.config.js in host-app
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "host-app",
      remotes: {
        todo_components: "http://localhost:4173/assets/remoteEntry.js",
      },
      shared: ["react"],
    }),
  ],
  build: {
    modulePreload: false,
    target: "esnext",

    minify: false,
    cssCodeSplit: false,
  },
});
Enter fullscreen mode Exit fullscreen mode

在此配置中：

  • name：指定主机应用程序的名称。
  • remotes：列出主机应用要使用的远程应用。在本例中，我们有一个远程应用“todo_components”，并提供了其remoteEntry.js文件的 URL。
  • shared：声明共享依赖项，例如 React，以优化捆绑包大小。

在宿主应用中使用远程组件

现在，您可以在主机应用程序中导入和使用远程应用程序组件App.jsx：



// App.jsx in host-app
import { useState } from "react";
import List from "todo_components/List";
import Input from "todo_components/Input";

function App() {
  const [newTodo, setNewTodo] = useState("");
  const [todos, setTodos] = useState([]);
  const onSubmit = () => {
    setTodos((prev) => [...prev, newTodo]);
    setNewTodo("");
  };

  return (
    <>
      <Input value={newTodo} onChange={setNewTodo} onSubmit={onSubmit} />
      <List items={todos} />
    </>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

在这里，我们使用指定的远程名称“todo_components”从远程应用程序导入组件。

服务主机应用程序

要在本地提供主机应用程序，请运行：



npm run dev
Enter fullscreen mode Exit fullscreen mode

现在，您应该看到远程应用程序中的组件正在主机应用程序中无缝使用。

结论

在本文中，我们探讨了微前端的概念，并演示了如何使用 Vite 和 React 创建微前端架构，并通过 Module Federation 进行增强。利用 Vite 的快速构建能力和 Module Federation 的动态代码加载功能，您可以高效地以模块化和可维护的方式开发和扩展 Web 应用程序。这种方法使多个团队能够独立地处理应用程序的不同部分，从而提高前端开发的灵活性和敏捷性。

为了进一步探索并将这些概念应用到您自己的项目中，您可以随意调整和扩展这里提供的示例。如果使用得当，微前端可以显著简化您的 Web 开发工作流程。

文章来源：https://dev.to/abhi0498/react-micro-frontends-using-vite-30ah
Devto 翻译
PREV
使用 YOLO 构建实时对象检测应用程序
NEXT
通过披萨理解领域驱动设计