Comment utiliser Webpack pour minifier le code ES6?
j'utilise webpack et je veux déployer mon site. Si je minifier et bundle mon code JavaScript, j'ai cette erreur:
Parse error: jeton Inattendu: nom (
Button)
Voici ma fourni le 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;
}
}
Note combinées de code, le mot-clé export est supprimé. Dans le développement, il n'y a pas d'erreurs lancées. Ici vous pouvez trouver mon fichier de configuration de 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,
},
})
] : []
};
si je change PROD pour faux, je n'ai pas d'erreur, si c'est vrai, j'ai une erreur venant d'en haut. Ma question Est de savoir si je peux activer ES6 dans Webpack?
3 réponses
Je ne sais pas si vous cherchez toujours une réponse à cela, mais maintenant vous pouvez inclure la version bêta de uglifyjs-webpack-plugin comme un plugin webpack et il utilisera uglify-es qui peut minifier le code ES6.
npm install uglifyjs-webpack-plugin
et puis dans votre webpack.config.js:
const Uglify = require("uglifyjs-webpack-plugin");
module.exports = {
entry: ...,
output: ...,
plugins: [
new Uglify()
]
};
ayant cette configuration webpack par défaut:
> npm list -g uglifyjs-webpack-plugin
+--
| `-- webpack@3.10.0
| `-- uglifyjs-webpack-plugin@0.4.6
`-- webpack@3.10.0
`-- uglifyjs-webpack-plugin@0.4.6
ce qui suit a fonctionné pour moi avec un esnext objectif:
npm i -D uglifyjs-webpack-plugin
ce qui donne le maintenant local uglifyjs-webpack-plugin:
> npm list uglifyjs-webpack-plugin
`-- uglifyjs-webpack-plugin@1.2.2
webpack.config.js
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
...
plugins: [
//new webpack.optimize.UglifyJsPlugin() @0.4.6 doesn't work
new UglifyJSPlugin() // @1.2.2 works with esnext
]
Voir le responsable de messages:
vient de savoir que uglifyjs-webpack-plugin de plus, le code ES6 n'est plus minifié. Ils ont commencé à le faire dans certaines versions, mais alors uglify-es ils utilisés n'est plus maintenu donc ils sont retombés àici
Si vous voulez rapetisser ES6 code, veuillez jeter un oeil à terser-webpack-plugin