ERROR in xxx.js from UglifyJs Unexpected token: operator (>) を解決したい

Question

###前提・実現したいこと
タイトルにあるエラーを解決したいです。

環境はwebpack2系でバンドルを行っており、その過程でproduction buildしたいのですがUglifyJSPlugin等を使っても上記のエラーが出てしまい困っています。

エラーが出るのは、remark-parseなどを呼び出しているときです。このライブラリを呼び出す過程でwebpack.config.jsのresolveのextensionsに.jsonの拡張子を付け足す必要がありました。

この状態でuglifyすると上記のエラーが出ます。remark-parseを使わない状態（jsonファイルの解決を行っていない環境）ではエラーは出ません。

###該当のソースコード

上記の説明にあるwebpack.config.jsです。

/* eslint comma-dangle: ["error",
 {"functions": "never", "arrays": "only-multiline", "objects":
 "only-multiline"} ] */

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const pathLib = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const devBuild = process.env.NODE_ENV !== 'production';

const config = {
  entry: [
    'es5-shim/es5-shim',
    'es5-shim/es5-sham',
    'babel-polyfill',
    './entry/application',
  ],

  output: {
    filename: 'webpack-bundle.js',
    path: pathLib.resolve(__dirname, '../app/assets/webpack'),
  },

  resolve: {
    // extensions: ['.js', '.jsx', '.css', '.scss'],
    extensions: ['.js', '.jsx', '.json', '.css', '.scss'],
  },
  plugins: [
    new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }),
    new ExtractTextPlugin('webpack-bundle.css'),
    new UglifyJSPlugin(),
  ],
  module: {
    rules: [
      {
        test: require.resolve('react'),
        use: {
          loader: 'imports-loader',
          options: {
            shim: 'es5-shim/es5-shim',
            sham: 'es5-shim/es5-sham',
          }
        },
      },
      {
        test: /\.jsx?$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.json$/,
        use: 'json-loader'
      },
      {
        test: /\.(scss|sass|css)$/i,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            { loader: 'css-loader', options: { minimize: !devBuild } },
            'postcss-loader',
            'sass-loader'
          ],
        }),
      }
    ],
  },
};

module.exports = config;

if (devBuild) {
  console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
  module.exports.devtool = 'eval-source-map';
} else {
  console.log('Webpack production build for Rails'); // eslint-disable-line no-console
}

###試したこと

調べるとuglifyにはharmonyもあるようですが、追加してみても動きませんでした（yarn add --dev git+https://github.com/mishoo/UglifyJS2.git#harmony）。

###補足情報(言語/FW/ツール等のバージョンなど)

あまり関係ないかもしれませんが、react_on_railsの環境で開発をしています。

Answer 1

他に使っているライブラリの中にremark-emojiがあったので、それの内部でallow functionを使わなくしたらuglifyjsが動くようになりました。

根本的な解決方法になっていないので、もしwebpackでES6のコードを圧縮することができる方がいたら教えてほしいです。

Answer 2

ES6の文法がサポートされていないのが原因のようです。

以下npmのドキュメントを翻訳してみました。

https://www.npmjs.com/package/uglifyjs-webpack-plugin
uglifyjs-webpack-pluginプラグインはuglify-jsに依存しているので、プラグインを使用するにはuglify-jsもインストールする必要があります。ただし、現在利用可能なuglify-js npmパッケージは、ES6コードの縮小をサポートしていません。
ES6をサポートするには、ES6対応の別名ハーモニーバージョンのUglifyJSを提供する必要があります。

あなたの圧縮ターゲットがES6の場合：

yarn add git://github.com/mishoo/UglifyJS2#harmony --dev
あなたの圧縮ターゲットがES5の場合：

yarn add uglify-js --dev

Comments

[y-temp4]

回答ありがとうございます！

`yarn add git://github.com/mishoo/UglifyJS2#harmony --dev`を実行し、devDependenciesには

"uglify-es": "git://github.com/mishoo/UglifyJS2#harmony",
"uglifyjs-webpack-plugin": "^0.4.3"

といった記述がある状態ですが、残念ながら同様のエラーが出てしまいますね･･･。

[y-temp4]

根本的な解決になっていないかもしれないですが、解決できたので解決方法を書いておきます。