HTML Academy · บทเรียน

แผนที่การนำเข้า importmap

จับคู่ตัวระบุโมดูลแบบย่อกับ URL ด้วย importmap

แผนที่การนำเข้า importmap เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

ปัญหาตัวระบุแบบชื่อเปล่า

ใน Node import "lodash" ทำงานได้เพราะตัวแก้ไขการนำเข้าค้นหา node_modules/lodash แต่เบราว์เซอร์ไม่มี node_modules จึงต้องใช้ URL จริง หากไม่มีตัวช่วย import "lodash" จะโยนข้อผิดพลาดว่า "ไม่สามารถแก้ไขตัวระบุโมดูลได้"

แผนที่การนำเข้าทำอะไร

แผนที่การนำเข้าประกาศพจนานุกรม JSON ที่แมปตัวระบุแบบชื่อเปล่า (รวมถึงคำนำหน้า URL) ไปยัง URL จริง เบราว์เซอร์จะตรวจสอบแผนที่ในขณะแก้ไขโมดูล และเปลี่ยน import "lodash" ให้เป็นการดึงจาก URL ที่คุณกำหนด

<script type="importmap">
{
  "imports": {
    "lodash": "https://esm.sh/lodash@4.17.21",
    "preact": "https://esm.sh/preact"
  }
}
</script>

ลำดับการประกาศมีความสำคัญ

แผนที่การนำเข้าต้องปรากฏก่อน <script type="module"> ใด ๆ ที่ใช้ตัวระบุแบบชื่อเปล่า เพราะเมื่อโมดูลเริ่มแก้ไขการนำเข้าแล้ว แผนที่จะถูกล็อกไว้ ให้วาง <script type="importmap"> ไว้ใกล้ส่วนต้นของ <head>

การแมปด้วยคำนำหน้า

รายการที่ลงท้ายด้วยเครื่องหมายทับจะจับคู่กับคำนำหน้า URL: "@/": "/src/" จะแมป import "@/utils/sum.js" ไปยัง /src/utils/sum.js วิธีนี้ช่วยจำลองไวยากรณ์ "นามแฝง" ที่เครื่องมือรวมชุดมักรองรับ

การจัดการเวอร์ชันด้วยแผนที่

แผนที่การนำเข้ารวมศูนย์การเลือกเวอร์ชันไว้ด้วยกัน เปลี่ยน "react" จาก esm.sh/react@18 เป็น esm.sh/react@19 ในจุดเดียว แล้วทุกโมดูลที่นำเข้าจะใช้ URL ใหม่ หากไม่มีแผนที่การนำเข้า จุดนำเข้าแต่ละจุดจะกำหนดเวอร์ชันของตนเองแบบตายตัว

ขอบเขต

คีย์ scopes ช่วยให้กำหนดการแมปที่แตกต่างกันสำหรับส่วนต่าง ๆ ของเว็บไซต์ได้ ภายใน /admin/ คุณอาจต้องการการพึ่งพาเวอร์ชันใหม่กว่าที่ใช้ใน /public/ ขอบเขตช่วยให้กำหนดเป้าหมายตามเส้นทางได้

{
  "imports": { "lodash": "https://esm.sh/lodash@4" },
  "scopes": {
    "/admin/": { "lodash": "https://esm.sh/lodash@5" }
  }
}

หนึ่งแผนที่ต่อเอกสารหนึ่งฉบับ

เอกสารแต่ละฉบับมี <script type="importmap"> ได้ไม่เกินหนึ่งรายการ การใส่สองรายการในหน้าเดียวกันถือว่าไม่ถูกต้อง ให้รวมเนื้อหาเป็นบล็อกเดียวเพื่อรวมรายการทั้งหมด

แผนที่การนำเข้าภายนอก

คุณสามารถโฮสต์แผนที่ไว้ที่ URL ภายนอกด้วย <script type="importmap" src="map.json"> การรองรับวิธีนี้ใหม่กว่าแผนที่แบบแทรกในหน้า แต่ปัจจุบันแพร่หลายแล้ว เหมาะเมื่อคุณต้องการแคชแผนที่ขนาดใหญ่แยกจากเอกสาร

การสร้างแผนที่การนำเข้า

เครื่องมืออย่างตัวสร้างของ JSPM และโหมด --servedir ของ esbuild สามารถสร้างแผนที่การนำเข้าจาก package.json ได้โดยอัตโนมัติ แผนที่ที่สร้างขึ้นจะรวมการพึ่งพาที่ส่งต่อทั้งหมด และแมปแต่ละรายการไปยัง URL ของ CDN ทำให้ทำงานได้โดยไม่ต้องใช้ node_modules

การรองรับของเบราว์เซอร์

แผนที่การนำเข้าพร้อมใช้งานในโครม เอดจ์ ซาฟารี และไฟร์ฟอกซ์ เบราว์เซอร์รุ่นเก่าจะเพิกเฉยต่อแท็ก <script type="importmap"> ซึ่งทำให้ตัวระบุแบบชื่อเปล่าล้มเหลว หากต้องการรองรับรุ่นเก่าอย่างกว้างขวาง ให้สร้างด้วยเครื่องมือรวมชุดที่แก้ไขตัวระบุขณะสร้าง แล้วให้บริการ URL แบบธรรมดา

ตัวเลือกชุดเติมความสามารถ

ชุดเติมความสามารถ ES Module Shims (es-module-shims.js) เพิ่มการรองรับแผนที่การนำเข้าและความสามารถใหม่อีกหลายอย่างให้เบราว์เซอร์รุ่นเก่า ให้รวมชุดนี้ไว้ก่อนสคริปต์ importmap โครงการสมัยใหม่ส่วนใหญ่ข้ามชุดเติมความสามารถและอาศัยการรองรับในตัว

ตรวจสอบความรู้

เหตุใด <script type="importmap"> จึงต้องปรากฏก่อนสคริปต์โมดูลใด ๆ ที่ใช้ตัวระบุแบบชื่อเปล่า

สรุป

แผนที่การนำเข้าจะแมปตัวระบุแบบชื่อเปล่าและคำนำหน้า URL ไปยัง URL จริง ทำให้เบราว์เซอร์รองรับรูปแบบการนำเข้าแบบเดียวกับระบบโหนด เช่น "import lodash" ให้ประกาศแผนที่เหล่านี้ครั้งเดียวต่อเอกสารก่อนสคริปต์โมดูลใด ๆ และจะประกาศจากภายนอกผ่าน src ก็ได้ โดยใช้ขอบเขตสำหรับการเขียนทับตามเส้นทาง จับคู่กับ CDN (esm.sh, jsdelivr) เพื่อทำงานโดยไม่ต้องใช้ node_modules

คำถามที่พบบ่อย

บทเรียน “แผนที่การนำเข้า importmap” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “แผนที่การนำเข้า importmap” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “แผนที่การนำเข้า importmap”

จับคู่ตัวระบุโมดูลแบบย่อกับ URL ด้วย importmap คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “แผนที่การนำเข้า importmap” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ HTML Academy