Как минимизировать код ES6 с помощью Webpack?

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


webpack ecmascript-6 minify
person H. Pauwelyn    schedule 31.05.2017    source источник
comment
Я предполагаю, что вы не хотите транспилировать свой код с помощью Babel?   -  person Felix Kling    schedule 31.05.2017
comment
github.com/webpack-contrib/babili-webpack-plugin и npmjs.com/package/uglify-es приходит на ум (но я не знаю, как для интеграции последнего с webpack).   -  person Felix Kling    schedule 31.05.2017

Ответы (4)


arrow_upward
71
arrow_downward

Не уверен, что вы все еще ищете ответ на этот вопрос, но теперь вы можете включить бета-версию uglifyjs-webpack-plugin в качестве плагина webpack, и он будет использовать uglify-es, который может минимизировать код ES6.

npm install uglifyjs-webpack-plugin

а затем в вашем webpack.config.js:

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

module.exports = {
    entry: ...,
    output: ...,
    plugins: [
        new Uglify()
    ]
};
person user3432422    schedule 13.07.2017
comment
Наконец-то отличное решение для минимизации с помощью webpack! Спасибо - person tristanbbq; 21.07.2017
comment
После нескольких часов копания это было единственное, что решило мою проблему. - person micjamking; 22.07.2017
comment
С помощью этих шагов вы получите Error: Cannot find module 'uglify-js', так как зависимость не установлена ​​по умолчанию. Как я могу установить uglify-es (желательно как локальную зависимость) и заставить плагин использовать его? - person kleinfreund; 10.09.2017
comment
Я работал над этим с помощью npm i --save-dev https://github.com/mishoo/UglifyJS2.git#harmony-v2.8.22. - person kleinfreund; 10.09.2017
comment
Просто чтобы уточнить для всех, кто находится в ситуации, похожей на @kleinfreund. Если вашей целью минимизации является ES5, вам все равно нужно npm i uglify-js --save-dev, так как uglify-webpack-plugin зависит от него. Если целью минимизации является ES6, вам необходимо установить то же, что и @kleinfreund выше. Это описано в документации в разделе «Установка»: github.com /webpack-contrib/uglifyjs-webpack-plugin/tree/v0.4.6 - person James; 12.09.2017
comment
Мне потребовались годы, чтобы найти это решение, если бы не ваш пост, я бы все еще рвал на себе волосы, пытаясь заставить UglifyJs и Babel играть хорошо. - person richbray89; 22.09.2017
comment
Привет. Я использовал ваш код, но после того, как код uglify получил эту ошибку: ERROR TypeError: n._moduleDoBootstrap не является функцией, вот мой пост stackoverflow.com/questions/47162403/ спасибо - person mrapi; 10.11.2017
comment
Я последовал твоему ответу. Это не сработало для меня. Тем не менее методы и свойства не минимизированы - person Uma Sankar; 01.06.2019

arrow_upward
43
arrow_downward

Только что узнал, что 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()]
  }
};
person Ajay Poshak    schedule 05.10.2018
comment
Это также прекрасно работает с плагином Babel ESM, так что вы можете отправить код ES6 в браузеры, которые это поддерживают :) - person Fabian von Ellerts; 22.02.2019

arrow_upward
4
arrow_downward

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

> 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
]

Смотрите соответствующие сообщения сопровождающего:

person bvj    schedule 28.02.2018
comment
как я могу использовать оптимизатор с этой настройкой? - person shorif2000; 11.07.2019
comment
@ shorif2000 вы должны иметь возможность передавать параметры оптимизации через конструктор. Взгляните на тесты в репозитории Github - person bvj; 12.07.2019

arrow_upward
1
arrow_downward

Использование [email protected] решает мою проблему.

Кроме того, в моем webpack.config.js

    {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
            presets: [require.resolve('babel-preset-env')]
        }
    }
person xingliang cai    schedule 14.11.2018
comment
Это потому, что uglifyjs-webpack-plugin теперь использует terser под капотом, который является поддерживаемой вилкой заброшенного uglify-es. Если вам нужно вручную настроить terser, используйте вместо этого terser-webpack-plugin. - person Coderer; 17.12.2018