Question

对于我的Ionic应用程序，我正在使用一些gulp任务来缩小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 - 仅接受布尔值。为sourceMapRoot生成一个带有默认名称的映射 - 现在，当sourceMap设置为true时，可以为您计算源的位置，但是如果需要，可以设置手动源根目录

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

Answer 2

gulp-uglifyjs is deprecated.您的源图可能无法正确创建。

目前的最佳做法是使用以下模块对代码进行uglify / concat / sourcemap：

gulp-uglify
gulp-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标签中，您就会知道它们是否已加载。

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

2 个答案: