web-dev-qa-db-ja.com

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

最近私はいくつかのJavaScriptライブラリに同梱されている.js.map拡張子のファイルを見ました（ Angular のように）、それは私の頭の中でいくつかの質問をしました

  • それは何のため？ Angularの人たちはなぜ.js.mapファイルを配達しようとしますか？
  • （JavaScript開発者として）どうやってangular.min.js.mapファイルを使用できますか？
  • 私のJavaScriptアプリケーション用に.js.mapファイルを作成することを気にするべきですか？
  • どのように作成されますか？私はangular.min.js.mapを見ました、そしてそれは奇妙にフォーマットされた文字列で埋められました、それで私はそれが手動で作成されないと思います。
javascriptangularjssource-maps
298
Muhammad Reda

.mapファイルは、縮小されたjsおよびcss（そして現在はtsも）ファイル用です。それらはSourceMapsと呼ばれます。 angular.jsファイルのようにファイルを縮小すると、何千行ものきれいなコードが必要になり、ほんの数行の醜いコードになります。うまくいけば、本番環境にコードを出荷するときは、完全版の未統一バージョンではなく、縮小コードを使用してください。あなたのアプリが本番環境にあり、エラーがあるとき、ソースマップはあなたの醜いファイルを取るのを助け、あなたがコードのオリジナルバージョンを見ることを可能にするでしょう。あなたがソースマップを持っていなかったなら、どんなエラーもせいぜい不可解に思えるでしょう。

CSSファイルでも同じです。 SASSまたはLESSファイルを取得してCSSにコンパイルすると、元の形式のようには見えません。ソースマップを有効にすると、変更された状態ではなくファイルの元の状態を見ることができます。

だから、あなたの質問に順番に答えるために：

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

これが理にかなっていると思います。

447
frosty

質問の最後の部分に集中したいだけでした。 ソースマップファイルはどのようにして作成されますか？ソースマップを作成できることがわかっているビルドツールをリストすることによって。

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

ソースマップを作成できるツールが他にあるかどうかわかりません。

25
Muhammad Reda
  • 開発者はどうやって使うことができますか？

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

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

  2. Minifiacationツール（良いもの）はあなたの。min.jsファイルにコメントを追加します。

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

これはあなたの。mapファイルを接続します。

min.jsとjs.mapファイルの準備ができたら.. 。

  1. Chrome：dev-toolsを開き、ソースタブに移動します。未整理のアプリケーションファイルが保存されるsourcesフォルダを参照してください。
23
garfunkel61

マップファイルは、縮小前のファイルを縮小後のファイルにマップします。縮小していないファイルに変更を加えると、その変更は自動的に縮小版のファイルに反映されます。

11
Surendra Yadav

マップファイルの使い方を追加するだけです。私はubuntuにchromeを使っていて、私がソースに行きファイルをクリックすると、マップファイルがあれば元のファイルを見ることができるというメッセージとそのやり方を教えてくれます。

今日使ったAngularファイルについては、クリックします。

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

リストを閲覧して、調べたいファイルを表示し、問題がある場所を確認します。

2
rotato poti