問題タブ [gulp-sourcemaps]

JavaScriptをバンドルするための次のgulpタスクがあります。

Chrome 開発ツールでこれを実行すると、ソースマップが見つかり、ブレークポイントが機能しますが、変数をデバッグできません。

次のAngularコードのチャンクの例を見てください:

の値を確認するためにブレークポイントを追加すると$animateProvider、次のようになります。

しかし、Uglify で変数マングリングをオフにすると、次のようになります。

それは動作します：

そのため、Uglify が名前をマングルした後、gulp-sourcemaps プラグインは変数を追跡できないようです。

他の誰かが同じ問題を抱えたり、解決策を知ったりできますか?

私はnpm update今日走ったが、その後に起こったのは惨事だ。パッケージをインストールするのに苦労しましたが、すべてが適切な場所にあるように見えたのでgulp、SCSS コードを CSS にコンパイルするタスクを開始しました。

このコードは私の問題を再現します:

を介してこのコードを実行するgulp defaultと、次の結果が得られます。

www/sass/example.scss

www/css/example.css

www/css/example.css.map

sources生成されたソース マップの配列には、"../../stdin/"代わりに"example.scss"! しかし、なぜ？

次の名前のscssソースファイルがstyle.scssあります/style：

そして、次の名前の別のscssソースファイルreset.scssが存在します/style：

これらは sass によってコンパイルされ、style.min.css内に存在するソース マップが使用され/styleます。

これは結果のマップ ファイルで、次の場所にstyle.min.css.mapあります/style。

私はsassを呼び出すためにgulpを使用しています。関連する構成は次のとおりです。

WebStorm 11.0.1 はこれを完全に理解しているようです。

Chrome DevTools は、マッピングを正しく理解できません。それは明らかに努力しています。ただし、すべてのマッピングreset.scssは、正しいファイルと場所ではなく、さまざまな場所を指しています。@importを の実際のコンテンツに置き換えて両方のファイルを手動で結合するとreset.scss、マッピングは chrome で正しく機能し、 内の正しい場所を指しますstyle.scss。

ここで何が起こっているのでしょうか？

編集: Microsoft Edge (Windows 10 の新しい IE) は、ブラウザー内の開発ツール内でマッピングを正しく理解します。

編集 2: Firefox は、まったく同じ方法で Chrome と同じ問題を経験しています。

編集 3:別の scss ソース ファイルを追加しましたtest.scss:

次に、これをファイルにインポートしました。style.scssファイルは次のようになります。

Chrome は複数のソース ファイルがあることを認識しているようですが、マップされた場所が正しくなく、style.scss決してポイントされません。

繰り返しになりますが、Edge と Webstorm は完全に機能します。Chrome と Firefox には同じ問題があります。

タスクは次のとおりです。

問題は、ソース マップが次のようになっていることです。

これは私が期待したものではありません。クロム開発者でスタイルが元の少ないソースにマップされるブートストラップに似たものが欲しいです。私のソースマップは、sass パイプの結果であると想定している stdin にマッピングされているだけです。gulp-sourcemaps は最後の操作のマップのみを作成していると思います...

縮小中に JavaScript ファイルのソース マップを生成します。マップ ファイルは、マップ ファイルの隣にある縮小された JS ファイルからの相対 URL を使用して参照されます。の最後にあるコメントの例を次に示しapp-e47a6637.jsます。

ソース マップの解像度は、Firefox で期待どおりに機能します。ただし、Chrome はマップ ファイルをロードしません。

追加情報：

• もちろん、JS ソースマップは設定で有効になっています。
• Chromeとサーバーの間にプロキシを入れてみました。Chrome はマップ ファイルを要求しません。
• gulp-sourcemapsマップファイルを生成するために使用します。
• Chrome のワークスペース機能を使いたくありません。元のソースファイルを表示したいだけです。

Chrome でソース マップを有効にするにはどうすればよいですか?

私が現在開発中のアプリケーションでは、Gulp を学習し、ソース マップを使用しています。アプリケーションは Typescript と Javascript のハイブリッドです。ファイルは連結され、縮小されます。ファイルを渡すときgulp-uglifyにエラーが発生します。

これは、 を使用した場合にのみ発生しgulp-sourcemapsます。パイプラインでソース マップ生成呼び出しを削除すると、問題は発生しませんが、ソース マップもありません。

知っておくと便利かもしれませんが、typescript は に./js/ts/、javascript は にあり./js/Appます。

私の現在のワークフローでは、browserify バンドルを作成する必要がありますが、非 commonjs js ライブラリをファイルの先頭に連結してグローバル変数を公開すると同時に、http リクエストの数と js ファイルのサイズを削減したいと考えています。(これらのライブラリの一部は、他のバンドルでも必要になる場合があります)

私は現在、browserify バンドルを作成し、必要なライブラリを出力ファイルの先頭に連結する gulp タスクを持っていますが、ストリームをマージする時点で、ソースマップが壊れていて、Web インスペクタであることがわかりました。結果のマップには、個別の js モジュールではなく、事前にブラッシュアップされた browserify バンドルのみが表示されます。

(複数のバンドルが存在する場合、私のタスクは設定 json 配列も読み取って複数のバンドルを構築することに注意してください)

マージ前のストリームからソースマップを保存する方法はありますか? true に設定されている loadmaps が機能していないようです。

また、健全性チェックとして、私のアプローチは賢明と見なされますか? 目的の結果を達成するための非常に簡単な方法がありませんか?