JavaScript コードの整形

著者：関 勝寿
公開日：2023年2月3日
キーワード： javascript

JavaScript コードの構文チェック (lint) と圧縮 (minify) について調べながらやってみたことをまとめる。Makefile を作成して作業を一本化した。

構文チェック (lint)

ESLintを使った。.eslintrc.jsonは、"extends": "eslint:all"でESLint Rulesのルールがすべて適用してから、lintを実行しながら好みではないオプションを削っていった。chromiumのページにあったものも参照した。

圧縮 (minify)

uglifyjsを使った。コマンドラインオプションでは、これを使った。

--comments [filter]         Preserve copyright comments in the output. By
                            default this works like Google Closure, keeping
                            JSDoc-style comments that contain "@license" or
                            "@preserve". You can optionally pass one of the
                            following arguments to this flag:
                            - "all" to keep all comments
                            - a valid JS RegExp like `/foo/` or `/^!/` to
                            keep only matching comments.
                            Note that currently not *all* comments can be
                            kept when compression is on, because of dead
                            code removal or cascading statements into
                            sequences.

コメントは先頭の著作権表示だけを残すために、そこには必ず入れているMITという単語を使って--comments /.*MIT.*/とした。

Makefile

構文チェックと圧縮をまとめるMakefileを作った。

ESFLAGS := --fix
UGFLAGS := --comments /.*MIT.*/ --verbose --warn

all: canvasevent.min.js graph.min.js 15.min.js unsoda.min.js

%.min.js: %.js
	eslint $(ESFLAGS) $<
	uglifyjs $(UGFLAGS) $< > $@

install:
	npm install -g eslint uglify-js

.PHONY: install

このディレクトリでmakeを実行すると、ターゲット all で対象となっているファイルに対して、ターゲット%.min.jsの

%.min.js: %.js
	eslint $(ESFLAGS) $<
	uglifyjs $(UGFLAGS) $< > $@

によって構文チェックと圧縮がされる。ここで、%.min.js: %.jsはパターンルール (pattern rule) であり、%は空ではないすべての文字列にマッチする。したがって、たとえばターゲット 15.min.js に対応する事前要件 (必要条件, prerequisite) は 15.js となり、15.js が更新されると校正と圧縮がされて 15.min.js が生成される。

$@と$<は自動変数 (automatic variable) であり、$@はターゲットのファイル名、$<は最初の事前要件の名前である。ESFLAGSとUGFLAGSは変数(variable)である。