Browserify - ParseError: «импорт» и «экспорт» может появиться только с «SourceType: модуль

Question

В моем gulpfile у меня есть

var gulp = require('gulp'); 
var browserSync = require('browser-sync').create(); 
var sass = require('gulp-sass'); 
var babel = require("gulp-babel"); 
var rename = require('gulp-rename'); 
var source = require('vinyl-source-stream'); 
var browserify = require('gulp-browserify'); 
var notify = require("gulp-notify"); 


gulp.task('js', function() { 
    gulp.src('js/main.js') 
     .pipe(babel()) 
     .pipe(browserify()) 
     .on('error', errorAlert) 
     .pipe(rename('./dist/js/bundle.js')) 
     //.pipe(uglify()) 
     .pipe(gulp.dest('./')) 
     .pipe(notify({title: "Success", message: "Well Done!", sound: "Glass"})); 


}) 

и в моем app.js я пытаюсь импортировать, но получить errror

import SimpleBreakpoints from 'simple-breakpoints' 

Любая идея, как избавиться от ошибки и использовать синтаксис импорта?

Изменить: .babelrc

{ 
    "presets": ["es2015"], 

} 

Answer 1

В конфигурации, конвейер js/main.js Бабель, так что это единственный файл, который будет transpiled. Когда Browserify требует app.js, он увидит содержимое ES6 и произведет ошибку, которую вы видите.

Вы можете использовать Babelify для решения проблемы. Это преобразование Browserify, которое преобразует источник, который получает Browserify.

Чтобы установить его, выполните следующую команду:

npm install babelify --save-dev 

и настроить его, изменить свою задачу:

gulp.task('js', function() { 
    gulp.src('js/main.js') 
     .pipe(browserify({ transform: ['babelify'] })) 
     .on('error', errorAlert) 
     .pipe(rename('./dist/js/bundle.js')) 
     //.pipe(uglify()) 
     .pipe(gulp.dest('./')) 
     .pipe(notify({ title: "Success", message: "Well Done!", sound: "Glass" })); 
})