@inventorjs/sdk-loader

概述

基于 systemjs 实现的通用 sdk 加载器，可实现根据 sdk 资源配置，加载 sdk ，返回 sdk 模块，支持 js, chunks 和 css.

功能列表

• 基于 systemjs 实现模块模块管理，支持 js(支持 system 格式) json css 类型的模块
• systemjs 加载 json 和 css 需要用到 fetch，支持自动加载 fetch polyfill
• css 模块加载后返回 CSSStyleSheet 对象列表，用户可自定义如何使用
• 支持多 sdk 并发加载，需要考虑最大并发数可能会影响性能
• 支持直接传入 sdkConfigs 配置对象 或 传入 sdkConfigs 配置对象的远程 json 地址，可自动加载
• 支持自定义加载超时时间，默认 10s，超时后会抛出错误
• 支持 webpack / rollup 打包的 systemjs 模块，可配置优先加载 chunk（webpack 的 SplitChunks 对 systemjs 兼容不好）

兼容性：不兼容 IE，Edge 以上没问题

副作用：systemjs 会在全局注入 System 全局变量，用于模块管理

注意：js 模块需要打包成 system 格式，webpack配置 rollup配置，推荐使用 rollup

代码示例

  import { loadSdk } from './sdk-loader'
  import ReactDOM from 'react-dom'

  loadSdk({
    sdkConfigs: {
      testSdk: {
        manifest: {
          entry: 'http://localhost:3000/dist/index.js',
          chunks: ['http://localhost:3000/dist/react-7138bc01.js'],
          css: ['http://localhost:3000/dist/style.css'],
        },
        version: 'v1',
      },
    },
    options: {
      timeout: 15000,
      chunksPreload: true, // 默认为 false，是否预加载 chunks，webpack 构建的 chunks 请传 true
      cssEffect: true, // 默认为 false，加载完 css 是否在页面生效，优先使用 adoptedStyleSheets，若不支持，降级为 link
      documentRoot: document, // 默认为 document, css 生效的文档对象，可传 shadowDom Root
    }
  }).then(({ testSdk: { entry, chunks, css } }) => {
    console.log(entry, chunks, css)
  })