3

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

4

2 回答 2

0

gulp-uglifyjs已弃用。您的源地图可能没有正确创建。

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

  • 吞咽丑化
  • 吞咽连接
  • 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'));
});

有关为什么这些 gulp 模块工作得更好的解释，请参阅此相关答案。

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

于 2016-07-24T23:30:10.600 回答
0

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

uglifyjs [input files] [options]

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

好的，另一件可能相关的事情：根据gruntjs GitHub，该sourceMappingURL标志不再有效。

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

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

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

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

于 2016-07-24T06:14:07.733 回答