UglifyJS で ES2015 を minify する

5703 ワード
es2015 Node.js Node.js テキストリンク

UglifyJS は JavaScript のコードを minify したり難読化するためのツールです。
その UglifyJS を使って ES2015 のコードを minify する方法を書き留めます。

2017年10月 追記

月日は流れ、現在 ES2015+ 対応のブランチは別ライブラリとして npm に登録されているようです。その名も uglify-es !!

npm コマンドでインストール出来ます。

$ npm install uglify-es -g

インストールされるコマンド名は相変わらず uglifyjs のようですね。

$ uglifyjs [input files] [options]


以下、今となっては古い内容ですが↓↓

サンプルコード

適当に Hello,world するコードを、

input.js
'use strict';

document.addEventListener('DOMContentLoaded', (e) => {
  let name = 'world';

  document.querySelector('.foobar').textContent = `Hello,${name}!`;
}, false);

letキーワード・アロー関数・テンプレート文字列を使ってみています。
これを minify しましょう。

普通にやるとエラーを吐いてコケる

まずは 公式リポジトリ に書かれているとおり普通にインストールして普通に実行してみます。

$ npm install uglify-js -g
$ uglifyjs --compress --mangle -- input.js

すると、

アロー関数のところで Parse Error を吐いて止まります。
その他、letキーワード・テンプレート文字列・ジェネレーター関数なども許してくれないようです。ツラいですね。

Issue が上がっていた

まぁ当然要望が上がりますよね。Issue がありました。

Harmony support · Issue #448 · mishoo/UglifyJS2

流れをザッと追っていくと、

  • ES2015 対応は harmony ブランチで進めている
  • そのうち master にマージされる予定

とのこと。

harmony ブランチを試す

まず、さっきインストールしてしまったものをアンインストールします。

$ npm remove uglify-js -g

はい、


あらためて GitHub からインストールして。試してみましょう。
npm は Git リポジトリの URL を直接指定することでリポジトリからもインストール出来ます。
# の後に続けてブランチを指定すれば master 以外のブランチからもインストール可能です。

$ npm install -g https://github.com/mishoo/UglifyJS2.git#harmony
$ uglifyjs --compress --mangle -- input.js

出来ました

注意点

npm のバージョンが古いと https 経由でのインストールに失敗することがあります。
インストール中に失敗する場合は npm update -g npm で npm を最新にしてみてください。