Tệp Bản đồ TypeScript là gì?

Tôi đã thấy .mapcác tệp cho TypeScript. Điều tôi muốn biết là những tệp này dùng để làm gì. Chúng có chứa các tham chiếu đến các tệp khác được tham chiếu trong tệp .ts không?

Tệp .map là tệp bản đồ nguồn cho phép các công cụ ánh xạ giữa mã JavaScript được phát ra và tệp nguồn TypeScript đã tạo ra nó. Nhiều trình gỡ lỗi (ví dụ: Visual Studio hoặc các công cụ dành cho nhà phát triển của Chrome) có thể sử dụng các tệp này để bạn có thể gỡ lỗi tệp TypeScript thay vì tệp JavaScript.

Đây là định dạng bản đồ nguồn tương tự được tạo ra bởi một số trình thu nhỏ và các ngôn ngữ biên dịch sang JS khác như CoffeeScript .

Bản đồ nguồn về cơ bản là những gì nó nói, một bản đồ từ ngôn ngữ này sang ngôn ngữ khác, vì vậy trình gỡ lỗi có thể chạy mã JavaScript nhưng hiển thị cho bạn dòng thực sự tạo ra nó.

Đối với mục đích gỡ lỗi thực tế:

Những gì bản đồ nguồn cho phép bạn làm là đặt một điểm ngắt trên tệp TypeScript và sau đó gỡ lỗi mã. Điều này có thể được thực hiện trong Chrome và Firefox. Hơi khó hiểu, hành vi của trình gỡ lỗi trong Chrome là khi đạt đến điểm ngắt, tệp '.js' thực sự được hiển thị (dừng lại ở điểm ngắt).

Kể từ hôm nay, trình gỡ lỗi Firefox sẽ hiển thị tệp TypeScript thực khi nó bị hỏng. Xem tài liệu tham khảo dưới đây:

http://www.gamefromscratch.com/post/2014/05/27/TypeScript-debugging-in-Visual-Studio-with-IE-Chrome-and-Firefox-using-Source-Maps.aspx )

(điều này cũng cho thấy cách Visual Studio có thể được cấu hình để tạo bản đồ nguồn)

Để hiểu cách hoạt động của bản đồ nguồn, bạn có thể đọc phần 'Giải phẫu của bản đồ nguồn' tại đây:

https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

Có hai loại .maptệp phổ biến nhất trong Typecript. Một là Bản đồ nguồn ( .js.map) và bản kia là Bản đồ khai báo ( .d.ts.map). Tôi sẽ giải thích cả hai chi tiết một.

Bản đồ nguồn: .js.map

.js.mapTệp bản đồ nguồn ( ) chứa các định nghĩa ánh xạ liên kết từng đoạn mã Javascript được tạo của bạn trở lại dòng và cột cụ thể của tệp Typecript tương ứng. Định nghĩa ánh xạ trong các tệp này ở định dạng JSON.

Khi bản đồ nguồn được bật, trong khi gỡ lỗi, Visual Studio Code và Chrome DevTools sẽ hiển thị mã Typecript của bạn thay vì mã Javascript phức tạp được tạo.

Tại sao sử dụng bản đồ nguồn?

Ví dụ: trong các ứng dụng sản xuất, chúng tôi sử dụng các công cụ xây dựng như Rollup để loại bỏ mã chết, Prepack để loại bỏ và thay thế mã bằng các tính toán có thể được đánh giá tại thời điểm biên dịch thay vì thời gian chạy, sau đó rút gọn mã bằng Uglify. Và chưa kể đến sự phức tạp của mã Javascript đã được chuyển đổi. Vì vậy, mã kết quả có thể khác nhiều so với mã bạn thực sự đã viết. Do đó, bạn nên sử dụng bản đồ nguồn, nó làm cho việc gỡ lỗi rất dễ dàng vì bạn có thể thực hiện từng bước mã nguồn ban đầu của mình.

Các công cụ theo dõi quy trình, theo dõi lỗi, ghi nhật ký và theo dõi ngăn xếp như Sentry, Bugsnag, PM2, Winston cũng sử dụng bản đồ nguồn để ánh xạ các dòng và cột trong ngăn xếp ngoại lệ Javascript theo dõi trở lại với Typecript.

Làm thế nào để sử dụng bản đồ nguồn?

Bạn có thể kích hoạt bản đồ nguồn bằng cách sử dụng --sourceMaptùy chọn trong khi biên dịch hoặc bằng cách chỉ định nó compilerOptionstrong tsconfig.jsontệp dự án của bạn, như sau:

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

Lưu ý bảo mật cho bản đồ nguồn:

Nếu bạn muốn đạt được một số bảo mật bằng cách làm xáo trộn mã trình duyệt của mình, bạn có thể muốn loại trừ bản đồ nguồn khỏi mã trình duyệt trong ứng dụng sản xuất của mình.

Bản đồ khai báo: .d.ts.map

.d.ts.mapTệp bản đồ khai báo ( ) còn được gọi là bản đồ nguồn khai báo, chứa các định nghĩa ánh xạ liên kết từng loại khai báo được tạo trong .d.tstệp trở lại tệp nguồn ban đầu của bạn ( .ts). Định nghĩa ánh xạ trong các tệp này ở định dạng JSON.

Điều này rất hữu ích trong việc điều hướng mã. Bạn sẽ có thể sử dụng các tính năng của trình soạn thảo như “Đi tới Định nghĩa” và Đổi tên để điều hướng và chỉnh sửa mã một cách rõ ràng trên các dự án con khi bạn đã chia một dự án lớn thành nhiều dự án nhỏ bằng cách sử dụng tham chiếu dự án.

Để bật bản đồ khai báo, hãy chỉ định hai tùy chọn sau trong tsconfig.jsontệp dự án của bạn:

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

Đó là nó! Hy vọng rằng sẽ giúp.