Bir web uygulaması üzerinde çalıştığınızı varsayalım. Bu durumda, muhtemelen yalnızca JavaScript modülleriyle değil, aynı zamanda her türlü başka kaynakla da uğraşmanız gerekir: Web Çalışanları (bunlar da JavaScript’tir, ancak normal modül grafiğinin bir parçası değildir), resimler, stil sayfaları, yazı tipleri, WebAssembly modülleri ve diğerleri.
Bu kaynakların bazılarına doğrudan HTML’de referanslar eklemek mümkündür, ancak bunlar genellikle yeniden kullanılabilir bileşenlerle mantıksal olarak birleştirilir. Örneğin, JavaScript bölümüne bağlı özel bir açılır liste için bir stil sayfası, bir araç çubuğu bileşenine bağlı simge görüntüleri veya JavaScript yapıştırıcısına bağlı WebAssembly modülü. Bu gibi durumlarda, kaynaklara doğrudan JavaScript modüllerinden başvurmak ve ilgili bileşen yüklendiğinde (veya yüklendiğinde) bunları dinamik olarak yüklemek daha uygundur.
Bununla birlikte, çoğu büyük proje, içeriğin ek optimizasyonlarını ve yeniden düzenlenmesini gerçekleştiren (örneğin gruplama ve küçültme) derleme sistemlerine sahiptir. Kodu çalıştıramazlar ve yürütme sonucunun ne olacağını tahmin edemezler, JavaScript’teki her olası dize değişmezini dolaşamazlar ve bunun bir kaynak URL’si olup olmadığı hakkında tahminde bulunamazlar. Peki JavaScript bileşenleri tarafından yüklenen dinamik varlıkları “görmelerini” ve yapıya dahil etmelerini nasıl sağlayabilirsiniz?
Paket oluşturucularda özel içe aktarmalar #
Yaygın bir yaklaşım, statik içe aktarma sözdizimini yeniden kullanmaktır. Bazı paket oluşturucularda, dosya uzantısına göre biçimi otomatik olarak algılayabilirken, diğerleri eklentilerin aşağıdaki örnekte olduğu gibi özel bir URL şeması kullanmasına izin verir:
// regular JavaScript import
import { loadImg } from './utils.js';// special "URL imports" for assets
import imageUrl from 'asset-url:./image.png';
import wasmUrl from 'asset-url:./module.wasm';
import workerUrl from 'js-url:./worker.js';
loadImg(imageUrl);
WebAssembly.instantiateStreaming(fetch(wasmUrl));
new Worker(workerUrl);
Bir paketleyici eklentisi, tanıdığı bir uzantıya veya böyle açık bir özel şemaya sahip bir içe aktarma bulduğunda (asset-url: Ve js-url: yukarıdaki örnekte), başvurulan varlığı yapı grafiğine ekler, nihai hedefe kopyalar, varlığın türü için geçerli optimizasyonları gerçekleştirir ve çalışma zamanı sırasında kullanılacak nihai URL’yi döndürür.
Bu yaklaşımın faydaları: JavaScript içe aktarma sözdizimini yeniden kullanmak, tüm URL’lerin statik ve geçerli dosyaya göreli olmasını garanti eder, bu da yapı sistemi için bu tür bağımlılıkların bulunmasını kolaylaştırır.
Bununla birlikte, önemli bir dezavantajı vardır: tarayıcı bu özel içe aktarma şemalarını veya uzantılarını nasıl işleyeceğini bilmediğinden, bu tür bir kod doğrudan tarayıcıda çalışamaz. Tüm kodu kontrol ediyorsanız ve yine de geliştirme için bir paketleyiciye güveniyorsanız bu iyi olabilir, ancak sürtüşmeyi azaltmak için en azından geliştirme sırasında JavaScript modüllerini doğrudan tarayıcıda kullanmak giderek daha yaygın hale geliyor. Küçük bir demo üzerinde çalışan birinin, üretimde bile bir paketleyiciye ihtiyacı olmayabilir.
Tarayıcılar ve paketleyiciler için evrensel model #
Yeniden kullanılabilir bir bileşen üzerinde çalışıyorsanız, ister doğrudan tarayıcıda kullanılmış ister daha büyük bir uygulamanın parçası olarak önceden oluşturulmuş olsun, her iki ortamda da çalışmasını istersiniz. Çoğu modern paketleyici, JavaScript modüllerinde aşağıdaki kalıbı kabul ederek buna izin verir:
new URL('./relative-path', import.meta.url)
Bu kalıp, araçlar tarafından neredeyse özel bir sözdizimiymiş gibi statik olarak algılanabilir, ancak doğrudan tarayıcıda da çalışan geçerli bir JavaScript ifadesidir.
Bu kalıbı kullanırken, yukarıdaki örnek şu şekilde yeniden yazılabilir:
// regular JavaScript import
import { loadImg } from './utils.js';loadImg(new URL('./image.png', import.meta.url));
WebAssembly.instantiateStreaming(
fetch(new URL('./module.wasm', import.meta.url)),
{ /* … */ }
);
new Worker(new URL('./worker.js', import.meta.url));
O nasıl çalışır? Hadi dağılalım. bu new URL(...) yapıcı, göreli bir URL’yi ilk bağımsız değişken olarak alır ve bunu ikinci bağımsız değişken olarak sağlanan mutlak bir URL’ye göre çözümler. Bizim durumumuzda, ikinci argüman import.meta.url bu, geçerli JavaScript modülünün URL’sini verir, bu nedenle ilk bağımsız değişken ona göre herhangi bir yol olabilir.
Şuna benzer takaslara sahiptir: dinamik içe aktarma. kullanmak mümkün olsa da import(...) gibi keyfi ifadelerle import(someUrl)paketleyiciler, statik URL’li bir kalıba özel işlem uygular import('./some-static-url.js') derleme zamanında bilinen bir bağımlılığı önceden işlemenin, ancak onu dinamik olarak yüklenen kendi yığınına ayırmanın bir yolu olarak.
Benzer şekilde, kullanabilirsiniz new URL(...) gibi keyfi ifadelerle new URL(relativeUrl, customAbsoluteBase)henüz new URL('...', import.meta.url) kalıp, paketleyicilerin ön işleme yapması ve ana JavaScript’in yanında bir bağımlılık içermesi için açık bir sinyaldir.
Belirsiz göreli URL’ler #
Paket oluşturucuların diğer yaygın kalıpları neden tespit edemediğini merak ediyor olabilirsiniz; örneğin, fetch('./module.wasm') olmadan new URL ambalajlar?
Bunun nedeni, import ifadelerinden farklı olarak, herhangi bir dinamik isteğin mevcut JavaScript dosyasına göre değil, belgenin kendisine göre çözümlenmesidir. Diyelim ki aşağıdaki yapıya sahipsiniz:
index.html:script src="src/main.js" type="module"></script>src/
yüklemek istiyorsanız module.wasm itibaren main.jsgibi göreli bir yol kullanmak cazip gelebilir fetch('./module.wasm').
Fakat, fetch yürütüldüğü JavaScript dosyasının URL’sini bilmez, bunun yerine URL’leri belgeye göre çözer. Sonuç olarak, fetch('./module.wasm') sonunda yüklemeye çalışacaktı amaçlanan yerine ve başarısız olun (veya daha kötüsü, amaçladığınızdan farklı bir kaynağı sessizce yükleyin).
İlgili URL’yi içine sararak new URL('...', import.meta.url) bu sorunu önleyebilir ve sağlanan herhangi bir URL’nin mevcut JavaScript modülünün URL’sine göre çözüldüğünü garanti edebilirsiniz (import.meta.url) herhangi bir yükleyiciye geçmeden önce.
Yer değiştirmek fetch('./module.wasm') ile fetch(new URL('./module.wasm', import.meta.url)) ve beklenen WebAssembly modülünü başarılı bir şekilde yükleyecek ve ayrıca paketleyicilere derleme süresi boyunca bu ilgili yolları bulmaları için bir yol sağlayacaktır.
Takım desteği #
paketleyiciler #
Aşağıdaki paketleyiciler şunları destekler: new URL şema zaten:
Web Montajı #
WebAssembly ile çalışırken, genellikle Wasm modülünü elle yüklemezsiniz, bunun yerine araç zinciri tarafından yayılan JavaScript yapıştırıcısını içe aktarırsınız. Aşağıdaki araç zincirleri açıklananları yayabilir new URL(...) sizin için kaputun altındaki desen.
Emscripten aracılığıyla C/C++ #
Emscripten’i kullanırken, aşağıdaki seçeneklerden biriyle JavaScript yapıştırıcısını normal bir komut dosyası yerine bir ES6 modülü olarak yaymasını isteyebilirsiniz:
$ emcc input.cpp -o output.mjs
## or, if you don't want to use .mjs extension
$ emcc input.cpp -o output.js -s EXPORT_ES6
Bu seçeneği kullanırken, çıktı şunu kullanacaktır: new URL(..., import.meta.url) kaputun altındaki desen, böylece paketleyiciler ilişkili Wasm dosyasını otomatik olarak bulabilir.
Bu seçeneği WebAssembly dizileriyle de kullanabilirsiniz. -pthread bayrak:
$ emcc input.cpp -o output.mjs -pthread
## or, if you don't want to use .mjs extension
$ emcc input.cpp -o output.js -s EXPORT_ES6 -pthread
Bu durumda, oluşturulan Web Çalışanı aynı şekilde dahil edilecek ve aynı şekilde paket oluşturucular ve tarayıcılar tarafından keşfedilebilir olacaktır.
Wasm-pack / wasm-bindgen aracılığıyla paslanma #
çöp kutusu—WebAssembly için birincil Rust araç zinciri—birkaç çıktı moduna da sahiptir.
Varsayılan olarak, şuna dayanan bir JavaScript modülü yayar: WebAssembly ESM entegrasyon teklifi. Yazma anında, bu teklif hala deneyseldir ve çıktı yalnızca Webpack ile paketlendiğinde çalışacaktır.
Bunun yerine, wasm-pack’ten tarayıcı uyumlu bir ES6 modülü yaymasını isteyebilirsiniz. --target web:
$ wasm-pack build --target web
Çıktı açıklanan kullanacaktır new URL(..., import.meta.url) desen ve Wasm dosyası paketleyiciler tarafından da otomatik olarak keşfedilecektir.
Rust ile WebAssembly dizilerini kullanmak istiyorsanız, hikaye biraz daha karmaşıktır. Daha fazla bilgi edinmek için kılavuzun ilgili bölümüne göz atın.
Kısa sürüm, keyfi iş parçacığı API’lerini kullanamayacağınızdır, ancak kullanırsanız suni ipekile birleştirebilirsiniz. wasm-bindgen-rayon Bağdaştırıcı, böylece Web’de İşçiler üretebilir. wasm-bindgen-rayon tarafından kullanılan JavaScript yapıştırıcısı ayrıca içerir the new URL(...) kaputun altındaki desen ve böylece İşçiler keşfedilebilir olacak ve paketleyiciler tarafından da dahil edilecek.
Gelecek özellikler #
import.meta.resolve #
Özel import.meta.resolve(...) çağrı gelecekteki potansiyel bir gelişmedir. Geçerli modüle göre belirticilerin ekstra paramlar olmadan daha basit bir şekilde çözülmesine izin verirdi:
new URL('...', import.meta.url)
Aynı modül çözünürlük sisteminden geçeceği için, içe aktarma haritaları ve özel çözümleyicilerle daha iyi bütünleşir. import. Gibi çalışma zamanı API’lerine bağlı olmayan statik bir sözdizimi olduğundan, paket oluşturucular için de daha güçlü bir sinyal olacaktır. URL.
import.meta.resolve zaten uygulandı Node.js’de bir deney olarak ama hala bazıları var çözülmemiş sorular web üzerinde nasıl çalışması gerektiği hakkında.
İddiaları içe aktar #
İthalat iddiaları, ECMAScript modülleri dışındaki türlerin içeri alınmasına izin veren yeni bir özelliktir. Şimdilik JSON ile sınırlılar:
foo.json:
{ "answer": 42 }
ana.mj’ler:
import json from './foo.json' assert { type: 'json' };
console.log(json.answer); // 42
Paket oluşturucular tarafından da kullanılabilirler ve şu anda kapsanan kullanım durumlarının yerini alabilirler. new URL desendir, ancak içe aktarma iddialarındaki türler vaka bazında eklenir. Şimdilik yalnızca JSON’u kapsıyorlar, yakında CSS modülleri de eklenecek, ancak diğer varlık türleri yine de daha genel bir çözüm gerektirecek.
Kontrol et v8.dev özelliği açıklayıcı Bu özellik hakkında daha fazla bilgi edinmek için
Çözüm #
Gördüğünüz gibi, JavaScript dışı kaynakları web’e dahil etmenin çeşitli yolları vardır, ancak bunların çeşitli sakıncaları vardır ve çeşitli araç zincirlerinde çalışmazlar. Gelecekteki teklifler, bu tür varlıkları özel sözdizimi ile içe aktarmamıza izin verebilir, ancak henüz tam olarak bu noktada değiliz.
O zamana kadar, new URL(..., import.meta.url) pattern, günümüzde tarayıcılarda, çeşitli paketleyicilerde ve WebAssembly araç zincirlerinde halihazırda çalışan en umut verici çözümdür.