Manuelle Bootstrapping von Aurelia App mit Aurelia-CLI

Ich möchte meine Aurelia App in den Ressourcen-Ordner meiner Spring Boot App einbetten und Bootstap/die Seite manuell erweitern. Das Aurelia-Bündel wird mit Aurelia-CLI erzeugt. In der Dokumentation http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/app-configuration-and-startup/4 finden Sie Beispiele für JSPM- und Webpack-Skelette. Wie erreiche ich das manuelle Bootstapping/progressive Verbesserung mit aurelia-cli?Manuelle Bootstrapping von Aurelia App mit Aurelia-CLI

Wie sollte mein main.js aussehen? Wo sollte ich meine app-bundle.js und vendor-bundle.js hinzufügen?

Edit: ich erreicht ein funktionierendes Beispiel durch so etwas wie dies zB:

<div aurelia-app="main"> 
<script data-main="aurelia-bootstrapper" src="path-to-resources/vendor-bundle.js" type="text/javascript"></script> 
<script src="path-to-resources/app-bundle.js" type="text/javascript"></script> 
</div>

Aber ist es möglich, in <head> einschließen können die Skripte in sagen und die <div aurelia-app="main"> auf DOMContentLoaded Ereignis verbessern?

Quelle

2017-02-20 loaded02

sollten Sie tatsächlich Ihre 3rd-Party-App auf die 'aurelia.json' Datei hinzufügen. Vorzugsweise würde es in den 'Abhängigkeiten'-Bereich unterhalb aller 'Aurelia-' 'Abhängigkeiten gehen, aber wenn Sie Schwierigkeiten haben, könnte es auch in den' Vorbereiten'-Bereich gehen. – LStarky

@LStarky Danke für Ihre Antwort. Ich versuche, mich selbst besser zu machen. Ich habe eine index.html Seite mit nicht-aurelia Inhalt und ein Tag dieser Seite sollte meine aurelia-app sein. Und ich möchte diese App manuell starten. Wie erreiche ich das? – loaded02

Ich manuell eine Aurelia-CLI-App wie folgt. Hier verwende ich einen Polyfill-Service über das erste Skript-Tag. Dieses Skript wird ausgeführt und lädt fehlende Polyfills für den Browser herunter. Danach ruft es eine Callback-Funktion auf. Diese Callback-Funktion fügt das Aurelia-Vendor-Bundle-Skript hinzu.

<body aurelia-app="main" class="sharry not-selectable no-tap-highlight-color"> 
<div class="app-loding-container"> 
    <img src="/img/logo/sharry_tv_b.png" alt="sharry logo"> 
</div> 
<script src="https://polyfill.io/v2/polyfill.min.js?features=HTMLPictureElement,Intl&callback=polyfillsAreLoaded" defer async></script> 
<script> 
    function polyfillsAreLoaded() { 
     var aureliaScript = document.createElement('script'); 
     aureliaScript.setAttribute('src', '/scripts/vendor-bundle.js'); 
     aureliaScript.setAttribute('data-main', 'aurelia-bootstrapper'); 
     document.body.appendChild(aureliaScript); 
    } 
</script>

Quelle

2017-02-20 14:11:29 zedL

Manuelle Bootstrapping von Aurelia App mit Aurelia-CLI

Antwort

Verwandte Themen