如何修复Gulp 4结合Browserify时的import/export语法错误？

你遇到的两个问题其实是关联的：ParseError是因为你的JS文件用了ES模块语法，但编译工具没把它们当作模块处理；而.transform is not a function则是因为你用的gulp-browserify是个已废弃的插件，它不支持原生browserify的transform方法。下面是完整的修复方案：

第一步：替换废弃的依赖 #

先卸载过时的gulp-browserify，安装原生browserify及配套的流处理工具：

npm uninstall gulp-browserify
npm install browserify babelify @babel/core @babel/preset-env vinyl-source-stream vinyl-buffer --save-dev

第二步：修改你的gulpfile.js #

下面是调整后的完整代码，我标注了关键修改点：

const gulp = require('gulp');
// 替换gulp-browserify为原生browserify
const browserify = require('browserify');
const babelify = require('babelify');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();
const imagemin = require('gulp-imagemin');
const uglify = require('gulp-uglify');
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');
// 新增工具：转换browserify输出为Gulp兼容的流
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');

const paths = {
  // browserify需要一个入口文件（而非通配所有JS），假设主入口是src/js/main.js
  jsSrc: 'src/js/main.js',
  jsDist: 'dist/js'
};

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

function js(){
  // 创建browserify打包实例，指定入口并开启调试模式
  return browserify({
    entries: paths.jsSrc,
    debug: true,
    sourceType: 'module' // 明确指定模块类型，解决import/export的ParseError
  })
  // 用babelify转换ES6+语法，包括模块语法
  .transform(babelify, {
    presets: ['@babel/preset-env'],
    sourceMaps: true
  })
  // 执行打包并转换为Gulp流
  .bundle()
  .pipe(source('main.min.js')) // 指定输出文件名
  .pipe(buffer()) // 转为缓冲流，支持sourcemap和压缩工具
  .pipe(sourcemaps.init({ loadMaps: true })) // 加载打包生成的sourcemap
  .pipe(uglify()) // 压缩代码
  .pipe(sourcemaps.write('./')) // 生成独立的sourcemap文件
  .pipe(gulp.dest(paths.jsDist))
  .pipe(browserSync.reload({ stream: true }));
}

// 补充你原代码中缺失的images任务
function images() {
  return gulp.src('src/images/**/*')
    .pipe(cache(imagemin()))
    .pipe(gulp.dest('dist/images'));
}

function watchFiles() {
  // 监听所有JS模块文件，而非仅入口
  gulp.watch('src/js/**/*.js', js);
  gulp.watch('dist/js/main.min.js').on('change', browserSync.reload);
}

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

关键修改说明 #

• 替换依赖：废弃的gulp-browserify不再维护，原生browserify配合vinyl-source-stream/vinyl-buffer能完美适配Gulp流，且支持transform方法。
• 入口文件机制：browserify是基于入口的打包工具，它会自动解析所有依赖的模块，所以只需指定主入口（比如main.js），该文件可通过import导入其他模块。
• babelify处理模块：通过.transform(babelify)配置，让browserify在打包时用Babel转换ES模块语法，同时解决sourceType: module的报错。
• sourcemap支持：开启调试模式并配置sourcemap插件，方便开发时调试压缩后的代码。

验证步骤 #

1. 确保所有JS模块都通过入口文件导入，比如：

   // src/js/main.js
   import { myUtility } from './utils.js';
   myUtility();
   

2. 运行gulp js，查看dist/js目录是否生成main.min.js和对应的sourcemap文件。
3. 运行gulp watch，修改JS文件后浏览器会自动刷新，且无报错。

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