介绍

WPM（web package manager）是一个微前端包管理平台, 项目中可以使用wpm-plugin引入远程包使用, 它允许在多个应用程序之间高效地共享代码，从而显著减少代码重复和维护成本。

特性

价值

架构

使用示例

开源底层实现, 可与前端生态相结合, 更容易扩展支持未来的升级:

• 使用universal-module-federation (opens new window)实现, 能够支持webpack4 (opens new window)、5
• WPM包作为标准module-federation (opens new window)模块输出, 可以被ModuleFederationPlugin引入
• 非webpack项目可以用vite (opens new window)的方式使用WPM包

使用wpm-plugin插件即可使用或上传远程模块

const WpmPlugin = require("wpm-plugin")
// webpack.config.js
new WpmPlugin({
  systemRemotes: {
    // {remoteKey}: {包名},
    "@wemo-ui/klein": "@wemo-ui/klein@0.0.30",
    "@core-klein/basic-multiple": "@core-klein/basic-multiple",
  },
  shared: {
    react: {singleton: true},
    "react-dom": {singleton: true}
  }
})

// 引入远程@wemo-ui/klein远程包
import {Button} from "@wemo-ui/klein"
require("@wemo-ui/klein")
await import("@wemo-ui/klein")

console.log(Button)

• 查看可用远程包 (opens new window)
• {包名}语法说明
  • CDN地址规则1: https://wpm.hsmob.com/wpmv2/{pkgname}/{version}/index.js
  • CDN地址规则2: https://wpm.hsmob.com/wpmv2/{pkgname}/latest/{qa | online}/index.js
  • CDN地址demo: https://wpm.hsmob.com/wpmv2/@wemo-ui/klein/latest/online/index.js (opens new window)

本地调试

1. 进入任意使用wpm包的页面, url携带参数?wpmDebug即可打开调试模式
2. 本地启动的任何wpm项目都会自动连接上调试模式