Задачи Browserify и Babel gulp

Я хочу использовать Browserify и Babel с моим JavaScript. Для этого я создал задачу gulp

gulp.task('babel', function() {
    return gulp.src('_babel/*.js')
        .pipe(browserify({ insertGlobals : true }))
        .pipe(babel({ presets: ['es2015'] }))
        .pipe(gulp.dest('_dev/js'));
});

К сожалению, когда я хочу использовать import в своем коде, я получаю сообщение об ошибке:

ParseError: 'import' and 'export' may only appear at the top level

Мой основной файл js очень прост:

import 'directives/toggleClass';

Я предполагаю, что это из-за Babel (и это дополнение use strict), но что я могу сделать?

Ответы

Ответ 1

Вавилон поддерживает официальное преобразование Browserify под названием babelify, и он должен использоваться везде, где это возможно, при использовании babel и браузера.

Оставьте использование babel напрямую и поместите babelify в качестве плагина преобразования для браузера. Существует много способов настройки браузера, но определение конфигурации в вашем package.json, вероятно, будет самым простым.

"browserify": { 
  "transform": [["babelify", { "presets": ["es2015"] }]]
}

Ваша задача gulp будет упрощена

gulp.task('babel', function() {
    return gulp.src('_babel/*.js')
        .pipe(browserify({ insertGlobals : true }))
        .pipe(gulp.dest('_dev/js'));
});

Browserify также предоставляет методы для этого программным образом, чтобы вы могли сконфигурировать связной изнутри вашей задачи gulp (отбрасывая конфигурацию пакета, хотя использование этого пакета для вас совершенно нормально), проверьте их документацию и эксперимент, Я делал это раньше, но это было давно, так как я использовал gulp (используя gulp здесь просто осложнение, которое вам не нужно, но я ожидаю, что вы используете его в другом месте в своем конвейере сборки, где это может быть более полезным).