[typescript] TypeScript 맵 파일이란 무엇입니까?

.mapTypescript에서 가장 일반적인 두 가지 유형의 파일이 있습니다. 하나는 소스 맵 ( .js.map)이고 다른 하나는 선언 맵 ( .d.ts.map)입니다. 둘 다 하나씩 자세히 설명하겠습니다.

---

소스 맵 : .js.map

소스 맵 ( .js.map) 파일에는 생성 된 Javascript 코드의 각 부분을 해당 Typescript 파일의 특정 행과 열에 다시 연결하는 매핑 정의가 포함되어 있습니다. 이러한 파일의 매핑 정의는 JSON 형식입니다.

소스 맵이 활성화되면 디버깅하는 동안 Visual Studio Code 및 Chrome DevTools가 생성 된 복잡한 Javascript 코드 대신 Typescript 코드를 표시합니다.

소스 맵을 사용하는 이유는 무엇입니까?

예를 들어 프로덕션 앱에서는 Rollup과 같은 빌드 도구를 사용하여 죽은 코드를 제거하고, Prepack을 사용하여 코드를 제거하고 런타임 대신 컴파일 시간에 평가할 수있는 계산으로 대체 한 다음 Uglify로 코드를 축소합니다. 그리고 이미 트랜스 파일 된 자바 스크립트 코드의 복잡성은 말할 것도 없습니다. 따라서 결과 코드는 실제로 작성한 코드와 크게 다를 수 있습니다. 따라서 소스 맵을 사용하는 것이 좋습니다. 원본 소스 코드를 단계별로 실행하기 때문에 디버깅이 매우 쉽습니다.

Sentry, Bugsnag, PM2, Winston과 같은 프로세스 모니터링, 오류 모니터링, 로깅 및 스택 추적 도구는 Javascript 예외 스택 추적의 줄과 열을 다시 Typescript로 매핑하는 데 소스 맵을 사용합니다.

소스 맵을 사용하는 방법?

당신은을 사용하여 하나의 소스 맵을 사용할 수 있습니다 --sourceMap컴파일하는 동안 옵션을 또는 그것을 지정 compilerOptions에 tsconfig.json다음과 같이, 프로젝트의 파일 :

{
  "compilerOptions": {
    ...
    "sourceMap": true,
    "outDir": "./out"
  }
}

소스 맵에 대한 보안 정보 :

브라우저 코드를 난독 화하여 보안을 강화하려는 경우 프로덕션 앱의 브라우저 코드에서 소스 맵을 제외 할 수 있습니다.

---

선언 맵 : .d.ts.map

.d.ts.map선언 소스 맵이라고도하는 선언 맵 ( ) 파일에는 .d.ts파일 에서 생성 된 각 유형 선언 을 원래 소스 파일 ( .ts)에 다시 연결하는 매핑 정의가 포함되어 있습니다 . 이러한 파일의 매핑 정의는 JSON 형식입니다.

이는 코드 탐색에 유용합니다. 프로젝트 참조를 사용하여 큰 프로젝트를 작은 여러 프로젝트로 분할 한 경우 “정의로 이동”및 이름 바꾸기와 같은 편집기 기능을 사용하여 하위 프로젝트에서 코드를 투명하게 탐색하고 편집 할 수 있습니다.

선언 맵을 사용하려면 tsconfig.json프로젝트 파일에 다음 두 가지 옵션을 지정하십시오 .

{
  "compilerOptions": {
    ...
    "declaration": true,
    "declarationMap": true
  }
}

---

그게 다야! 도움이되기를 바랍니다.