Grunt watch 任务无法转换 ES6 代码

Question

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

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...

我有几个问题。

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

谢谢

这是测试。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

这是动作。es6.js

/*
 * Action types
 */

export const REQUEST_DISTRICTS = 'REQUEST_DISTRICTS';

export function requestDistricts(geoState) {
    return {
        type: REQUEST_DISTRICTS,
        geoState
    };
}

export const RECEIVE_DISTRICTS = 'RECEIVE_DISTRICTS';

export function receiveDistricts(geoState, json) {
    return {
        type: RECEIVE_DISTRICTS,
        geoState,
        receivedAt: Date.now(),
        districts: json.data.districts.map(district => district.data)
    }
}

export function fetchDistricts(geoState) {

    return function (dispatch) {
        dispatch(requestDistricts(geoState));
        var districtsDfd = $.ajax({
            url: "http://localhost:8080/districts/",
            type: "GET",
            dataType: "json"
        });
        var demographiesDfd = [];
        $.when(districtsDfd).then(function(data, textStatus, jqXhr){
            if (data) {
                _.each(data, datum => 
                    var id = datum.id;
                    demographiesDfd.push($.getJSON("http://localhost:8080/district/${id}/demography"));
                );
            }
        });
        $.when(...demographiesDfd).done(result =>
            //so I have demographic data right now. 
            dispatch(receiveDistricts(geoState, result));
        );
    }
}

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

Answer 1

scripts/test.es6.js is a correct ES6 file...

是的，但 scripts/actions.es6.js 不是。 Warning: scripts/actions.es6.js: Unexpected token (38:5) Used --force, continuing. 行告诉您 actions.es6.js 有一个意外的标记。例如，它无法编译。那就是停止 Babel 任务。显然，Babel 在 test.es6.js 之前编译 actions.es6.js 并在发现 actions.es6.js.

中的错误时进行轰炸

How do I find this error in my ES6 code?

查看第 38 行，actions.es6.js 的第 5 个字符。这就是错误消息中的 (38:5) 指出的内容。修复那里的错误，Babel 就可以继续编译了。

Why isn't the force flag causing this to compile?

--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，它必须足够短才能在 => 行，但其他人有不同的看法）。例如，这很好：

someArray.map(entry => entry.prop);

...但是当你进入比这更长的事情时，将它分解成一个命名函数，或者使用一个块和 return.[=32 会更清楚=]

Grunt watch 任务无法转换 ES6 代码

Grunt watch task failing to transpile ES6 code

javascript

ecmascript-6

babeljs

grunt-babel