หน้านี้ได้รับการแปลโดย 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.
}

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

ตอนนี้ระบบรองรับแผนที่การนำเข้า JavaScript จากหลายเบราว์เซอร์แล้ว

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