質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • JavaScript

    20348questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • webpack

    321questions

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

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 2,381

y-temp4

score 1

前提・実現したいこと

タイトルにあるエラーを解決したいです。

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

エラーが出るのは、remark-parseなどを呼び出しているときです。このライブラリを呼び出す過程でwebpack.config.jsresolveextensions.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の環境で開発をしています。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/22 19:26

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

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

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

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

    キャンセル

  • 2017/05/22 19:34

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

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • JavaScript

    20348questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • webpack

    321questions