WPM

# API-SDK

wpmjs sdk url (opens new window)

# wpmjs.setConfig

  • # 参数

    wpmjs.setConfig(options)

    • options
    参数 类型 默认值 作用 使用场景
    dev boolean false 是否是开发模式 目前一般由插件自动开启, 用于开发模式热更新
    env string "online" latest对应的版本 online为线上稳定版本；qa为测试中版本
    map object {react: "vue@0.1?a=1"} 包名映射配置, 对依赖也能生效 例如引入了@wemo-ui/klein, 可以用map设置@wemo-ui/klein依赖的react版本

  • # 示例

import wpmjs from 'wpmjs';

wpmjs.setConfig({
  env: 'online' // 对引入包的环境配置，支持qa和online， 默认online
});
1
2
3
4
5
6

# wpmjs.import

  • # 参数

    wpmjs.import(`@[scope]/[name]@[version]/[entry]?[query]`, { type }) 例:
    • import "react"
    • import "antd@latest/button"
    • import "@wemo-ui/klein@0.0.2/button?a=2"
配置项 必填 类型 默认值 作用
scope 否 string 无 包名
name 是 string 无 包名
version 否 string "@latest" 版本号
entry 否 string 无 多入口包, 指定入口
query 否 string 无 query
type 否 "system", "mf", "umd", "json" "system" 模块的加载方式

  • # 单入口示例

const { default: React, useState } = await wpmjs.import('react@latest');
1

  • # 多入口示例

  • 比较大的包不能一次性将所有模块全都加载, 可以通过暴露多个入口模块来懒加载
  • 多入口的包可以通过import直接引入某一入口, 也可以先引入包模块再通过$getEntry引入入口模块
// 1. 直接引入一个入口模块
const res = await window.wpmjs.import("mf-app-01/App", {type: "mf"})

// 先引入包, 再通过$getEntry引入入口
const container = await window.wpmjs.import("mf-app-01", {type: "mf"})
console.log("mf:", res, await container.$getEntry("App"))
1
2
3
4
5
6

  • # 多模块类型示例

const { default: React, useState } = await wpmjs.import('react@latest');

// module-federation
async function testMf() {
  const res = await window.wpmjs.import("mf-app-01/App", {type: "mf"})
  const container = await window.wpmjs.import("mf-app-01", {type: "mf"})
  console.log("mf:", res, await container.$getEntry("App"))
}

// json
async function testJson() {
  const res = await window.wpmjs.import("test-json-package/injector_basename", {type: "json"})
  const container = await window.wpmjs.import("test-json-package", {type: "json"})
  console.log("json:", res, await container.$getEntry("injector_basename"))
}

// system
async function testSystem() {
  const res = await window.wpmjs.import("@core-klein/basic-multiple/SaasEnv", {type: "system"})
  const container = await window.wpmjs.import("@core-klein/basic-multiple", {type: "system"})
  console.log("system:", res, await container.$getEntry("SaasEnv"))
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# wpmjs.get

  • # 说明

    • wpmjs.get获取包的同步值，但是需要确保已经加载完成。
    • 未加载完成返回undefined。

  • # 示例

import wpmjs from 'wpmjs';
;(async function () {
  await wpmjs.import('react@latest');
  const { default: React, useState } = wpmjs.get('react@latest')
  useState // function
})()
1
2
3
4
5
6

# wpmjs.sleep

  • # 说明

    • wpmjs.sleep传入一个promise, 后续所有import请求会进行等待。
    • 返回undefined。

  • # 示例

这个示例演示了通过wpmjs.sleep使所有包的加载进行等待, 来做到读取并设置远程配置的版本

wpmjs.sleep(async function () {
  /**
   * remoteMap示例
   * remoteMap: {
   *  react: "react@0.0.1"
   *  "react-dom": "react-dom@0.0.2"
   * } 
   */
  const remoteMap = await (await fetch("http://xxx.json")).json()
  wpmjs.setConfig({
    map: remoteMap
  })
}())

wpmjs.import("react")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# wpmjs.on("resolve")

包解析拦截器, 下面的例子会将请求[ import "wpmjs/$/antd?a=1" ]改为[ import "wpmjs/$/ele?a=1" ]

  • # 参数

wpmjs.on("resolve", ({name, version, query, entry, basePath}) => {
  // name: "antd"
  // version: "latest"
  // query: "?a=1"
  // entry: "/button"
  // basePath: "https://wpm.hsmob.com/wpmv2/"

  if (name === "antd") {
    return {
      name: "ele"
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
  • options
参数 类型 默认值 作用 使用场景
name string '' 包名
version string "latest" 版本号
query string '' query string
entry string '' 入口
basePath string '' 域名

← API-webpack →