web-dev-qa-db-fra.com

Comment réduire le code ES6 à l'aide de Webpack?

J'utilise webpack et je souhaite déployer mon site. Si je minimise et associe mon code JavaScript, j'ai cette erreur:

Erreur d'analyse: Jeton inattendu: nom (Button)

Voici mon code non fourni:

'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;
    }
}

Remarque: dans le code fourni, le mot clé export est supprimé. En développement, aucune erreur n'est commise. 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 modifie PROD en false, je n'ai aucune erreur, si c'est vrai j'ai une erreur d'en haut. Ma question est la suivante: puis-je activer ES6 dans Webpack?

webpackecmascript-6minify
49
H. Pauwelyn

Je ne sais pas si vous cherchez toujours une réponse à cette question, mais vous pouvez maintenant inclure la version bêta de glifyjs-webpack-plugin en tant que plug-in Webpack et il utilisera glify- es ce qui peut réduire le code ES6.

npm install uglifyjs-webpack-plugin

et ensuite dans votre webpack.config.js:

const Uglify = require("uglifyjs-webpack-plugin");

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

Vient de savoir que uglifyjs-webpack-plugin _ ne réduit pas non plus le code ES6. Ils ont commencé à le faire dans certaines versions, mais ensuite uglify-es Ils ne sont plus utilisés, ils sont donc revenus à uglify-js qui ne prend pas en charge la minification ES6. Détails complets ici

Si vous voulez minifier ES6 code, jetez un oeil à terser-webpack-plugin

terser est un fork d'uglify-es qui conserve la compatibilité des API et CLI avec uglify-es et uglify-js @ 3.

Installez le plugin avec NPM via:

npm install terser-webpack-plugin --save-dev

ou avec du fil:

yarn add -D terser-webpack-plugin

Ensuite, ajoutez le plugin dans la section optimization de votre config webpack:

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  //...
  optimization: {
    minimizer: [new TerserPlugin()]
  }
};
28
Ajay Poshak

Ayant cette configuration webpack par défaut:

> npm list -g  uglifyjs-webpack-plugin
+-- 
| `-- [email protected]
|   `-- [email protected]
`-- [email protected]
  `-- [email protected]

ce qui suit a fonctionné pour moi avec une cible esnext:

npm i -D uglifyjs-webpack-plugin

cédant le désormais local uglifyjs-webpack-plugin:

 > npm list  uglifyjs-webpack-plugin
 `-- [email protected]

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 les messages du mainteneur associés:

3
bvj

Utiliser [email protected] résout mon problème.

Aussi, dans mon webpack.config.js

    {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
            presets: [require.resolve('babel-preset-env')]
        }
    }
1
xingliang cai