UglifyJS अनपेक्षित टोकन फेंकता है: कीवर्ड (const) नोड_मॉड्यूल्स के साथ

Question 1

एक छोटी सी परियोजना जिसे मैंने नोड मॉड्यूल ( npm के माध्यम से स्थापित ) का उपयोग करना शुरू किया था जो constचर घोषित करता है। इस प्रोजेक्ट को चलाना और परीक्षण करना अच्छी तरह से है, लेकिन UglifyJS निष्पादित होने पर ब्राउजर विफल हो जाता है।

अनपेक्षित टोकन: कीवर्ड (const)

यहाँ एक जेनेरिक गल्प फ़ाइल है जिसे मैं इस मुद्दे के बिना कुछ अन्य पिछली परियोजनाओं के लिए सफलतापूर्वक उपयोग कर रहा हूं (अर्थात उस विशेष नोड मॉड्यूल के बिना)।

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

मैंने उस npm स्थापित मॉड्यूल में सभी constको varबदलकर इसे ठीक करने की कोशिश की है , और सब कुछ ठीक है। इसलिए मुझे असफलता समझ में नहीं आती।

इसमें गलत क्या है const? जब तक कोई IE10 का उपयोग नहीं करता है, सभी प्रमुख ब्राउज़र इस सिंटैक्स का समर्थन करते हैं।

क्या उस नोड मॉड्यूल में बदलाव की आवश्यकता के बिना इसे ठीक करने का कोई तरीका है?

अपडेट करें

मैं के साथ अस्थायी रूप से (या स्थायी रूप से) प्रतिस्थापित UglifyJS है Butternut और काम करने लगते हैं।

Question 2

जैसा कि क्रिस ने उल्लेख किया है , UglifyJS ES6 का बिल्कुल समर्थन नहीं करता है।

आपको ES6 के लिए terser-webpack-plugin का उपयोग करने की आवश्यकता है (webpack @ 5 इस प्लग इन का उपयोग कर सकता है)

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

फिर अपने pluginsऐरे में परिभाषित करें

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

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

स्रोत

Question 3

UglifyJS es6 का समर्थन नहीं करता है। constएक es6 घोषणा है, इसलिए यह एक त्रुटि फेंकता है।

क्या अजीब बात है कि आपके द्वारा उपयोग किया जाने वाला पैकेज कहीं भी उपयोग किए जाने के लिए अपनी फ़ाइलों को es5 में ट्रांसपाइल नहीं करता है।

यदि आप अभी भी UglifyJS (उदाहरण के लिए कॉन्फ़िगरेशन को फिर से उपयोग करने के लिए) का उपयोग करना चाहते हैं, तो ES6 + संगत संस्करण, uglify-es का उपयोग करें । ( चेतावनी : uglify-esहै अब छोड़ दिया ।)

और जैसा कि Ser ने उल्लेख किया है , आपको अब उपयोग करना चाहिए terser-webpack-plugin।

Question 4

मैं एक ही मुद्दा था और 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 एक फ़ंक्शन नहीं है।

जैसा कि ऊपर उल्लेख किया गया है और ईएस 6 कॉन्स्ट संचालक का हिस्सा होने के नाते केवल अधिक आधुनिक एस 6 गुलप प्लगइन "गुलाल-कुरूपि-एस" द्वारा संसाधित किया जा सकता है

आपके बाकी कोड को बदलने की आवश्यकता नहीं है।

सादर!

Question 5

मेरे पास सिर्फ एक गुल्प प्रोजेक्ट था जिसे मैंने रिफैक्ट किया और किसी कारण से मुझे आधिकारिक टर्शर गुल्प प्लगइन से परेशानी हो रही थी। इस एक (गुलदाउदी) ने बिना किसी मुद्दे के साथ काम किया।

Question 6

Uglify-es-webpack-plugin का प्रयोग बेहतर है

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



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

Question 7

मैंने PHPStorm के GUI के UglifyJSसाथ बदल दिया है YUI Compressor JS.. यह अब काम करता है।

Question 8

मैं वास्तव में नहीं सोचता कि यह दृष्टिकोण अच्छा है, लेकिन मेरे मामले में मुझे एक बार ऐसा करने और उसके बारे में भूलने की ज़रूरत थी, इसलिए मैं सिर्फ babel की वेबसाइट पर गया , ट्रांसपाइल es6 es5 ऑनलाइन और आउटपुट को बदल दिया!