উগলিফাইজেএস অপ্রত্যাশিত টোকেন ছুড়ে: নোড_মডিউলগুলি সহ কীওয়ার্ড (কনস্ট্যান্ট)

Question 1

একটি ছোট প্রকল্প আমি নোড মডিউল ব্যবহার করতে শুরু করেছি ( এনপিএমের মাধ্যমে ইনস্টল করা ) যা 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))
  ;
});

আমি সব প্রতিস্থাপন করে এই ফিক্সিং চেষ্টা করেছি constকরার varযে npm-ইনস্টল করা মডিউলে, এবং সবকিছু ঠিক আছে। তাই আমি ব্যর্থতা বুঝতে পারি না।

এর সাথে কী হয়েছে const? কেউ আই 10 ব্যবহার না করে সমস্ত বড় ব্রাউজার এই বাক্য গঠনটিকে সমর্থন করে।

সেই নোড মডিউলটিতে কোনও পরিবর্তন প্রয়োজন না করে এটি ঠিক করার কোনও উপায় আছে কি?

হালনাগাদ

আমি সাময়িকভাবে (অথবা স্থায়ীভাবে) প্রতিস্থাপিত UglifyJS আছে Butternut এবং কাজের বলে মনে হচ্ছে।

Question 2

ক্রিসআর উল্লিখিত হিসাবে , উগলিফাইজেএস 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,
    },
  }),

সূত্র

Question 3

UglifyJS es6 সমর্থন করে না। constএটি একটি এস decla ঘোষণা, সুতরাং এটি একটি ত্রুটি নিক্ষেপ করে।

অদ্ভুতরূপটি হ'ল আপনি যে প্যাকেজটি ব্যবহার করেন তা এর ফাইলগুলি কোথাও ব্যবহার করার জন্য এটি এস 5 এ স্থানান্তরিত করে না।

আপনি যদি এখনও ইউগ্লিফাইজেএস ব্যবহার করতে চান (উদাহরণস্বরূপ কনফিগারেশনটি পুনরায় ব্যবহার করতে) ES6 + সামঞ্জস্যপূর্ণ সংস্করণ ব্যবহার করুন, uglify-es । ( সতর্কতা : uglify-esহয় এখন পরিত্যক্ত ।)

এবং যেমন সের উল্লেখ করেছেন , আপনার এখন ব্যবহার করা উচিত terser-webpack-plugin।

Question 4

আমার একই সমস্যা ছিল এবং গুলপ প্লাগইন গুল্প-উগ্লিফাই-এস সমস্যার সমাধান করে।

আমি মনে করি এটি সবচেয়ে সহজ সিদ্ধান্ত

কেবল ইনস্টল করুন:

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

আপনার কোডের পরে কেবল এই লাইনটি পরিবর্তন করুন

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

এটি:

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

এনবি সম্পত্তি। ডিফল্ট অত্যন্ত গুরুত্বপূর্ণ অন্যথায় আপনার একটি ত্রুটি হবে যে অগ্লিফাইটি কোনও ফাংশন নয়।

উপরে এবং ES6 অংশ হিসেবে উল্লেখ করা হয়েছে const অপারেটর শুধুমাত্র আরো আধুনিক es6 নি: শ্বাসে প্লাগইন "নি: শ্বাসে-কুতসিত করান-স্প্যানিশ ভাষায়" দ্বারা প্রক্রিয়াভুক্ত করা যাবে

আপনার বাকী কোডটি পরিবর্তন করার দরকার নেই।

শুভেচ্ছান্তে!

Question 5

আমার রিফেক্টর করা একটি গুল্প প্রকল্পটি নিয়ে আমি কেবল এই সমস্যাটি নিয়েছিলাম এবং কিছু কারণে অফিসিয়াল টার্সার গুল্প প্লাগইনটিতে আমার সমস্যা হয়েছিল। এই এক (গাল্প-টিসার) কোনও সমস্যা ছাড়াই কাজ করেছে।

Question 6

উগ্লিফাই-এস-ওয়েবপ্যাক-প্লাগইন ব্যবহার করা ভাল

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



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

Question 7

আমি পিএইচপিএসটারমের জিইউআইয়ের UglifyJSসাথে প্রতিস্থাপন YUI Compressor JSকরেছি .. এটি এখন কাজ করে।

Question 8

আমি সত্যিই ভাবি না যে এই পদ্ধতিরটি ভাল, তবে আমার ক্ষেত্রে আমার একবার এটি করা এবং এটি সম্পর্কে ভুলে যাওয়া দরকার ছিল, তাই আমি কেবল বাবেলের ওয়েবসাইটে গিয়েছিলাম , এসএইএস-এ অনলাইনে অনলাইনে ট্রান্সপ্লাই করে আউটপুট প্রতিস্থাপন করেছি!