JavaScript .mapファイル-JavaScriptソースマップ

最近.js.map、いくつかのJavaScriptライブラリ（Angularなど）に同梱されている拡張子を持つファイルを見たことがあります。

• それはなんのためですか？Angularのスタッフが.js.mapファイルを配信するのはなぜですか？
• （JavaScript開発者として）angular.min.js.mapファイルをどのように使用できますか？
• .js.mapJavaScriptアプリケーション用のファイルを作成する必要がありますか？
• どのように作成されますか？調べてみたところangular.min.js.map、奇妙な形式の文字列でいっぱいだったので、手動で作成したものではないと思います。

これらの.mapファイルはjs、css（現在tsも）縮小されたファイル用です。それらはSourceMapsと呼ばれます。angular.jsファイルのようにファイルを縮小すると、数千行のきれいなコードが必要になり、数行の見苦しいコードに変換されます。うまくいけば、コードを本番環境に出荷するときは、完全な非縮小バージョンの代わりに縮小コードを使用しています。アプリが本稼働中でエラーが発生した場合、sourcemapは醜いファイルを取得するのに役立ち、コードの元のバージョンを確認できます。ソースマップがない場合、エラーはせいぜい謎めいたものに見えるでしょう。

CSSファイルについても同様です。SASSファイルまたはLESSファイルを取得してCSSにコンパイルすると、元の形式とはまったく異なります。ソースマップを有効にすると、変更された状態ではなく、ファイルの元の状態を確認できます。

したがって、質問に順番に答えるには：

• それはなんのためですか？醜いコードを逆参照するには
• 開発者はそれをどのように使用できますか？本番アプリのデバッグに使用します。開発モードでは、Angularの完全版を使用できます。本番環境では、縮小バージョンを使用します。
• js.mapファイルを作成する必要がありますか？プロダクションコードをより簡単にデバッグできるようにしたい場合は、そうする必要があります。
• どのように作成されますか？ビルド時に作成されます。他のファイルと同じように、.mapファイルをビルドできるビルドツールがあります。https://github.com/gruntjs/grunt-contrib-uglify/issues/71

これが理にかなっているといいのですが。

質問の最後の部分に焦点を当てたかっただけです。ソースマップファイルはどのように作成されますか？ソースマップを作成できるビルドツールを一覧表示します。

1. Grunt：プラグインを使用grunt-contrib-uglify
2. Gulp：プラグインを使用gulp-uglify
3. Googleクロージャ：パラメータを使用--create_source_map

• 開発者はそれをどのように使用できますか？

私はコメントでこれに対する答えを見つけられませんでした、これがどのように使用できるかです：

1. js.mapファイルをindex.htmlファイルにリンクしないでください（その必要はありません）。

2. Minifiacationツール（優れたツール）が.min.jsファイルにコメントを追加します。

   //＃sourceMappingURL = yourFileName.min.js.map

.mapファイルを接続します。

ときmin.jsとjs.mapファイルは準備ができています...

3. Chrome：dev-toolsを開き、[ ソース ]タブに移動します。縮小されていないアプリケーションファイルが保存されているソースフォルダーが表示されます。

マップファイルは、非縮小ファイルを縮小ファイルにマップします。縮小されていないファイルに変更を加えると、変更は自動的にファイルの縮小バージョンに反映されます。

マップファイルの使用方法を追加するだけです。私はubuntuにChromeを使用しています。ソースに移動してファイルをクリックすると、マップファイルがある場合、元のファイルとその方法を表示できることを通知するメッセージが表示されます。

今日使用したAngularファイルについては、

Ctrl-Pと元のファイルのリストが小さなウィンドウに表示されます。

次に、リストを参照して、調査したいファイルを表示し、問題の場所を確認できます。