1

每当我更改 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...

我有几个问题。

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

谢谢

这是 test.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

这是actions.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;

4

1 回答 1

4

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 任务。显然，Babel 正在编译actions.es6.js之前test.es6.js并在发现actions.es6.js.

如何在我的 ES6 代码中找到这个错误？

查看第 38 行，第 5 个字符actions.es6.js。这就是(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")));

使用箭头函数，如果您有多个语句，则必须使用大括号。一般来说，我建议对不是一个短表达式的任何箭头函数使用大括号（对我来说，它必须足够短才能上=>线，但其他人有不同的看法）。例如，这很好：

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

...但是当您处理比这更长的事情时，将其分解为命名函数或使用块和return.

于 2015-09-15T03:23:32.683 回答