https://github.com/jd-opensource/jmodule
一个微前端框架，用于帮助前端项目进行融合与拆解，适用于大型应用的拆分、插件系统实现、多应用融合场景。
https://github.com/jd-opensource/jmodule
Last synced: 7 months ago
JSON representation
一个微前端框架，用于帮助前端项目进行融合与拆解，适用于大型应用的拆分、插件系统实现、多应用融合场景。
- Host: GitHub
- URL: https://github.com/jd-opensource/jmodule
- Owner: jd-opensource
- License: mit
- Created: 2022-04-06T12:19:19.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2025-05-15T08:27:56.000Z (12 months ago)
- Last Synced: 2025-05-26T09:43:07.269Z (11 months ago)
- Language: TypeScript
- Size: 1.65 MB
- Stars: 20
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# JModule
[](https://deepwiki.com/jd-opensource/jmodule)
一个微前端框架，用于帮助前端项目进行融合与拆解，适用于大型应用的拆分、插件系统实现、多应用融合场景。
## 特性
### 支持项目集成开发
提供webpack插件，满足子应用在开发过程中与宿主应用集成调试的需求。
### 多种接入模式
可以扩展应用接入模式，比如可以用于插件系统实现、动态路由集成，或者是一个完整的前端应用。常用的接入模式支持已通过 @jmodule/helper 提供支持。
### 多级应用结构
支持子应用嵌套，子应用本身也可以是宿主应用，但仍以自应用的方式接入其它宿主应用。
## 安装
```bash
npm install @jmodule/client
# 开发插件安装
npm install @jmodule/plugin-webpack
```
### SCENE: 作为子应用接入宿主应用
```javascript
// 在 webpack 配置中增加
import WebpackJmodulePlugin from '@jmodule/plugin-webpack';
module.exports = {
plugins: [
new WebpackJmodulePlugin({
mode: 'modules',
devConfig: { // 开发联调时配置
currentServer: 'http://localhost:8084', // 子应用 server
platformServer: 'http://platformServer.com', // 主应用 server
platformLocalPort: 8088, // 本地联调端口
onAllServerReady: () => { // 所有服务就绪
console.log('ALL SERVER READY!');
opn('http://localhost:8088');
},
},
}),
];
}
// 在入口文件中添加
JModule.define(moduleKey, { mount() {} })
```
### SCENE: 作为宿主应用加载子应用
```javascript
npm i @jmodule/client
import { JModule } from '@jmodule/client'
JModule.registerModules([
key: 'childApp',
url: 'http://localhost:8080',
]).then(modules => modules.forEach(module => module.load()));
// 通过 afterInit hook 注入子应用路由进行其它操作
JModule.registerHook('afterInit', (module, options) => {
const { routes } = options || {};
router.addRoutes(routes);
});
```
## Example
```bash
# 源码项目采用 pnpm 进行管理，需要先安装 pnpm
npm i -g pnpm@6
# Demo 代码位于 packages/demo
# 安装项目依赖
pnpm i
# 构建 client\helper包
pnpm --filter "*client" run build
pnpm --filter "*helper" run build
#### 完整示例
# 启动所有子项目
pnpm --filter "*child*" run serve
# 启动宿主应用并自动加载以上子应用
pnpm --filter "*host*" run serve:modules
#### 单应用调试
# 以纯净模式启动宿主应用（与前面含子应用的启动的示例相区别）
pnpm --filter "@jmodule-demo/host-vue2" run serve
# 启动指定的子应用，并在宿主应用中进行集成调试
pnpm --filter "@jmodule-demo/child-app-react" run serve
```
## 文档
[文档](https://jmodule.jd.com)
## 浏览器插件
查看应用基本信息、资源信息，以及从注册到加载过程的事件触发时间信息。
### 安装地址
[chrome 应用商店](https://chrome.google.com/webstore/detail/jmodule-devtool/egoehonhiiogmmcdjaaakbpmnahcjgpd?hl=zh-CN)
[firefox 应用商店](https://addons.mozilla.org/zh-CN/firefox/addon/jmodule-devtool/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search)
### 预览
Dashboard
资源信息
事件
## License
[License](LICENSE)
## 微信交流群
