web-dev-qa-db-ja.com

Webpackを使用してES6コードを縮小する方法は？

Webpackを使用していて、サイトを展開したい。 JavaScriptコードを縮小してバンドルすると、次のエラーが発生します。

解析エラー：予期しないトークン：名前（Button）

バンドルされていないコードは次のとおりです。

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

バンドルコードでは、キーワードexportが削除されています。開発では、エラーはスローされません。ここで、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,
            },
        })
    ] : []
};

PRODをfalseに変更するとエラーは発生せず、trueの場合は上からエラーが発生します。私の質問は、WebpackでES6を有効にできますか？

webpackecmascript-6minify
49
H. Pauwelyn

これに対する答えをまだ探しているかどうかはわかりませんが、今では glifyjs-webpack-plugin のベータ版をwebpackプラグインとして含めることができ、 glify- es ES6コードを縮小できます。

npm install uglifyjs-webpack-plugin

そして、webpack.config.jsで：

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

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

uglifyjs-webpack-pluginもES6コードを縮小しないことを知りました。彼らはいくつかのバージョンでそうし始めましたが、使用していたuglify-esはもはやメンテナンスされていないため、ES6ミニフィケーションをサポートしないuglify-jsにフォールバックしました。詳細 こちら

ES6コードを縮小する場合は、 terser-webpack-plugin をご覧ください。

terserは、uglify-esおよびuglify-js @ 3とのAPIおよびCLI互換性を保持するuglify-esのフォークです。

NPMでプラグインをインストールします：

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

または糸付き：

yarn add -D terser-webpack-plugin

次に、webpack構成のoptimizationセクションにプラグインを追加します。

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

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

このデフォルトのwebpack構成を持つ：

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

以下はesnextターゲットで私のために働いた：

npm i -D uglifyjs-webpack-plugin

ローカルになりました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
]

関連するメンテナーの投稿を参照してください。

3
bvj

[email protected]を使用すると、問題が解決します。

また、私のwebpack.config.jsで

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