JavaScriptのSourceMapってあるじゃないですか。実はきちんと理解してないんですよね。
ってことで調べました。
SourceMapとは
SourceMapとは、コンパイル前とコンパイル後の対応関係を記したファイル。だそうです。
Json形式で記述されています。
なぜSourceMapが必要なのか
では、なぜコンパイル前後の対応関係が必要なのでしょうか。
それは、AltJSやReact、ES6のような言語は、デバッグが難しいからです。
ここでのデバッグとは、コンパイル後にブラウザで確認するフェーズのことを言います。
コンソールに吐かれるJavaScriptのErrorは、コンパイル後の箇所を表示します。ただし、コンパイル後のファイルは見づらく、デバッグに向きません。
そこで、SourceMapを用意しておくとブラウザがSourceMapを頼りに、当該箇所を見に行ってくれるようです。
便利ですね。積極的に使っていきたいです。
SourceMapを生成するには
SourceMapを生成するには何かしらのツールを使う必要があるみたいです。
たとえばGulpでは、gulp-sourcemapsというnpmのパッケージを使えば生成できるようです。あるいは、Webpackならばconfigでdevtoolという項目に指定することで生成できます。
参考にしたブログ様。
SourceMap について調べてみました。 | イントフロート スタッフブログ
このポストでは、上記のブログ記事を引用する形で進めていきます。
