Ошибка UglifyJs при сборке ReactJS приложения?

Question

[Хазрат Гаджикеримов]

Всем привет, только что решил собрать продакшн, выполнил команду npm run build... и получил ошибку:

ERROR in js/app.js from UglifyJs
Invalid assignment [js/app.js:26191,31]

Я полез в app.js на 26191 строку и вижу там:

const renderNode = (node, key) => {
  if (node.nodeName === '#text') {
    return node.value;
  }

То есть тут ES6 стрелочная функция, но ведь в конфиге webpack указано, что необходимо с помощью babel трансформировать в ES5:

{
   test: /\.js$/,
   exclude: /node_modules/,
   use: ['babel-loader', 'eslint-loader']
}

Дальше начал искать, откуда этот код попал в сборку app.js, и оказалось что он с node_modules (т.е пакет написан на ES6)
Хорошо подумал я, может дело в том, что я запретил обрабатывать (exclude) папку node_modules?
Но если я удалю строку (exclude: /node_modules/), то возникнет еще одна ошика, вернее очень много ошибок, так как ESLint (Standard Styly), мало пакетов в соответствии с выбранным стилем написаны
Далее я добавил новый reles:

{
   test: /\.js/,
   include: /node_modules/,
   use: ['babel-loader']
}

Работает, но меня не покидает мысль, а разве правильно это? обрабатывать все пакеты из node_modules babel'ом? время сборки сильно увеличилось...
Как вы решаете такие проблемы, в частности, когда в продакшн сборку попадают стрелочные функции, да и не только они, а вообще ES6, не говоря уже о ES7 фичах?

Вот ссылка на конфиг webpack

Comments

[Сергей delphinpro]

include: /node_modules/name-package,

[Сергей delphinpro]

что за пакет-то?

[Хазрат Гаджикеримов]

Сергей: там много пакетов, в частности react-render-html

[Хазрат Гаджикеримов]

Сергей: так просто include: /node_modules/name-package в основную то не сработает, там у меня ESLint, т.е создать новый rules? и инклудить только нужные пакеты в ручном режиме?

Answer 1

[Larisa Moroz]

Babel-у требуется указать настройки (preset) по которым будет транспилироваться код.
Документация по использованию babel-loader:

{
  test: /\.js$/,
  exclude: /node_modules|/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['env']
    }
  }
}

В данном случае используется babel-preset-env, который автоматически определяет требуемые полифиллы и т.п.… Соответственно, его также нужно подключить в приложение:
yarn add babel-preset-env --dev
или
npm install --save-dev babel-preset-env

Comments

[Хазрат Гаджикеримов]

babel-preset-env у меня добавлен, вот .babelrc и package.json
Даже добавив опции к лоадеру babel'a все равно та же самая ошибка:

ERROR in js/app.js from UglifyJs
Invalid assignment [js/app.js:26611,31]

[Larisa Moroz]

hazratgs: У webpack-a в зависимостях более старая версия плагина uglifyjs (она не поддерживает ES6) , которая ставится в папку node_modules/webpack/node_modules/uglifyjs-webpack-plugin и используется при сборке . Попробуйте перед сборкой удалять эту папку ( node_modules/webpack/node_modules/uglifyjs-webpack-plugin ), чтобы использовалсь harmony-версия uglifyjs , которая у вас в devDependencies .

[Хазрат Гаджикеримов]

Larisa Moroz: Так это только одна беда, в продакш ведь пойдет ES6 (стрелочные функции), а я хотел бы большую поддержку браузеров и соответственно, чтобы babel трансормировал ES6/7 в ES5

[Larisa Moroz]

Ну вы для этого и подключили babel и babel-loader, чтобы код был транспилирован в ES5 .
Для этого в настройках babel-preset-env нужно явно указать, какая версия JS/браузеров/uglifyJS вам нужна на выходе. Надо немного покурить вот это: https://github.com/babel/babel-preset-env , там есть и про UglifyJS

Answer 2

[Никита Гущин]

Это баг, к сожалению последняя версия UglifyJs не поддерживает всякие es6. Вам либо надо транслировать в старый JS, а если вы все же этого не хотите - поставьте отдельно от вебпака плагин. У меня все работало на этой версии:
"uglifyjs-webpack-plugin": "^0.4.3",

Comments

[Хазрат Гаджикеримов]

У меня он стоит отдельным плагином и его же подключаю отдельно, но проблема в том, что из node_modules пакеты написанные в соответствии с ES6+ babel-loader не обрабатывает, поэтому возник вопрос, обрабатывать их отдельно babel'ом или есть более изящное решение?

Answer 3

[Хазрат Гаджикеримов]

В итоге в конфиг продакшна добавил:

{
   test: /\.js$/,
   exclude: /src/,
   include: /node_modules/,
   use: ['babel-loader']
}

Оно работает, но это костыль...