この記事では、ここで開発したセットアップにソースマップを追加する方法を紹介しますthis series .

ソースマップとは

我々のアプリケーションへの任意のバンドルまたはコンパイルのステップを紹介するように、我々はソースコード＆ブラウザで実行しているものの違いを開始します.これは特にデバッグ、またはエラーログに問題があります-ブラウザでは、ビルドコードを表示しますが、ソース内の問題を修正しようとします.ソースマップを使用すると、ブラウザがソースに実行するコードをマップできます.

ソースマップの有効化

ソースマップを有効にするには、esbuild.config.js :

...

esbuildServe(
  {
    ...
    outfile: "www/main.js",
+   sourcemap: true,
  },
  { root: "www" }
);

これにより、サーバーを再起動した後、ブラウザの開発ツールでソースを見ることができます.Firefoxからの例

リンク

The repo , the branch .
あなたは私のチェックアウトすることができますvideo course about esbuild .

概要

セットアップにソースマップを追加する方法を見ました.私が新しいESBuild内容を持っているとき、あなたが聞くことに興味があるならば、あなたはサインアップすることができますhere .