使用 for..of 循环的 javascript 的 heroku 预编译错误

Question

我正在开发一个 Rails 应用程序。一切都在开发中运行良好。然后，我开始在 heroku 上部署我的 rails 应用程序。但是在预编译资产时，heroku 构建失败了。报如下错误。

rake aborted!
remote:        ExecJS::ProgramError: Unexpected token name «of», expected punc «;» (line: 15234, col: 16, pos: 937232)
remote:        Error

我的代码中似乎有“of”有问题。

我开始搜索并在 javascripit 文件中发现了“of”的用法，这可能是问题所在。

我在我的一个使用 for..of 循环的 javascript 文件中有这段代码

$.get("/paragraphimage/showzoom/" + itemid + "/" + msslug + "/" + pid, function(data){
            console.log(data);
            var i = 1;
            for(var zone of data){
                id = Math.random()
                if (i == 1){
                    $("#lbp-para-picture-window").append("<div id='openseadragon-" + id + "' style='width: " + zone.width + "px; height: " + zone.height + "px; margin: auto; padding-bottom: 5px;'></div>")
                }
                else{
                    $("#lbp-para-picture-window").append("<div id='openseadragon-" + id + "' style='width: " + zone.width + "px; height: " + zone.height + "px; margin: auto; padding-bottom: 5px;'></div>") 
                }
                showOpenseadragon(id, zone);
                i = i + 1
            };
        });

*只是为了澄清。 data 是一个 json 对象数组，我正在尝试遍历数组中的每个 json 对象。

“数据”如下所示：

   [
  {
    "scale": 0.9508716323296355,
    "bottom": 1727.7337559429477,
    "right": 768.3042789223455,
    "top": 1586.053882725832,
    "left": 168.30427892234547,
    "width": 600,
    "height": 141.67987321711567,
    "totalW": 1622.187004754358,
    "totalH": 2146.117274167987,
    "aspectratio": 1.3229777256740913,
    "xcomp": 0.10375146541617819,
    "ycomp": 0.9777256740914418,
    "heightcomp": 0.0873388042203986,
    "widthcomp": 0.3698710433763189,
    "image_url": {
      "scheme": "http",
      "authority": "images.scta.info:3000",
      "userinfo": null,
      "user": null,
      "password": null,
      "host": "images.scta.info",
      "port": 3000,
      "path": "/pp-reims/R1r.jpg",
      "query": null,
      "fragment": null
    }
  },
  {
    "scale": 0.9508716323296355,
    "bottom": 1038.351822503962,
    "right": 1347.3851030110934,
    "top": 167.35340729001584,
    "left": 747.3851030110935,
    "width": 600,
    "height": 870.998415213946,
    "totalW": 1622.187004754358,
    "totalH": 2146.117274167987,
    "aspectratio": 1.3229777256740913,
    "xcomp": 0.46072684642438455,
    "ycomp": 0.10316529894490033,
    "heightcomp": 0.536928487690504,
    "widthcomp": 0.3698710433763189,
    "image_url": {
      "scheme": "http",
      "authority": "images.scta.info:3000",
      "userinfo": null,
      "user": null,
      "password": null,
      "host": "images.scta.info",
      "port": 3000,
      "path": "/pp-reims/R1r.jpg",
      "query": null,
      "fragment": null
    }
  }
]

RubyMine 也不喜欢这种 for...of 循环，并将其突出显示为错误。

我开始查看这个：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of#Browser_compatibility

for...of 似乎是可接受的代码，但实验性的

我认为我可以将其更改为 for...in。但是 for...in 做了一些稍微不同的事情，而且似乎也被贬值了。 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for_each...in)

所以，问题：

这个for...of 是否可能是 Heroku 上预编译错误的原因？

如果是这样，为什么我的本地机器支持它而 Heroku 不支持它。

最后，我应该如何更改上面的 javascript 代码，以便 Heroku 可以成功预编译资产？

Answer 1

作为 ECMAScript 6 的一个特性，它可能不被完全支持，因为 ES6 还没有最终确定。如果您使用更传统的 for 循环，您可以将用于递增循环的代码与上下文结合起来。

for(i = 0;i<data.length;i++) {
  if (i == 0) {
    $("#lbp-para-picture-window").append("<div id='openseadragon-" + id + "' style='width: " + data[i].width + "px; height: " + data[i].height + "px; margin: auto; padding-bottom: 5px;'></div>")
  } else {
    $("#lbp-para-picture-window").append("<div id='openseadragon-" + id + "' style='width: " + data[i].width + "px; height: " + data[i].height + "px; margin: auto; padding-bottom: 5px;'></div>") 
  }
  showOpenseadragon(id, data[i]);
}

请注意，它从 0 开始，而不是 1。除非我遗漏了什么，否则else 条件中的代码与if 条件相同。因此，如果没有必要，您可以对其进行重构。