Задачи 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 дополнение), но что я могу сделать?


javascript babeljs gulp browserify
person Tomek Buszewski    schedule 14.12.2015    source источник
comment
Помогает ли вообще изменение порядка (размещение babel перед браузером)?   -  person JCOC611    schedule 15.12.2015
comment
Нет, пробовал так, удаление babel тоже не помогает.   -  person Tomek Buszewski    schedule 15.12.2015
comment
Не ответ, но вы пытались вместо этого использовать github.com/babel/babelify?   -  person Misiur    schedule 15.12.2015
comment
вам нужно сделать файл .babelrc с помощью babel 6   -  person PhilVarg    schedule 15.12.2015
comment
Browserify работает с модулями Common JS. Вы используете модули ES6. Перед использованием Browserify вам необходимо перенести ваши модули ES6 в commonJS.   -  person Boris Marinov    schedule 16.12.2015
comment
Вы, вероятно, должны уточнить, как это сделать. Самый простой способ — использовать babelify. Я пытался прокомментировать ваш ответ, Бобби.   -  person Matt Styles    schedule 16.12.2015

Ответы (1)


arrow_upward
14
arrow_downward

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

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

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

Ваша задача глотка будет упрощена

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

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

person Matt Styles    schedule 16.12.2015