LoginSignup
10
7

More than 5 years have passed since last update.

Node.jsのUglifyJSとUglifyJS-Webpack-Pluginを使っているプロジェクトでビルドが通らなくなって難儀した件について

Last updated at Posted at 2017-05-25

ビルドに失敗

しばらく触っていなかった、angular+phpなプロジェクトのコードを修正し, いつも通りステージ環境にデプロイしたところ, エラーが発生しデプロイ失敗してしまいました.
ログを調べたところ,

npm run bundle

でエラーが発生しているようなので, ローカルの開発環境でbundleを実行してみると,

Error: Cannot find module 'uglify-js'

というエラーが発生していることが確認される.
そもそも, npm installの時点で

npm WARN uglifyjs-webpack-plugin@0.2.2 requires a peer of uglify-js@^2.7.5 but none was installed.

というワーニングが発生してしまっているので, やはりuglify-jsが見つからない様子.

package.jsonの uglify-jsについて見てみると

package.json
        "uglify-js": "git://github.com/mishoo/UglifyJS2#harmony", 
        "uglifyjs-webpack-plugin": "^0.2.0", 

となっており, 実際にこのリポジトリとブランチは存在し(https://github.com/mishoo/UglifyJS2#harmony), バージョンも3.0.11となので
pluginの要求する要件は見たいしているはず.
謎は深まるばかりであった.

意外な事実

設定は問題ないはずなんだけどな~, と思いつつnode_modulesディレクトリをlsしてみると...

▶ ll node_modules
合計 416K
drwxr-xr-x 593 vagrant vagrant  20K  5月 23 23:01 .
drwxr-xr-x   4 vagrant vagrant 4.0K  5月 23 23:03 ..
drwxr-xr-x   2 vagrant vagrant 4.0K  5月 23 23:01 .bin
...
...
drwxr-xr-x   5 vagrant vagrant 4.0K  5月 23 23:00 ua-parser-js
drwxr-xr-x   5 vagrant vagrant   87  5月 23 23:00 uglify-es  # <- ???
drwxr-xr-x   3 vagrant vagrant  116  5月 23 23:00 uglify-to-browserify
drwxr-xr-x   4 vagrant vagrant   95  5月 23 23:00 uglifyjs-webpack-plugin
drwxr-xr-x   2 vagrant vagrant  119  5月 23 23:00 uncontrollable
...
...

なんということでしょう, 事実uglify-jsは存在せす, 代わりにuglify-esというディレクトリが作られているではないですか!!

ことの経緯を調べてみたところ,

  • もともとuglify-jsはJSのES2015には非対応のライブラリだった.
  • そこで, harmonyブランチを作り, そちらでES2015対応版の開発を進めていた.
  • ES2015への対応は完了したということで, v3.0リリースとともに, 名前をuglify-jsからuglify-esに改めた

という話のようです.

開発が進んで機能が充実するのは大変すばらしいことだと思いますが, 公開済みの名前を変えるっていうのはちょっと...

対応策

現象は分かったけどどう対応するべきかといろいろ調べてみたところ, stackoverflow(urlは紛失)に

package.json
        "uglify-js": "git://github.com/mishoo/UglifyJS2#harmony", 

package.json
        "uglify-js": "git://github.com/mishoo/UglifyJS2#harmony-v2.8.22", 

とすれば, 名前が変わる前のバージョンのものが取得できるという情報が見つかりました.
真似してpackage.jsonを編集し, 無事ライブラリのインストールからbundleまで実行することができました.

おそらく, uglify-webpack-pluginの方がそのうち対応するかとは思うのですが,
同じ問題にぶつかって悩んでいる方の助けになったら幸いです.

10
7
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
7