javascript - 如何使用 Browserify 在 Gulp 4 中导入/导出模块？

Question

我正在尝试将一个功能导入另一个功能。当我启动 js 编译任务时出现错误ParseError: 'import' and 'export' may appear only with 'sourceType: module' ，我尝试使用 browserify 转换功能修复它。但它也没有奏效。它说.transform is not a function。所以我的问题是如何修复我的 gulpfile 以使用导入/导出功能？

const gulp = require('gulp');
const browserify = require('gulp-browserify');
const babelify = require('babelify');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();
const imagemin = require('gulp-imagemin');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');
const cleanCSS = require('gulp-clean-css');
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const plumber = require('gulp-plumber');
const cache = require('gulp-cache');

const paths = {
    jsSrc: 'src/js/**/*.js',
    jsDist: 'dist/js'
};

function sync() {
    return browserSync.init({
        proxy: 'localhost:8888/cspec'
    });
}

function js(){
    return gulp.src(paths.jsSrc)
    .pipe(browserify())
    .pipe(babel({
        presets: ['@babel/preset-env']
    }))
    .pipe(uglify())
    .pipe(concat('main.min.js'))
    .pipe(gulp.dest(paths.jsDist))
    .pipe(browserSync.reload({
        stream: true
    }));
}

function watchFiles() {
    gulp.watch(paths.jsSrc, js);
    gulp.src('dist/js/main.min.js')
}

gulp.task('sync', sync);
gulp.task('js', js);
gulp.task('images', images);

gulp.task('default', gulp.parallel(js, images));
gulp.task('watchFiles', gulp.parallel(watchFiles, sync));

标签： javascriptgulpbabeljsgulp-watch