如何用gulp-uglify來縮小ES6的功能？

當我運行一飲而盡，我得到以下錯誤：如何用gulp-uglify來縮小ES6的功能？

[12:54:14] { [GulpUglifyError: unable to minify JavaScript] 
cause: 
{ [SyntaxError: Unexpected token: operator (>)] 
message: 'Unexpected token: operator (>)', 
filename: 'bundle.js', 
line: 3284, 
col: 46, 
pos: 126739 }, 
plugin: 'gulp-uglify', 
fileName: 'C:\\servers\\vagrant\\workspace\\awesome\\web\\tool\\bundle.js', 
showStack: false }

出錯行包含一個箭頭功能：

var zeroCount = numberArray.filter(v => v === 0).length

我知道我可以用下面的補救微小錯誤替換：

var zeroCount = numberArray.filter(function(v) {return v === 0;}).length

如何在不導致縮小失敗的情況下對包含ES6功能的代碼運行吞吐？

來源

2017-07-06 Don Peat

使用翻譯，像[babel]（https://babeljs.io/）。 – destoryer

如果轉儲到'ES5'適合，那麼請編輯您的問題，因爲沒有提到這一點，可能會讓新用戶感到困惑。 – Hitmands

您可以利用gulp-babel這樣...

let gulp = require('gulp'); 
let babel = require('gulp-babel'); 
let uglify = require('gulp-uglify'); 

gulp.task('minify',() => { 
    return gulp.src('src/**/*.js') 
    .pipe(babel({ 
     presets: ['es2015'] 
    })) 
    .pipe(uglify()) 
    // [...] 
});

這將在管線中較早transpile您ES6和您壓縮的時間生產出儘可能廣泛的支持「普通」的JavaScript。

可能是重要的要注意 - 在評論中指出 - 核心巴貝爾編譯船舶在這個插件一個peer dependency。如果核心庫沒有通過repo中的另一個dep被拉下，請確保將其安裝在您的終端上。

看peer dependency在gulp-babel作者指定@babel/core（7.x）。不過，稍微老一點的babel-core（6.x）也可以。我的猜測是作者（兩個項目都是一樣的）正處於重組模塊命名的階段。無論哪種方式，都NPM安裝端點指向https://github.com/babel/babel/tree/master/packages/babel-core，所以你會沒事的用下面的...

npm install babel-core --save-dev

或

npm install @babel/core --save-dev

來源

2017-07-06 20:29:36 scniro

您可能還需要安裝babel-core，才能運行npm install --save-dev babel-core – rhysclay

@rhysclay感謝您指出這一點！我從來沒有注意到這可能會發生 - 我認爲它只是隨之而來。我研究了一下發生了什麼，並發現了一些有趣的信息。如果您想查看我發現的內容，我已經編輯了我的答案。 – scniro

不幸的是，現在每，你不能使用uglify與可以es-next代碼，：

Transpile到ES5使用通天的
使用Babili代替醜化。

來源

2017-07-06 20:29:29 Hitmands

實際上，你可以醜化ES6代碼而不transpilation。插入代替gulp-uglify插件，請使用gulp-uglifyes插件。

var gulp = require('gulp'); 
var rename = require('gulp-rename'); 
var uglify = require('gulp-uglifyes'); 
var plumber = require('gulp-plumber'); 
var plumberNotifier = require('gulp-plumber-notifier'); 
var sourcemaps = require('gulp-sourcemaps'); 
var runSequence = require('run-sequence').use(gulp); 

gulp.task('minjs', function() { 
    return gulp.src(['/dist/**/*.js', '!/dist/**/*.min.js']) 
    .pipe(plumberNotifier()) 
    .pipe(sourcemaps.init()) 
    .pipe(uglify({ 
     mangle: false, 
     ecma: 6 
    })) 
    .pipe(rename(function (path) { 
     path.extname = '.min.js'; 
    })) 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest('/dist')); 
});

來源

2017-10-14 15:51:22

接受的答案並不真的答案如何來縮小直ES6。如果你想在沒有轉譯的情況下縮小es6，gulp-uglify v3.0.0使得這一點成爲可能：

1.）首先，將你的gulp-uglify軟件包升級到3.0。0如果您使用的紗線和希望更新到最新版本：

yarn upgrade gulp-uglify --latest

2）現在你可以使用醜化-ES，醜化的「ES6版」，像這樣：

const uglifyes = require('uglify-es'); 
const composer = require('gulp-uglify/composer'); 
const uglify = composer(uglifyes, console); 

gulp.task('compress', function() { 
    return gulp.src('src/*.js') 
    .pipe(uglify()) 
    .pipe(gulp.dest('dist')) 
});

欲瞭解更多信息：https://www.npmjs.com/package/gulp-uglify

來源

2017-11-16 21:29:44 KayakinKoder

如何用gulp-uglify來縮小ES6的功能？

回答

相關問題