uglifyjs класс javascript - непредвиденная ошибка токена

Я пытаюсь написать новый javascript, используя классы, и получаю сообщение об ошибке «Неожиданный токен: имя (Utils)» при попытке минимизировать фрагмент кода с помощью uglifyjs2.

вот мой класс

'use strict';

class Utils {
    // Constructor
    constructor() {
        marvin.Utils = Utils;
    }

    // Build a Form
    buildForm(keys) {
        var args = Array.prototype.slice.call(arguments, 1);
        var form = {};
        keys.forEach(function(index,key) {
            form[key] = args[index];
        });
        return form;
    }

    // Unique values
    unique(data) {
        return new Set(data);
    }
}

При попытке минимизировать с помощью uglifyjs я получаю следующую ошибку

'Неожиданный токен: имя (Utils)',

что соответствует U в первой строке «class Utils {».

Я знаю, что есть некоторые проблемы с uglifyjs2, минимизирующим новые стандарты ES6, но я не знаю, проблема ли в этом или просто в синтаксисе, который мне не хватает. Я пробовал uglifyjs2 и grunt-contrib-uglify и получаю ту же ошибку.

Если это проблема ES6, кто-нибудь знает о доступном решении, как правильно минимизировать новый класс JS? Я пытался использовать Babel (grunt-babel) в моем grunt для переноса моего кода из ES6 в ES5, но на самом деле это вообще не изменило структуру кода. Какова эквивалентная форма класса в ES5? Это мой посттранспилированный код.

Обновить

В порядке. Поэтому у меня не было установленных и загруженных в мой Gruntfile правильных пресетов и плагинов Babel. Итак, я установил их, но они все еще не работают. Во время выполнения Babel я получаю сообщение об ошибке

Запуск "вавилонской" задачи

Running "babel:dist" (babel) task
Verifying property babel.dist exists in config...OK
Files: js/es6/utils.js -> js/es6/utils.new.js
Options: sourceRoot="etc/", sourceMap=false, presets=["babel-preset-es2015"], plugins=["babel-plugin-transform-es2015-classes"]
Warning: Unknown plugin "babel-plugin-transform-es2015-classes" specified in "base" at 0, attempted to resolve relative to "js/es6" Use --force to continue.

Вот мой конфиг Gruntfile. У меня есть мои node_modules и gruntfile где-то еще, кроме исходных файлов моего приложения.

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    // Babel - transpiler from ES6 to ES5
    babel: {
        options: {
            sourceRoot: 'etc/',
            sourceMap: false,
            presets: ['babel-preset-es2015'],
            plugins: ["babel-plugin-transform-es2015-classes"]
        },
        dist: {
          files: [{
            expand: true,
            src: ['js/es6/*.js'],
            ext: '.new.js'
          }]
        }
    }
  });
// Set default file path
  grunt.file.setBase('../python/marvin/web/static/');

Мое дерево приложений выглядит так, и я запускаю grunt внутри каталога etc/. Все мои файлы javascript находятся внутри подкаталога js на много уровней ниже.

  • trunk/
    • etc/
      • node_modules/
      • Gruntfile.js
      • пакет.json
    • python/
      • marvin/
        • web/
          • static/
            • js/
              • es6/
                • utils.js
            • css/

Как я могу сообщить конфигурации babel, что мои пресеты/плагины находятся в одном каталоге, а файлы javascript — в другом?


person havok2063    schedule 12.04.2016    source источник
comment
Проблема определенно связана с отсутствием в Uglify поддержки классов ES6. Я поместил ваш код в онлайн-компилятор Babel, и после компиляции он выглядит совсем иначе. Может быть, вы не установили правильные пресеты транспилятора? Вот ссылка, если вы хотите попробовать себя: babeljs.io/repl   -  person Daniel Diekmeier    schedule 13.04.2016
comment
Да, кажется, мне не хватало некоторых плагинов и пресетов grunt-babel для переноса на es2015. Я добавил их, но теперь получаю сообщение об ошибке, когда grunt-babel не может найти плагины/пресеты относительно каталога, в котором находятся мои файлы. Я обновил основной текст выше с дополнительной информацией   -  person havok2063    schedule 13.04.2016
comment
Попробуйте presets: ['es2015'] и plugins: ["transform-es2015-classes"], хотя я не уверен, зачем вам вообще нужен плагин.   -  person TAGraves    schedule 13.04.2016
comment
Может у меня не так с пресетами. Во всяком случае, я получаю ту же ошибку «неизвестный плагин». Если я полностью удалю плагин, я получу сообщение об ошибке Предупреждение: не удалось найти пресет es2015 относительно каталога js/es6. Используйте --force для продолжения. с предустановкой. Я вижу плагины в моем каталоге etc/. Почему-то Babel считает, что основной каталог — это js/es6/, а все пути перепутаны.   -  person havok2063    schedule 13.04.2016
comment
ты npm install babel-preset-es2015 --save-dev?   -  person Savitoj Cheema    schedule 13.04.2016
comment
Да, я сделал. В моих devDependencies у меня есть babel-preset-es2015: ^ 6.6.0   -  person havok2063    schedule 13.04.2016


Ответы (1)


Что ж, я решил эту проблему, реструктурировав свою систему каталогов, чтобы она больше соответствовала другим примерам, которые я видел. В основном с моим Gruntfile, package.json и node_modules на том же уровне каталога, что и мои исходные файлы. Вот моя новая структура...

  • trunk/
    • etc/
    • python/
      • marvin/
        • web/
          • static/
            • js/
            • css/
            • источник/
            • Gruntfile.js
            • пакет.json
            • node_modules/

и моя новая конфигурация Babel в моем файле Gruntfile выглядит так

babel: {
    options: {
        sourceMap: false,
        presets: ['es2015']
    },
    dist: {
      files: [{
        expand: true,
        cwd: 'src',
        src: ['**/*.js'],
        dest: 'js',
        ext: '.js'
      }]
    }
}

Теперь все транспилируется правильно, и я могу правильно минифицировать с помощью uglifyjs.

person havok2063    schedule 14.04.2016