読者です 読者をやめる 読者になる 読者になる

生ECMAScript6開発環境

ECMAScript6は、現在はまだトランスパイラで書く時代なんだろうけど、electron用ならes6をそのまま実行したい気もしたので環境構築してみたメモ。

 

エディタ

求めるもの

(1) ES6構文の色付け

これだけ。

ところであまり関係ないけど、エディタで括弧なり引用符入れると対応する括弧なり引用符が自動的に入力される機能、あれを邪魔だと思うのは私だけ?どのエディタでもデフォルトONでツライ。

現実

(1) 各種トランスパイラが普及してるだけあって、atomでもvs codeでも問題なし。

これまた関係ないけど、vs codeの.vssettingsフォルダが邪魔というだけの理由で私はatom派。vimプラグインはvs code版の方が優秀っぽいんだけどね。

 

minifier

javascriptのminifierって、日本語ではどう呼ぶのが一般的なのやら。「軽量化ツール」?

求めるもの

(1) 空白文字削除

 これだけは必須。他は「あればいいな」程度。
 他人にあまり簡単にソースを読まれたくないリリース物ってのはあるわけで。

(2) 変数名を短いものにする

 どうせ(1)をやるなら、なるべく小さくなるべく難読化を。

(3) 定数同士の演算を1つの定数にまとめる

 例えば「ラジアンで90度」という意図ならば、可読性の観点から1.57ではなく3.14/2と書きたい。しかし速度にこだわる場面では逐一計算されないか不安。実行時最適化されそうな気もするけど、minify時に1.57に書き換わるのを確認できた方が安心。

(4) 定数と関数のインライン展開

 ちょっとした計算を関数化した方が読みやすい。でも速度にこだわるなら関数化で遅くなるというジレンマに対する処方。

現実

これこそが今日の本題。なにせ有名どころが全然es6に対応してない。(4)なんかはもうClosure Compilerそのものだが、現状Closure Compilerはes6を出力しない。

最終的にはuglifyJS2のharmonyブランチを使うことにした。versionは2.8.22。そもそもexperimentalという位置づけだし、しっかりバグにも遭遇したけど、それでも(1)だけなら使えそう。(2),(3)はこの完成度では敬遠しておく。(4)はそもそも機能自体ない。

ちなみに遭遇したバグというのは、rest parametersを使った

function f(v,....arr){}

みたいな関数の呼び出し側が、

f(0,1,2,3)

から

f(0,1)

に書き換わってるというもの。無茶しやがって。まあ配列渡しで書けばOK。

 

ビルド

es6のimport/exportは一部のトランスパイラくらいでしか使えないらしいけど、

uglifyjs -e -m -c -o main.js *.js

みたいに1つのjsにすればまぁいいよね。