UglifyJS ném mã thông báo không mong muốn: từ khóa (const) với node_modules

Một dự án nhỏ mà tôi đã bắt đầu sử dụng một mô-đun nút (được cài đặt thông qua npm ) khai báo constcác biến. Chạy và kiểm tra dự án này tốt, nhưng Browserify không thành công khi UglifyJS được thực thi.

Mã thông báo không mong muốn: từ khóa (const)

Đây là tệp Gulp chung mà tôi đã sử dụng thành công cho một vài dự án trước đây khác mà không gặp sự cố này (tức là không có mô-đun nút cụ thể đó).

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

Tôi đã cố gắng sửa lỗi này bằng cách thay thế tất cả constthành varmô-đun được cài đặt npm đó và mọi thứ đều ổn. Vì vậy tôi không hiểu sự thất bại.

Có chuyện gì vậy const? Trừ khi ai đó sử dụng IE10, tất cả các trình duyệt chính đều hỗ trợ cú pháp này.

Có cách nào để khắc phục điều này mà không yêu cầu thay đổi mô-đun nút đó không?

Cập nhật

Tôi đã tạm thời (hoặc vĩnh viễn) thay thế UglifyJS bằng Butternut và dường như hoạt động.

Như ChrisR đã đề cập , UglifyJS hoàn toàn không hỗ trợ ES6.

Bạn cần sử dụng terser-webpack-plugin cho ES6 (webpack @ 5 sẽ sử dụng plugin này để xác minh)

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

Sau đó xác định trong pluginsmảng của bạn

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

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

Nguồn

UglifyJS không hỗ trợ es6. constlà một khai báo es6, vì vậy nó sẽ xuất hiện một lỗi.

Điều kỳ lạ là gói bạn sử dụng không chuyển các tệp của nó sang es5 để được sử dụng ở mọi nơi.

Nếu bạn vẫn muốn sử dụng UglifyJS (để sử dụng lại cấu hình chẳng hạn), hãy sử dụng phiên bản tương thích ES6 +, uglify-es . ( Cảnh báo : uglify-esđược tại bị bỏ rơi .)

Và như Ser đã đề cập , bây giờ bạn nên sử dụng terser-webpack-plugin.

Tôi gặp sự cố tương tự và plugin gulp gulp-uglify-es đã giải quyết được sự cố.

Tôi nghĩ đó là quyết định đơn giản nhất.

Chỉ cần cài đặt:

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

sau đó trong mã của bạn chỉ thay đổi dòng này

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

đến điều này:

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

Thuộc tính NB .default là rất quan trọng, nếu không bạn sẽ gặp lỗi rằng uglify không phải là một hàm.

Như đã đề cập ở trên và là một phần của toán tử const ES6 chỉ có thể được xử lý bởi plugin es6 gulp hiện đại hơn "gulp-uglify-es"

Phần còn lại của mã của bạn không cần phải thay đổi.

Trân trọng!

Tôi vừa gặp sự cố này với một dự án Gulp mà tôi đã cấu trúc lại và vì một số lý do tôi gặp sự cố với plugin Terser Gulp chính thức. Cái này (gulp-terser) hoạt động không có vấn đề gì.

Dùng uglify-es-webpack-plugin thì tốt hơn

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



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

Tôi đã thay thế UglifyJSbằng YUI Compressor JSbên trong GUI của PHPStorm .. Nó hoạt động ngay bây giờ.

Tôi không thực sự nghĩ rằng cách tiếp cận này là tốt, nhưng trong trường hợp của tôi, tôi cần làm điều này một lần và quên điều đó đi, vì vậy tôi chỉ cần truy cập trang web của babel , chuyển đổi es6 sang es5 trực tuyến và thay thế đầu ra!