Browserify und Babel schlucken Aufgaben

Question

Ich möchte sowohl Browserify und Babel mit meinem JavaScript verwenden. Dafür habe ich einen Schluck Aufgabe

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

Leider, wenn ich import in meinem Code verwenden möchten, erhalte ich eine Fehlermeldung:

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

Meine Haupt js Datei ist sehr einfach:

import 'directives/toggleClass'; 

Ich vermute, dass es wegen Babel ist (und es ist use strict zusätzlich), aber was kann ich tun?

Answer 1

Babel unterhält eine offizielle Transformation für Browserify namens babelify und sollte verwendet werden, wo immer es möglich ist, wenn Sie babel und browserify verwenden.

Lassen Sie die Verwendung von Babel direkt und platzieren Sie Babelify als Transform-Plugin für browserify. Es gibt viele Möglichkeiten, browserify zu konfigurieren, aber die Angabe von config in Ihrem package.json wäre wahrscheinlich am einfachsten.

Ihre schluck Aufgabe wird es dann

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

Browserify auch Verfahren vereinfacht werden, macht dies programmatisch zu tun, damit Sie in der Lage sein wird, die Bündler aus Ihrem schluck Aufgabe (dropping das Paket Config zu konfigurieren, obwohl die Verwendung des Pakets ist völlig in Ordnung für diese), überprüfen Sie ihre Dokumentation und experimentieren, ich habe es vorher getan, aber es ist eine lange Zeit seit ich Schluck (verwenden Schluck hier ist nur eine Komplikation, die Sie nicht brauchen, aber ich nehme an, dass Sie verwenden an anderer Stelle in der Build-Pipeline, wo es hilfreicher sein könnte).