在 AJV 代码中发现传播运算符的 IE 11“预期标识符”错误答案

【问题标题】：IE 11 "Expected Identifier" error on spread operator found in AJV code在 AJV 代码中发现传播运算符的 IE 11“预期标识符”错误
【发布时间】：2020-04-13 14:36:16
【问题描述】：

在我的 Angular 6 应用程序中，我在 IE 11 中收到控制台错误，显示为“Script1010:”Expected Identifier”。常绿浏览器没有问题。

错误发生在第一个“。”在展开算子函数中，在捆绑的js文件中标识为：

function(e,t,n){"use strict";function 1(...e){if(e.length>1)
{e[0]=e[0].slice(0,-1);const t=e.length-1;for(let n=1;n<t;++n)e[n]=e[n].slice(1,-1);return e[t]=e[t].slice(1),e.join("")}

搜索这行代码周围的关键字，我发现它来自 ajv.min.js 文件，具体来说，可能在文件的这个代码部分中：

44: [function(e, r, t) {
        var a;
        a = this,
            function(e) {
                "use strict";

                function C() {
                    for (var e = arguments.length, r = Array(e), t = 0; t < e; t++) r[t] = arguments[t];
                    if (1 < r.length) {
                        r[0] = r[0].slice(0, -1);
                        for (var a = r.length - 1, s = 1; s < a; ++s) r[s] = r[s].slice(1, -1);
                        return r[a] = r[a].slice(1), r.join("")
                    }
                    return r[0]
                }

显然，展开运算符没有被转换成 IE11 可以消化的东西，浏览器在 (...e) 函数参数的第一个句点上出现“预期标识符”错误。

对解决该问题的解决方法或特定 polyfill 有什么建议吗？

【问题讨论】：

标签： internet-explorer-11 ajv

【解决方案1】：

IE浏览器不支持Spread syntax和Rest parameter，要得到同样的结果，可以参考以下方法：

方法一：
使用 JavaScript 方法（例如：foreach 或数组方法）循环遍历参数或数组项，而不是使用 Spread 语法或 Rest Parameter。更多详细信息，请查看以下链接：

Spread Operator equivalent in IE - Javascript

ES6 spread syntax IE not supported

Alternatives of spread syntax

方法二：
使用 @babel/polyfill 和 babel-plugin-transform-object-rest-spread 填充物。尝试使用以下命令安装 polyfill：

npm install --save @babel/polyfill

npm install --save-dev babel-plugin-transform-object-rest-spread

另外，由于 IE 浏览器不支持 ES 6 语法，请检查您的 polyfills.ts 文件，并取消注释 IE 浏览器的相关包。

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
 import 'core-js/es6/symbol';
 import 'core-js/es6/object';
 import 'core-js/es6/function';
 import 'core-js/es6/parse-int';
 import 'core-js/es6/parse-float';
 import 'core-js/es6/number';
 import 'core-js/es6/math';
 import 'core-js/es6/string';
 import 'core-js/es6/date';
 import 'core-js/es6/array';
 import 'core-js/es6/regexp';
 import 'core-js/es6/map';
 import 'core-js/es6/weak-map';
 import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
 import 'core-js/es6/reflect';


/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';

【讨论】：

+1 谢谢！我将尝试将 babel 导入添加到默认的 polyfills.ts 中，看看是否能解决问题。

【解决方案2】：

这里的问题在于 punycode.js。强制 punycode.js 到版本 1.4.1 解决了这个问题。我们的 ajv 版本导致加载更高版本的 punycode.js，并且该版本包含 ES6 代码，导致 IE 出错。

【讨论】：