sourceMap 이 뭐 예요?

왜 sourceMap 으로
요 며칠 동안 전단 오류 로 그 를 만 들 었 습 니 다. 온라인 에서 발표 한 것 은 모두 알 고 있 습 니 다. 우 리 는 생산 환경 에 발표 한 코드 는 보통 다음 과 같은 절차 가 있 습 니 다.

압축 혼동, 부피 감소

여러 파일 을 합 쳐 요청 수 HTTP 감소

컴 파일 또는 번역 을 통 해 다른 언어 를 JavaScript

로 컴 파일 합 니 다.
이 세 가지 절 차 는 실제 실행 되 는 코드 를 개발 코드 와 다 르 게 만 들 었 습 니 다. debug 든 포획 라인 의 오류 든 모두 어려움 이 많 습 니 다.
이 문 제 를 해결 하 는 방법 은 바로 사용 sourceMap 이다.
소스 맵 이란 무엇 인가
쉽게 말 하면 sourceMap 은 위치 정보 가 저 장 된 파일 이다.
자세히 말 하면 이 파일 에 저 장 된 것 은 변 환 된 코드 의 위치 와 해당 하 는 변환 전의 위치 입 니 다.
그것 이 있 으 면 오류 가 발생 했 을 때 정지점 도 구 를 통 해 변 환 된 코드 가 아 닌 원본 코드 를 직접 표시 할 수 있 습 니 다.
sourceMap 어떻게 생 겼 어 요?webpack 등 도 구 를 통 해 우 리 는 sourceMap 을 사용 할 수 있 습 니 다. 여 기 는 배치 방법 을 자세히 말 하지 않 고 여 기 를 볼 수 있 습 니 다.sourceMap 은 원본 코드 와 같은 디 렉 터 리 에 있 는 map 파일 입 니 다.
압축 코드 의 마지막 줄 에 다음 과 같은 인용 이 있 습 니 다.

//# sourceMappingURL=app.js.map

가리 키 는 것 은 바로 우리 의 map 파일 이다.sourceMap 의 형식 은 다음 과 같다.

{
    version : 3, //SourceMap   ，   3
    sources: ["foo.js", "bar.js"], //      ，       ，            
    names: ["src", "maps", "are", "fun"], //             
    mappings: "AACvB,gBAAgB,EAAE;AAClB;", //          
    file: "out.js", //       
    sourcesContent: " \t// The module cache
", //      
    sourceRoot : "" //           。              ，    
}

다른 것 은 모두 설명 하기 쉽 습 니 다. mappings 속성 을 자세히 말씀 드 리 겠 습 니 다.
mappings "AACvB,gBAAgB,EAAE;AAClB;" 을 예 로 들 면:

각 분 호 는 전환 후 소스 코드 의 한 줄 에 대응 합 니 다.

모든 쉼표 는 변 환 된 소스 코드 의 한 위치 에 대응 합 니 다.

AACvB 이 위치 전환 전의 소스 코드 위 치 를 대표 하여 VLQ 인 코딩 으로 표시 합 니 다.

위치 대응 의 원리
위치 관계 의 보존 은 여러 절차 와 최 적 화 를 거 쳤 다. 이것 은 상세 하 게 말 하지 않 고 보고 싶 은 것 은 여 기 를 볼 수 있다. 우 리 는 마지막 결과 만 말 할 수 있다.
각 위치 에서:

첫 번 째 는 이 위치 가 [전환 후 코드] 의 몇 번 째 열 에 있 음 을 나타 낸다.

두 번 째 는 이 위치 가 [sources 속성] 중의 어떤 파일 에 속 하 는 지 나타 낸다.

세 번 째 는 이 위치 가 [전환 전 코드] 의 몇 번 째 줄 에 속 한 다 는 것 을 나타 낸다.

네 번 째 위 치 는 [전환 전 코드] 의 몇 번 째 열 에 속 한 다 는 것 을 나타 낸다.

다섯 번 째 는 이 위치 가 [names 속성] 에 속 하 는 변 수 를 나타 낸다.

예 를 들다
현재 a.js 가 있다 고 가정 하면 내용 은 feel the force 이 고 처리 후 b.js 이 며 내용 은 the force feel 이다.the 의 경우 수출 에서 의 위 치 는 (0, 0) 이 고 a.js 는 sources 의 첫 번 째 (여 기 는 예 일 뿐) 이 며 입력 중의 위 치 는 (0, 5) 이 며 the 는 names 의 두 번 째 (여 기 는 예 일 뿐) 이다.
그러면 매 핑 관 계 는 0, 1, 0, 5, 2 입 니 다.
마지막 으로 01052 를 Base 64 VLQ 로 표시 하면 된다.
설명:

모든 값 은 0 을 기수 로 한다

5 위 는 필수 가 아니 며, 해당 위치 에 대응 names 속성 중의 변수 가 없 으 면 5 위

를 생략 할 수 있다.

