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

İçe aktarma haritaları sayesinde ES modüllerini içe aktarma işlemi artık çok daha iyi.

Thomas Steiner

ES modülleri, JavaScript kodunu web uygulamalarına dahil etmenin ve yeniden kullanmanın modern bir yoludur. Modern tarayıcılar tarafından desteklenir ve JavaScript geliştirmeye yönelik eski, modüler olmayan yaklaşımlara kıyasla çeşitli avantajlar sunar.

ES modüllerini kullanmanın modern bir yolu <script type="importmap"> etiketidir. Bu etiket, harici modül adlarının karşılık gelen URL'leriyle eşlemesini tanımlamanıza olanak tanır. Bu sayede, harici modülleri kodunuza ekleyip kullanmayı kolaylaştırır.

<script type="importmap"> yaklaşımını kullanmak için öncelikle HTML belgenizin <head> bölümüne eklemeniz gerekir. Etiketin içinde, modül adlarını ilgili URL'leriyle 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 bu modülü unpkg CDN'sinde barındırılan browser-fs-access kitaplığının URL'siyle eşler. Bu eşleme yapıldıktan sonra, browser-fs-access kitaplığını kodunuza dahil etmek için import anahtar kelimesini kullanabilirsiniz. import anahtar kelimesinin yalnızca type="module" özelliğine sahip bir script etiketi içinde kullanılabileceğ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ştirmeye yönelik eski ve modüler olmayan yaklaşımlara kıyasla çeşitli avantajlar sağlar. Bu özellik, kodunuzun bağlı olduğu harici modülleri açık ve net bir şekilde belirtmenize olanak tanır. Böylece kodunuzu daha kolay anlayabilir ve koruyabilirsiniz. Genel olarak, <script type="importmap"> etiketiyle ES modüllerini kullanmak, JavaScript kodunu web uygulamalarına eklemenin ve yeniden kullanmanın modern ve güçlü bir yoludur. Özellik algılama desteğini aşağıdaki gibi etkinleştirebilirsiniz:

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

Browser Support

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 108.
  • Safari: 16.4.

Source

Daha fazla bilgi