gulpfile.babel.js构建报错：ReferenceError: require is not defined 求助

问题重现 #

浏览器控制台抛出错误：

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

开发代码使用ES6 import 语法引入Swiper：

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,
});

但经Gulp+Babel编译后，输出的dist/js/app.js将import转成了浏览器不支持的CommonJS require语法：

"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
});

问题原因 #

Babel默认仅转译ES6+语法（比如将箭头函数转成ES5函数，import转成require），但不处理模块打包。浏览器本身不支持CommonJS的require语法，因此直接运行编译后的代码会报错。

解决方案 #

需要在Gulp流程中加入模块打包工具（如Webpack），将所有依赖打包成浏览器可识别的单文件，同时处理CSS导入逻辑。

步骤1：安装依赖 #

执行以下命令安装所需工具：

npm install webpack webpack-stream babel-loader @babel/preset-env css-loader style-loader --save-dev

步骤2：修改Gulp的JS处理任务 #

更新gulpfile.babel.js中的js函数，替换原有的babel()为Webpack配置：

import webpack from 'webpack-stream';

// ... 其他原有代码保持不变

export function js() {
    return gulp
        .src(`${paths.src}/js/app.js`)
        .pipe(webpack({
            mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
            module: {
                rules: [
                    {
                        test: /\.js$/,
                        exclude: /node_modules/,
                        use: {
                            loader: 'babel-loader',
                            options: {
                                presets: ['@babel/preset-env']
                            }
                        }
                    },
                    {
                        test: /\.css$/,
                        use: ['style-loader', 'css-loader']
                    }
                ]
            },
            output: {
                filename: 'app.js'
            }
        }))
        .pipe(gulp.dest(`${paths.dist}/js/`))
        .pipe(browserSync.stream());
}

步骤3：调整CSS导入（可选） #

如果希望将Swiper的CSS合并到项目主CSS文件中，可将JS中的CSS导入移到app.scss中：

// app.scss
@import 'swiper/css';
@import 'swiper/css/navigation';
@import 'swiper/css/pagination';

// 原有SCSS代码...

之后删除JS文件中的import 'swiper/css'相关语句，避免Webpack重复处理。

步骤4：运行构建 #

执行原有Gulp命令即可完成打包：

# 开发环境
gulp
# 生产环境
NODE_ENV=production gulp prod

说明 #

• Webpack会将所有依赖（包括Swiper模块）打包进最终的app.js，浏览器可直接运行。
• style-loader会将CSS注入到页面的<style>标签中，若需提取独立CSS文件，可使用mini-css-extract-plugin替代style-loader。

内容的提问来源于stack exchange，提问作者Rafhael Marsigli