한 사람 당 VLQ 인 코딩 을 사용 하여 VLQ 인 코딩 이 가 변 적 이 고 길 기 때문에 한 사람 당 여러 글자 로 구성 할 수 있다

.

왜 변 환 된 코드 의 줄 번 호 를 저장 하지 않 습 니까? 우리 가 출력 한 파일 은 항상 한 줄 이기 때문에 출력 한 줄 번 호 는 생략 할 수 있 습 니 다. 모두 0 이기 때문에 쓸 필요 가 없습니다

출력 후의 위치 에 있어 뒤쪽 에 가면 열 번호 가 매우 크다 는 것 을 알 수 있 습 니 다. 이 문 제 를 피하 기 위해 상대 적 인 위치 로 설명 합 니 다

상대 위치 가 무엇 일 까요? 설명도 보기:
첫 번 째 기록 의 입력 위치 와 출력 위 치 는 절대적 인 것 이다. 앞으로 의 입력 위치 와 출력 위 치 는 모두 지난번 의 위치 에 비해 얼마나 움 직 였 는 지, 예 를 들 어 the 의 출력 위 치 는 (0, - 10) 이다. 왜냐하면 the 는 feel 의 왼쪽 에서 10 번 을 세 어야 이 위치 에 도착 할 수 있 기 때문이다.
VLQ 인 코딩VLQ 는 Variable-length quantity 의 줄 임 말로, 임의의 자리수 의 이 진 을 사용 하여 임의의 큰 숫자 를 표시 하 는 통용 되 는 인 코딩 방식 이다.이 인 코딩 은 최초 로 MIDI 파일 에 사용 되 었 으 나, 후에 여러 가지 형식 으로 사용 되 었 는데, 그 특징 은 매우 간단하게 큰 수 치 를 표시 하여 공간 을 절약 할 수 있다 는 것 이다.
이 인 코딩 은 최고 비트 로 연속 성 을 표시 해 야 합 니 다. 1 이 라면 이 바이트 뒤의 바이트 도 같은 수 에 속 합 니 다.0 이면 이 수치 가 여기까지 라 는 뜻 이다.
이렇게 무뚝뚝 하 게 말 하 는 것 은 이해 하기 가 쉽 지 않 으 니 밤 을 들 어 설명 하 는 것 이 좋 겠 다.
어떻게 수치 137 을 VLQ 인 코딩 합 니까?
순서
결실
137 을 바 이 너 리 형식 으로 바꾸다
10001001
일곱 명 씩 조 를 나 누 어 부족 한 것 은 0 을 보충 합 니 다.
0000001 0001001
마지막 조 는 처음에 0 을 보충 하고 나머지 는 1 을 보충한다.
10000001 00001001
그래서 137 의 VLQ 인 코딩 형식 은 10000001 00001001 이다.
Base64 VLQ
일반 VLQ 과 의 차이 점:

한 글자 Base64 는 6bit(2^6) 의 데이터

만 표시 할 수 있 습 니 다.

Base64 VLQ 음 수 를 표시 할 수 있어 야 하기 때문에 마지막 으로 기호 표지 의 위치 로 한다.

6 자리 로 만 저장 할 수 있 기 때문에 첫 번 째 는 연속 여 부 를 나타 내 는 표지 이 고 마지막 은 양수 / 음 수 를 나타 낸다.중간 에 4 자리 밖 에 없 기 때문에 한 단원 이 표시 하 는 범 위 는 [-15,15] 이 고 초과 하면 연속 표지 위 치 를 사용 해 야 한다.

양음 을 나타 내 는 방식:

만약 에 이 그룹 수가 특정한 수치 VLQ 인 코딩 의 첫 번 째 바이트 라면 그의 마지막 은 '기호' 를 대표 하고 0 은 플러스 이 며 1 은 마이너스 이다.

그렇지 않 으 면 이 자 리 는 특별한 의미 가 없고 수치의 일부분 으로 간주 된다.

우 리 는 다시 밤 을 들 어 사용법 을 설명 했다.
어떻게 수치 137 을 Base64 VLQ 인 코딩 합 니까?
순서
결실
137 을 바 이 너 리 형식 으로 바꾸다
10001001
127 은 정수 이 고, 말 위 는 0 이다.
100010010
다섯 명 씩 조 를 나 누 어 부족 한 것 은 0 을 보충 하 다.
01000 10010
그룹 을 거꾸로 정렬 합 니 다.
10010 01000
마지막 조 는 처음에 0 을 보충 하고 나머지 는 1 을 보충한다.
110010 001000
회전 64 진법
y 와 I
그래서 137 통과 Base64 VLQ 는 yl알 수 있 듯 이:

Base64 VLQ 에서 인 코딩 순 서 는 낮은 위치 에서 높 은 위치

이다.

그러나 VLQ 에서 인 코딩 순 서 는 높 은 위치 에서 낮은 위치

이다.
참고 문장

JavaScript Source Map 상세 설명

BASE 64 VLQ 인 코딩 규칙

source map 원리 분석 & vlq