ด้วยการนำเข้าแผนที่ ทำให้การนำเข้าโมดูล ES ดีขึ้นมาก
โมดูล 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 ที่ไม่ได้ผลิต เมื่อการแมปนี้พร้อมใช้งาน คุณจะใช้คีย์เวิร์ด 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.
}
การสนับสนุนเบราว์เซอร์
- 89
- 89
- 108
- 16.4