Połšczenia przeglšdajšce i Babel Gulp

Question

Chcę używać zarówno przeglądarki, jak i Babel z moim JavaScript. W tym celu stworzyłem zadanie haustem

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

Niestety, kiedy chcę użyć import wewnątrz mojego kodu, otrzymuję błąd:

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

Główny plik js jest bardzo prosta:

import 'directives/toggleClass'; 

Zgaduję, że to z powodu Babel (i jest to dodatek use strict), ale co mogę zrobić?

Answer 1

Babel utrzymuje oficjalną wersję dla Browserify o nazwie babelify i powinno być używane tam, gdzie to możliwe, jeśli używasz babel i przeglądasz.

Upuść korzystanie z babel bezpośrednio i umieść babelify jako wtyczkę transformującą do przeglądania. Istnieje wiele sposobów konfigurowania przeglądania, ale określenie konfiguracji w twoim package.json byłoby najprawdopodobniej najłatwiejsze.

Twoim zadaniem łyk zostaną uproszczone

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

Browserify naraża również sposoby, aby to zrobić programowo, dzięki czemu będą mogli skonfigurować Bundler od wewnątrz zadania haustem (upuszczenie config pakiet, chociaż za pomocą pakietu jest idealnie do tego), sprawdź ich dokumentację i eksperymentuj, zrobiłem to wcześniej, ale minęło dużo czasu odkąd użyłem łyka (używanie łyku tutaj jest tylko komplikacją, której nie potrzebujesz, ale oczekuję, że używasz to gdzie indziej w twojej budowie, gdzie może być bardziej pomocne).