%20(2).svg)
项目简介
本项目是一个基于 Webpack 框架的子应用动态加载系统，可实现父应用对不同前端框架子应用的动态加载与管理。
项目的主要特性和功能
- 动态资源加载：父应用能动态加载子应用的 JS 和 CSS 文件。
- 事件驱动生命周期管理：子应用通过监听父应用事件，精准控制启动和关闭。
- 资源清单配置：利用 Webpack 的 manifest 插件生成子应用资源清单，包含静态文件路径、版本号、资源地址等信息。
- 多框架支持：兼容 React 和 Vue 等前端框架。
安装使用步骤
1. 下载源码
假设用户已经下载了本项目的源码文件。
2. 安装依赖
使用 npm 或 yarn 安装项目依赖：
bash
npm i kg-site-subapp-controller
3. 配置子应用入口文件
修改项目入口文件，使其能监听父应用事件以启动和关闭子应用： ```typescript jsx import React from 'react'; import ReactDOM from 'react-dom'; import { bootstrap } from 'kg-site-subapp-controller'; import App from './src/App';
bootstrap('almanac', {
onLaunch (container) {
ReactDOM.render(
4. 配置 Webpack 生成清单文件
在 Webpack 配置文件中添加 ManifestPlugin 插件配置： ```javascript const ManifestPlugin = require('webpack-manifest-plugin'); const SUB_APP_NAME = require('package.json').name;
module.exports = {
plugins: [
new ManifestPlugin({
fileName: 'subapp-manifest.json',
filter: ({ path })=>/.(js|css)$/.test(path),
generate: (seed, files) => {
const BASE_URL = process.env.BASE_URL;
const VERSION = process.env.SUBAPP_VERSION ;
return {
name: SUB_APP_NAME.replace(/^kg-site-/, ''),
title: SUB_APP_TITLE,
version: VERSION,
baseUrl: BASE_URL,
files: files.map(i=>i.path)
};
}
}),
new DefinePlugin({
'process.env.SUB_APP_NAME': "${SUB_APP_NAME}"
})
]
};
```
5. 推送代码并创建合并请求
将代码推送到代码仓库，创建合并请求触发 CI 脚本，把 subapp-manifest.json 提取到子应用入口文件管理服务中。
6. 测试和调试
注意事项
- 开发时将全局依赖标记为 external 以减小应用体积，配置示例如下：
javascript module.exports = { externals: { 'react': 'React', 'react-dom': 'ReactDOM', 'vue': 'Vue', 'vuex': 'Vuex' } } - 子应用不要放在父应用根目录下，使用单独文件夹并确保项目名称唯一。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】