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

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

การนำเข้าโมดูล ES จะดีขึ้นมากเมื่อใช้ Import Maps

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

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