UglifyJS โยนโทเค็นที่ไม่คาดคิด: คีย์เวิร์ด (const) ด้วย node_modules

โครงการขนาดเล็กที่ฉันเริ่มใช้โมดูลโหนด (ติดตั้งผ่านnpm ) ที่ประกาศconstตัวแปร การรันและทดสอบโปรเจ็กต์นี้ทำได้ดี แต่ browserify ล้มเหลวเมื่อดำเนินการ UglifyJS

โทเค็นที่ไม่คาดคิด: คำหลัก (const)

นี่คือไฟล์ Gulp ทั่วไปที่ฉันประสบความสำเร็จในการใช้สำหรับโครงการอื่น ๆ ที่ผ่านมาโดยไม่มีปัญหานี้ (เช่นไม่มีโมดูลโหนดนั้น)

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))
  ;
});

ฉันได้พยายามแก้ไขนี้โดยแทนที่ทั้งหมดconstไปvarในการที่โมดูล NPM ติดตั้งและทุกอย่างดี ดังนั้นฉันจึงไม่เข้าใจความล้มเหลว

เกิดอะไรขึ้นconst? เบราว์เซอร์หลักทั้งหมดสนับสนุนไวยากรณ์นี้เว้นแต่จะมีใครใช้ IE10

มีวิธีแก้ไขโดยไม่ต้องเปลี่ยนโมดูลโหนดนั้นหรือไม่

อัปเดต

ฉันได้แทนที่ UglifyJS ชั่วคราว (หรือถาวร) ด้วยButternutและดูเหมือนจะได้ผล

ดังที่ChrisR กล่าวถึง UglifyJS ไม่รองรับ ES6 เลย

คุณต้องใช้terser-webpack-pluginสำหรับ ES6 (webpack @ 5 จะใช้ปลั๊กอินนี้สำหรับ uglification)

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

จากนั้นกำหนดในpluginsอาร์เรย์ของคุณ

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

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

ที่มา

UglifyJS ไม่รองรับ es6 constเป็นการประกาศ es6 ดังนั้นจึงแสดงข้อผิดพลาด

สิ่งที่แปลกคือแพ็กเกจที่คุณใช้ไม่ได้โอนไฟล์ไปยัง es5 เพื่อนำไปใช้ที่ใดก็ได้

หากคุณต้องการที่จะยังคงใช้ UglifyJS (เพื่อกลับมาใช้การกำหนดค่าสำหรับตัวอย่าง) ใช้ ES6 + รุ่นที่รองรับ, ทำให้น่าเกลียด-ES ( คำเตือน : uglify-esถูกทอดทิ้งในขณะนี้ .)

และเป็นSer mentionnedterser-webpack-pluginตอนนี้คุณควรจะใช้

ฉันมีปัญหาเดียวกันและปลั๊กอินgulp gulp-uglify-es สามารถแก้ไขปัญหาได้

ฉันคิดว่ามันเป็นการตัดสินใจที่ง่ายที่สุด

เพียงแค่ติดตั้ง:

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

หลังจากนั้นในรหัสของคุณจะเปลี่ยนเฉพาะบรรทัดนี้

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

สำหรับสิ่งนี้:

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

คุณสมบัติ NB .defaultเป็นสิ่งสำคัญมิฉะนั้นคุณจะมีข้อผิดพลาดว่า uglify ไม่ใช่ฟังก์ชัน

ดังที่กล่าวไว้ข้างต้นและในฐานะที่เป็นส่วนหนึ่งของตัวดำเนินการES6 constสามารถประมวลผลได้โดยปลั๊กอิน es6 gulp ที่ทันสมัยกว่า "gulp-uglify-es" เท่านั้น

ส่วนที่เหลือของรหัสของคุณไม่จำเป็นต้องเปลี่ยนแปลง

ขอแสดงความนับถืออย่างสูง!

ฉันเพิ่งมีปัญหากับโปรเจ็กต์ Gulp ที่ฉันปรับโครงสร้างใหม่และด้วยเหตุผลบางอย่างฉันมีปัญหากับปลั๊กอิน Terser Gulp อย่างเป็นทางการ อันนี้ (gulp-terser) ใช้งานได้โดยไม่มีปัญหา

ใช้ uglify-es-webpack-plugin จะดีกว่า

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



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

ฉันได้แทนที่UglifyJSด้วยYUI Compressor JSภายใน GUI ของ PHPStorm .. มันใช้งานได้แล้ว

ฉันไม่คิดว่าวิธีนี้จะดีจริง ๆ แต่ในกรณีของฉันฉันต้องทำสิ่งนี้ครั้งเดียวและลืมเรื่องนั้นไปดังนั้นฉันจึงไปที่เว็บไซต์ของ babel ถ่ายทอด es6 เป็น es5 ทางออนไลน์และแทนที่ผลลัพธ์!