用于 Angular 应用程序的 polyfill，具有从 CLI 创建的 Web Worker

Question

我有一个应用程序需要在客户端对数据进行大量过滤，这就是为什么必须使用 Web Worker 来保持 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"
  ]
}

这是我用于 angular 应用程序的全局 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

Answer 1

从错误信息来看，似乎是 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>