uglifyjs a javascript class - 意外的令牌错误

Question

我正在尝试使用 classes 编写一些新的 javascript，但在尝试使用 uglifyjs2 缩小代码段时出现“'Unexpected token: name (Utils)'”错误。

这是我的 class

'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 缩小时，出现以下错误

'Unexpected token: name (Utils)',

对应第一行的U，"class Utils {"。

我知道 uglifyjs2 缩小新的 ES6 标准似乎存在一些问题，但我不知道这是否是问题所在，或者只是我缺少的一些语法。我试过 uglifyjs2 和 grunt-contrib-uglify，但我得到了同样的错误。

如果是 ES6 问题，有没有人知道如何正确缩小新 JS class 的可用解决方案？我尝试在我的 grunt 中使用 Babel (grunt-babel) 将我的代码从 ES6 转换为 ES5，但这实际上根本没有改变代码结构。 ES5 中 class 的等效形式是什么？这是我的 post-transpiled 代码。

更新

好的。所以我没有在我的 Gruntfile 中安装和加载正确的 Babel 预设和插件。所以我安装了它们，但它仍然无法正常工作。在 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/');

我的应用程序树看起来像这样，我在 etc/ 目录中运行 grunt。我所有的 javascript 文件都在 js 子目录下很多层。

树干/
- 等等/
  - node_modules/
  - Gruntfile.js
  - package.json
- python/
  - 马文/
    - 网络/
      - 静态/
        
        js/
        
        es6/
        
        utils.js
        
        css/

如何告诉 babel 配置我的 presets/plugins 在一个目录中，但我的 javascript 文件在另一个目录中？

Answer 1

好吧，我通过重组我的目录系统来解决它，使其更符合我见过的其他示例。基本上我的 Gruntfile、package.json 和 node_modules 与我的源文件位于同一目录级别。这是我的新结构...

中继线/
- 等等/
- python/
  - 马文/
    - 网络/
      - 静态/
        
        js/
        
        css/
        
        源/
        
        Gruntfile.js
        
        package.json
        
        node_modules/

我的 Gruntfile 文件中的新 Babel 配置看起来像

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

现在一切都可以正确转译，我可以使用 uglifyjs 适当地缩小。

uglifyjs a javascript class - 意外的令牌错误

uglifyjs a javascript class - unexpected token error

javascript

class

ecmascript-6

uglifyjs2