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

İçe aktarma haritaları sayesinde ES modüllerini içe aktarmak artık çok daha kolay.

Thomas Steiner

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

ES modüllerini kullanmanın modern bir yolu <script type="importmap"> etiketiyle olur. 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 eklemek ve kullanmak kolaylaşı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'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'sinde barındırılan browser-fs-access kitaplığının URL'siyle eşler. Bu eşleme yapıldıktan sonra artık import anahtar kelimesini kullanarak browser-fs-access kitaplığını kodunuza dahil edebilirsiniz. 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"> etiketi ve import anahtar kelimesinin kullanılması, JavaScript geliştirmeye yönelik eski ve modüler olmayan yaklaşımlara kıyasla çeşitli avantajlar sağlar. Kodunuzun bağlı olduğu harici modülleri net ve açık bir şekilde belirtmenize olanak tanır. Bu sayede kodunuzu anlamak ve bakımını yapmak kolaylaşır. Genel olarak, <script type="importmap"> etiketiyle ES modüllerini kullanmak, web uygulamalarına JavaScript kodu eklemenin ve bu kodu yeniden kullanmanın modern ve güçlü bir yoludur. Aşağıdaki gibi desteklenen özellikleri tespit edebilirsiniz:

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

Browser Support

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

Source

Daha fazla bilgi