uglifyjs2とIonicでソースマップを読み込むには？

Question

私のイオニアのアプリでは、JavaScriptのコードを小さくするためにいくつかのgulpタスクを使用しています。 Uglifyjs2はコードminifies：

<script src="dist/js-uglify/app.min.js"></script> 

：

gulp.task('uglify',() => { 
    gulp.src(paths.uglify) 
    .pipe(uglify('app.min.js', { 
     outSourceMap: true 
    })) 
    .pipe(gulp.dest('./www/dist/js-uglify')); 
}); 

これは

www 
| dist 
| | js-uglify 
| | | app.min.js 
| | | app.min.js.map 

app.min.jsは、このように私のindex.htmlで//# sourceMappingURL=app.min.js.map

で終わるファイルを生成し、私は次の参照を持っています

ionic run経由でアプリケーションをビルドして実行すると、ファイルapp.min.jsが読み込まれます。ただし、ソースマップがありません。 Chromeが正しく設定されているようです（オプション：Enable JavaScript source mapsが設定されています）。

この問題にはどのように対処できますか？送信されたファイルのネットワークリストにソースマップのエントリが含まれている必要がありますか？どこか手動でChromeに地図を読み込ませることはできますか？

Answer 1

私はuglifyjsに精通していませんが、オンラインで使用しているsome ionic softwareを簡単に見てみると、フラグを正しく構成しなかった可能性があります。あなたが走っているようです。

uglifyjs [input files] [options] 

オプション--source-map output.js.mapを使用しています。

また、関連性のある別のもの：gruntjs GitHubによると、フラグは機能しなくなりました。

バージョン3.xは...ソースが をマップの構成に変更を導入

sourceMappingURL - これは今sourceMapPrefix自動的に計算された - ...もはや上記の理由のために必要な

sourceMap - のみブール値を受け入れます。あなたがsourceMapRootのデフォルト名でマップを生成します - あなたのソースの場所は、今sourceMapがtrueに設定されている場合、あなたのために計算されていますが、

を必要に応じて手動でソースルートを設定するので、多分代わりにあなたがすべきsourceMappingURLを使用することができますブール値をtrueに設定するだけですか？お役に立てれば！

Answer 2

gulp-uglifyjs is deprecated.ソースマップが正しく作成されていない可能性があります。

現在のベストプラクティスは、あなたのコードをsourcemap//連結をuglifyするには、以下のモジュールを使用することです：

• 一気化連結
• ゴクゴク-sourcemapsを一気-uglify

例：

var gulp = require('gulp'); 
var uglify = require('gulp-uglify'); 
var concat = require('gulp-concat'); 
var sourcemaps = require('gulp-sourcemaps'); 
gulp.task('build-js', function() { 
    return gulp.src('app/**/*.js') 
    .pipe(sourcemaps.init()) 
    .pipe(uglify()) 
    .pipe(concat('app.min.js')) 
    .pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '../app' })) 
    .pipe(gulp.dest('dist')); 
}); 

See this related answer for an explanation of why these gulp modules work better.

また、Chromeではapp.min.js.mapファイルがNetworkタブに表示されません。オレンジ色のフォルダのSourcesタブに表示されている場合、ソースマップが読み込まれているかどうかを知ることができます。