Referenz Indirekt Fern Javascript URL

Question

Wir wollen Rollup verwenden mit kantig 4/Typoskript und NPM Wir haben die folgende Anforderung innerhalb unseres Unternehmens:

• Bestimmte Teams erstellen JS-Bibliotheken, die (wie ein CDN zentralisiert werden müssen)
• Diese Bibliotheken sind hinter einer Remote-URL und nicht lokal innerhalb der Anwendung (der Grund ist, bestehen, dass diese Bibliotheken zu oft ändern)
• der Verbraucher der Bibliothek (Anwendung) ein npm Paket installiert die Bibliothek verwendet
• Das lokal installierte npm Paket enthält eine Javascript Fassade Datei oder Bündel, die eine Remote-Verbindung auf die JS-Bibliothek setzt mich hinter einer Remote-URL vorhandenen
• Das NPM-Paket enthält auch eine Typoskript Definitionsdatei
• Das Ziel ist, dass die Verbraucher doesn‘ t muss ein Skript-Tag mit einer URL hinzugefügt werden (das sollte er nicht wissen)
• Die lokal installierte Javascript-Datei könnte zusammen mit dem Anwendungscode
• gebündelt werden. Neue Versionen der Bibliothek wären wenn möglich rückwärtskompatibel

Was ist der beste Weg dies zu erreichen mit Typescript/Javascript/NPM/Rollup? Wir würden ES2015-Syntax verwenden, die auf commonJS-Syntax transpiliert wird.

Answer 1

Die Lösung ist zu komplex. Die Teams, die diese JS-Bibliotheken erstellen, sollten ein Bündel hinter eine URL setzen. Teams sollten festlegen, dass URL und eTag-Caching für diese Bundles aktiviert werden sollen, damit Benutzer immer über die neueste Version verfügen. Wenn eine neue Version des Bundles bereitgestellt wird, müssen die http/1-Clients das Bundle automatisch erneut herunterladen.

Benutzer müssen die URL selbst oder einen Mechanismus mit JSON-Dateien könnte eingerichtet werden, wo die Informationen in JSON-Dateien (wie ein Manifest) befindet.

Die Entwickler der Anwendung konnten über npm eine d.ts-Datei erhalten, die alle Typisierungen der Framework-Bibliothek enthielt. Sie müssen keine Module importieren, da es sich um eine Remote-URL handelt. Sie müssen also nichts importieren, da die Bibliothek aufgrund eines Skript-Tags garantiert referenziert wird.

Answer 2

Ich denke nicht, Rollup hat etwas ähnliches wie webpack dll plugin, so kann meine Antwort unabhängig erscheinen, aber ich denke, Sie könnten es als einen guten Ausgangspunkt annehmen und starten Sie auf der Suche nach etwas Ähnliches in Rollup.

eine Bibliothek Leben in einem CDN:

1. ein DLL erstellen mit seinen DLL Reference entspricht, die genau beschreibt, wie die exportierten Module erfordern.
2. Verwenden Sie einen selbsterklärenden Pfad und halten Sie ihn konsistent wie https://cdn.mydomain.com/<libraryName>/<version>/<libraryName>.{js,json,d.ts} (der Anforderer sollte ?<cacheBustingUID> hinzufügen, um Client-Caching-Probleme zu vermeiden).Neben der normalen Versionierung, empfehle ich Ihnen auch latest für das version Feld ein Schlüsselwort zu verwenden, das eine always true path zu erreichen, die auf die neueste Version des Bündels Punkte: (https://cdn.mydomain.com/foo/1.0.0/foo.{js,json,d.ts} und https://cdn.mydomain.com/foo/latest/foo.{js,json,d.ts}).
3. Resolve alle Dateien und die dev-Server starten (beachten Sie, dass webpack ermöglicht ein Versprechen als Config zurückzukehren) ist

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` 
    }) 
}