没有CDN的微前端束之间的共享反应
我正在使用带有单Spa框架的微前端架构构建一个应用程序。
我有：
- 根配置web应用程序:定义应用程序的布局，并将每个微前端包含为NPM依赖项。
- N微前端:将加载到根配置应用程序中的应用程序进行反应。
因为每个微前端都在使用React，所以我不想每次都绑定它。相反，我想让根配置应用程序指定为依赖项，然后每个微前端都可以加载它。
我已经宣布反应和反应作为webpack外部，所以他们不是捆绑，但我认为，这将只有在我的根配置应用程序的index.html中包括从CDN反应。有没有办法配置webpack，使其包括根配置中的React，并将其提供给每个微前端？我不能在我的公司里使用公共CDN。
谢谢!
回答 3
Stack Overflow用户
发布于 2021-02-23 07:24:27
在“开始:快速开始”指南中，我们将介绍如何添加共享依赖项，该示例具体展示了如何向导入映射中添加ReactDOM和ReactDOM。
您不应该尝试将响应捆绑到根-config中，因为由Webpack捆绑到应用程序中的模块是同名的，而不是全局共享的。相反，根据您的需求，您可以在您自己的CDN中托管这些反应文件，甚至可以通过根配置在本地提供这些文件，因为最终存在静态文件。加载这些文件的位置与SystemJS无关，只要它能够加载它们。这意味着您可以简单地在本地复制这些文件并从根配置服务器为它们提供服务，就像设置您自己的unpkg服务器一样复杂。
Stack Overflow用户
发布于 2021-05-21 06:17:44
是的，我们不仅可以针对React包，而且可以通过所有的依赖项，在所有的微前端应用程序之间共享它们。
Webpack 5，提供了ModuleFederationPlugin的支持，您可以在其中定义包列表。例子：-
在Webpack配置中导入Package.json并添加以下插件
const packageJson = require('../package.json');
{
plugins: [
new ModuleFederationPlugin({
name: <AppName>,
filename: 'remoteEntry.js',
exposes: {
'./App': <PathToFile>,
},
shared: {
...packageJson.dependencies,
}
}),
],
}您只能显式地定义要共享的包名。
查看有关ModuleFederationPlugin的更多信息
Stack Overflow用户
发布于 2021-07-06 18:31:05
如果您希望在微前端中具有灵活性，也就是说，如果希望每个微前端独立部署，则可以使用客户端集成。
反应
您可以对静态文件使用CDN。(图片，字体，pdf，文档) Webpack模块联盟可以用于客户端的集成.
配置一个示例webpack和模块联邦。
本文将webpack配置文件分为3部分。共同的，发展的，生产的
webpack.common.js
module.exports = {
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react', '@babel/preset-env'],
plugins: ['@babel/plugin-transform-runtime'],
},
},
},
],
},
};webpack.dev.js
const { merge } = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const commonConfig = require('./webpack.common');
const packageJson = require('../package.json');
const devConfig = {
mode: 'development',
output: {
publicPath: 'http://localhost:8082/',
},
devServer: {
port: 8082,
historyApiFallback: {
index: 'index.html',
},
},
plugins: [
new ModuleFederationPlugin({
name: 'auth',
filename: 'remoteEntry.js',
exposes: {
'./AuthApp': './src/bootstrap',
},
shared: packageJson.dependencies,
}),
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
};
module.exports = merge(commonConfig, devConfig);https://stackoverflow.com/questions/66137561
复制相似问题
腾讯云开发者
