Grunt監視任務無法轉儲ES6代碼

Question

我使用grunt和grunt-babel來轉儲ES6代碼，只要我更改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. 腳本/ test.es6.js是一個正確的ES6文件，但是當它在腳本，因爲一個錯誤而改變它的ES5版本不會出現在我的輸出文件夾/ 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)); 
     ); 
    } 
} 

的錯誤是在無功ID = datum.id發生;

Answer 1

腳本/ 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代碼中發現此錯誤？

請看actions.es6.js第38行第5個字符。這就是錯誤信息中指出的(38:5)。修復那裏的錯誤，Babel將能夠繼續編譯。

爲什麼不是強制標記導致它編譯？

的--force標誌只是告訴咕嚕繼續下去，但巴貝爾的已經失敗了。

---

你已經張貼你的代碼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 。