it-swarm.com.ru

Как минимизировать функции ES6 с помощью gulp-uglify?

Когда я запускаю gulp, я получаю следующую ошибку:

[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

Как я могу запустить gulp для кода, содержащего функции ES6, не вызывая сбой минификации?

36
Don P

Вы можете использовать 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())
    // [...]
});

Это перенесет ваш es6 на ранней стадии разработки и покажет, как широко поддерживается "простой" javascript к тому времени, когда вы минимизируете.


Может быть важно отметить - как указано в комментариях - основной компилятор babel поставляется как зависимость от сверстников в этом плагине. В случае, если ядро ​​lib не будет удалено из-за другого хранилища в вашем репо, убедитесь, что оно установлено на вашем конце.

Глядя на зависимость от сверстников в 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
33
scniro

Принятый ответ не действительно как минимизировать прямой es6. Если вы хотите минимизировать es6 без транспиляции, gulp-uglify v3.0.0 делает это возможным:

Обновление за март 2019 г.

Используя мой оригинальный ответ, вы можете заменить пакет uglify-es на terser , так как кажется, что uglify-es больше не поддерживается.

Оригинальный ответ, все еще работает:

1.) Сначала обновите свой пакет gulp-uglify до> 3.0.0. Если вы используете пряжу и хотите обновить ее до последней версии:

yarn upgrade gulp-uglify --latest

2.) Теперь вы можете использовать uglify-es, "версию es6" для uglify, вот так:

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

34
KayakinKoder

На самом деле вы можете увеличить код ES6 без транспиляции. Вместо того 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'));
});
19
Vladimir Jovanović

глотка-уродовать:

Для ES6 и ​​новее.

  1. установить: npm install --save-dev gulp-uglify
  2. установить: npm install --save-dev gulp-babel @babel/core @babel/preset-env

Использование:

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

gulp.task('script', () => {
    return gulp.src('src/**/*.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('src/dist'))
});
3
Christian Lehnert

к сожалению, на данный момент вы не можете использовать uglify с es-next код , вы можете:

  1. Переносить в ES5using Бабель
  2. Используйте Babili вместо Uglify.
1
Hitmands