Web Worker onMessage 在 IE11 中為 null

Question

我在我的 React 應用程序的 IE11 中收到錯誤“Promise is Undefined”。 當我在代碼中使用 Worker 時

const worker = new Worker('./worker.ts')
console.log('worker' , worker);

當我檢查 Chrome 和 IE 11 中的日志時，Chrome 返回 worker onMessage 作為函數，而 IE 11 返回 null，我還看到消息“權限被拒絕”。 我還在 IE 11“Promise is Undefined”中收到此錯誤。

我在文件的開頭導入了 import 'babel-polyfill' 。 除了這個 Worker 之外，所有其他 Promise 都工作正常。

我怎樣才能解決這個問題？

Answer 1

React 可能無法立即與 IE 兼容，

來自官方文檔：

React 支持所有流行的瀏覽器，包括 Internet Explorer 9 及更高版本，盡管舊瀏覽器（如 IE 9 和 IE 10）需要一些 polyfill。

我們不支持不支持 ES5 方法的舊版瀏覽器，但如果頁面中包含 es5-shim 和 es5-sham 等 polyfill，您可能會發現您的應用程序可以在舊版瀏覽器中運行。 如果你選擇走這條路，你就是靠自己。

---

要使您的應用程序在 IE（11 或 9）上運行，您必須安裝 React-app-polyfill：

https://www.npmjs.com/package/react-app-polyfill

特征：

每個 polyfill 確保存在以下語言特性：

Promise (for async / await support)
window.fetch (a Promise-based way to make web requests in the browser)
Object.assign (a helper required for Object Spread, i.e. { ...a, ...b })
Symbol (a built-in object used by for...of syntax and friends)
Array.from (a built-in static method used by array spread, i.e. [...arr])

用法

首先，使用 Yarn 或 npm 安裝包：

npm install react-app-polyfill

現在，您可以導入您打算支持的最小版本的入口點。 例如，如果您導入 IE9 入口點，這將包括 IE10 和 IE11 支持。

瀏覽器 9

// This must be the first line in src/index.js
import 'react-app-polyfill/ie9';

// ...

瀏覽器 11

// This must be the first line in src/index.js
import 'react-app-polyfill/ie11';

// ...

---

您還可以使用以下文檔配置您的清單以處理不同的瀏覽器： https ://github.com/browserslist/browserslist

例子：

"browserslist": [
    ">0.2%",
    "not dead",
    "ie >= 9"
]

Answer 2

通過在 worker.ts 的頂部添加 import 'babel-polyfill' 來修復它。

注意：我已經在 index.js 中導入了 babel-polyfill。 但是對於工人，我不得不再次添加它。