Problem mit JS Framework


Benzol

Erfahrenes Mitglied
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 :D

Ich arbeite im Moment mit jQuery und binde externe JS-Dateien im Header meines Dokumentes ein. Bekomme dann aber Fehler in die Richtung
Code:
SyntaxError: import declarations may only appear at top level of a module
Und dann noch etwas wie
Code:
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... :coffee:

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

Erfahrenes Mitglied
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

Erfahrenes Mitglied
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

Mod | @comfreek
Moderator
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

Erfahrenes Mitglied
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 ;)
 

ComFreek

Mod | @comfreek
Moderator
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

Erfahrenes Mitglied
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.
o_O:D
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

Mod | @comfreek
Moderator
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 :D
 

Benzol

Erfahrenes Mitglied
Klar - mehr oder weniger :D 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...
 

Neue Beiträge