使用array.filter引发gulp-uglify构建错误的解决求助

针对你遇到的旧项目构建问题，结合依赖版本（browserify^{10.2.4、gulp-react}3.0.1、gulp-streamify^{1.0.2、gulp-uglify}1.4.2），给出以下实用解决建议：

1. 排查array.filter的语法正确性 #

旧版工具链对语法容错性差，确保filter的回调函数始终返回布尔值，避免出现隐式返回undefined的情况：

• 错误示例（可能触发异常）：

arr = arr.filter(item => {
  if (condition) {
    return item.id !== targetId;
  }
  // 未返回值，默认返回undefined，等价于false
});

• 修正写法：

arr = arr.filter(item => condition ? item.id !== targetId : true);

2. 替换gulp-streamify为vinyl-source-stream+vinyl-buffer #

旧版gulp-streamify与browserify的流处理可能存在兼容问题，改用更稳定的流转换组合：

1. 安装依赖：

npm install vinyl-source-stream vinyl-buffer --save-dev

2. 修改gulp构建任务：

var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');

gulp.task('build', function() {
  return browserify('./src/index.js')
    .transform('reactify')
    .bundle()
    .pipe(source('bundle.js')) // 指定输出文件名
    .pipe(buffer()) // 将流转换为buffer格式，适配gulp-uglify
    .pipe(uglify())
    .pipe(gulp.dest('./dist'));
});

3. 升级gulp-uglify到兼容小版本 #

当前使用的gulp-uglify@1.4.2存在已知的流处理bug，升级到同系列的稳定小版本：

npm install gulp-uglify@1.5.4 --save-dev

（注：不要直接升级到2.x版本，会依赖更高版本的Node.js，旧项目可能不支持）

4. 确保gulp-react的转译配置正确 #

确认gulp-react（本质是reactify）将ES6语法转译为ES5，避免uglify无法识别：

// 在browserify的transform中添加ES6转译配置
.transform('reactify', { es6: true })

5. 临时替代方案：改用手动数组遍历 #

如果以上方法都无效，暂时放弃array.filter，改用老式的数组遍历写法，适配旧工具链：

if (condition) {
  var newArr = [];
  for (var i = 0; i < arr.length; i++) {
    if (arr[i].id !== targetId) {
      newArr.push(arr[i]);
    }
  }
  arr = newArr;
}

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