Рабочий процесс Gulp для проверки и es 6

Question

Я новичок в Gulp и концепции задач бегунов. Я хочу написать javascript с помощью es6 и запустить gulp через jscs, jshint и, наконец, использовать babel, чтобы преобразовать его в es5.

Часть, с которой я смущен, - это тот порядок, в котором я должен был выполнять эти задачи в моем трубопроводе. Если я сначала запускаю jshint, я получаю предупреждения о том, как я не могу использовать функции let и arrow. Тем не менее, если я сначала конвертирую свой код с помощью babel, то вывод babel также не проходит проверку.

То, что я ищу, является правильным способом заказа моей задачи gulp, поэтому он проверяет и преобразует мой код в es5.

Это моя текущая задача с глотком.

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; Я не говорю, что, поскольку это субъективное мнение, я говорю это, потому что он модульный и поддерживает ES6, и даже React + JSX, если вы хотите пойти с ним.

Вам не очень повезет с JSHint, но если ES6 - это то, куда вы направляетесь. Если/когда я ошибаюсь, сообщите мне, но я считаю, что они еще не заменили свой синтаксический анализатор, чтобы поддержать все ES6, и если вы не включите всю библиотеку polyfill + в библиотеку (только ради отсутствия отсутствующих методов, для проверки работоспособности), вы можете быть в затруднении, здесь.

С ESLint на месте, вы можете использовать следующие параметры конфигурации (в .eslintrc, в package.json, и т.д.), чтобы получить поддержку ES6:

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

Конечно, если вы не» t нужны узловые глобальные модули, модули JSX или ES6, не стесняйтесь вырывать их.

Еще одна оговорка заключается в том, что ESLint не поддерживает ES7 (ES2016), но (но будет, когда он стандартизован). Таким образом, понимание типа/генератор, async/await, запятая в списках аргументов функций и т. Д. Не поддерживается и вызывает взрывы.

Существует версия eslint для babel-eslint, которая будет проверять их, если это ваше требование. Вы можете установить это на место, установив «babel-eslint», а затем в конфигурацию eslint, установив { "parser": "babel-eslint" } в корневой объект вместе со всеми вашими другими настройками конфигурации.

Но, как правило, вы бы нибудь вкусненькое код, который вы кладете в систему, предварительно скомпилировать, используя ESLint и Бабель:

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

Answer 2

Вместо JSHint, вы можете использовать ESLint, которая будет иметь поддержку многочисленных функций ES6:

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

Вы правильны, что вы хотите, чтобы ваш пылеобразования произойти до transpilation, также.

Answer 3

Чтобы выровнять исходный код (а не скомпилированный код), вы должны вызвать linter перед babel, поэтому порядок верен.

Однако вы должны использовать linter, который действительно понимает ES6. С JSHint вы должны установить esnext option, но я не уверен, поддерживает ли он все функции ES6. Я рекомендую посмотреть на eslint вместо babel-eslint.

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. У вас также должна быть функция для обработки ошибок при линии. Вот мой 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); 
}