読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

import { Fun } from 'programming'

SourceMapとは何なのか

JavaScriptのSourceMapってあるじゃないですか。実はきちんと理解してないんですよね。

ってことで調べました。

 

SourceMapとは

SourceMapとは、コンパイル前とコンパイル後の対応関係を記したファイル。だそうです。

Json形式で記述されています。

 

なぜSourceMapが必要なのか

では、なぜコンパイル前後の対応関係が必要なのでしょうか。

それは、AltJSやReact、ES6のような言語は、デバッグが難しいからです。

 

ここでのデバッグとは、コンパイル後にブラウザで確認するフェーズのことを言います。

コンソールに吐かれるJavaScriptErrorは、コンパイル後の箇所を表示します。ただし、コンパイル後のファイルは見づらく、デバッグに向きません。 

 

そこで、SourceMapを用意しておくとブラウザがSourceMapを頼りに、当該箇所を見に行ってくれるようです。

 

便利ですね。積極的に使っていきたいです。

 

SourceMapを生成するには

SourceMapを生成するには何かしらのツールを使う必要があるみたいです。

たとえばGulpでは、gulp-sourcemapsというnpmのパッケージを使えば生成できるようです。あるいは、Webpackならばconfigでdevtoolという項目に指定することで生成できます。

 

 

参考にしたブログ様。

SourceMap について調べてみました。 | イントフロート スタッフブログ

このポストでは、上記のブログ記事を引用する形で進めていきます。