Alibaba Module Federation 4 教程
1. 项目的目录结构及介绍
在 alibaba/module-federation4
项目中,典型的目录结构可能如下:
├── apps
│ ├── host-app
│ │ └── ...
│ └── remote-app
│ └── ...
├── packages
│ ├── shared-module
│ └── ...
└── shared
└── ...
-
apps: 包含主机应用(host-app)和远程应用(remote-app)。主机应用是集成其他远程模块的应用,而远程应用则提供可共享的模块。
-
host-app: 主机应用的源代码目录,通常包含入口文件、配置文件和其他相关资源。
-
remote-app: 远程应用的源代码目录,它包含了要被主机应用消费的模块。
-
packages: 可能包含共享模块的独立包,这些模块可以被多个应用共同使用。
-
shared: 存放共享配置或库的地方,供所有应用访问。
2. 项目的启动文件介绍
每个应用(host-app 和 remote-app)都有自己的启动脚本,通常是 npm start
或者 yarn start
命令。这些脚本位于每个应用的根目录下的 package.json
文件中的 scripts
部分。
例如,在 host-app
中,启动脚本可能会调用 Webpack CLI 来运行配置文件,并启动开发服务器:
{
"scripts": {
"start": "webpack serve --config ./webpack.config.js"
}
}
同样,remote-app
也有类似的配置用于启动其自身的 Webpack 开发服务器。
3. 项目的配置文件介绍
Host App 的配置文件(webpack.config.js
)
主机应用的配置文件主要负责设置 Module Federation 插件,以便引入并执行远程应用的模块。以下是一个基本的配置示例:
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
// 其他配置...
resolve: {
// 配置解析规则...
},
plugins: [
new ModuleFederationPlugin({
name: 'host_app',
filename: 'remote_entry.js',
exposes: {
'./RemoteComponent': './src/RemoteComponent'
}, // 暴露远程组件
shared: ['@shared/module'] // 共享库
})
],
// 其他 Webpack 配置...
};
Remote App 的配置文件(webpack.config.js
)
远程应用的配置文件一般用于定义哪些模块将会被公开到外部。一个简单的配置可能是这样的:
const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
module.exports = {
// 其他配置...
resolve: {
// 解析规则...
},
plugins: [
new ModuleFederationPlugin({
name: 'remote_app', // 应用名称
library: { type: 'var', name: 'remote_app' }, // 公共库暴露方式
filename: 'remote_entry.js',
exposes: {
'./RemoteComponent': './src/RemoteComponent'
} // 暴露组件
})
],
// 其他 Webpack 配置...
};
请注意,实际配置文件会根据项目需求和特定的依赖版本进行调整。这个概述提供了一个基本的起点,以理解如何设置 Module Federation 以及它的关键部分。在具体操作时,请参考 Alibaba Module Federation 项目中的示例和文档来获取更详细的指导。