web-dev-qa-db-fra.com

ERREUR dans bundle.js de UglifyJs

J'ai terminé un projet et il est maintenant temps de le construire. J'utilise un projet passe-partout et je ne comprends toujours pas tout ce qui se passe sous le capot avec npm/webpack. Lorsque je lance "npm start", je reçois le message d'erreur:

ERROR in bundle.js from UglifyJs
SyntaxError: Unexpected token: punc ()) [bundle.js:848,29]

Après une heure de recherche sur Internet sur ce problème, je ne parviens toujours pas à le résoudre. D'après ce que j'ai compris, ce problème se pose car Uglify n'aime pas encore l'ES2016. Cependant, les solutions que j'ai trouvées sur Internet ne semblent pas fonctionner ou n'ont pas assez de sens pour moi. 

J'ai trouvé cette question stackoverflow et j'ai modifié la ligne webpack dans le fichier package.json de mon projet en:

"webpack": "fulls1z3/webpack#v2.1.0-beta.27-harmony"

Mais cela n'a pas fonctionné. L’autre suggestion de falsifier WebPack dépasse mon entendement pour le moment. 

J'ai également essayé d'exécuter babel sur mon dossier src en suivant une autre suggestion, mais cela ne semblait rien faire ou je l'avais mal exécuté.

Quelqu'un at-il une bonne solution à ce problème? Je suis assez bloqué pour le moment et je n'ai pas encore eu le temps d'apprendre le programme npm/webpack pour bien comprendre ce qui se passe.

Très appréciée!

javascriptnode.jsnpmwebpackuglifyjs
6
Charlie Harrison

Oui, UglifyJS ne prend en charge que la syntaxe ES5. Vous devrez configurer correctement Babel pour transformer vos sources en syntaxe ES5.

Puisque vous utilisez Webpack 2, la configuration minimale de Babel dont vous avez besoin est la suivante:

{
  "presets": [
    ["es2015", {"modules": false}]
  ]
}

Cela nécessitera le préréglage babel-preset-es2015 . Jetez ce qui précède dans un .babelrc et votre babel-loader se chargera du reste. 

Vous pouvez également essayer babelify , qui est le minificateur moderne de Babel prenant en charge la syntaxe ES6. Si vous ciblez les nouveautés Newever, je vous le recommande vivement.

8
Filip Dupanović

essayez mon cfg ， actualité je trouve la réponse in https://github.com/joeeames/WebpackFundamentalsCourse/issues/3

npm install babel --save-dev

npm install babel-preset-es2015 --save-dev

 {
 test: /\.js$/,
 exclure: /(node_modules|bower_components)/,
 utilisation: {
 chargeur: 'babel-loader', 
 requête: {
 Presets: ["es2015"] 
 } 
 } 
 },
1
congzhaoyang

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

UglifyJS WebPack plugin

Si vous souhaitez contrôler la version du plugin webpack, vous devez également l’installer et l’utiliser explicitement. Ceci remplace le webpack.optimize.UglifyJsPlugin construit

npm install uglifyjs-webpack-plugin --save

yarn add uglifyjs-webpack-plugin

Fichier de configuration Webpack

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

module.exports = {
  entry: {...},
  output: {...},
  module: {...},
  plugins: [
    new UglifyJSPlugin()
  ]
};

Pour plus d'informations sur le Webpack, voir
https://github.com/webpack-contrib/uglifyjs-webpack-plugin#install
https://github.com/mishoo/UglifyJS2/tree/harmony

1
Qwerty

assurez-vous que vous avez ajouté le fichier .babelrc à la racine de votre dossier et qu'il contient cette 

{
 "presets": [
    "es2015"
 ]
}
0
Carlos Aleman