3

對於我的Ionic應用程序,我正在使用一些吞嚥任務來縮小Javascript代碼。 Uglifyjs2 minifies代碼:如何使用uglifyjs2和Ionic加載sourcemaps?

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因此與//# sourceMappingURL=app.min.js.map

在我的index.html結束文件我有以下幾點參考:

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

當我通過ionic run構建並運行我的應用程序時,加載了文件app.min.js。但是,sourcemap缺失。 Chrome似乎設置正確(選項Enable JavaScript source maps已設置)。

我該如何解決這個問題?傳輸文件的網絡列表是否應包含源映射的條目?我能以某種方式手動強制Chrome加載地圖嗎?

回答

0

我不熟悉uglifyjs,但快速查看some ionic software,它在線使用它表明,也許你沒有正確配置你的標誌。它看起來像你要跑

uglifyjs [input files] [options] 

使用選項--source-map output.js.map

好吧,另一件可能相關的事情:根據gruntjs GitHubsourceMappingURL標誌不再起作用。

版本3.x引入更改配置源映射 ...

sourceMappingURL - 這是自動計算現在sourceMapPrefix - 不再需要上述原因...

sourceMap - 只接受一個布爾值。生成的地圖具有默認名稱爲您sourceMapRoot - 的源位置現在爲您計算時sourceMap設置爲true,但如果需要的話

您可以手動設定源根所以也許不是使用sourceMappingURL你應該只需將布爾值設置爲true?希望這可以幫助!

0

gulp-uglifyjs is deprecated.您的源地圖可能沒有正確創建。

當前最好的做法是使用下面的模塊來醜化/ CONCAT/sourcemap您的代碼:

  • 吞-醜化
  • 吞-的concat
  • 吞-sourcemaps

實施例:

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選項卡中顯示,您就會知道它們是否已加載。

相關問題