it-swarm.com.de

ERROR in bundle.js von UglifyJs

Ich habe ein Projekt abgeschlossen und jetzt ist es an der Zeit, es zu bauen. Ich verwende ein Boilerplate-Projekt und verstehe immer noch nicht alles Npm/Webpack-Zeug unter der Haube. Beim Ausführen von "npm start" erhalte ich die Fehlermeldung:

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

Nach einer Stunde Suche im Internet zu diesem Problem kann ich das Problem immer noch nicht lösen. Nach meinem Verständnis tritt dieses Problem auf, weil Uglify ES2016 noch nicht mag. Die Lösungen, die ich im Internet gefunden habe, scheinen jedoch nicht zu funktionieren oder sind für mich nicht sinnvoll genug, um sie umzusetzen. 

Ich habe diese stackoverflow-Frage gefunden und die Webpack-Zeile in der package.json-Datei meines Projekts geändert in:

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

Das hat aber nicht geklappt. Der andere Vorschlag, Webpack zu fällen, kann ich momentan nicht verstehen. 

Ich habe auch versucht, Babel in meinem SRC-Ordner mit einem anderen Vorschlag auszuführen, aber das schien nichts zu tun oder ich habe es falsch ausgeführt.

Hat jemand eine schöne Lösung für dieses Problem? Ich bin im Moment ziemlich festgefahren und hatte keine Zeit, npm/webpack von Grund auf zu lernen, um vollständig zu verstehen, was los ist.

Sehr geschätzt!

6

Ja, UglifyJS unterstützt nur die ES5-Syntax. Sie müssen Babel richtig konfigurieren, um Ihre Quellen in ES5-Syntax umzuwandeln.

Da Sie Webpack 2 verwenden, benötigen Sie folgende Bare-Minumum-Babel-Konfiguration:

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

Dies erfordert die Voreinstellung babel-preset-es2015 . Werfen Sie das Obige in einen .babelrc und Ihr babel-loader kümmert sich um den Rest. 

Alternativ können Sie auch babelify versuchen. Dies ist der moderne Minifier von Babel, der die ES6-Syntax unterstützt. Wenn Sie auf neue Releases abzielen, würde ich Ihnen wärmstens empfehlen.

8

try my cfg , Aktualität , Ich finde die Antwort in https://github.com/joeeames/WebpackFundamentalsCourse/issues/3

npm install babel --save-dev

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

 {
 test: /\.js$/,
 ausschließen: /(node_modules| bower_components)/,
 benutzen: {
 loader: 'babel-loader', 
 Abfrage: {
 Voreinstellungen: ["es2015"] 
 } 
 } 
 }, 
1
congzhaoyang
npm i -D [email protected]

Fügen Sie dies oben in Ihre webpack.conf ein:

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

Und ersetze dies:

new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        compress: {
            warnings: false
        }
    }),

Dadurch:

new UglifyJsPlugin({
            "uglifyOptions":
                {
                    compress: {
                        warnings: false
                    },
                    sourceMap: true
                }
        }
    ),
1
Krishna Gawali

Unterrichten Sie einfach UglifyJS ES6

Es gibt zwei Versionen von UglifyJS - ES5 und ES6 (Harmony). siehe git
Die ES5-Version wird standardmäßig mit allen Plugins geliefert. Wenn Sie jedoch explizit eine Harmony-Version installieren, verwenden diese Plugins diese stattdessen.

package.json

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

oder

npm install --save [email protected]:mishoo/UglifyJS2#harmony

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

UglifyJS WebPack Plugin

Wenn Sie die Version des Webpack-Plugins steuern möchten, müssen Sie es auch explizit installieren und verwenden. Dies ersetzt den eingebauten webpack.optimize.UglifyJsPlugin

npm install uglifyjs-webpack-plugin --save

yarn add uglifyjs-webpack-plugin

Webpack-Konfigurationsdatei

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

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

Weitere Informationen zum Webpack finden Sie unter
https://github.com/webpack-contrib/uglifyjs-webpack-plugin#install
https://github.com/mishoo/UglifyJS2/tree/harmony

1
Qwerty

stellen Sie sicher, dass Sie die .babelrc-Datei zum Stammverzeichnis Ihres Ordners hinzugefügt haben und diese enthält 

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