Wie lade ich Quellkarten mit uglifyjs2 und Ionic?

Question

Für meine Ionic App verwende ich einige Schluckaufgaben, um den Javascript-Code zu minimieren. Uglifyjs2 minifies den Code:

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

Dies erzeugt die Dateien

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

app.min.js somit mit //# sourceMappingURL=app.min.js.map

In meinem index.html endet Ich habe folgende Referenz:

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

Beim Erstellen und Ausführen meiner App über ionic run wird die Datei app.min.js geladen. Die Quellkarte fehlt jedoch. Chrome scheint korrekt eingerichtet zu sein (die Option Enable JavaScript source maps ist eingestellt).

Wie kann ich dieses Problem angehen? Sollte die Netzwerkliste der übertragenen Dateien einen Eintrag für die Quellkarte enthalten? Kann ich Chrome manuell dazu zwingen, die Karte zu laden?

Answer 1

Ich bin nicht vertraut mit Uglifyjs, aber ein kurzer Blick auf some ionic software, dass es online verwendet, schlägt vor, dass Sie möglicherweise nicht richtig konfiguriert Ihre Flags. Es sieht aus wie Sie gemeint sind

uglifyjs [input files] [options] 

Mit der Option --source-map output.js.map auszuführen.

Ok, eine andere Sache, die relevant sein kann: nach der , dass sourceMappingURL Flag nicht mehr funktioniert.

Version 3.x eingeführt Änderungen Quelle Karten Konfigurieren ...

sourceMappingURL - Das nun automatisch sourceMapPrefix berechnet wird - nicht mehr erforderlich, dass die oben genannten Grund ...

sourceMap - Nur akzeptiert einen booleschen Wert. Erzeugt eine Karte mit einem Standardnamen für Sie sourceMapRoot - Die Lage Ihrer Quellen ist jetzt für Sie berechnet, wenn sourceMap auf true gesetzt, aber Sie können manuelle Quelle Wurzel gesetzt, wenn

benötigt

Vielleicht anstelle von sourceMappingURL Sie sollten Setze einfach den Wahrheitswert auf wahr? Hoffe das hilft!

Answer 2

gulp-uglifyjs is deprecated. Es ist möglich, dass Ihre Quellkarten nicht ordnungsgemäß erstellt werden.

Aktuelle Best Practice ist es, die folgenden Module zu verwenden, um uglify/Concat/sourcemap Code:

• schluck-verunstalten
• schluck-concat
• schluck-sourcemaps

Beispiel :

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.

Auch in Chrome wird die app.min.js.map Datei nicht in der Registerkarte Network angezeigt. Sie werden wissen, ob Ihre Quellkarten geladen wurden, wenn sie in der Registerkarte Sources in einem orangefarbenen Ordner angezeigt werden.