2

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

这是我的课

'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 类的可用解决方案？我尝试在我的 grunt 中使用 Babel (grunt-babel) 将我的代码从 ES6 转换为 ES5，但这实际上并没有改变代码结构。ES5 中类的等价形式是什么？这是我翻译后的代码。

更新

好的。所以我没有在我的 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 子目录中，向下很多层。

  • 树干/
    • ETC/
      • 节点模块/
      • Gruntfile.js
      • 包.json
    • Python/
      • 马文/
        • 网络/
          • 静止的/
            • js/
              • es6/
                • 实用程序.js
            • css/

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

4

1 回答 1

0

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

  • 树干/
    • ETC/
    • Python/
      • 马文/
        • 网络/
          • 静止的/
            • js/
            • css/
            • 源/
            • Gruntfile.js
            • 包.json
            • 节点模块/

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

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

现在一切都正确转换了，我可以用 uglifyjs 正确地缩小。

于 2016-04-14T20:38:00.220 回答