Bu sayfa, Cloud Translation API ile çevrilmiştir.

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 hale geldi.

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ştirmeye yönelik eski, modüler olmayan yaklaşımlara göre bazı avantajlar sağlar.

ES modüllerini kullanmanın modern yollarından biri <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 bunu, unpkg CDN'de barındırılan browser-fs-access kitaplığının URL'siyle eşler. Bu eşleme oluşturulduğunda artık browser-fs-access kitaplığını kodunuza eklemek için import anahtar kelimesini kullanabilirsiniz. import anahtar kelimesinin, yalnızca type="module" özelliğine sahip bir script etiketinin 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ş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, ES modüllerini <script type="importmap"> etiketiyle kullanmak, JavaScript kodunu web uygulamalarına eklemenin ve yeniden kullanmanın modern ve güçlü bir yoludur. Özellik algılama desteğini şu şekilde yapabilirsiniz:

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

Tarayıcı desteği

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

Daha fazla bilgi