Problem mit JS Framework

[Benzol]

Hallo Ihr Lieben,
bin auf etwas interessantes für ein Webprojekt gestoßen und wollte mithilfe von apng-js ANPG Dateien auf meiner Webseite steuern.
Ich tu mich nur irgendwie schwer zu verstehen, wie ich diese Bibliothek eingebunden bekomme. Bin beim anschauen vom Code und den Fehlermeldungen auf Webpack gestoßen - aber der Funke springt nicht über, ich check nicht, wofür man das braucht

Ich arbeite im Moment mit jQuery und binde externe JS-Dateien im Header meines Dokumentes ein. Bekomme dann aber Fehler in die Richtung

SyntaxError: import declarations may only appear at top level of a module

Und dann noch etwas wie

Laden des Moduls von "http://localhost/stories/javascript/library/structs" wurde auf Grund eines nicht freigegebenen MIME-Typs ("text/html") blockiert.

Die Beispiel index hilft mir nicht wirklich weiter. Das sieht für mich alles nicht nach JavaScript aus...

Freu mich über jede Hilfe oder Infos die ich mir anschauen kann. Hänge jetzt schon seit einer Woche... wäre cool wenn ich das zum Laufen bekomme...

 

[basti1012]

Ist das nicht Node.js ??
Kenne mich da noch nicht so aus weil mein Webseiten Anbieter das auf ihren System nicht zulassen tut , aber sieht mir trotzdem danach aus.
Hast du den Node.js ??

Kann mich auch irren dann vergess den Beitrag einfach

 

[Benzol]

Ne du, das habe ich nicht. Von Node.js habe ich auch schonmal gelesen. Rangiert derzeit wie Webpack in so einer mysteriösen Wolke ^^
Ich google mal nach Node.js - Zu Webpack habe ich mal was mit modernem JS Code gelesen...

 

[ComFreek]

Ist das nicht Node.js ??

Ne, apng-js sieht mir schon wie eine browserseitige Lib aus.

SyntaxError: import declarations may only appear at top level of a module

Das hier sollte eigentlich selbsterklärend sein Mach dein import halt top-level ganz am Anfang.

Laden des Moduls von "http://localhost/stories/javascript/library/structs" wurde auf Grund eines nicht freigegebenen MIME-Typs ("text/html") blockiert.

Der Server sollte HTTP-Anfragen an diese URI am besten mit "Content-Type: text/javascript" beantworten. Noch besser: "Content-Type: text/javascript;charset=utf-8". Welchen Webserver verwendest du?

 

[Benzol]

Local läuft xammp, bei meinem Hoster Apache.

Das hier sollte eigentlich selbsterklärend sein Mach dein import halt top-level ganz am Anfang.

Jap, deswegen brauchen wir auf selbsterklärende Sachen auch nicht eingehen. Hätte hier nicht geschrieben, wenn ich nicht solche Dinge schon getestet habe. Davon ab würde ich gerne den Code auch zur "Laufzeit" importieren bzw laden wollen. Brauche das nur bei einer Seite und auch nur für eine kleine, optische Spielerei.

Es ist die Art, wie die Lib programmiert ist - schau Dir das bitte mal an - besonders die Test-Datei mit der index.js.
Irgendwas ist halt anders, ich kann mit imports nicht wirklich arbeiten scheinbar. Selbst wenn ich die am Anfang von meinem Dokument einbinde, kommen solche Fehler.

Bitte, schaut Euch das Ding mal an. Standart und einfach kann ich selber... will ja nicht Eure Zeit verschwenden

 

[Technipion]

Hallo Benzol,
hast du dir denn in dem GitHub Repo schon einmal das Beispiel angeschaut?
Guckst du hier: davidmz/apng-js

Hier kriegst du testweise eine APNG her: Animated Portable Network Graphics – Wikipedia

Bei mir funktioniert die Zerlegung in einzelne Frames fehlerfrei, wie auch das Playback.
Den Code findest du in der dazugehörigen index.js Datei (nicht erschlagen lassen, sieht mehr aus, als es wirklich ist).

Gruß Technipion

 

[ComFreek]

Hätte hier nicht geschrieben, wenn ich nicht solche Dinge schon getestet habe

Dann schreib doch bitte, dass du das schon getestet hast. Das kann ich ja nicht wissen

Davon ab würde ich gerne den Code auch zur "Laufzeit" importieren bzw laden wollen.

Eine Google-Suche nach "ecmascript import runtime" liefert tc39/proposal-dynamic-import, welches ein Proposal in Stage 4 ist! D.h. einige Browser sollten das sogar unterstützen.

 

[Benzol]

Dann schreib doch bitte, dass du das schon getestet hast. Das kann ich ja nicht wisse

Oh verdammt, ich vergesse immer das die Allgemeinheit fragt, bevor geschaut und getestet wird. Mein Gang ins Forum ist immer mein letzter Ausweg. Eigentlich steht ja fast alles schon iwo im Netz... nur diesmal ists wie verhexxt....

Eine Google-Suche nach "ecmascript import runtime" liefert tc39/proposal-dynamic-import, welches ein Proposal in Stage 4 ist! D.h. einige Browser sollten das sogar unterstützen.

Ich lese mich durch - auf den ersten Blick siehts wie ne Erweiterung aus, mit der ich dynamische imports machen kann. So lange aktuelle Browser das machen, passt das...

Hallo Benzol,
hast du dir denn in dem GitHub Repo schon einmal das Beispiel angeschaut?
Guckst du hier: davidmz/apng-js

Hier kriegst du testweise eine APNG her: Animated Portable Network Graphics – Wikipedia

Bei mir funktioniert die Zerlegung in einzelne Frames fehlerfrei, wie auch das Playback.
Den Code findest du in der dazugehörigen index.js Datei (nicht erschlagen lassen, sieht mehr aus, als es wirklich ist).

Ja genau dieses Beispiel meine ich... es funktioniert da ganz wunderbar. Aber ich kann es nicht in meine bestehende Seite so einbinden, weils dann Fehler hagelt ohne Ende.

Angeschaut habe ich das - das was ich brauchen würde, habe ich gefunden. Habe sogar schon meine eigenen apngs. Ich hab nur keine Ahnung, wie ich die Lib in mein Projekt bekomme ohne diese Fehlermeldungen.

 

[ComFreek]

Kannst du vielleicht ein bisschen mehr Code von dir posten? So grobe Architektur: wie wird das JS in das HTML eingebunden? Wie sehen die JS-Dateien untereinander aus? Wie hast du apng.js geladen? Als NPM Paket?

Ich habe auch schon öfters Probleme mit Imports gehabt, zwar in TypeScript, aber da kann man auch echt verzweifeln

 

[Benzol]

Klar - mehr oder weniger Benutze gar keine imports, habe (noch) viel Inline JS welches ich dann ab und zu mal in js Dateien outsource. Muss mich für das Chaos entschuldigen, ich werkel da nebenbei dran seit ca einem Jahr und eigentlich war es als reines Bilder/Videoalbum gedacht - das ich das jetzt für Webseiten verwende ist so eine Fixe Idee weil ich unbedingt ausgiebig mit Fullscreen-Videos arbeiten will. Außerdem nimmts mir viel Arbeit ab.... Dinge, die immer wieder kommen.

Vereinsseite

Mir ist da noch eine Idee gekommen. Ließe sich der ganze Code nicht auch in eine JS File packen und einfach ohne imports auskommen? Dann binde ich die am Anfag ein wie andere Libs auch...