How to compile es6 syntax with gulp?

my original idea was to use gulp as an automation tool, write es6 syntax, compile es6 to es5 through gulp-babel and obfuscate compression, and then debug through sourcemap, but the problem now is that the require function generated when gulp-babel compiles import or generator functions is not recognized. The technical solution found on the Internet is to package and compile es6 through webpack-stream, but it has not been tried successfully.
is it possible to compile es6 through gulp,gulp-babel,webpack-stream? I am so confused now that I don"t know whether to compile es6, with gulp is through the combination of gulp,gulp-babel,webpack-stream or gulp,webpack-stream.

my ultimate expectation is that
compiles es6 with gulp (modules such as import and generator are supported instead of castrated versions), generates a single js file that is obfuscated and compressed, and debugs the code through sourcemap. Ask the great god for advice. It is best to write down the configuration file for gulpfile.js.

paste the configuration file I am trying:

gulp.task("babel",function () {
    /*return gulp.src(["src/es6/!**!/base.js","src/es6/!**!/index.js"])
        .pipe(sourcemaps.init())
        .pipe(babel({
            presets: ["@babel/env"],
            plugins: ["@babel/transform-runtime"]
        }))
        .pipe(concat("index.min.js"))
        .pipe(webpack())
        .pipe(uglify())
        .pipe(sourcemaps.write("../maps"))
        .pipe(gulp.dest("dist/js/"));
    console.log("babel",new Date().getTime());*/
    return gulp.src("src/es6/**/index.js")
        .pipe(webpack())
        .pipe(gulp.dest("dist/"));
});
Nov.09,2021

link

this is a document I wrote earlier, which you can refer to.

Menu