ไฟล์ Javascript .map - ซอร์สแผนที่ javascript

357

เมื่อเร็ว ๆ นี้ฉันได้เห็นไฟล์ที่มี.js.mapส่วนขยายที่จัดส่งมาพร้อมกับไลบรารี JavaScript บางตัว (เช่นAngular ) และนั่นทำให้เกิดคำถามสองสามข้อในหัวของฉัน:

มีไว้เพื่ออะไร? ทำไมคนที่ Angular สนใจส่ง.js.mapไฟล์?
ฉันจะใช้angular.min.js.mapไฟล์(ในฐานะนักพัฒนา JavaScript) ได้อย่างไร
ฉันควรสนใจเกี่ยวกับการสร้าง.js.mapไฟล์สำหรับแอปพลิเคชัน JavaScript ของฉันหรือไม่
มันถูกสร้างขึ้นมาได้อย่างไร? ฉันลองดูangular.min.js.mapและมันก็เต็มไปด้วยสตริงที่มีรูปแบบแปลก ๆ ดังนั้นฉันจึงคิดว่ามันไม่ได้ถูกสร้างขึ้นด้วยตนเอง

javascript angularjs source-maps

— มูฮัมหมัดเรดา
แหล่งที่มา

1

html5rocks.com/en/tutorials/developertools/sourcemaps

— Anand

550

.mapไฟล์มีการjsและcss(และตอนนี้tsเกินไป) ไฟล์ที่ได้รับการลดขนาดลง พวกเขาเรียกว่า SourceMaps เมื่อคุณย่อขนาดไฟล์เช่นไฟล์ angular.js จะต้องใช้โค้ดสวย ๆ หลายพันบรรทัดและแปลงให้เป็นโค้ดน่าเกลียดเพียงไม่กี่บรรทัด หวังว่าเมื่อคุณจัดส่งรหัสของคุณไปยังการผลิตคุณกำลังใช้รหัสย่อแทนรุ่นเต็มรูปแบบไม่ จำกัด เมื่อแอปของคุณกำลังทำงานและมีข้อผิดพลาดซอร์สโค้ดจะช่วยให้คุณใช้ไฟล์ที่น่าเกลียดและจะช่วยให้คุณเห็นรหัสต้นฉบับ หากคุณไม่มี sourcemap ข้อผิดพลาดใด ๆ จะดูเป็นความลับที่สุด

เช่นเดียวกับไฟล์ CSS เมื่อคุณใช้ไฟล์ SASS หรือ LESS แล้วคอมไพล์ลงใน CSS ดูเหมือนว่ามันจะไม่เหมือนกับรูปแบบดั้งเดิม หากคุณเปิดใช้งานซอร์สแผนที่คุณจะเห็นสถานะดั้งเดิมของไฟล์แทนสถานะที่แก้ไข

ดังนั้นเพื่อตอบคำถามคุณตามลำดับ:

มีไว้เพื่ออะไร? หากต้องการยกเลิกการอ้างอิงรหัส uglified
นักพัฒนาซอฟต์แวร์สามารถใช้งานได้อย่างไร? คุณใช้สำหรับการดีบักแอปที่ใช้งานจริง ในโหมดการพัฒนาคุณสามารถใช้เวอร์ชันเต็มของ Angular ในการผลิตคุณจะใช้เวอร์ชันย่อ
ฉันควรสนใจเกี่ยวกับการสร้างไฟล์ js.map หรือไม่ หากคุณสนใจที่จะสามารถดีบักโค้ดการผลิตได้ง่ายขึ้นใช่แล้วคุณควรทำมัน
มันถูกสร้างขึ้นมาได้อย่างไร? มันถูกสร้างขึ้นในเวลาที่สร้าง มีเครื่องมือสร้างที่สามารถสร้างไฟล์. map ให้คุณได้เหมือนกับไฟล์อื่น ๆ https://github.com/gruntjs/grunt-contrib-uglify/issues/71

ฉันหวังว่านี่จะสมเหตุสมผล

— หนาวจัด
แหล่งที่มา

19

โปรดทราบว่าไฟล์แผนที่จะไม่ถูกส่งจนกว่าคุณจะเรียกว่านั่นคือสิ่งที่ทำให้ฉันสับสนstackoverflow.com/a/27196201/861487

— Abdelouahab

2

