หน้านี้ได้รับการแปลโดย Cloud Translation API

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

แผนที่การนําเข้าช่วยให้การนําเข้าโมดูล ES ดีขึ้นมาก

Thomas Steiner

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

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

หากต้องการใช้แนวทาง <script type="importmap"> ก่อนอื่นคุณต้องเพิ่มแนวทางนั้นลงในส่วน <head> ของเอกสาร HTML ในแท็ก คุณสามารถกําหนดออบเจ็กต์ JSON ที่แมปชื่อโมดูลกับ URL ที่เกี่ยวข้องได้ ตัวอย่างเช่น

<script type="importmap">
  {
    "imports": {
      "browser-fs-access": "https://unpkg.com/browser-fs-access@0.33.0/dist/index.modern.js"
    }
  }
</script>

โค้ดนี้กำหนดโมดูลภายนอกรายการเดียวชื่อ "browser-fs-access" และจับคู่กับ URL ของไลบรารี browser-fs-access ซึ่งโฮสต์ใน CDN ของ unpkg เมื่อทำการแมปแล้ว คุณจะใช้คีย์เวิร์ด import เพื่อรวมไลบรารี browser-fs-access ไว้ในโค้ดได้ โปรดทราบว่าคีย์เวิร์ด import ใช้ได้เฉพาะในแท็ก script ที่มีแอตทริบิวต์ type="module"

<button>Select a text file</button>
<script type="module">
  import {fileOpen} from 'browser-fs-access';

  const button = document.querySelector('button');
  button.addEventListener('click', async () => {
    const file = await fileOpen({
      mimeTypes: ['text/plain'],
    });
    console.log(await file.text());
  });
</script>

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

if (HTMLScriptElement.supports('importmap')) {
  // The importmap feature is supported.
}

Browser Support

Source

อ่านเพิ่มเติม