Browserify - ParseError:'import'和'export'可能只出现'sourceType:module

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我试图导入但得到错误

import SimpleBreakpoints from 'simple-breakpoints'

知道如何摆脱错误并使用导入语法吗？

编辑:.babelrc

{
    "presets": ["es2015"],

}

Answer 1

在您的配置中，您通过管道js/main.js传输到Babel，因此这是唯一将被编译的文件。当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" }));
})