gulpfile.babel.json 和 ReferenceError 的问题：未定义 require

问：

我的构建遇到了一个奇怪的问题，我的浏览器说：

Uncaught ReferenceError: require is not defined
    at app.js?ver=1.0.0:3:15

问题是：我没有在我的开发 js 文件中使用 require，我使用 package.json 作为模块 gulpfile.babel.js，带有 js 部分：

...
export function js() {
    return gulp
        .src(sources.scripts)
        .pipe(babel())
        .pipe(gulp.dest(`${paths.dist}/js/`))
        .pipe(browserSync.stream());
}
...

我的应用.js文件是：

import Swiper from 'swiper';
import { Navigation, Pagination } from 'swiper/modules';

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

const swiper = new Swiper('.full-slider', {
    modules: [Navigation, Pagination],
    loop: true,
});

而编译后的文件：dist/js/app.js

"use strict";

var _swiper = _interopRequireDefault(require("swiper"));
var _modules = require("swiper/modules");
require("swiper/css");
require("swiper/css/navigation");
require("swiper/css/pagination");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var swiper = new _swiper["default"]('.full-slider', {
  modules: [_modules.Navigation, _modules.Pagination],
  loop: true
});

我该如何解决这个问题？看起来代码是正确的，但构建代码是正确的。

搜索很多网站以了解正在发生的事情，更改为以前的 no babel gulp，但没有任何效果。

更新：这是我的整个gulpfile.babel.js

import gulp from 'gulp';
import babel from 'gulp-babel';
import postcss from  'gulp-postcss';
import imagemin from 'gulp-imagemin';
import { deleteAsync } from 'del';
import browserSync from 'browser-sync';
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';
import dartSass from 'sass';
import gulpSass from 'gulp-sass';

const sass = gulpSass(dartSass);

const paths = {
    src: './resources',
    dist: './dist',
}

const sources = {
    styles: `${paths.src}/scss/app.scss`,
    scripts: `${paths.src}/js/**/*.js`,
    images: `${paths.src}/images/**/*`,
    fonts: `${paths.src}/fonts/**/*`,
}

export const clean = () => deleteAsync([`${paths.dist}/**`]);

export function js() {
    return gulp
        .src(`${paths.src}/js/app.js`)
        .pipe(babel())
        .pipe(gulp.dest(`${paths.dist}/js/`))
        .pipe(browserSync.stream());
}

export function css() {
        return gulp
        .src(sources.styles)
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss([
            tailwindcss('./tailwind.config.js'),
            autoprefixer
        ]))
        .pipe(gulp.dest(`${paths.dist}/css/`))
        .pipe(browserSync.stream());
}

export function images() {
    return gulp
        .src(sources.images)
        .pipe(imagemin())
        .pipe(gulp.dest(`${paths.dist}/images`));
}

function previewReload(done) {
    browserSync.reload();
    done();
}

function serve() {
    browserSync({
        proxy: "localhost/wordpress"
    });
    
    gulp.watch(`${paths.src}/scss/**/*.scss`, css);
    gulp.watch(sources.scripts, js);
    gulp.watch(sources.images, images);
    gulp.watch('**/*.php', {
        ignored: [
            'node_modules/**',
            'vendor/**'
        ]
    }, gulp.parallel(css, previewReload));
}

export { serve as watch };

const dev = gulp.series(
    clean,
    gulp.parallel(js, css, images),
    serve
);

export const prod = gulp.series(
    clean,
    gulp.parallel(js, css, images)
);

export default dev;