为什么在导入文本编码的填充后，我在ReferenceError中得到“TextEncoder‘是未定义的”？

Question

我正在尝试填充一个库fetch-readablestream (https://github.com/jonnyreeves/fetch-readablestream)。我已经添加了聚合填充，并且大多数事情都是有效的，但是我一直收到一个关于TextEncoder ERROR ReferenceError: 'TextEncoder' is undefined的错误。

我已经添加了所需的填充:网络流-多填充，文本编码，和babel-填充。我尝试过其他类似于这些填充的方法，但我也遇到了同样的问题。

在我未注释的所需的IE导入之后，我的polyfills.ts文件。

import 'web-streams-polyfill'; // Run `npm install --save web-streams-polyfill`.
import 'text-encoding'; // Run `npm install --save text-encoding`.
import 'babel-polyfill'; // Run `npm install --save babel-polyfill`.

我还尝试向index.html添加脚本

<script src="node_modules/text-encoding/lib/encoding-indexes.js"></script>
<script src="node_modules/text-encoding/lib/encoding.js"></script>

我不希望有任何错误，但我明白这一点：

ERROR ReferenceError: 'TextEncoder' is undefined
   "ERROR"
   {
      [functions]: ,
      __proto__: { },
      description: "'TextEncoder' is undefined",
      message: "'TextEncoder' is undefined",
      name: "ReferenceError",
      number: -2146823279,
      stack: "ReferenceError: 'TextEncoder' is undefined
   at responseParserFactory (http://localhost:4200/vendor.js:139703:3)
   at xhrTransport (http://localhost:4200/vendor.js:139960:1)
   at fetchStream (http://localhost:4200/vendor.js:139795:4)
   at DevicewiseService.prototype.getNotifications (http://localhost:4200/main.js:6577:9)
   at Anonymous function (http://localhost:4200/main.js:159:17)
   at SafeSubscriber.prototype.__tryOrUnsub (http://localhost:4200/vendor.js:145834:9)
   at SafeSubscriber.prototype.next (http://localhost:4200/vendor.js:145772:13)
   at Subscriber.prototype._next (http://localhost:4200/vendor.js:145715:5)
   at Subscriber.prototype.next (http://localhost:4200/vendor.js:145692:9)
   at MapSubscriber.prototype._next (http://localhost:4200/vendor.js:150984:5)",
      Symbol([[Cancel]])_g.r6fxkqwxet3: undefined,
      Symbol([[Pull]])_h.r6fxkqwxet3: undefined,
      Symbol(INITIAL_VALUE)_p.r6fxkqwxet3: undefined,
      Symbol(rxSubscriber)_o.r6fxkqwxet3: undefined
   }

我们可以看到这种情况发生在fetchStream调用中。

Answer 1

使用npm包：https://www.npmjs.com/package/text-encoding (现在不推荐了，但工作起来很有魅力)。

然后添加到polyfills.ts代码中：

if (typeof window['TextEncoder'] !== 'function') {
  const TextEncodingPolyfill = require('text-encoding');
  window['TextEncoder'] = TextEncodingPolyfill.TextEncoder;
  window['TextDecoder'] = TextEncodingPolyfill.TextDecoder;
}

不要使用import 'text-encoding';！

Answer 2

我能够通过在我的index.html头中包含这个脚本来填充文本编码。

<script src="https://cdn.jsdelivr.net/npm/text-encoding@0.6.4/lib/encoding.min.js"></script>

我还没有尝试过@iCrow的建议。这可能是一个更好的解决办法。

Answer 3

多亏了iCrow的回答，真的很有帮助。我的项目是基于Vue，我发现该网站不能很好地运行在IE 44上。犬科；

我按照iCrow的回答，将代码放入文件中。

// text-encoding-polyfill.js
;(function (window) {
  if (typeof window.TextEncoder !== 'function') {
    const TextEncodingPolyfill = require('text-encoding');
    window.TextEncoder = TextEncodingPolyfill.TextEncoder;
    window.TextDecoder = TextEncodingPolyfill.TextDecoder;
  }
}(window));

并将其导入应用程序入口文件的顶部。

// main.js
import 'text-encoding-polyfill.js';

// ...

webpack打包后的代码，终于IE边缘可以识别TextEncoder了！