防止gulp uglify剥离es6

时间:2019-01-09 23:13:13

标签: javascript gulp gulp-uglify gulp-babel

我正在使用gulp babel来编译es6,但是uglify似乎正在完全剥离我的es6。运行此命令时,命令行没有出现任何错误。任何想法为什么会被剥夺?

我的吞咽任务看起来像这样:

gulp.task('scripts', function () {
  return gulp.src('src/js/*.js')
    .pipe(sourcemaps.init())
    .pipe(babel())
    .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('dist/js'));
});

我的JavaScript:

document.addEventListener('DOMContentLoaded', function (event) {
  console.log('ready to es6!');
  const foo = 4;
});

输出,已编译/已修正的javascript:

"use strict";document.addEventListener("DOMContentLoaded",function(e){console.log("ready to es6!")});
//# sourceMappingURL=scripts.js.map

通知const foo = 4被忽略。删除.pipe(babel())会导致const得到正确的编译。

如果有帮助,请使用devDependencies:

"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.3",
"browser-sync": "^2.26.3",
"gulp": "^3.9.1",
"gulp-babel": "^8.0.0-beta.2",
"gulp-sass": "^4.0.2",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify": "^3.0.1",
"node-sass": "^4.11.0"
}

1 个答案:

答案 0 :(得分:1)

UglifyJS(gulp-uglify的依赖项)具有一个Compress选项,默认情况下会删除未使用的var。由于您从不引用foo,因此已将其从压缩源中删除。

来自UglifyJS2 docs

  

压缩选项:   unused (default: true)-删除未引用的函数和变量(简单的直接变量分配除非设置为"keep_assign",否则不算作引用)

由于const foo = 4是一个简单的直接变量分配,因此它不会出现在您的压缩代码中。您可以假设不需要不需要的代码,也可以这样调整gulp文件:

gulp.task('scripts', function () {
  return gulp.src('src/js/*.js')
  .pipe(sourcemaps.init())
  .pipe(babel())
  .pipe(uglify({
     compress: {
       unused: false
     }
   }))
  .pipe(sourcemaps.write('./'))
  .pipe(gulp.dest('dist/js'));
});