single spa ie11 兼容性问题解决

/ 2021-06-12 / 594人浏览 / 0人评论

最近同事发现前端项目中使用single-spa,出现不兼容性问题,找我来协助下。我去捣鼓了一下,看了下官网关于angular的处理方案,如下:

Internet Explorer If you need to support IE11 or older, do the following: 1.Add core-js polyfill 2.Remove arrow functions from index.html (example) 3.Change angular.json target to es5 (example) Full example commit to get IE11 support

加入polyfill core-js

index.html 引入如下js

<script src='https://unpkg.com/core-js-bundle/minified.js'></script>

index.html 中 箭头函数改掉

官网给了example,如下:

  }
    </script>
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.5/system/single-spa.min.js" as="script" crossorigin="anonymous" />
    <script src='https://unpkg.com/core-js-bundle@3.1.4/minified.js'></script>
    <script src="https://unpkg.com/zone.js"></script>
    <script src="https://unpkg.com/import-map-overrides@1.6.0/dist/import-map-overrides.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/system.min.js"></script>
@@ -30,20 +31,32 @@
      System.import('single-spa').then(function (singleSpa) {
        singleSpa.registerApplication(
          'navbar',
          // () => System.import('navbar'),
          // location => true
          function () {
            return System.import('navbar');
          },
          function (location) {
            return true;
          }
        )

        singleSpa.registerApplication(
          'app1',
         // () => System.import('app1'),
         // location => location.pathname.startsWith('/app1')
          function () {
            return System.import('app1');
          },
          function (location) {
            return location.pathname.startsWith('/app1');
          }
        );

        singleSpa.registerApplication(
          'app2',
          // () => System.import('app2'),
          //  location => location.pathname.startsWith('/app2')
          function () {
            return System.import('app2');
          },
          function (location) {
            return location.pathname.startsWith('/app2');
          }
        )

        singleSpa.start();

按照这个把你们的不兼容函数改掉

es2015 -> es5

 "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    // "target": "es2015", 
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],

----- 后面发现

接着上面 ,项目中用的是single-spa-vue ,按照上面处理完之后发现遇到 Application 'user-server' died in status LOADING_SOURCE_CODE: "does not export an unmount function or array of functions"   这个问题

后面看了半天,发现我用的 single-spa-vue 版本是 1.5.4 ,这个版本 还不兼容,直接 single-spa-vue 升级到最新版本。

参考: https://single-spa.js.org/docs/ecosystem-angular/#internet-explorer

全部评论