Wie zu minifizieren ES6-code mit Webpack?
Ich bin mit webpack und wollen zum bereitstellen von meine Website. Wenn ich minifizieren und bundle-meine JavaScript-code, ich habe diesen Fehler:
Parse error: Unerwartetes token: name (
Button
)
Hier ist mein nicht gebündelt code:
'use strict';
export class Button { //<-- Error happens on this line
constructor(translate, rotate, text, textscale = 1) {
this.position = translate;
this.rotation = rotate;
this.text = text;
this.textscale = textscale;
}
}
Beachten Sie gebündelt code das Schlüsselwort export
entfernt. In der Entwicklung, es werden keine Fehler geworfen. Hier könnte Ihr meine Konfigurationsdatei von WebPack:
var webpack = require('webpack');
var PROD = true;
module.exports = {
entry: "./js/entry.js",
output: {
path: __dirname,
filename: PROD ? 'bundle.min.js' : 'bundle.js'
},
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader"
}
]
},
plugins: PROD ? [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
output: {
comments: false,
},
})
] : []
};
Wenn ich PROD
auf false, ich habe keine Fehler, wenn stimmt, ich habe Fehler von oben. Meine Frage ist kann ich Sie aktivieren ES6 in Webpack?
- Ich nehme an, Sie wollen nicht transpile Ihren code mit Babel?
- github.com/webpack-contrib/babili-webpack-plugin und npmjs.com/package/uglify-es in den Sinn kommen (aber ich weiß nicht, wie zu integrieren, letztere mit webpack).
Du musst angemeldet sein, um einen Kommentar abzugeben.
Nicht sicher, ob Sie noch auf der Suche nach einer Antwort auf diese, aber jetzt können Sie die beta-version von uglifyjs-webpack-plugin als webpack-plugin und es verwenden werde hässlich machen-es kann minifizieren ES6-code.
und dann in Ihre webpack.config.js:
Error: Cannot find module 'uglify-js'
da die Abhängigkeit wird nicht standardmäßig installiert. Wie kann ich die installierenuglify-es
(vorzugsweise als eine lokale Abhängigkeit) und habe das plugin verwenden?npm i --save-dev https://github.com/mishoo/UglifyJS2.git#harmony-v2.8.22
.npm i uglify-js --save-dev
als hässlich machen-webpack-plugin hat eine Abhängigkeit auf. Wenn Sie minifizierung Ziel ist ES6 - zu installieren, müssen Sie das gleiche wie @kleinfreund oben. Das ist bedeckt in den docs unter 'Installieren': github.com/webpack-contrib/uglifyjs-webpack-plugin/tree/v0.4.6Kam gerade zu wissen, dass
uglifyjs-webpack-plugin
auch nicht verkleinern ES6-code mehr. Sie begann also, in einigen Versionen, aber dannuglify-es
verwendet, Sie ist nicht mehr gepflegt, so dass Sie fiel zurück aufuglify-js
das nicht unterstützen ES6 Verkleinerung. Vollständigen Details hierWenn Sie möchten, zu minifizieren
ES6
code, werfen Sie bitte einen Blick auf terser-webpack-pluginInstallieren Sie das plugin mit NPM über:
oder mit Garn:
Dann fügen Sie das plugin in der in der
optimization
Abschnitt Ihres webpack config:Diese Standard-webpack config:
die folgenden arbeitete für mich mit einem esnext Ziel:
gedeckt, die Ortszeit uglifyjs-webpack-plugin:
webpack.config.js
Finden Sie unter den verwandten des Betreuers Beiträge:
Mithilfe der [email protected] löst mein problem.
Auch in meine webpack.config.js
uglifyjs-webpack-plugin
jetzt verwendetterser
unter der Haube, die ein aufrechterhalten der Gabel aufgegebenuglify-es
. Wenn Sie manuell konfigurieren müssenterser
verwenden Sie dieterser-webpack-plugin
statt.