微前端之 entry 加载工具

什么是 entry

微应用、微模块的入口

systemjs

SystemJS 是一个基于标准的模块加载器。

工作环境：

• 在不支持原生模块的浏览器环境中，提供以 System.register 的模块格式的模块加载代码
• single-spa 通过 systemjs 实现微模块、

特点：

• 支持动态导入、css js json wasm 模块类型、兼容 IE11
• 支持文件: js、css、json、wsm
• 支持模块规范: system、umd、amd(插件支持)

import-html-enry

qiankun 框架配套开发支持 html 作为入口(entry) 的资源加载器(loader)。

工作环境：

• qiankun 框架为了解决 JS Entry 的问题，采用更方便的 HTML Entry 方式，目的让微应用接入像 iframe 一样只需配置页面 html 的 url 地址

特点：

• 支持文件: js、css、html
• 支持模块规范: umd

调试 systemjs

为了方便 debugger 使用 Systemjs.import API 进行调试

  useEffect(() => {
    (async () => {
      debugger
     // 导入 js 资源
      const mobx = await Systemjs.import('https://unpkg.com/[email protected]/lib/mobx.umd.js')
      console.log(mobx);
      // 导入 css 文件
      Systemjs.import('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css').then(module => {
        const styleSheet = module.default; // A CSSStyleSheet object
        document.adoptedStyleSheets = [...document.adoptedStyleSheets, styleSheet]; // now your css is available to be used.
        // https://developers.google.com/web/updates/2019/02/constructable-stylesheets
    })
  })()

调用 api import
  - systemJSPrototype.import 实例方法
   - preimport - 处理 script 标签
    -对 type 为 systemjs-module、systemjs-importmap 进行处理

getOrCreateLoad -> loader.instantiate(id, firstParentUrl) loader 就是 Systemjs -> systemInstantiate 判断 shouldFetch（js false， css true

进入 getOrCreateLoad

getOrCreateLoad 解析模块的依赖项进行处理创建依赖的 load 赋值在 load.d 中。

getOrCreateLoad 返回 load 对象

    // Capital letter = a promise function
    return load = loader[REGISTRY][id] = {
      id: id,
      // importerSetters, the setters functions registered to this dependency
      // we retain this to add more later
      i: importerSetters,
      // module namespace object
      n: ns, // import 导出的模块

      // instantiate
      I: instantiatePromise,
      // link
      L: linkPromise,
      // whether it has hoisted exports
      h: false,

      // On instantiate completion we have populated:
      // dependency load records
      d: undefined, // 模块依赖，需提前加载
      // execution function
      e: undefined,

      // On execution we have populated:
      // the execution error if any
      er: undefined,
      // in the case of TLA, the execution promise
      E: undefined,

      // On execution, L, I, E cleared

      // Promise for top-level completion
      C: undefined,

      // parent instantiator / executor
      p: undefined
    };

systemInstantiate 通过 shouldFetch 判断资源是否需要 fetch 来加载，js 文件类型通过