Как загрузить исходные коды с помощью uglifyjs2 и Ionic?

Question

Для моего приложения Ionic я использую некоторые задачи gulp, чтобы минимизировать код Javascript. Uglifyjs2 minifies код:

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 - только принимает значение Boolean. Создает карту с именем по умолчанию для вас sourceMapRoot - расположение ваших источников в настоящее время рассчитывается для вас, когда sourceMap установлена ​​истина, но вы можете установить вручную корень источника при необходимости

Так может быть, вместо того, чтобы использовать sourceMappingURL Вам необходимо просто установите для boolean значение true? Надеюсь это поможет!

Answer 2

gulp-uglifyjs is deprecated. Возможно, что ваши исходные карты не созданы должным образом.

Текущая лучшая практика использовать следующие модули уродовать/CONCAT/sourcemap код:

• Глоток-уродовать
• Глоток-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 в оранжевой папке.