Browserify - ParseError: 'import' and 'export' may appear only with 'sourceType: module

问题:

In my gulpfile I have

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"}));   }) 

and in my app.js I am trying to import but get the errror

import SimpleBreakpoints from 'simple-breakpoints' 

Any idea how to get rid of the error and use the import syntax?

Edit: the .babelrc

{     "presets": ["es2015"],  } 

回答1:

In your configuration, you pipe js/main.js to Babel, so that's the only file that will be transpiled. When Browserify requires app.js, it will seen ES6 content and will effect the error you are seeing.

You could use Babelify to solve the problem. It's a Browserify transform that will transpile the source that Browserify receives.

To install it, run this command:

npm install babelify --save-dev 

And to configure it, change your task to:

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" })); }) 

文章来源: Browserify - ParseError: 'import' and 'export' may appear only with 'sourceType: module