자바 스크립트 .map 파일-Javascript 소스 맵
최근에 Angular.js.map 와 같은 일부 JavaScript 라이브러리와 함께 제공되는 확장명을 가진 파일을 보았는데 머릿속에 몇 가지 질문이 생겼습니다.
- 무엇입니까? Angular의 직원이
.js.map파일 을 제공하는 이유는 무엇 입니까? - (JavaScript 개발자로서)
angular.min.js.map파일을 어떻게 사용할 수 있습니까? .js.mapJavaScript 응용 프로그램 용 파일을 만드는 데 관심이 있습니까?- 어떻게 만들어 집니까? 나는 살펴 보았고
angular.min.js.map이상한 형식의 문자열로 채워져 수동으로 생성되지 않았다고 가정합니다.
.map에 대한 파일은 js과 css(지금은 ts너무) 파일이 축소 된 된 그. 이를 소스 맵이라고합니다. angular.js 파일과 같은 파일을 축소하면 수천 줄의 예쁜 코드가 필요하며 몇 줄의 못생긴 코드로 바뀝니다. 코드를 프로덕션으로 배송 할 때 전체 비정형 버전 대신 축소 된 코드를 사용하고 있기를 바랍니다. 앱이 제작 중이고 오류가 발생하면 소스 맵이 미운 파일을 가져 오는 데 도움이되며 코드의 원래 버전을 볼 수 있습니다. 소스 맵이 없다면 오류는 기껏해야 비밀리에 보일 것입니다.
CSS 파일과 동일합니다. SASS 또는 LESS 파일을 가져 와서 CSS로 컴파일하면 원래 형식과 전혀 다르게 보입니다. 소스 맵을 활성화하면 수정 된 상태 대신 파일의 원래 상태를 볼 수 있습니다.
따라서 순서대로 질문에 대답하려면 :
- 무엇입니까? 못생긴 코드를 역 참조하려면
- 개발자는 어떻게 사용할 수 있습니까? 프로덕션 앱을 디버깅하는 데 사용합니다. 개발 모드에서는 정식 버전의 Angular를 사용할 수 있습니다. 프로덕션에서는 축소 버전을 사용합니다.
- js.map 파일을 생성해야합니까? 프로덕션 코드를 더 쉽게 디버깅 할 수 있다면 신경 써야합니다.
- 어떻게 만들어 집니까? 빌드시 작성됩니다. .map 파일을 다른 파일과 마찬가지로 빌드 할 수있는 빌드 도구가 있습니다. https://github.com/gruntjs/grunt-contrib-uglify/issues/71
이것이 의미가 있기를 바랍니다.
질문의 마지막 부분에 집중하고 싶었습니다. 소스 맵 파일은 어떻게 생성됩니까? 소스 맵을 만들 수있는 빌드 도구를 나열하여
- 그런트 : 플러그인 사용
grunt-contrib-uglify - 꿀꺽 : 플러그인 사용
gulp-uglify - 구글 폐쇄 : 매개 변수 사용
--create_source_map
소스 맵을 만들 수있는 다른 도구가 있는지 모르겠습니다.
- 개발자는 어떻게 사용할 수 있습니까?
의견에서 이에 대한 답변을 찾지 못했습니다. 사용 방법은 다음과 같습니다.
- index.html 파일에서 js.map 파일을 연결하지 마십시오 (필요하지 않음).
최소화 도구 (좋은 도구)는 .min.js 파일에 주석을 추가 합니다.
// # sourceMappingURL = yourFileName.min.js.map
.map 파일 을 연결합니다 .
min.js 및 js.map 파일이 준비 되면 ...
- Chrome : dev-tools를 열고 소스 탭으로 이동하면 축소되지 않은 애플리케이션 파일이 보관 된 소스 폴더 가 표시 됩니다.
맵 파일은 축소되지 않은 파일을 축소 된 파일에 매핑합니다. 축소되지 않은 파일을 변경하면 변경 사항이 파일의 축소 된 버전에 자동으로 반영됩니다.
지도 파일 사용법에 추가하기 만하면됩니다. 우분투에 크롬을 사용하고 소스로 이동하여 파일을 클릭하면 맵 파일이 있으면 원본 파일을 볼 수 있고 수행 방법을 알려주는 메시지가 나타납니다.
오늘 작업 한 Angular 파일의 경우 클릭
Ctrl-P와 원본 파일 목록이 작은 창에 나타납니다.
그런 다음 목록을 탐색하여 검사하려는 파일을보고 문제가있는 위치를 확인할 수 있습니다.
참고 URL : https://stackoverflow.com/questions/21719562/javascript-map-files-javascript-source-maps
'IT' 카테고리의 다른 글
| 인라인 네임 스페이스 란 무엇입니까? (0) | 2020.03.08 |
|---|---|
| 데이터의 POST에 대한 400 대 422 응답 (0) | 2020.03.08 |
| gitignore 파일은 어디에 속합니까? (0) | 2020.03.08 |
| CoffeeScript에서 전역 변수를 어떻게 정의합니까? (0) | 2020.03.08 |
| 자식에서 관련되지 않은 분기를 저장소에 도입하는 간단한 방법이 있습니까? (0) | 2020.03.08 |