Grunt监视任务无法翻译ES6代码

Grunt watch task failing to transpile ES6 code

本文关键字:翻译 ES6 代码 监视 任务 Grunt      更新时间:2023-09-26

每当我更改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文件,但ES5版本的它没有出现在我的输出文件夹,当它被改变,因为在scripts/actions.es6.js错误-为什么?
  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;

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在test.es6.js之前编译actions.es6.js,当发现actions.es6.js错误时轰炸。

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

看第38行,actions.es6.js的第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")));

对于箭头函数,如果有多条语句,则必须使用大括号。一般来说,我建议对任何不是一个表达式的箭头函数使用大括号(对于me,它必须足够短才能在=>行上,但其他人有不同的看法)。例如,this is fine:

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

…但是当你要处理比这长得多的东西时,将它分解成一个命名函数,或者使用块和return,这会更清楚。