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

2024年 3月 6日 40.7k 0

什么是微前端?

微前端是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 (
        
      {items.map((item, index) => (
    • {item}
    • ))}
    ); }; export default List;
    // components/Input.jsx
    import React from "react";
    
    const Input = (props) => {
      const { value, onChange, onSubmit } = props;
      return (
         {
            e.preventDefault();
            onSubmit(e);
          }}
        >
          
             onChange(e.target.value)}
            />
            Add
          
        
      );
    };
    
    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 (
        
          
          
        
      );
    }
    
    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 (
        
          
          
        
      );
    }
    
    export default App;

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

    为主机应用提供服务

    若要在本地为主机应用提供服务,运行:

    npm run dev

    现在,远程应用程序中的组件就可以在主机应用程序中无缝使用了,赞。

    结论

    在本文中,我们探讨了微前端的概念,演示了如何使用Vite和React创建微前端架构,以及如何通过模块联合进行增强。

    通过利用Vite的快速构建和模块联合的动态代码加载功能,我们可以以模块化和可维护的方式高效地开发和扩展web应用程序。这种方法使多个团队能够独立处理应用程序的不同部分,从而提高前端开发的灵活性和敏捷性。

    相关文章

    JavaScript2024新功能:Object.groupBy、正则表达式v标志
    PHP trim 函数对多字节字符的使用和限制
    新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
    使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
    为React 19做准备:WordPress 6.6用户指南
    如何删除WordPress中的所有评论

    发布评论