Dolaylı

Question

Biz Açısal 4/typescript ve NPM ile Toplaması kullanmak istediğiniz uzak JavaScript URL'sini referans Biz firmamız bünyesinde aşağıdaki gereksinimi:

• Bazı takımlar bir CDN gibi (merkezi gereken JS kütüphaneleri oluşturmak)
• Bu kütüphaneler uzak URL'den arkasında ve neden bu kütüphaneler (uygulama) tüketici kütüphanesini kullanmak için bir npm paketi yükler
• ) çok sık değiştirmek olmasıdır (uygulama içinde yerel olarak mevcut olmamalıdır
• yerel olarak yüklü npm paketi uzak bir URL'den
• npm paketi aynı zamanda bir typescript tanım dosyası içeren arkasında mevcut JS kütüphaneye uzak bağlantı koyar bir JavaScript cephe dosya veya paket içerir
• gol tüketici kokan olmasıdır t yerel olarak yüklü JavaScript dosyası kitaplığının
• yeni sürümleri mümkünse geriye uyumlu olacağını uygulama kodu ile birlikte paketlenmiş olabilir
• (o bunun farkında olmamalı) bir URL'ye sahip bir komut dosyası etiketi eklemeniz gerekir

Bunu, Typescript/Javascript/NPM/Rollup kullanarak gerçekleştirmenin en iyi yolu nedir? Ortak jS sözdizimine aktarılan ES2015 sözdizimini kullanırız.

Answer 1

Çözüm çok karmaşık. Bu JS kitaplıklarını oluşturan ekipler bir URL'nin arkasına bir paket yerleştirmelidir. Ekipler bu URL'yi koymalı ve eTag önbelleği, bu paketlerde etkinleştirilmelidir, böylece kullanıcılar her zaman en son sürüme sahip olmalıdır. Paketin yeni bir sürümü dağıtılmışsa, http/1 istemcileri otomatik olarak paketi yeniden indirmelidir.

Kullanıcılar URL'yi kendileri koymak zorundadırlar veya json dosyaları içeren bir mekanizma, bilgilerin json dosyalarında (manifesto gibi) bulunduğu yerlerde ayarlanabilir.

Uygulamanın geliştiricileri, çerçeve kütüphanesinin tüm yazımlarını içeren npm aracılığıyla bir d.ts dosyası alabilir. Uzak bir URL olduğu için modülleri içe aktarmanız gerekmez. Bu nedenle, herhangi bir dosyayı içe aktarmanıza gerek yoktur çünkü bir script etiketi nedeniyle kütüphaneye başvurulması garanti edilir.

Answer 2

Toplamanın webpack dll plugin benzeri bir şey olduğunu düşünmüyorum, bu yüzden yanıtım ilgisiz görünebilir, ancak iyi bir başlangıç ​​noktası olarak kabul edebileceğiniz ve rollupta benzer bir şey aramaya başlayabileceğinizi düşünüyorum.

bir CDN bir kütüphane yaşam:

1. onun tam olarak ihraç modülleri gerektirecek açıklamaktadır hangi DLL Reference karşılık gelen bir DLL oluşturun.
2. Kendiliğinden açıklayan bir yol kullanın ve https://cdn.mydomain.com/<libraryName>/<version>/<libraryName>.{js,json,d.ts} gibi tutarlı bir şekilde kullanın (istekte bulunan istemci önbellekleme sorunlarını önlemek için istekte bulunan ?<cacheBustingUID> olmalıdır).(https://cdn.mydomain.com/foo/1.0.0/foo.{js,json,d.ts} ve https://cdn.mydomain.com/foo/latest/foo.{js,json,d.ts}): Normal sürüm ek olarak, ben de bu paketin son sürümüne işaret eden bir always true path ulaşmak için, version alan için bir anahtar sözcük latest kullanmanızı öneririz.
3. tüm dosyaları Çöz ve dev sunucuyu başlatmak (Zihin webpack bir yapılandırma olarak bir söz dönmek için izin verdiğini)

module.exports = env => { 
    const libs = ((name, version, exts) => (
    exts.map(ext => `https://cdn.mydomain.com/${name}/${version}/${name}.${ext}`) 
))('foo', 'latest', ['js', 'd.ts', 'json']) 

    return Promise 
    .all(libs.map(fetch)) 
    .then([library, definitions, DLLReference] => { 
     // what to do? 
     // you can also inject the dynamic paths through `webpackDefinePlugin` 
    }) 
}