JavaScript 소스 맵 (.map 파일)을 사용하는 방법

질문 : JavaScript 소스 맵 (.map 파일)을 사용하는 방법은 무엇입니까?

---

.js.map 확장자를 가진 파일이 일부 JavaScript 라이브러리 (예 : Angular )와 함께 제공되는 것을 보았습니다.

• 그것은 무엇입니까? .js.map 파일을 제공하는 데 신경을 쓰는 이유는 무엇입니까?
• JavaScript 개발자로서 angular.min.js.map 파일을 어떻게 사용할 수 있습니까?
• JavaScript 애플리케이션을위한 .js.map 파일 생성에 신경 써야합니까?
• 어떻게 생성됩니까? angular.min.js.map 살펴 보았고 이상한 형식의 문자열로 채워져 있으므로 수동으로 생성되지 않았다고 가정합니다.

답변

---

.map 파일은 js 및 css (현재 ts 도 포함) 파일 용입니다. 이를 SourceMaps라고합니다. angular.js 파일과 같이 파일을 축소하면 수천 줄의 예쁜 코드가 필요하며 몇 줄의 추악한 코드로만 변환됩니다. 코드를 프로덕션으로 전달할 때 축소되지 않은 전체 버전 대신 축소 된 코드를 사용하기를 바랍니다. 앱이 프로덕션 중이고 오류가있는 경우 소스 맵이 추악한 파일을 가져 오는 데 도움이되며 코드의 원래 버전을 볼 수 있습니다. 소스 맵이 없다면 어떤 오류라도 기껏해야 비밀스러워 보일 것입니다.

CSS 파일과 동일합니다. SASS 또는 LESS 파일을 가져 와서 CSS로 컴파일하면 원래 형식과는 다르게 보입니다. 소스 맵을 활성화하면 수정 된 상태 대신 파일의 원래 상태를 볼 수 있습니다.

따라서 질문에 순서대로 대답하려면 다음을 수행하십시오.

• 그것은 무엇입니까? 추악한 코드를 역 참조하려면
• 개발자는 어떻게 사용할 수 있습니까? 프로덕션 앱을 디버깅하는 데 사용합니다. 개발 모드에서는 Angular의 정식 버전을 사용할 수 있습니다. 프로덕션에서는 축소 된 버전을 사용합니다.
• js.map 파일 생성에 신경 써야합니까? 프로덕션 코드를 더 쉽게 디버깅 할 수 있도록하는 데 관심이 있다면 그래야합니다.
• 어떻게 생성됩니까? 빌드시 생성됩니다. 다른 파일과 마찬가지로 .map 파일을 빌드 할 수있는 빌드 도구가 있습니다. https://github.com/gruntjs/grunt-contrib-uglify/issues/71

이해가 되길 바랍니다.

출처 : https://stackoverflow.com/questions/21719562/how-to-use-javascript-source-maps-map-files