Haritaları içe aktarma özelliğiyle ES modüllerini içe aktarma işlemi artık çok daha iyi bir hâle gelmiştir.
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