2

クラスを使用して新しい JavaScript を作成しようとしていますが、uglifyjs2 でコードを縮小しようとすると、「'予期しないトークン: 名前 (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で縮小しようとすると、次のエラーが発生します

'予期しないトークン: name (Utils)',

これは、最初の行「class Utils {」のUに対応します。

uglifyjs2 が新しい ES6 標準を縮小する際にいくつかの問題があるように見えますが、それが問題なのか、それとも構文が欠けているだけなのかはわかりません。uglifyjs2 と grunt-contrib-uglify を試しましたが、同じエラーが発生します。

それがES6の問題である場合、新しいJSクラスを適切に縮小する方法について利用可能な解決策を知っている人はいますか? grunt で Babel (grunt-babel) を使用してコードを ES6 から ES5 にトランスパイルしようとしましたが、実際にはコード構造はまったく変更されませんでした。ES5のクラスの同等の形式は何ですか? これは私のトランスパイル後のコードです。

アップデート

Ok。そのため、正しい Babel プリセットとプラグインがインストールされておらず、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/');

私のアプリケーション ツリーは次のようになり、etc/ ディレクトリ内で grunt を実行しています。私のすべての JavaScript ファイルは、何レベルも下の js サブディレクトリ内にあります。

  • トランク/
    • 等/
      • node_modules/
      • Gruntfile.js
      • パッケージ.json
    • パイソン/
      • マーヴィン/
        • ウェブ/
          • 静的/
            • js/
              • es6/
                • ユーティリティ.js
            • css/

プリセット/プラグインが 1 つのディレクトリにあり、javascript ファイルが別のディレクトリにあることを babel 構成に伝えるにはどうすればよいですか?

4

1 に答える 1

0

さて、私はディレクトリシステムを再構築して、私が見た他の例とより一致するようにすることで解決しました. 基本的に、Gruntfile、package.json、および node_modules をソース ファイルと同じディレクトリ レベルに配置します。これが私の新しい構造です...

  • トランク/
    • 等/
    • パイソン/
      • マーヴィン/
        • ウェブ/
          • 静的/
            • js/
            • css/
            • ソース/
            • Gruntfile.js
            • パッケージ.json
            • node_modules/

私の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 に答える