Question

每当我更改es6文件时，我都会使用grunt和grunt-babel来转换ES6代码。但是，似乎我在其中一个文件中有错误，因为当我进行更改时收到此消息

 <% @autos.each do |auto| %>

       <tr class="list">

         <td><%= image_tag auto.fotos.first.to_s , size: "50x50" %></td>
         <td><%= auto.ciudad %></td>
         <td><%= auto.marca %></td>
         <td><%= auto.modelo %></td>
         <td><%= auto.version %></td>
         <td><%= auto.año %></td>
         <td><%= auto.hp %></td>
         <td><%= auto.km %></td>
         <td><%= link_to 'Show', auto %></td>
         <td><%= link_to 'Edit', edit_auto_path(auto) %></td>
         <td><%= link_to 'Destroy', auto, method: :delete, data: { confirm: 'Are?' }%></td>

       </tr>

     <% end %>

我有几个问题。

scripts / test.es6.js是一个正确的ES6文件，但由于脚本/ actions.es6.js中的错误而更改了它的ES5版本并没有出现在我的输出文件夹中 - 为什么？
如何在ES6代码中找到此错误？
为什么没有强制标志导致其编译？

由于

这是test.es6.js

Waiting...
>> File "scripts/test.es6.js" changed.
Running "babel:files" (babel) task
Warning: scripts/actions.es6.js: Unexpected token (38:5) Used --force, continuing.

Done, but with warnings.
Completed in 0.758s at Mon Sep 14 2015 20:11:53 GMT-0700 (PDT) - Waiting...

这是actions.es6.js

class Person {                                          // The 'class' keyword
    constructor(name, age) {                            // Constructors
        this.name = name;
        this.age = age;
    }
}

class Developer extends Person {                        // The 'extends' keyword
    constructor(name, age, ...languages) {              // Rest parameters
        super(name, age);                               // Super calls
        this.languages = [...languages];                // The spread operator
    }
    printLanguages() {                                  // Short method definitions
        for(let lang of this.languages) {               // The for..of loop
            console.log(lang);
        }
    }
}

let me = new Developer("James", 23, "ES5", "ES6");     // Block scoping hello

错误发生在var id = datum.id;

Answer 1

scripts / test.es6.js是一个正确的ES6文件...

是的，但scripts/actions.es6.js不是。第Warning: scripts/actions.es6.js: Unexpected token (38:5) Used --force, continuing.行告诉您actions.es6.js有一个意外的令牌。例如，它无法编译。那是在停止巴别塔的任务。显然，Babel正在actions.es6.js之前编译test.es6.js，并在actions.es6.js找到错误时进行轰炸。

如何在ES6代码中找到此错误？

查看actions.es6.js的第38行，第5行。这就是错误消息中指出的(38:5)。修复错误，Babel将能够继续编译。

为什么强制标志不会导致编译？

--force标志只是告诉Grunt继续前进，但 Babel的已经失败。

您已经发布了actions.es6.js的代码，该错误确实在第38行附近（它位于第37行，但在下一行之前实际发生的错误通常不会发生）。您需要在第37行末尾{和第40行}之前的);：

_.each(data, datum => {
    var id = datum.id;
    demographiesDfd.push($.getJSON("http://localhost:8080/district/${id}/demography"));
});

...或者如果您不打算将id用于模板字符串中的一个地方以外的任何地方，您可以将其保留为一行：

_.each(data, datum => demographiesDfd.push($.getJSON("http://localhost:8080/district/${datum.id}/demography")));

使用箭头功能，如果您有多个语句，则必须使用大括号。一般情况下，我建议对任何不是一个 short 表达式的箭头函数使用大括号（对于 me ，它必须足够短以便在{{1}上行，但其他人有不同的观点）。例如，这很好：

=>

...但是当你进入比这长得多的事情时，要么将其分解为命名函数，要么使用块someArray.map(entry => entry.prop);会更清楚。

Grunt监视任务无法转换ES6代码

1 个答案: