web-dev-qa-db-ja.com

Uglify SyntaxError：予期しないトークン：punc（））

JSファイルを含むフォルダーを縮小するために、gulpを使用しようとしています。ただし、ファイルの1つに上記のエラーがあるため、ファイルを縮小できません。

私はここで部分的に印刷したエラーをキャッチして印刷しました：

JS_Parse_Error {
 message: 'SyntaxError: Unexpected token: punc ())',
 filename: 'ex.js',
 line: 189,
 col: 25,
 pos: 6482,
 stack: Error\n    at new JS_Parse_Error (eval at <anonymous> ... ) 
 plugin: 'gulp-uglify',
 fileName: '.../js/ex.js',
 showStack: false
}

問題のファイルには、以下が短縮されて含まれています。

function() {
  ...
  $.confirm({
    buttons: {
        confirm: function() {
            $.post('/ajax-handler', {
                    ...
                })
                .done( function(response) {
                    var data = filterResponse(response);
                    if (data['status'] == 'success') {
                        sleep(1000).then(() => {
                    *       ...
                        });
                        sleep(5000).then(() => {
                            ...  
                        });

                    } else {
                        console.log('Oops!');
                    }
                })
                .fail( function(err, status, response) {
                    ...
            });
        },
        cancel: function() {}
    }
 });
  ...
}

JS_Parse_Errorによってリストされた正確な位置を示すために、上記の「*」を追加しました。

javascriptgulpgulp-uglify
52
Alexander

//更新

コメントから〜@ imolit

v2.0.0（2018-09-14）-重大な変更 （link）

glify-js に切り替えます（uglify-esは廃止されました。uglifyES6コードが必要な場合は terser-webpack-plugin を使用してください）。

更新前の元の答え...

Webpackで動作するこのソリューションからインスピレーションを得られることを願っています。 （以下のリンク）

UglifyJS ES6を教えるだけ

UglifyJSには2つのバージョンがあります-ES5およびES6（調和）、 gitを参照
ES5バージョンにはデフォルトですべてのプラグインが付属していますが、Harmonyバージョンを明示的にインストールすると、それらのプラグインは代わりにそれを使用します。

package.json

"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony"

または

npm install --save uglify-js@github:mishoo/UglifyJS2#harmony

yarn add git://github.com/mishoo/UglifyJS2#harmony --dev

Webpack

Webpackで使用するには、webpackプラグインもインストールします

npm install uglifyjs-webpack-plugin --save-dev

yarn add uglifyjs-webpack-plugin --dev

次に、手動でインストールされたプラグインをインポートします

var UglifyJSPlugin = require('uglifyjs-webpack-plugin');

コードで置き換えます

-  new webpack.optimize.UglifyJsPlugin({ ... })
+  new UglifyJSPlugin({ ... })

詳細なWebパック情報（インストール/使用法）については、 https://github.com/webpack-contrib/uglifyjs-webpack-plugin#install を参照してください

51
Qwerty

npm install uglifyjs-webpack-plugin --save-devでは不十分です

主な問題は webpack's package.json の"uglifyjs-webpack-plugin": "^0.4.6"です

semver 、^0.4.6 := >=0.4.6 <0.5.0によると。先行ゼロのため、webpackは1.0.0-beta.2を使用しません。

したがって、npm i -D uglifyjs-webpack-plugin@betaを実行した後、rm -rf node_modules/webpack/node_modules/uglifyjs-webpack-pluginであるもう1つのステップを実行する必要があります。その後、webpackはnode_modules/uglifyjs-webpack-pluginではなくnode_modules/webpack/node_modules/uglifyjs-webpack-pluginからバージョンを取得します

2018-04-18の更新：webpack v4にはこの問題はありません

18
WOW

これを修正するには、babel-preset-es2015依存関係を追加します。

また、'es2015'ファイルに.babelrcを追加します。

json
{
    "presets": ["es2015"]
}
8
Qing

私は同じ問題を抱えています、私は素晴らしい答えを見つけました ここ エラーの原因となっているファイルに到達するのに役立ちました。

Rails Consoleに移動して貼り付けます：

JS_PATH = "app/assets/javascripts/**/*.js";
Dir[JS_PATH].each do |file_name|
  puts "\n#{file_name}"
  puts Uglifier.compile(File.read(file_name))
end

それが誰かを助けることを願っています！

5
Hamza Khan

私にとっては、正しく動作しないUglifyとは関係がなく、ES5にまだコンパイルされていない依存関係（この場合はempty-promise）です。生のソースファイルをインポートしたばかりですが、babelはnode_modulesの外部のファイルのみをトランスコンパイルしているため、uglifyはES6構文に混乱しました。

最近追加した依存関係に「dist」ビルドがないかどうかを確認するだけです。

2
spaceemotion

Grunt（grunt-contrib-uglify）を使用してこのエラーが発生した場合、解決策はプラグインのES6バージョンをインストールすることです。

npm install grunt-contrib-uglify-es --save-dev
1
amicoderozer

.babelrcファイルのプリセットにステージ3を追加します。

{
  "presets": [
    "stage-3"
  ]
}
0
Cong Nguyen

あなたにも同じ問題がありました。私はgulp.jsを使用していました。この問題は、jsファイルがES形式を変更することで解決しました。たとえば、解決する前に私のコードがあります：

for (district for response) {
                $('#districts').append('<option value="' + district.id + '">' + district.name + '</option>');
                $('#districts').removeAttr('disabled');
            }

修正コード後：

for (district in response) {
                $('#districts').append('<option value="' + district.id + '">' + district.name + '</option>');
                $('#districts').removeAttr('disabled');
            }

要約すると、問題はEcma-uglify.jsが原因です。

0
melih sahin