Packing-Web-Worker-Quelle zur Verwendung mit Ember.js

Question

Ich implementiere ein Feature in unserer Ember-App mit Web-Mitarbeitern und habe Probleme herauszufinden, wie man die Worker-Quelle verpacken soll.

Mein erster Ansatz war worker.js in das assets Verzeichnis zu platzieren, aber in unserer Konfiguration werden die Vermögenswerte von einem anderen Server in der Produktion bedient, und wir bekommen die Fehler:

Failed to construct Worker: Script at https://static-assets.foo.com cannot be accessed from origin https://app.foo.com

Ich habe versucht, mit document.domain futzing (Ändern Sie es in foo.com), aber der Fehler bleibt bestehen.

Ich fragte mich, ob ich ember-cli-build.js (aka Brocfile.js) ändern könnte eine andere JS Bündel zusätzlich zu app.js und vendor.js (sagen wir, worker.js) zu schaffen, die wie die in der gleichen Position eingesetzt werden würde, und mit einem gebracht werden konnte <script> Markierung in index.html. Ich bin jedoch nicht in der Lage, herauszufinden, wie dies zu tun ist, entweder aufgrund der app.js/vendor.js Logik, die in ember-cli verbrannt wird, oder meiner Unkenntnis von Brokkoli.

Als nächstes dachte ich über die Erstellung der Worker von einem Blob. Die Frage ist, wo die Quelle für den Blob gespeichert werden soll. Ich überlegte, die Quelle für den Blob in ein nicht standardmäßiges <script>-Tag in index.html zu platzieren, von wo ich es abrufen und den Blob erstellen konnte. Ich möchte die Worker-Quelle nicht direkt in index.html einfügen, also dachte ich, broccoli-replace zu verwenden, aber die Worker-Quelle ist in ES6 geschrieben und muss transpiliert werden. Ich überlegte, ein Glut-Add-on zu verwenden, das es ermöglicht, Dinge in index.html mit {{content-for}} einzufügen, aber das erfordert, dass ich den einzufügenden Text angeben, und ich weiß nicht, woher ich es bekommen kann, und das Problem der Umblätterung bleibt.

Ich betrachtete dann einige sehr klujy Lösungen wie Wrapping der Worker-Quelle in einer Funktion, und dann Stringing die Funktion und Extrahieren des Körpers (zwischen {}) zur Laufzeit. Das funktioniert, aber der Gestank ist ein wenig überwältigend, und ich kann keine ES6-Konstrukte wie Spread-Operatoren oder Array-Destrukturierung verwenden, die dazu führen, dass Babel seine kleinen Laufzeit-Utilities wie aufruft.

Irgendwelche vernünftigen Lösungen oder Wege, irgendwelche der oben genannten Ansätze zu arbeiten?

Answer 1

Brokkoli ist Phantasie. Sie benötigen Funnel und MergeTrees.

Grundsätzlich in Ihrem ember-cli-build.js müssten Sie Ihren eigenen Baum anstelle von app.toTree() zurückgeben. So können Sie etwas tun:

let workers = new Funnel('app/workers', { 
    destDir: 'workers' 
}); 

return new MergeTree([app.toTree(), workers]); 

Dies wird grundsätzlich kopieren Sie einfach die app/workers Verzeichnis dist/workers während bauen, und auch alle Änderungen übernehmen und das livereload auslösen.

Answer 2

Leider keine unmittelbare Lösung (pre-alpha), haben aber einen Blick auf: https://github.com/runspired/skyrocket

@ ebrahim-pasbani: CORS werden Sie nicht wegen der Worker helfen Same Origin Policy. Für eine schnelle und saubere Lösung habe ich xhr (oder $.getScript) verwendet. Siehe gist.