ขอบคุณ aaron นี่เป็นหนึ่งในคำอธิบายที่ดีกว่าที่ฉันเคยเห็นสำหรับ sourcemap ฉันใช้มันในอึกและฉันได้เรียนรู้ทุกอย่างมากที่สุดเกี่ยวกับอึกและสงสัยว่าวิธีการใช้ซอร์สแผนที่ในตอนนี้ฉันรู้สึกมั่นใจที่จะใช้มัน ปลั๊กอินอึกส่วนใหญ่เข้ากันได้ตอนนี้เมื่อเทียบกับปีที่แล้วเมื่อบางคนไม่ได้ แค่อยากจะบอกว่ามันสมเหตุสมผลทั้งหมด!

— Eric Bishard

@frosty รหัส de-อ้างอิง uglified คุณช่วยอธิบายเรื่องนี้ได้มั้ย ไม่ได้เป็น.js.mapไฟล์รักษาความสัมพันธ์ (บ่อยครั้งเรียกว่าการอ้างอิง ) ระหว่างไฟล์มือ crafted และไฟล์ minified?

— Mohammed Zameer

1

@ นักเรียนมันบอกว่า de-reference เพราะฉันไม่ต้องการอ้างอิงรหัสย่อ มันลดขนาดลงและถ้าฉันดูมันก็จะไร้ค่า แต่ถ้ามันไม่สามารถอ้างอิงกลับไปยังแหล่งดั้งเดิมนั่นจะเป็นมหากาพย์ และนั่นคือสิ่งที่แหล่งที่มาคือ ฉันหวังว่าจะช่วย

— frosty

ฉันชอบคำตอบนี้ (ขอบคุณ) แต่มันมี 420 ไลค์ ... ฉันจะทำลายมันได้ไหม?

— Eric Reed

33

แค่อยากจะมุ่งเน้นไปที่ส่วนสุดท้ายของคำถาม วิธีสร้างไฟล์แผนที่ต้นฉบับ? โดยการแสดงรายการเครื่องมือสร้างฉันรู้ว่าสามารถสร้างแผนที่แหล่งที่มา

Grunt : ใช้ปลั๊กอินgrunt-contrib-uglify
อึก : ใช้ปลั๊กอินgulp-uglify
Google closure : ใช้พารามิเตอร์--create_source_map

— มูฮัมหมัดเรดา
แหล่งที่มา

31

นักพัฒนาซอฟต์แวร์สามารถใช้งานได้อย่างไร?

ฉันไม่พบคำตอบสำหรับสิ่งนี้ในความคิดเห็นนี่คือวิธีการใช้งาน:

อย่าเชื่อมโยงไฟล์ js.map ของคุณในไฟล์ index.html (ไม่จำเป็นต้องมี)
เครื่องมือ Minifiacation (คนดี) เพิ่มความคิดเห็นไปยังไฟล์. min.jsของคุณ:

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

ซึ่งจะเชื่อมต่อไฟล์. mapของคุณ

เมื่อmin.jsและjs.mapไฟล์มีความพร้อม ...

Chrome: เปิดเครื่องมือ devนำทางไปยังแท็บSourcesคุณจะเห็นโฟลเดอร์ซอร์สซึ่งเก็บไฟล์แอปพลิเคชันที่ไม่ย่อเล็กสุด

— garfunkel61
แหล่งที่มา

14

ไฟล์แม็พแม็พไฟล์ที่ไม่ได้แม็พกับไฟล์ที่ย่อขนาด หากคุณทำการเปลี่ยนแปลงในไฟล์ที่ไม่ได้ทำการแก้ไขการเปลี่ยนแปลงจะมีผลกับไฟล์ที่ย่อเล็กสุดโดยอัตโนมัติ

— Surendra Yadav
แหล่งที่มา

2

เพียงเพิ่มวิธีการใช้ไฟล์แผนที่ ฉันใช้ chrome สำหรับ ubuntu และถ้าฉันไปที่แหล่งที่มาและคลิกที่ไฟล์หากมีไฟล์แผนที่มีข้อความปรากฏขึ้นบอกฉันว่าฉันสามารถดูไฟล์ต้นฉบับและวิธีการทำ

สำหรับไฟล์เชิงมุมที่ฉันทำงานด้วยวันนี้ฉันคลิก

Ctrl-P และรายการไฟล์ต้นฉบับปรากฏขึ้นในหน้าต่างเล็ก ๆ

จากนั้นฉันสามารถเรียกดูรายการเพื่อดูไฟล์ที่ฉันต้องการตรวจสอบและตรวจสอบปัญหาที่อาจเกิดขึ้น

— โรตีโปติ
แหล่งที่มา