LoginSignup
15
15

More than 5 years have passed since last update.

UglifyJS で ES2015 を minify する

Last updated at Posted at 2016-09-06

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

すると、

20160907_10.png

20160907_03.png

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

Issue が上がっていた

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

Harmony support · Issue #448 · mishoo/UglifyJS2

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

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

とのこと。

harmony ブランチを試す

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

$ npm remove uglify-js -g

20160907_09.png

はい、


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

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

20160907_06.png

20160907_08.png

出来ました :v: :wink:

注意点

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

15
15
0

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
15
15