ビルドに失敗
しばらく触っていなかった、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
について見てみると
"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は紛失)に
"uglify-js": "git://github.com/mishoo/UglifyJS2#harmony",
を
"uglify-js": "git://github.com/mishoo/UglifyJS2#harmony-v2.8.22",
とすれば, 名前が変わる前のバージョンのものが取得できるという情報が見つかりました.
真似してpackage.jsonを編集し, 無事ライブラリのインストールからbundleまで実行することができました.
おそらく, uglify-webpack-pluginの方がそのうち対応するかとは思うのですが,
同じ問題にぶつかって悩んでいる方の助けになったら幸いです.