web-dev-qa-db-ja.com

gulp-uglifyでES6機能を縮小するにはどうすればよいですか？

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

ES6の機能を含むコードで、縮小を失敗させずにgulpを実行するにはどうすればよいですか？

javascriptnode.jsecmascript-6gulpgulp-uglify
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コンパイラは、このプラグインで ピア依存関係 として出荷されます。リポジトリ内の別の依存関係を介してコアライブラリがプルダウンされていない場合は、これがエンドにインストールされていることを確認してください。

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年3月更新

私の元の答えを使用すると、uglify-esがもはや維持されていないように思われるので、uglify-esパッケージを terser に置き換えることができます。

元の答え、まだ機能：

1.）まず、gulp-uglifyパッケージを3.0.0にアップグレードします。yarnを使用していて、最新バージョンに更新する場合：

yarn upgrade gulp-uglify --latest

2.）これで、uglifyの「es6バージョン」であるuglify-esを使用できます。

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コードをuくことができます。 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ć

gulp-uglify：

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 codeと一緒に使用することはできません。

  1. Transpile to ES5usingBabel
  2. Uglifyの代わりに Babili を使用します。
1
Hitmands