使用 webpack5 模块联合在 Vue 中 React 应用程序

Question

我创建了简单的 React App HelloComponent 并尝试插入到 Vue 应用程序中，但我没有成功

// React webpack config
const { ModuleFederationPlugin } = require('webpack').container;
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.common');
const path = require('path');
const devConfig = {
    mode: "development",
    entry: './src/index.jsx',
    devServer: {
        port: "5000",
    },
    plugins: [
        new ModuleFederationPlugin({
            name: 'HelloApp',
            filename: "remoteEntry.js",
            exposes: {
                './HelloComponent': './src/components/HelloComponent',
            },
            shared: { react: { singleton: true, eager: true }, "react-dom": { singleton: true, eager: true } },
        })
    ],

}
module.exports = merge(commonConfig, devConfig);

// Vue webpack Config
const HtmlWebPackPlugin = require("html-webpack-plugin");
const { ModuleFederationPlugin } = require('webpack').container;
const { VueLoaderPlugin } = require("vue-loader");
const { TransformAsyncModulesPlugin } = require("transform-async-modules-webpack-plugin");


module.exports = {
    entry: './src/bootstrap.js',
    output: {
        publicPath: "http://localhost:3002/",
    },

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

    devServer: {
        port: 5001,
    },
    externals: {
        react: 'react', // This tells Vue to use the React instance from the remote container
        'react-dom': 'react-dom',
    },
    module: {
        rules: [
            {
                test: /\.m?js/,
                type: "javascript/auto",
                resolve: {
                    fullySpecified: false,
                },
            },
            {
                test: /\.vue$/,
                loader: "vue-loader",
            },
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['@babel/preset-env'],
                    },
                },

            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: 'file-loader',
                options: {
                    name: 'src/assets/[name].[ext]'
                }
            }
        ],
    },

    plugins: [
        new TransformAsyncModulesPlugin(),
        new VueLoaderPlugin(),
        new ModuleFederationPlugin({
            name: "Vue App",
            filename: "remoteEntry.js",
            remotes: {
                helloApp: 'HelloApp@http://localhost:3000/remoteEntry.js',
            },
            exposes: {},
            shared: { react: { singleton: true, eager: true }, "react-dom": { singleton: true, eager: true } },

        }),
        new HtmlWebPackPlugin({
            template: "./public/index.html",
        }),
    ],
};

//App.vue

<template>
  
    <HelloComponent :name="name" />

</template>

<script>
// Importing HelloComponent from remote React application
const HelloComponent = () => import("HelloApp/HelloComponent");

export default {
  name: "App",
  data() {
    return {
      name: "World",
    };
  },
  components: {
    HelloComponent,
  },
};
</script>

我的 React 应用程序按预期工作，但 Vue 无法渲染，有人可以帮助解决这个问题吗

我尝试了不同的插入 Vue 的方式，但它不起作用。我对 Vue 不太熟悉，您的回复将受到高度赞赏，或者请建议我任何其他方法，这将在 Vue 中渲染 React 应用程序

反应版本18 和 Vue 版本 3

请向我推荐任何其他使用 webpack 5 和模块联合的解决方案

反应

{
  "name": "base-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/core": "^7.24.4",
    "@babel/preset-env": "^7.24.4",
    "@babel/preset-react": "^7.24.1",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.6.8",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "terser-webpack-plugin": "^5.3.10",
    "web-vitals": "^2.1.4",
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.2",
    "webpack-merge": "^5.10.0"
  },
  "scripts": {
    "start": "webpack serve --config webpack.dev.js",
    "build": "webpack build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Vue

{
  "name": "vue-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "webpack-dev-server  --open --mode development",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.24.4",
    "@babel/eslint-parser": "^7.12.16",
    "@babel/plugin-transform-runtime": "^7.24.3",
    "@babel/preset-env": "^7.24.4",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/compiler-sfc": "^3.4.25",
    "babel-loader": "^9.1.3",
    "css-loader": "^7.1.1",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.6.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "style-loader": "^4.0.0",
    "transform-async-modules-webpack-plugin": "^1.1.0",
    "vue-loader": "^17.4.2",
    "vue-template-compiler": "^2.7.16",
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

Answer 1

Webpack 模块联合也可能有效，但有一个专用库可以做到这一点。

看看这里：https://github.com/devilwjp/veaury

您可以将其与 webpack、vite 或 vue cli 一起使用

希望这能解决您的问题。