EclipseのJavaScriptプロジェクト内でClosure Compilerを使う

ここの1.Download the Closure Compiler packageのcompiler.jarをクリックしてcompiler-latest.zipをダウンロードしました。

解凍してできたcompiler-latestフォルダを~/binへ移動させました。

~/bin/compiler-latest/closure-compiler-v20190513.jar

Closure Compilerへのパスはこうなりました。

使用するオプション

Flags and Options · google/closure-compiler Wiki

 --language_out ECMASCRIPT_2015

 アロー関数やモジュールなどECMAScript2015の文法を使っているのに、ECMAScript2015に対応していないブラウザで使えるようにしようとすると$jscompという大きな関数が追加されて圧縮率が下がってしまいます。

なので、 --language_out ECMASCRIPT_2015をつけてコンパイルすることで余分な関数が付加されることを防ぎます。

Internet Explorerでは動かなくなると思います。

--isolation_mode IIFE

Bloggerに直付けするスクリプトなので、グローバル変数を汚さないように即時関数で囲んで出力されるようにします。

(function(){%output%)).call(this); 

--isolation_mode IIFEオプションを指定するとこの形式で出力されます。

%output%に圧縮されたコードが入ります。

出力された関数はBloggerの<script></script>にそのまま貼り付けると実行できました。

モジュールもすべて展開されているのでtype="module"にする必要はありませんでした。

--compilation_level ADVANCED

このオプションを使うと圧縮レベルが最大になります。

圧縮するときに厳しく文法がチェックされますので、きっちりコードを書いておかないといけません。

グローバル変数の出力に関係のない部分はすべて削除されます(Advanced Compilation and Externs  |  Closure Compiler  |  Google Developers)。

JavaScriptをClosure CompilerのADVANCEDモードに完全対応させるその方法！ - Cybozu Inside Out | サイボウズエンジニアのブログ

この記事が役立ちました。

windowグローバルオブジェクトのプロパティに出力を出しておくとそのためのコードは消されずに圧縮されます。

Makefileを作成してJavaScriptプロジェクト内に入れる

JavaScriptプロジェクト内のファイルの変換にはmakeを使うことにしました。

# プロジェクトフォルダへの相対パス。
PROJECT_HOME=..
# closure-compilerへの絶対パス。
COMPILER=~/bin/compiler-latest/closure-compiler-v20190513.jar
# closure-compilerのオプション。
COMPILERFLAGS=--language_out ECMASCRIPT_2015 --isolation_mode IIFE --compilation_level ADVANCED
# 出力ファイル名にはEclipseプロジェクト名を小文字化したものを使う。
MODULE_NAME=$(shell echo $(PROJECT_NAME) | tr A-Z a-z)
# 出力フォルダ。
OUT_MINIFIED=$(PROJECT_HOME)/minified

DELRECURSIVE=rm -rf
MKDIR=mkdir -p
JAVA_JAR=java -jar
SCRIPT=$(PROJECT_HOME)/script
JS_SRCS:=$(wildcard $(SCRIPT)/*.js)

# Targets
.PHONY: ALL
ALL : $(MODULE_NAME)

$(OUT_MINIFIED)/$(MODULE_NAME).min.js : $(JS_SRCS)
 -$(MKDIR) $(@D)
 $(JAVA_JAR) $(COMPILER) $(COMPILERFLAGS) --js $^ --create_source_map $(@D)/$(MODULE_NAME).map --js_output_file $(@D)/$(MODULE_NAME).min.js

$(MODULE_NAME) : $(OUT_MINIFIED)/$(MODULE_NAME).min.js

.PHONY: clean
clean :
 -$(DELRECURSIVE) $(OUT_MINIFIED)/*.min.js
 -$(DELRECURSIVE) $(OUT_MINIFIED)/*.map

このMakefileをJavaScriptプロジェクト内のtoolsフォルダに入れました。

PROJECT_NAMEはmakeの引数でプロジェクト名を渡します。

 make PROJECT_NAME=プロジェクト名

Konsoleから実行する時のコマンドはこのようになります。

scriptフォルダにある複数のjsファイルがあっても一つのmin.jsファイルにしますが、jsファイルを減らしたときはmake cleanでターゲットファイルを削除してからmakeしないといけません。

makeを起動するJavaScript

let project_name = require('path').basename(process.cwd());
require('child_process').exec('\
 cd tools;\
 make -dr PROJECT_NAME={};\
 '.replace("{}", project_name), (error, stdout, stderr) => {
 if (error) {
  console.error(`exec error: ${error}`);
 } else {
  stdout && console.log(`stdout: ${stdout}`);
  stderr && console.log(`stderr: ${stderr}`);
 }});

これをmake.jsとしてMakefileと同じフォルダに置きました。


プロジェクトのフォルダ構成はこのようになります。

圧縮するjsファイルはscriptフォルダにいれます。

make.jsを右クリック ー＞ Run As ー＞ 1 Node.js Application、で実行させると、プロジェクト内にminifiedフォルダが作成されてそこに圧縮されたファイルとソースマップファイルが生成されます。

makeには暗黙のルールをキャンセルするrオプションとデバッグ情報を出力するdオプションを追加しています。