2

我有一个应用程序需要在客户端对数据进行大量过滤，这就是为什么必须使用 Web 工作者来保持 UI 流畅的原因。我有一个网络工作者为我的一个过滤器工作，我遇到了 IE 问题，我的打字稿没有为网络工作者编译成 es5。

我已经在网上和堆栈上阅读过，因为网络工作者将在单独的执行上下文中运行，他们将无法访问 Angular 的 polyfill。

我知道我的 web worker 正在 IE11 中运行，因为我可以登录 web worker 上下文并在控制台中看到它。我也收到此错误，这意味着我的 ts 没有转换为正确版本的 js。

工人的错误

我尝试的是手动包含 Mozilla 文档中特定错误的 polyfill，但它不起作用。

如果有人对此有任何见解，将不胜感激：D

这是我的工人的 tsconfig

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/worker",
    "lib": [
      "ES2018",
      "webworker"
    ],
    "target": "es5",
    "types": []
  },
  "include": [
    "src/**/*.worker.ts"
  ]
}

这是我的角度应用程序的全局 tsconfig 文件

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types",
      "node"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "resolveJsonModule": true,
  }
}

这是我的工人，做了一些过滤

/// <reference lib="webworker" />

addEventListener('message', ({ data }) => {

  let filteredData = data[0];
  const params = data[1];
  const excludedFilters = ['level', 'sol_id', 'dac_name'];
  const location = params['dac_name'];

  for (let param of Object.entries(params)) {
    const key = param[0] as string;
    const val = param[1] as string;

    if (!excludedFilters.includes(key)) {
      filteredData = data[0].filter(obj => obj[key] === val)
    }
  }

  if (location) {
    if (location != 'All Data Centres') {
      filteredData = filteredData.filter(obj => obj['dac_name'] === location)
    }
  }

  postMessage(filteredData)
});

编辑：手动包含 polyfills 后，在 IE11 中我收到此错误： 新错误

错误现在说 worker.ts 而不是 worker.js

4

1 回答 1

0

在此处输入图像描述

从错误消息来看，似乎 worker.js 使用了 Object.entries 方法。根据Object.entries() 文档，我们可以看到 entries 方法不支持 IE 浏览器。

要在 IE 浏览器中使用它，您可以使用以下任何一种：

  1. 在 polyfill.ts 中添加这一行（如果 core-js 文件夹不包含 es7，请参考此链接更新 core-js）：

    import 'core-js/es7/object';

  2. 在 Index.html 的标头中添加以下脚本。

    <script>
if (!Object.entries) {
  Object.entries = function( obj ){
    var ownProps = Object.keys( obj ),
        i = ownProps.length,
        resArray = new Array(i); // preallocate the Array
    while (i--)
      resArray[i] = [ownProps[i], obj[ownProps[i]]];

    return resArray;
  };
}
</script>
于 2020-04-03T02:35:26.330 回答