基于npm和module-federation的远程包管理器

基于npm和module-federation的远程包管理器

最近做了一个微前端开源项目(web package manager), 临近休假先简单的推广一下, 节后再继续更新, 欢迎大家体验和star, 也欢迎沟通讨论, 感谢

WPM介绍

web package manager是基于module-federation(mf)和npm实现的远程包管理器, 打通了目前已有的umd规范与mf模块可以更简单无需顾忌的共享远程模块, 可以方便的接入现存的npm包或使用npm私有源及其他源搭建新的远程模块体系。
并且内置可自行扩展的调试插件系统, 可以一键切换远程/本地模块、集成热更新等来大大提高开发和调试效率。

特性

• 多模块规范（集成了system、umd、module-federation等模块规范）
• 调试模式/热更新（集成了调试面板与热更新, 可以自动连接本地启动的dev-server）
• 版本化管理（可以使用私有或公共npm作为远程模块存储源, 也可以自定义url拼接规则自行存储远程模块）
• 远程锁（支持动态配置远程模块的版本）
• 性能优化（插件自动化优化多个远程模块及其chunk的加载链路, 避免多次加载的等待）

提效价值

我在自己的工作中已经使用了两年wpm, 最近才花时间将其解耦出来。简单的说它的价值在于极大的提高开发、构建效率以及版本化、灰度策略等管理等。

技术优势

底层技术使用npm + module-federation比较符合现有的技术生态 接入成本最低。 这个以后细说, 现在只简单的引入一下, module-federation作为目前基础能力最全（ts、ssr、各打包工具插件）且最活跃的远程模块共享与加载能力, 通过打包工具的编译, 能够自动分析下一个模块的加载应该并行提前发起多少个js资源(chunk)的请求来做到移除加载瀑布, 这也会带来手动编码运行时引入远程模块所做不到的性能提升。

可以独立使用的底层能力

在做wpm时我也做了许多其他的库, 用来解决一些问题

• webpack4 module-federation webpack4项目使用module-federation
• module-federation-runtime 模拟并暴露的支持浏览器和node环境的module-federation运行时API
• universal-module-federation-plugin 允许自定义remotes的加载行为
• wpmjs（umd + module-federation） 打通了umd + mf 的运行时从npm加载远程模块的sdk
• npm-federation remotes支持远程npm模块
• systemjs-intercept 拦截并自定义systemjs获取依赖的行为

近期计划

目前开源版本暴露的能力大概占比60%, 休假结束后我会继续更新

1. 文档、示例、开发规范、贡献指南补充
2. wpm插件补充
3. 内置热更新集成
4. 文章（wpm介绍、module-federation特性及性能分析）