แผนที่แหล่งที่มาคืออะไร

Jecelyn Yeen

การแมปแหล่งที่มาเป็นเครื่องมือที่สำคัญในการพัฒนาเว็บสมัยใหม่ ง่ายขึ้นอย่างมาก หน้านี้จะสำรวจพื้นฐานของแผนที่แหล่งที่มา และวิธีที่เครื่องมือดังกล่าวปรับปรุงประสบการณ์การแก้ไขข้อบกพร่อง

ความจำเป็นในการแมปแหล่งที่มา

เว็บแอปในช่วงแรกๆ นั้นสร้างขึ้นโดยมีความซับซ้อนต่ำ นักพัฒนาซอฟต์แวร์ใช้งาน HTML, CSS, และไฟล์ JavaScript ไปยังเว็บได้โดยตรง

เว็บแอปที่ทันสมัยและซับซ้อนมากขึ้นอาจต้องใช้เครื่องมือหลายอย่าง เวิร์กโฟลว์การพัฒนา เช่น

• ภาษาเทมเพลตและ HTML Preprocessor: Pug, Nunjucks มาร์กดาวน์
• ตัวประมวลผล CSS ล่วงหน้า: SCSS, น้อยกว่า PostCSS
• เฟรมเวิร์ก JavaScript: Angular, React, Vue, Svelte
• เฟรมเวิร์กเมตาของ JavaScript: Next.js, Nuxt, Astro
• ภาษาโปรแกรมระดับสูง TypeScript ลูกดอก CoffeeScript

เครื่องมือเหล่านี้ต้องการกระบวนการสร้าง เพื่อเปลี่ยนรูปแบบโค้ดเป็น HTML มาตรฐาน JavaScript และ CSS ที่เบราว์เซอร์เข้าใจได้ นอกจากนี้ยังมีแนวทางปฏิบัติทั่วไปเพื่อ เพิ่มประสิทธิภาพด้วยการลดและรวมไฟล์เหล่านี้โดยใช้เครื่องมือเช่น Terser

เช่น เมื่อใช้เครื่องมือสร้าง เราสามารถแปลงและบีบอัดรายการต่อไปนี้ TypeScript ลงใน JavaScript บรรทัดเดียว คุณลองด้วยตัวคุณเองได้ใน การสาธิตใน GitHub นี้

/* A TypeScript demo: example.ts */

document.querySelector('button')?.addEventListener('click', () => {
  const num: number = Math.floor(Math.random() * 101);
  const greet: string = 'Hello';
  (document.querySelector('p') as HTMLParagraphElement).innerText = `${greet}, you are no. ${num}!`;
  console.log(num);
});

เวอร์ชันที่บีบอัดจะมีลักษณะดังนี้

/* A compressed JavaScript version of the TypeScript demo: example.min.js  */

document.querySelector("button")?.addEventListener("click",(()=>{const e=Math.floor(101*Math.random());document.querySelector("p").innerText=`Hello, you are no. ${e}!`,console.log(e)}));

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

สร้างแผนที่แหล่งที่มา

การแมปแหล่งที่มาคือไฟล์ที่มีชื่อลงท้ายด้วย .map (ตัวอย่างเช่น example.min.js.map และ styles.css.map) มิติข้อมูลเหล่านี้สร้างขึ้นได้จากบิลด์ส่วนใหญ่ เครื่องมือต่างๆ เช่น Vite, Webpack รวม พัสดุ และ esbuild

เครื่องมือบางอย่างจะมีการแมปแหล่งที่มาโดยค่าเริ่มต้น ผู้ใช้คนอื่นๆ อาจต้องการข้อมูลเพิ่มเติม กำหนดค่าเพื่อสร้างหน่วยโฆษณา:

/* Example configuration: vite.config.js */
/* https://vitejs.dev/config/ */

export default defineConfig({
  build: {
    sourcemap: true, // enable production source maps
  },
  css: {
    devSourcemap: true // enable CSS source maps during development
  }
})

ทําความเข้าใจการแมปแหล่งที่มา

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

{
  "mappings": "AAAAA,SAASC,cAAc,WAAWC, ...",
  "sources": ["src/script.ts"],
  "sourcesContent": ["document.querySelector('button')..."],
  "names": ["document","querySelector", ...],
  "version": 3,
  "file": "example.min.js.map"
}

เพื่อทำความเข้าใจแต่ละช่องเหล่านี้ คุณสามารถอ่าน ข้อกำหนดของการแมปแหล่งที่มา หรือ โครงสร้างของการแมปแหล่งที่มา

ส่วนที่สำคัญที่สุดของแผนที่แหล่งที่มาคือช่อง mappings โดยใช้ สตริงที่เข้ารหัสแบบ VLQ base64 เพื่อแมปเส้นและตำแหน่งในไฟล์ที่คอมไพล์แล้วกับต้นฉบับที่เกี่ยวข้อง คุณสามารถดูการแมปนี้โดยใช้เครื่องมือแสดงข้อมูลผ่านภาพแผนที่แหล่งที่มา เช่น source-map-visualization หรือ การแสดงภาพการแมปแหล่งที่มา

วันที่

คอลัมน์สร้างแล้วทางด้านซ้ายจะแสดงเนื้อหาที่บีบอัด และ original จะแสดงแหล่งที่มาต้นฉบับ

วิดีโอ Visualizer จะใส่รหัสสีแต่ละบรรทัดในคอลัมน์ต้นฉบับพร้อมด้วย ที่เกี่ยวข้องกันในคอลัมน์สร้างขึ้น

ส่วนการแมปจะแสดงการแมปที่ถอดรหัสแล้วของโค้ด ตัวอย่างเช่น พารามิเตอร์ รายการ 65 -> 2:2 หมายถึง:

• โค้ดที่สร้าง: คำว่า const เริ่มต้นที่ตำแหน่ง 65 ในเนื้อหาที่บีบอัด
• โค้ดต้นฉบับ: คำว่า const เริ่มต้นที่บรรทัดที่ 2 และคอลัมน์ 2 ในเนื้อหาต้นฉบับ

ซึ่งจะช่วยให้นักพัฒนาซอฟต์แวร์ระบุความสัมพันธ์ระหว่างโค้ดที่ลดขนาดลงได้อย่างรวดเร็ว และโค้ดต้นฉบับ ทำให้การแก้ไขข้อบกพร่องเป็นไปอย่างราบรื่นยิ่งขึ้น

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

วันที่

ส่วนขยายการแมปแหล่งที่มา

การแมปแหล่งที่มารองรับช่องส่วนขยายที่กำหนดเองซึ่งขึ้นต้นด้วย x_ หนึ่ง เช่น ช่องส่วนขยาย x_google_ignoreList ที่ Chrome เสนอ เครื่องมือสำหรับนักพัฒนาเว็บ โปรดดู x_google_ignoreList เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีที่ส่วนขยายเหล่านี้ช่วยให้คุณมุ่งเน้นไปที่โค้ดได้

ข้อด้อยของการแมปแหล่งที่มา

อย่างไรก็ตาม การแมปแหล่งที่มาอาจไม่สมบูรณ์อย่างที่คุณต้องการ ในตัวอย่างแรกของเรา ตัวแปร greet ได้รับการเพิ่มประสิทธิภาพระหว่างการสร้าง แม้ว่าจะฝังค่าของกระบวนการโดยตรงในเอาต์พุตสตริงสุดท้ายก็ตาม

วันที่

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

วันที่

นี่เป็นปัญหาที่จำเป็นต้องแก้ไขในการออกแบบการแมปแหล่งที่มา หนึ่ง วิธีแก้ปัญหาที่เป็นไปได้ก็คือ ใส่ข้อมูลขอบเขตไว้ในการแมปแหล่งที่มาในส่วน เช่นเดียวกับภาษาโปรแกรมอื่นๆ กับข้อมูลการแก้ไขข้อบกพร่อง

อย่างไรก็ตาม วิธีนี้ต้องอาศัยทั้งระบบนิเวศในการร่วมมือกันเพื่อปรับปรุง ข้อกำหนดและการใช้งานการแมปแหล่งที่มา เพื่อติดตามการดำเนินการอย่างต่อเนื่องใน ซึ่งปรับปรุงความสามารถในการแก้ไขข้อบกพร่องด้วยการแมปแหล่งที่มา โปรดดูข้อเสนอสำหรับ แหล่งที่มา Maps เวอร์ชัน 4 ใน GitHub