如何使用uglifyjs2和Ionic加载源地图？

Question

对于我的Ionic应用程序，我使用了一些吞噬任务来缩减Javascript代码。Uglifyjs2缩小了代码：

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。但是，缺少源地图。Chrome似乎设置正确(选项Enable JavaScript source maps已设置)。

我该如何解决这个问题？已传输文件的网络列表是否应包含源映射的条目？我可以手动强制Chrome加载地图吗？

Answer 1

我不熟悉uglifyjs，但是快速浏览一下在线使用它的some ionic software就会发现，也许你没有正确配置你的标志。看起来你注定要参选

uglifyjs [input files] [options]

使用选项--source-map output.js.map。

好的，另一件事可能是相关的:根据gruntjs GitHub，sourceMappingURL标志不再起作用。

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

sourceMappingURL -这是现在自动计算的sourceMapPrefix -由于上述原因不再需要...

sourceMap -仅接受布尔值。为您生成具有默认名称的地图根目录-现在，当sourceMap设置为true时，将为您计算源的位置，但您可以根据需要手动设置源sourceMapRoot

因此，也许您应该将布尔值设置为true，而不是使用sourceMappingURL？希望这能有所帮助！

Answer 2

gulp-uglifyjs is deprecated.您的源地图可能没有正确创建。

当前的最佳实践是使用以下模块来uglify/concat/sourcemap您的代码：

• gulp uglify
• gulp concat concat-uglify
• gulp concat concat-uglify gulp concat gulp

示例：

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选项卡中，您将知道源地图是否已加载。