JavaScript ソースマップ (.map ファイル) はどのように使用すればよいですか? 質問する

JavaScript ソースマップ (.map ファイル) はどのように使用すればよいですか? 質問する

最近、.js.mapいくつかのJavaScriptライブラリ(例えば角度)、そして私の頭の中にいくつかの疑問が浮かびました。

  • それは何のためですか? Angular の開発者はなぜファイルの配信にこだわるのでしょうか.js.map?
  • JavaScript 開発者として、このangular.min.js.mapファイルをどのように使用すればよいでしょうか?
  • .js.mapJavaScript アプリケーション用のファイルを作成することに注意する必要がありますか?
  • どのように作成されるのでしょうか? 確認したところangular.min.js.map、奇妙な形式の文字列がいっぱいだったので、手動で作成されたものではないと思います。

ベストアンサー1

これらの.mapファイルは、縮小されたJavaScriptとCSS(そしてTypeScriptも)ファイルです。ソースマップ. angular.jsファイルのようなファイルを縮小すると、数千行のきれいなコードが数行の醜いコードに変わります。コードを本番環境に出荷するときには、縮小されていない完全なバージョンではなく、縮小されたコードを使用することをおすすめします。アプリが本番環境でエラーが発生した場合、ソース マップは醜いファイルを取得し、元のバージョンのコードを確認するのに役立ちます。ソース マップがなければ、エラーはせいぜい不可解なものにしか見えません。

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

それで、順番に質問にお答えします:

  • 何のためにあるのでしょうか?醜いコードの参照を解除するため
  • 開発者はどのようにこれを使用できるでしょうか?実稼働アプリのデバッグに使用します。開発モードでは、Angular のフル バージョンを使用できます。実稼働では、縮小バージョンを使用します。
  • js.map ファイルの作成を気にする必要がありますか?実稼働コードを簡単にデバッグできるようにしたい場合は、そうする必要があります。
  • どのように作成されるのでしょうか?ビルド時に作成されます。他のファイルと同様に .map ファイルを自動的にビルドできるビルド ツールがあります。出力ファイルがプロジェクトのルートディレクトリにない場合、ソースマップは失敗します #71

これが意味を成すといいのですが。

おすすめ記事