Блог

Я пытаюсь реализовать POC на микро-интерфейсах, используя федерацию модулей в качестве инструмента интеграции. Я могу запускать микро-интерфейс отдельно(работает на порту 4001), но когда я попытался запустить хост-приложение(работает на порту 4000), в которое встроен микро-интерфейс, оно выдавало ошибки, в которых говорилось, что оно не смогло найти зависимости MF i.e react-redux и инструментарий redux, как показано на рисунке ниже. Хост-приложение не имеет react-redux и инструментария redux в качестве зависимостей, и я не уверен, почему оно пытается получить зависимости от порта 4000 вместо 4001. Могу ли я знать, как решить эту проблему?

Хост -webpack.config

 const config: Configuration = {  mode: 'development',  output: {  publicPath: '/'  },  module: {  rules: [  {  test: /.(ts|js)x?$/i,  exclude: /node_modules/,  use: {  loader: 'babel-loader',  options: {  presets: [  '@babel/preset-env',  '@babel/preset-react',  '@babel/preset-typescript'  ]  }  }  }  ]  },  resolve: {  extensions: ['.tsx', '.ts', '.js']  },  plugins: [  new ModuleFederationPlugin({  name: 'container',  remotes: {  mf1: 'mf1@http://localhost:4001/remoteEntry.js'  },  shared: [deps]  }),  new HtmlWebpackPlugin({  template: 'public/index.html'  }),  new HotModuleReplacementPlugin(),  new ForkTsCheckerWebpackPlugin({  async: false  }),  new ESLintPlugin({  extensions: ['js', 'jsx', 'ts', 'tsx']  })  ],  devtool: 'inline-source-map',  devServer: {  static: path.join(__dirname, 'build'),  historyApiFallback: true,  port: 4000,  open: true  } };  export default config;  

МФ — webpack.config.js

 const config: Configuration = {  mode: 'development',  output: {  publicPath: '/'  },  entry: './src/index',  module: {  rules: [  {  test: /.(ts|js)x?$/i,  exclude: /node_modules/,  use: {  loader: 'babel-loader',  options: {  presets: [  '@babel/preset-env',  '@babel/preset-react',  '@babel/preset-typescript'  ]  }  }  }  ]  },  resolve: {  extensions: ['.tsx', '.ts', '.js']  },  plugins: [  new ModuleFederationPlugin({  name: 'mf1',  filename: 'remoteEntry.js',  library: {type: 'var', name: 'mf1'},  exposes: {  './Mf1App': './src/bootstrap'  },  shared: [deps]  }),  new HtmlWebpackPlugin({  template: 'public/index.html'  }),  new HotModuleReplacementPlugin(),  new ForkTsCheckerWebpackPlugin({  async: false  }),  new ESLintPlugin({  extensions: ['js', 'jsx', 'ts', 'tsx']  })  ],  devtool: 'inline-source-map',  devServer: {  static: path.join(__dirname, 'build'),  historyApiFallback: true,  port: 4001,  open: true  } };  export default config;  

Host-package.json

 {  "name": "container",  "version": "1.0.0",  "description": "",  "main": "index.ts",  "scripts": {  "start": "webpack serve --config config/webpack.dev.config.ts",  "build": "webpack --config config/webpack.prod.config.ts",  "lint": "eslint "*/**/*.{js,ts,tsx}"",  "lint:fix": "eslint "*/**/*.{js,ts,tsx}" --fix"  },  "keywords": [],  "author": "",  "license": "ISC",  "devDependencies": {  "@babel/core": "^7.15.8",  "@babel/plugin-transform-runtime": "^7.15.8",  "@babel/preset-env": "^7.15.8",  "@babel/preset-react": "^7.14.5",  "@babel/preset-typescript": "^7.15.0",  "@babel/runtime": "^7.15.4",  "@types/node": "^16.10.9",  "@types/react": "^17.0.29",  "@types/react-dom": "^17.0.9",  "@types/webpack": "^5.28.0",  "@types/webpack-dev-server": "^4.3.1",  "@typescript-eslint/eslint-plugin": "^5.0.0",  "@typescript-eslint/parser": "^5.0.0",  "babel-loader": "^8.2.2",  "eslint": "^8.0.1",  "eslint-config-prettier": "^8.3.0",  "eslint-plugin-import": "^2.25.2",  "eslint-plugin-prettier": "^4.0.0",  "eslint-plugin-react": "^7.26.1",  "eslint-plugin-react-hooks": "^4.2.0",  "fork-ts-checker-webpack-plugin": "^6.3.4",  "html-webpack-plugin": "^5.3.2",  "prettier": "^2.4.1",  "ts-node": "^10.3.0",  "tsconfig-paths-webpack-plugin": "^3.5.1",  "webpack": "^5.58.2",  "webpack-cli": "^4.9.0",  "webpack-dev-server": "^4.3.1",  "@types/fork-ts-checker-webpack-plugin": "^0.4.5",  "clean-webpack-plugin": "^3.0.0",  "typescript": "^4.4.4",  "eslint-webpack-plugin": "^2.4.1"  },  "dependencies": {  "react": "^17.0.2",  "react-dom": "^17.0.2"  } }  

MF1-пакет.json

 {  "name": "microfrontend1",  "version": "1.0.0",  "description": "",  "main": "index.ts",  "scripts": {  "start": "webpack serve --config config/webpack.dev.config.ts",  "build": "webpack --config config/webpack.prod.config.ts",  "lint": "eslint "*/**/*.{js,ts,tsx}"",  "lint:fix": "eslint "*/**/*.{js,ts,tsx}" --fix"  },  "keywords": [],  "author": "",  "license": "ISC",  "devDependencies": {  "@babel/core": "^7.15.8",  "@babel/plugin-transform-runtime": "^7.15.8",  "@babel/preset-env": "^7.15.8",  "@babel/preset-react": "^7.14.5",  "@babel/preset-typescript": "^7.15.0",  "@babel/runtime": "^7.15.4",  "@types/node": "^16.10.9",  "@types/react": "^17.0.29",  "@types/react-dom": "^17.0.9",  "@types/webpack": "^5.28.0",  "@types/react-redux": "^7.1.19",  "@types/webpack-dev-server": "^4.3.1",  "@typescript-eslint/eslint-plugin": "^5.0.0",  "@typescript-eslint/parser": "^5.0.0",  "babel-loader": "^8.2.2",  "eslint": "^8.0.1",  "eslint-config-prettier": "^8.3.0",  "eslint-plugin-import": "^2.25.2",  "eslint-plugin-prettier": "^4.0.0",  "eslint-plugin-react": "^7.26.1",  "eslint-plugin-react-hooks": "^4.2.0",  "fork-ts-checker-webpack-plugin": "^6.3.4",  "html-webpack-plugin": "^5.3.2",  "prettier": "^2.4.1",  "ts-node": "^10.3.0",  "tsconfig-paths-webpack-plugin": "^3.5.1",  "webpack": "^5.58.2",  "webpack-cli": "^4.9.0",  "webpack-dev-server": "^4.3.1",  "@types/fork-ts-checker-webpack-plugin": "^0.4.5",  "clean-webpack-plugin": "^3.0.0",  "typescript": "^4.4.4",  "eslint-webpack-plugin": "^2.4.1"  },  "dependencies": {  "@reduxjs/toolkit": "^1.6.2",  "react": "^17.0.2",  "react-dom": "^17.0.2",  "react-redux": "^7.2.5"  } }  

В МФ webpack.config.js обновите выходной объект, как показано ниже:

 `output: {  publicPath: 'http://localhost:4001/' }`  

Дай мне знать, если это поможет.