[esbuild] ビルド時にデバッグ用コードを削除する

https://esbuild.github.io/

ビルド時にデバッグ用コードを削除する方法の一覧

• (方法1) Drop labels
• (方法2) Define + Minify(minify syntax)
• (方法3) Drop

(方法1) Drop labels

• ✨ v0.18.13

https://esbuild.github.io/try/

sample.js

const n = Date.now()
DEBUG: {
    console.log(n)
}

esbuild sample.js --drop-labels=DEBUG

const n = Date.now();

(方法2) Define + Minify(minify syntax)

https://esbuild.github.io/try/

sample.js

const n = Date.now()
if (DEBUG) {
    console.log(n)
}

esbuild sample.js --define:DEBUG=false --minify-syntax

const n = Date.now();

デバッグ用コードを削除しない場合

• --define:DEBUG=true

TypeScript: Cannot find name 'DEBUG'. (2304)

• 変数DEBUGに警告が出るのでアンビエント宣言が必要
• DEBUG.d.tsなど適当な名前の型定義ファイルをソースコードと同階層に配置する

declare const DEBUG: boolean

利用機能の詳細

Define

• ビルド時に識別子を指定した値に置き換える

---

Minify(minify syntax)

• ファイルサイズが小さくなるようにコードを書き換える
• 到達できないコード if (false) {} は削除される

(方法3) Drop

• ✨ v0.14.10

(※) 下記のデバッグ関連の機能を一括削除

• debugger
• consoleメソッド

https://esbuild.github.io/try/

sample.js

console.time()
const n = Date.now()
console.timeEnd()
debugger
console.log(n)

esbuild sample.js --drop:debugger --drop:console

const n = Date.now();

end