我是Gulp的新手和任务选手的概念.我想用es6编写一些javascript,并通过jscs,jshint运行它,最后使用babel将其转换为es5.

我感到困惑的部分是我应该在我的gulp管道中完成这些任务的顺序.如果我先运行jshint,我会收到有关如何使用let和arrow函数的警告.但是,如果我首先使用babel转换我的代码,那么babel输出也会失败验证.

我正在寻找的是订购我的gulp任务的正确方法,以便验证并将我的代码转换为es5.

这是我目前的gulp任务.

gulp.task('js-validation', function() {
$.util.log('**Starting js validation**');

return gulp
    .src(config.alljs)
    .pipe($.print())
    .pipe($.jshint())
    .pipe($.jscs())
    .pipe($.babel())
    .pipe($.jshint.reporter('jshint-stylish', {verbose: true}))
    .pipe($.jshint.reporter('fail'))
    .pipe(gulp.dest(config.temp));

});

解决方法:

首先,如果可能,考虑转移到ESLint;我不是说这是因为它是一种主观意见,我说这是因为它是模块化的并且支持ES6,甚至是React JSX,如果那是你想要的地方.

你不会对JSHint有太多的好运,但是,如果ES6是你要去的地方.
如果/当我错了,请告诉我,但我相信他们还没有更换他们的解析器,支持所有的ES6,除非你要将整个浏览器polyfill库包含在管道中(只是为了没有遗漏的方法,为了验证工作),你可能会在这里感到茫然.

使用ESLint,您可以使用以下配置选项(在.eslintrc中,在package.json中等)获得ES6支持：

{
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "ecmaFeatures": {
    "modules": true,
    "jsx": true
  }
}

当然,如果您不需要节点全局,JSX或ES6模块,请随意将其删除.

另外另一个警告是ESLint不支持ES7(ES2016),但是(当它标准化时).
因此,不支持数组/生成器理解,async / await,函数参数列表中的尾随逗号等等,这将导致爆炸.

有一个babel-eslint版本的eslint将验证这些,如果这是你的要求.
你可以通过安装“babel-eslint”然后在你的eslint配置中,将{“parser”：“babel-eslint”}设置为根对象以及所有其他配置首选项来实现.

但通常情况下,您会使用ESLint和Babel将您放入系统的代码放入预编译中：

// ...
.pipe( eslint() )
.pipe( babel() )
// ...