[javascript] 자바 스크립트 .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

이것이 의미가 있기를 바랍니다.

답변

질문의 마지막 부분에 집중하고 싶었습니다. 소스 맵 파일은 어떻게 생성됩니까? 소스 맵을 만들 수있는 빌드 도구를 나열하여

  1. 그런트 : 플러그인 사용grunt-contrib-uglify
  2. 꿀꺽 : 플러그인 사용gulp-uglify
  3. 구글 폐쇄 : 매개 변수 사용--create_source_map

답변

  • 개발자는 어떻게 사용할 수 있습니까?

의견에서 이에 대한 답변을 찾지 못했습니다. 사용 방법은 다음과 같습니다.

  1. index.html 파일에서 js.map 파일을 연결하지 마십시오 (필요하지 않음).

  2. 최소화 도구 (좋은 도구)는 .min.js에 주석을 추가 합니다 파일에 합니다.

    // # sourceMappingURL = yourFileName.min.js.map

당신을 연결합니다 .map 파일 .

때 min.js 및 js.map 파일이 준비 …

  1. Chrome : dev-tools를 열고 소스 탭으로 이동하면 축소되지 않은 애플리케이션 파일이 보관 된 소스 폴더 가 표시 됩니다.

답변

맵 파일은 축소되지 않은 파일을 축소 된 파일에 매핑합니다. 축소되지 않은 파일을 변경하면 변경 사항이 파일의 축소 된 버전에 자동으로 반영됩니다.

답변

지도 파일 사용법에 추가하기 만하면됩니다. 우분투에는 크롬을 사용하고 소스로 이동하여 파일을 클릭하면 맵 파일이 있으면 원본 파일을 볼 수 있고 수행 방법을 알려주는 메시지가 나타납니다.

오늘 작업 한 Angular 파일의 경우 클릭

Ctrl-P와 원본 파일 목록이 작은 창에 나타납니다.

그런 다음 목록을 탐색하여 검사하려는 파일을보고 문제가있는 위치를 확인할 수 있습니다.

답변