Grunt监视任务无法翻译ES6代码
Grunt watch task failing to transpile ES6 code
每当我更改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文件,但ES5版本的它没有出现在我的输出文件夹,当它被改变,因为在scripts/actions.es6.js错误-为什么?
- 我如何在ES6代码中找到这个错误?
- 为什么不强制标志导致这个编译?
这是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
,这会更清楚。
- ES6构造函数返回基类的实例
- 如何在下面的ES6循环中获得前面的文本
- 如何在javascript上使用flak-babel进行翻译
- es6 相当于下划线查找位置
- 如何在Javascript/ES6中的Aurelia浏览器应用程序中使用AWS S3
- 使用谷歌网站翻译器自动翻译网页
- jsi18n-django.catogue没有'不包含任何已翻译的字符串(但是djangojs.mo包含)
- ES6生成器:.next()的输入值
- 简单的ES6承诺问题-交换解决和拒绝参数
- 映射数组ES6时考虑空值
- @@(“at at”)在ES6 JavaScript中是什么意思
- 在ES6中,模块将导致多个网络调用,因为两个模块不能在单个文件中定义
- ES6是否引入了一种机制来生成块范围的函数语句(而不是表达式)
- 使用Ember-cli项目中的ES6库
- JShint-.jshintrc中的ES6有esversion,但仍收到警告(使用atom)
- 在ES6 Promise中,我应该在解决/拒绝之前使用return吗
- Unexpected Transpile ES6>ES5
- 可以合并或嵌套ES6导入
- ES6 模板文字是否比 eval 更安全
- Grunt监视任务无法翻译ES6代码