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

【问题标题】：How to load sourcemaps with uglifyjs2 and Ionic?如何使用 uglifyjs2 和 Ionic 加载源地图？
【发布时间】：2016-07-15 16:34:38
【问题描述】：

对于我的 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 加载地图吗？

【问题讨论】：

标签： google-chrome ionic-framework source-maps uglifyjs uglifyjs2

【解决方案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 时会为您计算来源的位置，但您可以根据需要手动设置源根目录

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

【讨论】：

【解决方案2】：

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

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

gulp-丑化
gulp-concat
gulp-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'));
});

此外，在 Chrome 中，app.min.js.map 文件不会显示在 Network 选项卡中。如果源地图显示在橙色文件夹中的 Sources 选项卡中，您就会知道它们是否已加载。

【讨论】：