|
|
게시됨 2022. 6. 30. 오후 8:04:02
|
|
|
|
요구사항: 프론트엔드 프로젝트(Angular, vue) 코드를 운영 환경에 배포하면 프로젝트가 완료됩니다컴파일 과정은 코드를 압축하고 난독화합니다컴파일 중에 지도 파일이 생성되면, 그 지도 파일을 이용해 원본 파일의 위치를 찾을 수 있습니다.
Sourcemap이란 무엇인가요?
소스맵은 본질적으로 코드 변환 전후의 해당 위치 정보를 저장하는 정보 파일입니다. 압축된 코드에 대응하는 변환 전 소스 코드 위치를 기록하며, 소스 코드와 프로덕션 코드 간의 매핑 역할을 합니다. Sourcemap은 패키징 과정에서 코드가 압축, 공간 제거, 컴파일 및 변환되는 문제를 해결하여, 코드 간 큰 차이로 인해 디버깅이 불가능해집니다.
Sourcemap의 역할
간단히 말해, Sourcemap은 전처리와 후처리 코드 사이에 다리를 놓아 운영 중 버그가 어디서 발생하는지 쉽게 찾을 수 있게 합니다. 오늘날의 프론트엔드 개발은 모듈화되고 컴포넌트 기반이기 때문에, JS와 CSS 파일을 합치거나 압축하는 것은 쉽게 혼란을 초래할 수 있습니다. sourceMap의 기능은 브라우저의 디버깅 패널이 생성된 코드를 소스 코드 파일에 매핑할 수 있게 하고, 개발자가 소스 코드 파일에서 디버깅할 수 있게 하여 프로그래머들이 디버깅을 훨씬 쉽고 간단하게 만듭니다.
먼저, 새로운 Angular 프로젝트를 만들고 문제 있는 코드를 작성하세요.
html 코드는 다음과 같습니다:
TS 코드는 다음과 같습니다:
개발 단계에서 오류가 발생하면 아래 그림에서 보듯이 잘못된 위치를 쉽게 찾을 수 있습니다:
프로젝트를 릴리스 패키지로 빌드하고 다음 명령어로 맵 파일을 생성합니다:
결과된 파일을 IIS, Nginx 등과 같은 HTTP 서버에 배포하세요. 그동안맵 파일을 다른 디렉터리로 옮기세요테스트에 편리합니다.
현재는 오류 메시지와 소스 코드를 직관적으로 볼 수 없으므로, 다음 명령어로 "소스 코드 위치 추적 도구"를 설치합니다:
매개변수 소개:
Usage: sl [options]
Options:
-v, --버전 버전 번호 출력
-p, --source-flie-path 생성된 소스 파일 컴파일된 맵 파일
-l, --ine 생성된 소스 컴파일된 코드 행의 행 번호
-c, --열 생성된 소스의 열 번호
-h, --도움말 출력 사용 정보
(끝)
|
이전의:C#을 사용해 PDF 파일에서 모든 텍스트를 추출하기(.NET Core 지원)다음:일반적으로 ES6, ES8, ES 2017, ECMAScript로 불리는 JavaScript의 프론트엔드 지식
|
게시됨 2022. 6. 30. 오후 9:36:37