esbuildをtypescriptで使ってみた

経緯

webpackがメンテ終了していると聞いて、いろいろ探してesbuildにたどり着いた Turbopackってのが後継らしいけど、今回はesbuildを利用

利用方法

インストール

npm install --save-dev esbuild

自分の適用方法

ビルドスクリプトを用意して、npm scriptsにコマンド書いて実行している。

npm scriptsの内容

package.jsonには、下記を追記

  "scripts": {
    "build": "node esbuild.js"
  },

esbuild.jsは、ビルドスクリプトの章を参照

ビルドスクリプト

esbuild.jsとして、以下を記載

const esbuild = require("esbuild");
const path = require("path");

esbuild
  .build({
    entryPoints: [path.resolve(__dirname, "index.ts")],
    bundle: true,
    outfile: path.resolve(__dirname, "index.js"),
    tsconfig: path.resolve(__dirname, "tsconfig.json"),
    sourcemap: true,
  })
  .catch(() => process.exit(1));

ハマったこと

sourcemapが出力されない

tsconfig.jsonで、sourcemap:trueを指定していたが、sourcemapが出なくて、悩んでいた。
esbuildで明示的に指定する必要があるってのを知って、憤りを感じた。。。
tsconfig.jsonで指定しているから、それを見てくれよって思いましたわ。。。

感想

webpackよりは、簡素になった気がするが、そもそも規模が小さいから、あまり比較にはならんな。

黒魔術と言われているが、esbuildでも、罠はありそうだな。。。
設定に書いたやつをesbuildで再度定義するのは、なんかモヤモヤする。

ちなみに、情報収集は、全部chatGPTで事足りた。
Google検索が代価されるのは、本当になりそう。
bardも使っているが、やり取りはchatGPTがまだ優勢な気がする。