🐛
[esbuild] デバッグ用コードの出力を制御する
概要
ビルドAPI、DefineとMinify(minify syntax)を使用する。
説明
- Defineはビルド時に識別子を指定した値に置き換える機能
- Minify(minify syntax)は構文を書き換えてファイルサイズを小さくする機能
- デバッグ用コードが記述されている条件分岐の真偽をDefineで切り替え、実行されない場合Minify(minify syntax)によって削除させる
具体例
以下のJavaScriptファイルsrc.jsを例にビルドしてみる。
デバッグ用コードはconsole.log('?')として想定する。
console.log('!')
if (DEBUG) {
console.log('?')
}
デバッグビルド
デバッグ用コードconsole.log('?')が出力される。
esbuild src.js --define:DEBUG=true --minify-syntax
console.log("!"), console.log("?");
リリースビルド
デバッグ用コードconsole.log('?')は出力されない。
esbuild src.js --define:DEBUG=false --minify-syntax
console.log("!");
補足 (TypeScript)
変数DEBUGに警告が出るのでアンビエント宣言が必要。
DEBUG.d.tsとか適当な名前でソースコードと同階層に配置する。
declare const DEBUG: boolean
補足 (関連する機能)
ビルドAPI、Dropでdebuggerとconsoleメソッドを削除できる。
esbuild src.js --drop:debugger --drop:console
Discussion