Gulp 验证和 es 6 的工作流程

Question

我是 Gulp 和任务概念运行的新手。我想用 es6 写一些 javascript 并通过 jscs、jshint 得到 gulp 运行，最后使用 babel 将它转换为 es5。

我感到困惑的部分是我应该在 gulp 管道中处理这些任务的顺序。如果我先运行 jshint，我会收到关于我如何不能使用 let 和箭头函数的警告。但是，如果我首先使用 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));

});

Answer 1

您可以使用 ESLint 而不是 JSHint，它将支持大量 ES6 功能：

http://eslint.org/docs/user-guide/configuring

您也希望 linting 在转译之前发生，这是正确的。

Answer 2

要 lint 源代码（而不是编译后的代码），您必须在 babel 之前调用 linter，所以顺序是正确的。

但是，你必须使用真正理解 ES6 的 linter。使用 JSHint，您必须改为设置 esnext option, but I'm not sure whether it supports all ES6 features. I recommend to have a look at eslint with babel-eslint。

Answer 3

首先，如果可能的话，考虑转向ESLint；我这么说并不是因为这是一个主观意见，我这么说是因为它是模块化的并且支持 ES6，如果你愿意的话，甚至可以支持 React+JSX。

如果 ES6 是你要去的地方，你不会在 JSHint 上有很多运气。 If/when 我错了，请告诉我，但我相信他们还没有更换他们的解析器，以支持所有的 ES6，除非你打算在管道（只是为了不遗漏方法，为了验证工作），你可能会在这里不知所措。

有了 ESLint，您可以使用以下配置选项（在 .eslintrc 中，在 package.json 中，等等）来获得 ES6 支持：

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

当然，如果您不需要节点全局变量、JSX 或 ES6 模块，请随意删除它们。

另一个警告是 ESLint 不支持 ES7 (ES2016)，但是（但是，当它标准化时）。因此 array/generator 推导式，async/await，函数参数列表中的尾随逗号等，不被支持并且会导致爆炸。

有一个 babel-eslint 版本的 eslint 可以验证这些，如果这是你的要求的话。您可以通过安装 "babel-eslint" 然后在您的 eslint 配置中将其放置到位，将 { "parser": "babel-eslint" } 设置为根对象，以及所有其他配置首选项。

但通常情况下，您会使用 ESLint 和 Babel 对要放入系统的代码进行 lint 预编译：

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

Answer 4

这对我有用：

.pipe(jshint({
        esnext: true
    }))

Answer 5

gulp.task('jshint', function () {
    gulp.src('js/**/*.js')
    .pipe(cache('jshint'))
    .pipe(jshint({esnext:true}))
    .pipe(jshint.reporter('default'));
});

.pipe(jshint({esnext:true}))

Answer 6

您的顺序正确，但正如其他答案所建议的那样使用 ESLint。您还应该有一个函数来处理 linting 时的错误。这是我的 gulpfile.js（不是一个完美的例子，但它对我有用）：

const gulp = require("gulp"),
    babel = require("gulp-babel"),
    eslint = require("gulp-eslint");

gulp.task("babel", () => {
    gulp.src("src/*.js")
        .pipe(eslint())
        .pipe(eslint.format())
        .pipe(eslint.failAfterError())
        .on("error", onError) // handle error for eslint
        .pipe(babel())
        .on("error", onError) // handle error for babel
        .pipe(gulp.dest("dist"));
});

gulp.task("watch", () => {
    process.chdir(process.env.INIT_CWD);
    gulp.watch("src/*.js", ["babel"]);
});

// ignore if error is from babel, eslint error message is enough
if (err.plugin != "gulp-babel" && err.message) {
  console.log("Message: ", err.message);
}

Gulp 验证和 es 6 的工作流程

Gulp workflow for validation and es 6

javascript

jshint

gulp

babeljs