ERREUR dans bundle.js de UglifyJs

J'ai terminé un projet et il est maintenant temps pour le construire. Je suis à l'aide d'un passe-partout de projet et ne comprennent pas encore complètement tous les mnp/webpack se passe sous le capot. Lors de l'exécution de "npm démarrer", 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 suis toujours incapable de le résoudre. De ma compréhension, ce problème se produit parce que les Uglify n'aime pas ES2016 encore. Cependant, les solutions que j'ai trouvées sur internet ne semble pas fonctionner ou ne pas faire assez de sens pour moi à mettre en œuvre.

J'ai trouvé ce stackoverflow question et changé le webpack ligne dans mon projet de paquet.fichier json à:

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

Mais cela n'a pas fonctionné. L'autre suggestion de bifurquer webpack est au-delà de ma compréhension à l'heure actuelle.

J'ai aussi essayé de lancer babel sur mon dossier src par une autre suggestion, mais qui ne semblent pas à faire quelque chose ou j'ai couru de façon incorrecte.

Quelqu'un aurait-il une belle solution à ce problème? Je suis coincé pour le moment et n'ai pas eu le temps d'apprendre mnp/webpack à partir du sol, afin de bien saisir ce qu'il se passe.

Beaucoup apprécié!

  • Ce passe-partout exactement et ce qui est dans le paquet.json sous mnp commencer?
  • github.com/developit/preact-boilerplate Et le package.fichier json peut être trouvé sur le lien ci-dessus. Merci!
  • Je vous suggère de commencer avec un nu-projet, pas de passe-partout, et de construire petit à petit jusqu'à la complexité minimale nécessaire. Si non, vous aurez besoin d'apprendre comment déboguer le système de construction. Ses comme le débogage d'un programme, que sa une série de commandes/programmes en cours d'exécution dans le shell.
  • Même si quelqu'un résout ce problème précis, il vous sera vissé avoir un projet que vous ne comprenez pas comment il fonctionne. Vous pourriez revenir en arrière à l'babel problème et de poser une nouvelle question avec ces détails. Mais il vaut mieux commencer à partir de zéro avec quelque chose de simple. C'est pourquoi je ne recommande pas de passe-partout de projets.
  • J'ai vraiment l'intention de retourner à la super bases de l'apprentissage et sur les mnp, webpack, package.json, etc. J'espérais vraiment que je pourrais résoudre ce problème sans avoir à le faire mais si personne n'a des idées, alors c'est ce que je dois faire.
InformationsquelleAutor Charlie Harrison | 2016-12-21
  1. 8

    Oui, UglifyJS prend uniquement en charge les ES5 de la syntaxe. Vous aurez besoin de configurer correctement Babel pour transformer vos sources jusqu'à l'ES5 syntaxe.

    Depuis que vous utilisez Webpack 2, le nu-minumum de Babel de configuration que vous avez besoin est:

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

    Cela nécessitera la babel-preset-es2015 preset. Jeter le ci-dessus dans un .babelrc et votre babel-loader prendra soin du reste.

    Sinon, vous pouvez essayer babelify, qui est Babel moderne de minifier qui prend en charge ES6 syntaxe. Si vous êtes à cibler newever versions, je recommande chaudement.

    • L'ajout de votre code m'a amené à une nouvelle erreur. 'code' Unexpected token d'importation: l'importation webpack de "webpack'; 'code'.
    • Rappelez-vous, Node.js fournit un CommonJS environnement qui ne prend pas en charge ES6 modules. Revenir à l'utilisation de la plaine require() dans votre Webpack fichier de configuration et vous aurez une prise en charge pour d'autres ES6 caractéristiques (Nœud 6 et le Nœud 7 sont 97% compatible avec la spécification). Sinon, vous devez configurer manuellement la Babel de l'environnement d'exécution pour les Node.js ou babel-loader, parce que les paramètres sont en conflit.
    InformationsquelleAutor Filip Dupanović
  2. 2

    tenter ma cfg，réalité，je trouve la réponse
    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"] 
} 
} 
},
    InformationsquelleAutor congzhaoyang
  3. 1

    Simplement enseigner UglifyJS ES6

    Il existe deux versions de UglifyJS - ES5 et ES6 (Harmonie), voir sur git

    ES5 version est livrée par défaut avec tous les plugins, mais si vous installez une Harmonie version explicitement, ces plugins vont l'utiliser à la place.

    paquet.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 voulez contrôler la version de webpack plugin, vous devez l'installer et l'utiliser explicitement en tant que bien. Le présent document remplace la construit webpack.optimize.UglifyJsPlugin

    npm install uglifyjs-webpack-plugin --save

yarn add uglifyjs-webpack-plugin

    Webpack fichier de configuration

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

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

    Pour plus d'webpack info voir

    https://github.com/webpack-contrib/uglifyjs-webpack-plugin#install

    https://github.com/mishoo/UglifyJS2/tree/harmony

    InformationsquelleAutor Qwerty
  4. 0

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

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