Tệp Javascript .map - bản đồ nguồn javascript

Gần đây tôi đã thấy các tệp có .js.mapphần mở rộng được gửi cùng với một số thư viện JavaScript (như Angular ) và điều đó chỉ đặt ra vài câu hỏi trong đầu tôi:

• Nó dùng để làm gì? Tại sao những người ở Angular quan tâm để cung cấp một .js.maptập tin?
• Làm cách nào tôi (với tư cách là nhà phát triển JavaScript) sử dụng angular.min.js.maptệp?
• Tôi có nên quan tâm đến việc tạo .js.maptệp cho các ứng dụng JavaScript của mình không?
• Làm thế nào để nó được tạo ra? Tôi đã xem angular.min.js.mapvà nó chứa đầy các chuỗi có định dạng lạ nên tôi cho rằng nó không được tạo thủ công.

Các .maptệp này dành cho jsvà css(và bây giờ tscũng vậy) các tệp đã được thu nhỏ. Chúng được gọi là SourceMaps. Khi bạn thu nhỏ một tệp, như tệp angular.js, phải mất hàng ngàn dòng mã đẹp và biến nó thành một vài dòng mã xấu. Hy vọng rằng, khi bạn đang chuyển mã của mình sang sản xuất, bạn đang sử dụng mã được rút gọn thay vì phiên bản đầy đủ, chưa hoàn thành. Khi ứng dụng của bạn đang trong quá trình sản xuất và có lỗi, sơ đồ chua sẽ giúp lấy tệp xấu xí của bạn và sẽ cho phép bạn xem phiên bản gốc của mã. Nếu bạn không có sơ đồ chua, thì bất kỳ lỗi nào cũng có vẻ khó hiểu nhất.

Tương tự cho các tệp CSS. Khi bạn lấy tệp SASS hoặc LESS và biên dịch nó thành CSS, nó trông không giống như dạng ban đầu của nó. Nếu bạn bật sourcemaps, thì bạn có thể thấy trạng thái ban đầu của tệp, thay vì trạng thái đã sửa đổi.

Vì vậy, để trả lời bạn các câu hỏi theo thứ tự:

• Nó dùng để làm gì? Để tham chiếu mã xấu
• Làm thế nào một nhà phát triển có thể sử dụng nó? Bạn sử dụng nó để gỡ lỗi một ứng dụng sản xuất. Trong chế độ phát triển, bạn có thể sử dụng phiên bản đầy đủ của Angular. Trong sản xuất, bạn sẽ sử dụng phiên bản rút gọn.
• Tôi có nên quan tâm đến việc tạo tệp js.map không? Nếu bạn quan tâm đến việc có thể gỡ lỗi mã sản xuất dễ dàng hơn, thì có, bạn nên làm điều đó.
• Làm thế nào để nó được tạo ra? Nó được tạo ra tại thời điểm xây dựng. Có các công cụ xây dựng có thể xây dựng tệp .map cho bạn cũng như các tệp khác. https://github.com/gruntjs/grunt-contrib-uglify/issues/71

Tôi hy vọng điều này có ý nghĩa.

Chỉ muốn tập trung vào phần cuối của câu hỏi; Làm thế nào các tập tin bản đồ nguồn được tạo ra? bằng cách liệt kê các công cụ xây dựng mà tôi biết có thể tạo bản đồ nguồn.

1. Grunt : sử dụng plugingrunt-contrib-uglify
2. Gulp : sử dụng plugingulp-uglify
3. Google đóng cửa : sử dụng tham số--create_source_map

• Làm thế nào một nhà phát triển có thể sử dụng nó?

Tôi không tìm thấy câu trả lời cho điều này trong các bình luận, đây là cách sử dụng:

1. Không liên kết tệp js.map của bạn trong tệp index.html của bạn (không cần điều đó)

2. Các công cụ thu nhỏ (tốt) thêm nhận xét vào tệp .min.js của bạn :

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

Nó sẽ kết nối tập tin .map của bạn .

Khi các tệp min.js và js.map đã sẵn sàng ...

3. Chrome: Mở dev-tools , điều hướng đến tab Nguồn , Bạn sẽ thấy thư mục nguồn , nơi lưu giữ các tệp ứng dụng chưa được thu nhỏ.

Tệp bản đồ ánh xạ tệp chưa được tối ưu hóa thành tệp được thu nhỏ. Nếu bạn thực hiện các thay đổi trong tệp chưa được tối ưu hóa, các thay đổi sẽ được tự động phản ánh thành phiên bản rút gọn của tệp.

Chỉ cần thêm vào cách sử dụng tập tin bản đồ. Tôi sử dụng chrome cho ubfox và nếu tôi đi đến nguồn và nhấp vào tệp, nếu có tệp bản đồ, một thông báo xuất hiện cho tôi biết rằng tôi có thể xem tệp gốc và cách thực hiện.

Đối với các tệp Angular mà tôi đã làm việc với ngày hôm nay, tôi nhấp vào

Ctrl-P và một danh sách các tệp gốc xuất hiện trong một cửa sổ nhỏ.

Sau đó tôi có thể duyệt qua danh sách để xem tệp mà tôi muốn kiểm tra và kiểm tra xem sự cố có thể xảy ra ở đâu.