UglifyJS, node_modules ile beklenmeyen token: keyword (const) atıyor

Başladığım küçük bir proje , constdeğişkenleri bildiren bir düğüm modülü ( npm aracılığıyla kurulan ) kullanıyor . Bu projeyi çalıştırmak ve test etmek iyi, ancak UglifyJS yürütüldüğünde tarayıcı doğrulaması başarısız oluyor.

Beklenmeyen belirteç: anahtar kelime (const)

İşte bu sorun olmadan (yani o belirli düğüm modülü olmadan) birkaç başka geçmiş projede başarıyla kullandığım genel bir Gulp dosyası.

gulpfile.js

'use strict';

const browserify = require('browserify');
const gulp = require('gulp');
const source = require('vinyl-source-stream');
const derequire = require('gulp-derequire');
const buffer = require('vinyl-buffer');
const uglify = require('gulp-uglify');
const sourcemaps = require('gulp-sourcemaps');
const gutil = require('gulp-util');
const path = require('path');
const pkg = require('./package');
const upperCamelCase = require('uppercamelcase');

const SRC_PATH = path.dirname(pkg.main);
const DIST_PATH = path.dirname(pkg.browser);

const INPUT_FILE = path.basename(pkg.main);
const OUTPUT_FILE = path.basename(pkg.browser);

const MODULE_NAME = upperCamelCase(pkg.name);


gulp.task('default', () => {
  // set up the browserify instance on a task basis
  var b = browserify({
    entries: INPUT_FILE,
    basedir: SRC_PATH,
    transform: ['babelify'],
    standalone: MODULE_NAME,
    debug: true
  });

  return b.bundle()
    .pipe(source(OUTPUT_FILE))
    .pipe(buffer())
    .pipe(derequire())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(uglify())
    .on('error', gutil.log)
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(DIST_PATH))
  ;
});

Ben hepsini yerine bu sabitleme çalıştık constiçin varo npm yüklenmiş modülünde ve her şey yolunda. Yani başarısızlığı anlamıyorum.

Neyin var const? Birisi IE10 kullanmadıkça, tüm büyük tarayıcılar bu sözdizimini destekler.

Bu düğüm modülünde bir değişiklik gerektirmeden bunu düzeltmenin bir yolu var mı?

Güncelleme

UglifyJS'yi geçici (veya kalıcı olarak) Butternut ile değiştirdim ve çalışıyor gibi görünüyorum.

As ChrisR bahsettiğimde , UglifyJS hiç ES6 desteklememektedir.

ES6 için terser-webpack-eklentisini kullanmanız gerekir (webpack @ 5 bu eklentiyi çirkinleştirme için kullanacaktır)

npm install terser-webpack-plugin --save-dev

Ardından pluginsdizinizde tanımlayın

const TerserPlugin = require('terser-webpack-plugin')

  new TerserPlugin({
    parallel: true,
    terserOptions: {
      ecma: 6,
    },
  }),

Kaynak

UglifyJS, es6'yı desteklemez. constbir es6 bildirimi olduğundan bir hata atar.

İşin tuhafı, kullandığınız paketin dosyalarını herhangi bir yerde kullanılmak üzere es5'e aktarmamasıdır.

Hala UglifyJS'yi kullanmak istiyorsanız (örneğin, yapılandırmayı yeniden kullanmak için) ES6 + uyumlu sürümü, uglify- es'i kullanın . ( Uyarı : uglify-esolduğu şu anda terk edilmiş ).

Ve Ser'in bahsettiği gibi , şimdi kullanmalısınız terser-webpack-plugin.

Aynı sorunu yaşadım ve gulp eklentisi gulp-uglify-es sorunu çözdü.

Bunun en basit karar olduğunu düşünüyorum.

Sadece kurun:

npm i gulp-uglify-es --save-dev

bundan sonra kodunuzda sadece bu satırı değiştirin

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

buna:

const uglify = require('gulp-uglify-es').default;

NB özelliği .default çok önemlidir, aksi takdirde çirkinleştirmenin bir işlev olmadığına dair bir hata alırsınız.

Yukarıda bahsedildiği gibi ve ES6 const operatörünün bir parçası olduğu için yalnızca daha modern es6 gulp eklentisi "gulp-uglify-es" ile işlenebilir.

Kodunuzun geri kalanının değiştirilmesine gerek yoktur.

Saygılarımla!

Bu sorunu henüz yeniden düzenlediğim bir Gulp projesiyle yaşadım ve nedense resmi Terser Gulp eklentisiyle sorun yaşıyordum. Bu (gulp-terser) hiçbir sorun olmadan çalıştı.

Uglify-es-webpack-eklentisini kullanmak daha iyidir

    const UglifyEsPlugin = require('uglify-es-webpack-plugin')



    module.exports = {
    plugins: [
            new UglifyEsPlugin({
                compress:{
                    drop_console: true
                }
            }),
    ] 
    }

Ben yerini almıştır UglifyJSile YUI Compressor JS.. Şimdi işler PhpStorm ait GUI içinde.

Bu yaklaşımın gerçekten iyi olduğunu düşünmüyorum, ama benim durumumda bunu bir kez yapmam ve bunu unutmam gerekiyordu, bu yüzden babel'in web sitesine gittim , es6'yı es5'e çevrim içi aktartım ve çıktıyı değiştirdim!