Remote package manager based on npm and module-federation

Remote package manager based on npm and module-federation

Recently I worked on a micro front-end open source project(web package manager), As the holiday approaches, I will briefly promote it, and I will continue to update after the holiday. Everyone is welcome to experience it. or star, Communication and discussion are also welcome, thank you

WPM introduce

The web package manager is a remote package manager based on module-federation (mf) and npm. Connected the existing umd specification and mf module. You can share remote modules more easily and without worries. You can easily access existing npm packages or use npm private sources and other sources to build a new remote module system.
It also has a built-in self-expandable debugging plug-in system, which can switch remote/local modules with one click, integrate hot updates, etc. to greatly improve development and debugging efficiency.

Features

• Multi-module specifications (integrated module specifications such as system, umd, module-federation, etc.)
• Debug mode/hot update (integrates debugging panel and hot update, can automatically connect to the locally started dev-server)
• Version management (you can use private or public npm as the remote module storage source, or you can customize url splicing rules to store remote modules yourself)
• Remote lock (supports dynamic configuration of remote module version)
• Performance optimization (the plug-in automatically optimizes the loading links of multiple remote modules and their chunks to avoid waiting for multiple loads)

Improve efficiency value

I've been using wpm in my own work for two years and have only recently taken the time to decouple it. Simply put, its value lies in greatly improving development and construction efficiency as well as versioning, grayscale strategy and other management.

Technical advantages

The underlying technology uses npm + module-federation, which is more in line with the existing technology ecosystem and has the lowest access cost. To elaborate on this future, I will only briefly introduce it now. As the most complete basic capability (ts, ssr, various packaging tool plug-ins) and the most active remote module sharing and loading capabilities, module-federation can automatically be compiled by the packaging tool. Analyze how many js resource (chunk) requests should be initiated in parallel and in advance to load the next module to remove the loading waterfall. This will also bring performance improvements that cannot be achieved by introducing remote modules during manual coding runtime.

可以独立使用的底层能力

When I was working on wpm, I also made many other libraries to solve some problems.

• webpack4 module-federation webpack4 project uses module-federation
• module-federation-runtime Simulated and exposed module-federation runtime API supporting browser and node environments
• universal-module-federation-plugin Allows customizing the loading behavior of remotes
• wpmjs（umd + module-federation） Connect the runtime of umd + mf, load the sdk of the remote module from npm
• npm-federation remotes supports remote npm modules
• systemjs-intercept Intercept and customize the behavior of systemjs to obtain dependencies

Recent plans

At present, the open source version exposes about 60% of the capabilities. I will continue to update after the vacation.

1. Documentation, examples, development specifications, contribution guide supplement
2. wpm plugin supplement
3. Built-in hot update integration
4. Articles (wpm introduction, module-federation features and performance analysis)