銀の弾丸

プログラミングに関して、いろいろ書き残していければと思っております。

ES6に対応した「grunt-contrib-uglify-es」を使用する

grunt-contrib-uglifyのES6対応版がgrunt-contrib-uglify-esという名で別途公開されてましたというお話。

f:id:takamints:20180322202444p:plain

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター! 速習シリーズ
WINGSプロジェクト (2015-08-28)
売り上げランキング: 1,828

JavaScriptのタスクランナーGruntからUglify-Jsを使用してスクリプトを圧縮・難読化する grunt-contrib-uglify なんですが、ES6に対応していなくて困ってました。 ES6の「アロー関数」や「 letによるブロックスコープの変数宣言」は、うっかりミスの防止に役立ちますから今後なるべく使いたい。 この手のバグは見つけにくいので手を焼きますから。

「しかし uglify でコケるから・・・」ってのはまさに本末転倒。ということで、本腰入れて「どうにかならんか?」と調べてみたら Stack Overflow に、

「grunt-contrib-uglify の harmony ブランチが使えるぜ!」という情報がありました。 このブランチで(その名の通り)ES6対応しているようです(完全ではないとも書いてありますが)。 で、GitHub から特定ブランチをnpmでインストールするには以下のようにすれば良いらしい。

$ npm install git://github.com/gruntjs/grunt-contrib-uglify.git#harmony --save-dev

これを実行すると grunt-contrib-uglify-es というモジュールがインストールされたので、まさかと思って npm で grunt-contrib-uglify-es を検索すると、なんとそのものズバリが公開されているじゃありませんか。てことで、GitHubから取ってこなくても、以下の普通なnpmでよかったみたい。

$ npm install grunt-contrib-uglify-es --save-dev

加えてモジュール名が変わったので、 Gruntfile.js のタスクロード部分も書き換えが必要ですね。

Gruntfile.js

    ~
    grunt.loadNpmTasks('grunt-contrib-uglify-es');
    ~

これでめでたくアロー関数とletが使えるようになりました。

元々入ってた grunt-contrib-uglify は、残しておいても問題なさそうですが、 まあ、使わないならアンインストールしておくべきでしょう。

参考サイト