在 Webpack 5 中使用 React 微前端调用 Vue 组件：终极指南

2024-03-01 23:33:42

在 Webpack 5 中使用 React 微前端调用 Vue 组件：终极指南

引言

在现代 Web 开发中，微前端架构正受到广泛欢迎。它使开发人员能够创建模块化的应用程序，其中每个模块称为微前端，它们可以独立地开发、部署和维护。这篇文章将深入探讨如何使用 Webpack 5 在 React 微前端中调用 Vue 组件，让你轻松实现跨技术栈集成。

问题陈述：连接两个世界

想象一下这样的场景：我们有两个微前端项目，一个使用 React（称为 Micro-Shell-App），一个使用 Vue（称为 SectionPart）。目标是将 SectionPart 中名为 MyComponent 的 Vue 组件嵌入到 Micro-Shell-App 中。

解决方案：分步指南

实现这一目标需要以下步骤：

安装依赖项： 确保在两个微前端项目中都安装了必要的依赖项。
创建 Vue 组件： 在 SectionPart 微前端中，创建一个 MyComponent.vue 文件。
配置 Vue 微前端的 Webpack： 在 SectionPart 微前端的 webpack.config.js 文件中添加配置，包括公共路径、模块联邦插件和 Vue 加载器。
配置 React 微前端的 Webpack： 在 Micro-Shell-App 微前端的 webpack.config.js 文件中添加类似的配置，以及对 SectionPart 微前端的远程访问。
在 React 微前端中使用 Vue 组件： 在 Micro-Shell-App 微前端的 App.jsx 文件中，导入 Vue 组件并将其渲染到应用程序中。
运行微前端： 使用 webpack-dev-server 启动两个微前端项目。
验证： 访问 Micro-Shell-App 应用程序，你应该可以看到嵌入的 Vue 组件。

代码示例：

SectionPart 微前端的 webpack.config.js：

module.exports = {
  output: {
    publicPath: "http://localhost:3003/",
  },

  resolve: {
    extensions: [".tsx", ".ts", ".vue", ".jsx", ".js", ".json"],
  },

  devServer: {
    port: 3003,
    historyApiFallback: true,
  },

  plugins: [
    new ModuleFederationPlugin({
      name: "SectionPart",
      remotes: {
        // 将 SectionPart 微前端暴露给 Shell 应用程序
      },
      exposes: {
        "./MyComponent": "./src/components/MyComponent.vue",
      },
      shared: require("./package.json").dependencies,
    }),
  ],
};

Micro-Shell-App 微前端的 webpack.config.js：

module.exports = {
  output: {
    publicPath: "http://localhost:3000/",
  },

  resolve: {
    extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
  },

  devServer: {
    port: 3000,
    historyApiFallback: true,
  },

  plugins: [
    new ModuleFederationPlugin({
      name: "Micro_Shell_App",
      remotes: {
        section: "SectionPart@http://localhost:3003/remoteEntry.js",
      },
      exposes: {},
      shared: {
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),
  ],
};

Micro-Shell-App 微前端的 App.jsx：

import React from "react";
import ReactDOM from "react-dom";
import MyComponent from "section/MyComponent";

const App = () => (
  <MyComponent />
);

ReactDOM.render(<App />, document.getElementById("app"));