browserify中にソースコードを文字列置換で書き換えるbrowserify-sed

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 です。