node.js 向けのファイルを束ねてブラウザで実行できるようにする browserify で、node.js 用の通常コードとブラウザ用コードで一部の記述を変えたいときに使えるプラグイン browserify-sed を書いてみたので紹介します。
私は軽量に make でビルドする派なので CLI では以下のように使います。
browserify src/index.js -o build/bundle.js \
-t [ browserify-sed "s/__VERSION__/1.2.3/g" ]
↑の例では、ソースコード中の __VERSION__ という文字列をすべて 1.2.3 に置き換えています。
以前は perl -i -pe や sed -i でソースコード書き換えをしていたので、それと同じ sed 書式になっています。perl で慣れてる人には読みやすいはず。既存 Makefile もコピペで切替えできた。
なお perl や sed は行単位のストリーミング置換なのに対して、
browserify-sed はファイル全体をマッチさせる仕組みなので、
複数行に渡る置換もできます。
逆に、行単位で、行頭・行末でマッチさせたいときは mg フラグを付けて下さい。
browserify src/index.js -o build/bundle.js \
-t [ browserify-sed "s#^(exports.*? = void 0)#// $1#mg" ]
↑は TypeScript が関数とかを exports するときに定義前にいちど void 0 で先行初期化するコードを吐くのを削除するものです。たいてい要らない。
複数の置換を行うときは、; で並べます。
# ; で並べる
browserify src/index.js -o build/bundle.js \
-t [ browserify-sed "s/foo/FOO/g; s/bar/BAR/g;" ]
# たぶん下記でも OK
browserify src/index.js -o build/bundle.js \
-t [ browserify-sed "s/foo/FOO/g" "s/bar/BAR/g" ]
browserify src/index.js -o build/bundle.js \
-t [ browserify-sed "s/foo/FOO/g" ]
-t [ browserify-sed "s/bar/BAR/g;" ]
事前に browserify 本体と browserify-sed を準備して下さい。
npm install browserify browserify-sed
20行くらいの短いコード なので、特定のファイルのみを置換対象に絞るとかの細かなオプションは、実装していません。
macOS の sed は GNU でないので -i に対応していなかったり、
Alpine など Docker の軽量イメージでは perl が入っていなかったり、
ときどき面倒なことがあった。
browserify-sed を使えば node だけでビルドが完結できて便利になりそう。
なお s/foo/bar/ の文字列置換処理（置換関数へのコンパイル）の実装は別モジュール sed-lite.ts です。
