it-swarm.com.ru

Как минимизировать код 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, я получу ошибку сверху. У меня вопрос, могу ли я включить ES6 в Webpack?

49
H. Pauwelyn

Не уверен, что вы все еще ищете ответ на этот вопрос, но теперь вы можете включить бета-версию glifyjs-webpack-plugin в качестве плагина веб-пакета, и он будет использовать 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 они использовали больше не поддерживается, поэтому они отступили к uglify-js, которая не поддерживает минификацию ES6. Полная информация здесь

Если вы хотите минимизировать ES6 код, пожалуйста, посмотрите на terser-webpack-plugin

terser - это ветвь uglify-es, которая сохраняет совместимость API и CLI с uglify-es и uglify-js @ 3.

Установите плагин с помощью NPM через:

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

или с пряжей:

yarn add -D terser-webpack-plugin

Затем добавьте плагин в раздел optimization вашей конфигурации веб-пакета:

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

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

Наличие этой конфигурации веб-пакета по умолчанию:

> 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