调试变量不适用于 gulp sourcemaps + uglify

Fer*_*ira 5 javascript google-chrome-devtools gulp gulp-sourcemaps gulp-uglify

我有以下用于捆绑 javascript 的 gulp 任务:

gulp.task('js', function () {
    return gulp.src(paths.js)
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(concat('bundle.min.js'))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('dist'));
});
Run Code Online (Sandbox Code Playgroud)

当我在 Chrome 开发工具中运行它时,找到了源映射并且断点起作用,但无法调试变量

以这个角度代码块为例:

iarApp.config(['$animateProvider', function ($animateProvider) {
    $animateProvider.classNameFilter(/angular-animate/);
}]);
Run Code Online (Sandbox Code Playgroud)

如果我添加一个断点来查看 的值$animateProvider,我会得到以下信息:

在此处输入图片说明

但是如果我在 Uglify 中关闭变量重整:

.pipe(uglify({ mangle: false }))
Run Code Online (Sandbox Code Playgroud)

然后它的工作原理:

在此处输入图片说明

所以看起来 gulp-sourcemaps 插件在 Uglify 破坏名称后无法跟踪变量。

其他人能遇到同样的问题和/或知道解决方案吗?

Fer*_*ira 3

事实证明,目前这是不可能的,因为这不是源映射规范的一部分。

一些 建议添加此功能因此我们必须等到规范和实现更新。