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

对于我的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

在my index.html中，我有以下参考：

当我通过

ionic run

构建并运行我的应用程序时，会加载文件

app.min.js

。但是，缺少sourcemap。Chrome似乎设置正确（设置了

启用JavaScript源代码映射

选项）

---

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

我不熟悉uglifyjs，但快速浏览一下在线使用它的浏览器，可能表明您没有正确配置标志。看起来你注定要逃跑

uglifyjs [input files] [options]

使用选项

——sourcemap output.js.map

好的，另一件可能相关的事情：根据，这个

sourceMappingURL

标志不再起作用

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

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

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

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

您的源地图可能未正确创建

当前的最佳实践是使用以下模块来映射代码：

• 狼吞虎咽
• 大口海螺
• 吞咽源地图

例如：

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'));
});

此外，在Chrome中，

app.min.js.map

文件不会显示在

Network

选项卡中。如果源地图显示在橙色文件夹中的

Sources

选项卡中，您将知道它们是否已加载