JavaScript içe aktarma haritaları artık tarayıcılar arası desteklenmektedir

Haritaları içe aktarma özelliğiyle ES modüllerini içe aktarma işlemi artık çok daha iyi bir hâle gelmiştir.

Thomas Steiner

ES modülleri, web uygulamalarına JavaScript kodu eklemek ve bunları yeniden kullanmak için modern bir yöntemdir. Modern tarayıcılar tarafından desteklenir ve JavaScript geliştirme konusunda eski, modüler olmayan yaklaşımlara kıyasla çeşitli avantajlar sunarlar.

ES modüllerini kullanmanın modern bir yolu <script type="importmap"> etiketini kullanmaktır. Bu etiket, harici modül adlarının karşılık gelen URL'leriyle bir eşlemesini tanımlamanıza olanak tanır. Böylece, kodunuza harici modülleri eklemek ve kullanmak daha kolay hale gelir.

<script type="importmap"> yaklaşımını kullanmak için öncelikle bu yaklaşımı HTML belgenizin <head> bölümüne eklemeniz gerekir. Etiketin içinde, modül adlarını karşılık gelen URL'lerle eşleyen bir JSON nesnesi tanımlayabilirsiniz. Örneğin:

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

Bu kod, "browser-fs-access" adlı tek bir harici modülü tanımlar ve bunu, unpkg CDN'de barındırılan browser-fs-access kitaplığının URL'siyle eşler. Bu eşleme yapıldıktan sonra, tarayıcınıza fs-access kitaplığını dahil etmek için import anahtar kelimesini kullanabilirsiniz. import anahtar kelimesinin yalnızca type="module" özelliğine sahip bir script etiketi içinde kullanılabildiğini unutmayın.

<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"> etiketini ve import anahtar kelimesini kullanmak, JavaScript geliştirme için eski, modüler olmayan yaklaşımlara kıyasla çeşitli avantajlar sağlar. Kodunuzun dayalı olduğu harici modülleri açık ve açık bir şekilde belirtmenize olanak tanır. Böylece, kodunuzu anlamak ve sürdürmek daha kolay olur. Genel olarak, ES modüllerini <script type="importmap"> etiketiyle kullanmak, JavaScript kodunu web uygulamalarına eklemek ve bu uygulamalarda yeniden kullanmak için modern ve güçlü bir yoldur. Özellik algılamayı aşağıdaki şekilde belirleyebilirsiniz:

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

Tarayıcı Desteği

  • 89
  • 89
  • 108
  • 16,4

Daha fazla bilgi