web-dev-qa-db-fra.com

Uglify SyntaxError: Jeton inattendu: punc ())

J'essaie d'utiliser gulp afin de minifier un dossier contenant des fichiers JS. Cependant, l'un des fichiers contient l'erreur ci-dessus, l'empêchant d'être minifié.

J'ai réussi à attraper et à imprimer l'erreur, que j'ai partiellement imprimée ici:

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
}

Le fichier en question contient les éléments suivants, abrégés:

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() {}
    }
 });
  ...
}

J'ai ajouté le "*" ci-dessus afin d'indiquer la position exacte listée par JS_Parse_Error.

javascriptgulpgulp-uglify
51
Alexander

// Mettre à jour

D'après les commentaires ~ @imolit

 v2.0.0 (2018-09-14) - RUPTURES DE CHANGEMENTS (lien) _

Revenez dans uglify-js (uglify-es est abandonné. Si vous avez besoin d'uglify code ES6, veuillez utiliser terser-webpack-plugin ).

Réponse originale avant la mise à jour ...

J'espère que vous pourrez vous inspirer de cette solution qui fonctionne avec Webpack. (lien ci-dessous)

Il suffit d’enseigner à UglifyJS ES6

Il existe deux versions de UglifyJS - ES5 et ES6 (Harmony), voir sur git
La version ES5 est fournie par défaut avec tous les plugins, mais si vous installez une version Harmony explicitement, ces plugins l'utiliseront à la place.

package.json

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

ou

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

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

Webpack

Pour l'utiliser avec webpack, installez également le plugin webpack

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

yarn add uglifyjs-webpack-plugin --dev

puis importez le plugin installé manuellement

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

et le remplacer dans le code

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

Pour plus d'informations sur le pack Web (Installation/Utilisation), voir https://github.com/webpack-contrib/uglifyjs-webpack-plugin#install

49
Qwerty

npm install uglifyjs-webpack-plugin --save-dev n'est pas suffisant

Le problème principal est "uglifyjs-webpack-plugin": "^0.4.6" dans package.json de webpack

Selon semver , ^0.4.6 := >=0.4.6 <0.5.0. En raison du zéro non significatif, webpack n'utilisera jamais le 1.0.0-beta.2.

Ainsi, après avoir exécuté npm i -D uglifyjs-webpack-plugin@beta, vous devez effectuer une étape supplémentaire, à savoir rm -rf node_modules/webpack/node_modules/uglifyjs-webpack-plugin. Ensuite, webpack récupérera la version à partir de node_modules/uglifyjs-webpack-plugin au lieu de node_modules/webpack/node_modules/uglifyjs-webpack-plugin

Mise à jour du 2018-04-18: ce problème ne concerne pas webpack v4

17
WOW

Ajoutez la dépendance babel-preset-es2015 pour résoudre ce problème.

Et ajoutez également 'es2015' dans le fichier .babelrc.

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

J'ai le même problème, j'ai trouvé une excellente réponse ici qui m'a aidé à atteindre le fichier qui était à l'origine de l'erreur.

Allez sur Rails Console and Paste:

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

J'espère que ça aide quelqu'un!

3
Hamza Khan

Pour moi, cela n'avait rien à voir avec Uglify ne fonctionnant pas correctement, mais plutôt une dépendance (dans ce cas vide-promesse) qui n'a pas encore été compilée pour ES5. Comme nous venons d'importer le fichier source brut, mais que Babel ne fait que transpiler des fichiers en dehors de node_modules, uglify a été confondu par la syntaxe ES6.

Il suffit de vérifier si la dépendance que vous avez récemment ajoutée n’a pas nécessairement une construction "dist".

2
spaceemotion

Si vous rencontrez cette erreur avec Grunt (grunt-contrib-uglify), la solution consiste à installer la version ES6 du plug-in:

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

Ajoutez l’étape 3 aux paramètres prédéfinis du fichier .babelrc. 

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

J'ai eu le même problème avec vous. J'utilisais gulp.js. J'ai résolu ce problème grâce aux fichiers js qui changent de format ES. Par exemple avant résolu est mon code:

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

après le code correctif: 

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

En résumé, le problème est dû à Ecma-uglify.js.

0
melih sahin