gulp - Browserify - 解析错误 : 'import' and 'export' may appear only with '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" }));
})