当在使用 Babel 和 Gulp 结合使用时,可能会遇到 "未捕获的 ReferenceError: require 未定义" 的报错。这通常是因为在浏览器环境中使用了 CommonJS 的 require 语法。
要解决这个问题,你可以使用 Browserify 或者 Webpack 来将代码打包成适用于浏览器环境的代码。下面是一个示例:
npm install --save-dev gulp gulp-babel @babel/core @babel/preset-env browserify vinyl-source-stream
const gulp = require('gulp');
const babel = require('gulp-babel');
const browserify = require('browserify');
const source = require('vinyl-source-stream');
gulp.task('babel', () =>
gulp.src('src/**/*.js')
.pipe(babel({
presets: ['@babel/preset-env']
}))
.pipe(gulp.dest('dist'))
);
gulp.task('browserify', () =>
browserify('dist/main.js')
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('dist'))
);
gulp.task('default', gulp.series('babel', 'browserify'));
{
"presets": ["@babel/preset-env"]
}
gulp
这样就会将 src 目录下的代码经过 Babel 编译,并使用 Browserify 将代码打包成一个可以在浏览器中运行的 bundle.js 文件。
希望以上解决方案能帮助到你解决报错问题。