uglifyjs2 및 Ionic으로 소스 맵을로드하는 방법은 무엇입니까?

Question

내 이오니아 앱의 경우 자바 스크립트 코드를 축소하기 위해 일부 꿀꺽 꿀꺽함 작업을 사용하고 있습니다. Uglifyjs2 코드 축소하고 :

<script src="dist/js-uglify/app.min.js"></script> 

:

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 따라서 내 index.html을에서 //# sourceMappingURL=app.min.js.map

로 끝나는 파일을 생성을 나는 다음과 같은 기준을 가지고

ionic run을 통해 앱을 빌드하고 실행하면 app.min.js 파일이로드됩니다. 그러나 소스 맵이 누락되었습니다. Chrome이 올바르게 설정되어있는 것 같습니다 (Enable JavaScript source maps 옵션이 설정 됨).

이 문제를 어떻게 해결할 수 있습니까? 전송 된 파일의 네트워크 목록에 원본 맵에 대한 항목이 있어야합니까? 어떻게하면지도를 수동으로 강제로로드 할 수 있습니까?

Answer 1

uglifyjs에 익숙하지 않지만 온라인으로 사용하는 some ionic software을 간략하게 살펴보면 플래그를 올바르게 구성하지 않았을 가능성이 있음을 알 수 있습니다. 당신이 달리는 것처럼 보입니다

uglifyjs [input files] [options] 

옵션 --source-map output.js.map을 사용합니다.

다른 관련이있을 수 있습니다. gruntjs GitHub에 따르면 플래그가 더 이상 작동하지 않습니다.

버전 3.x는 ... 소스가 매핑 구성 변경 사항을 소개

sourceMappingURL -이 지금 sourceMapPrefix 자동으로 계산됩니다 - ... 더 이상 위의 이유에 필요한

sourceMap - 만 부울 값을받습니다. 당신이 sourceMapRoot의 기본 이름을 가진 맵을 생성 - 당신의 소스의 위치는 지금 sourceMap가 true로 설정되어있을 때, 당신을 위해 계산하지만

를 필요한 경우 수동 소스 루트를 설정 그래서 어쩌면 대신에 당신이해야 sourceMappingURL를 사용 할 수 있습니다 부울을 true로 설정하면됩니까? 희망이 도움이!

Answer 2

gulp-uglifyjs is deprecated. 원본 맵이 제대로 작성되지 않았을 수 있습니다.

이

• 꿀꺽 - CONCAT
• 꿀꺽 - sourcemaps에게

예를 꿀꺽 - 추하게 :

현재 가장 좋은 방법은// CONCAT을 추하게 코드를 sourcemap하기 위해 다음과 같은 모듈을 사용하는 것입니다 :

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.

또한 크롬에서 app.min.js.map 파일은 Network 탭에 표시되지 않습니다. 주황색 폴더의 Sources 탭에 소스 맵이로드 된 경우 로드맵이로드되었는지 알 수 있습니다.