我来教你如何使用 Vite 的 React 微前端_React

什么是微前端？

微前端是web应用程序的一种架构方法，程序的前端代码被划分为更小的、独立开发的和可部署的单元，称为微前端。

这种方法允许不同的团队在前端的不同部分工作，同时通过隔离层保持集成，提高了开发速度、可扩展性和灵活性。这是一种管理复杂性和促进前端开发自主性的方法。

模块联合

模块联合是一项关键技术，使JavaScript应用程序能够在共享依赖项的同时从另一个应用程序动态加载代码。

当使用联合模块的应用程序缺少所需的依赖项时，Webpack（底层技术）会自动从联合构建源获取缺少的依赖项。从而允许跨多个微前端高效共享和使用公共库。

为什么选择Vite？

虽然模块联合最初是在Webpack中引入的，但JavaScript开发的格局也由此发生了改变。Vite通过提供闪电般的构建时间而成为游戏规则的改变者。Vite和模块联合的结合使用可以快速有效地开发微前端，发挥巨大作用。

使用Vite + React创建微前端

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

主机应用程序：用户与之交互的主要应用程序。充当微前端的容器。
远程应用程序：即微前端本身，充当主机应用程序的构建块。

在了解了我们将要使用的技术之后，让我们实际实现试试。

设置主机应用

要使用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

设置远程应用

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

npm create vite@latest todo-components -- --template react

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

npm install

在远程应用中创建组件

在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;

// 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;

组件准备就绪后，对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;

预览远程应用

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

npm run dev

此时输出如下：

添加模块联合到远程应用

现在，让我们将模块联合添加到todo-components应用。首先，安装必要的依赖项：

npm install @originjs/vite-plugin-federation --save-dev

接着，在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,
  },
});

在此配置中：

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

现在，构建远程应用：

npm run build

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

为远程应用提供服务

在本地为远程应用提供服务：

npm run preview

这意味着在端口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,
  },
});

在此配置中：

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;

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