使用ES6语法时gulp-uglify在AngularJS项目中失效问题求助

这个坑我之前踩过！老版本的gulp-uglify只支持ES5语法，你代码里的箭头函数属于ES6特性，直接用它压缩肯定会报错。给你两个亲测有效的解决方案：

方案一：改用支持ES6的压缩插件gulp-uglify-es #

这是最直接的办法，不需要转译ES6，直接用兼容ES6的uglify版本：

1. 先安装依赖：

npm install gulp-uglify-es --save-dev

2. 修改你的Gulp任务代码：

const gulp = require('gulp');
const concat = require('gulp-concat');
const rename = require('gulp-rename');
// 导入支持ES6的uglify版本
const uglifyES = require('gulp-uglify-es').default;

gulp.task('minify-scripts', function() { 
  return gulp.src(jsFiles) 
    .pipe(concat('scripts.js')) 
    .pipe(gulp.dest(jsDest)) 
    .pipe(rename('scripts.min.js')) 
    .pipe(uglifyES()) // 替换成这个方法
    .pipe(gulp.dest(jsDest)); 
});

方案二：用Babel转ES5后再压缩（适合需兼容老浏览器的场景） #

如果你的项目需要兼容不支持ES6的老浏览器，推荐先把ES6代码转成ES5，再用原gulp-uglify压缩：

1. 安装必要依赖：

npm install gulp-babel @babel/core @babel/preset-env --save-dev

2. 修改Gulp任务，加入Babel转译步骤：

const gulp = require('gulp');
const concat = require('gulp-concat');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');

gulp.task('minify-scripts', function() { 
  return gulp.src(jsFiles) 
    .pipe(concat('scripts.js')) 
    // 新增Babel转译，把ES6转成ES5
    .pipe(babel({
      presets: ['@babel/preset-env']
    }))
    .pipe(gulp.dest(jsDest)) 
    .pipe(rename('scripts.min.js')) 
    .pipe(uglify()) 
    .pipe(gulp.dest(jsDest)); 
});

可选：自定义Babel转译目标 #

如果需要更精细的浏览器兼容配置，可以在项目根目录新建.babelrc文件：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 11"]
      }
    }]
  ]
}

内容的提问来源于stack exchange，提问作者Pyae Phyoe Shein