Wie Fügen Sie CSS/JS Abhängigkeiten Zu Phoenix Projekt?
Ich versuche zum hinzufügen von jquery zu einem Phönix-Projekt.
Wenn ich einen link zu jquery direkt in der app.html-Code.eex in den head-tag in etwa so:
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
...Es funktioniert.
Aber ich glaube nicht, dass ein web-Abhängigkeit. Ich will jquery in der app.
Habe ich kopiert jquery.min.js der web/static/js Verzeichnis. Und auf die es im app.html-Code.eex etwa so:
<script src="<%= static_path(@conn, "/js/jquery.min.js") %>"></script>
Funktioniert es nicht.
Kopieren jquery.min.js zu app.js nicht funktioniert entweder.
Interessant genug, wenn ich die JS zwischen den script-tags direkt in der app.html-Code.eex, es funktioniert.
Nur einen direkten link von der cloud und/oder Platzierung des JS zwischen einem script-tag im app.html-Code.eex arbeitet??
Update:
Brunch ist das kopieren der JS zu app.js in den priv-Verzeichnis. Aber die Anwendung scheint nicht Zugang zu haben.
Was mache ich falsch.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Empfehlen wir Ihnen, Lieferanten-Abhängigkeiten innerhalb von "web/static/vendor", weil diese Abhängigkeiten sind oft nicht in ES6 noch die Arbeit mit JS-Lader. Auch, wenn Sie fügen Sie diese an den Verkäufer, werden Sie automatisch Hinzugefügt, um die integrierte
app.js
von brunch.Alternativ können Sie Folgen Sie Dmitry feedback. In diesem Fall können Sie platzieren Sie die Datei innerhalb von "web/static/assets" und es wird kopiert wie auf Ihre Bewerbung. Zum Beispiel, indem man es an "web/static/assets/js/jquery-min.js" das Skript-tag, das Sie definiert haben, in deinem post sollte funktionieren.
Update
Nach dem Studium der Muster-repository in den Kommentaren gegeben, der Fehler scheint in der Bestellung: bootstrap ist in den app.js Datei vor jquery. Sie können dieses Problem beheben, indem Sie die folgenden Ihre brunch-config.js (ein ähnliches Beispiel ist bereits kommentiert in es):
Muss ich Zustimmen, dass dies nicht offensichtlich ist. Alternative Lösungen:
Um Sie in Ihrem Verkäufer-Verzeichnis, z.B.: 1_jquery.min.js, 2_bootstrap-toggle.min.js usw.
Verschieben der Dateien "web/static/assets/js/jquery-min.js" und so auf und Sie die fehlenden script-tags für Sie Ihre Seiten
Ich hoffe, das hilft!
<script src="<%= static_path(@conn, "/js/app.js") %>"></script>
mix phoenix.server
es gibt keine Warnungen oder Fehler im terminal. Wenn es ist, öffnen Sie bitte eine neue Frage mit Ihnen. 🙂Beim kopieren der Bibliotheken statisch funktioniert, ich mag es nicht, überhaupt, weil es trashes
git log
eine Menge für jedes update, jede JS-Bibliothek, insbesondere eine große.Glücklicherweise Phoenix hat die offizielle Unterstützung für das hinzufügen von JS libs via npm/Brunch und ist es in der Dokumentation: Statische Vermögenswerte - Javascript-Bibliotheken.
Dies ist, wie ich Hinzugefügt habe
jQuery
in meine Anwendung:HINWEIS: Dies ist für Phoenix 1.3, siehe Anleitung für die 1.4 unten
Hinzugefügt
jquery
mit einer Versionsnummer, Abhängigkeiten Abschnittpackage.json
:Durchgeführt installieren:
Hinzugefügt globals in
npm
Abschnittbrunch-config.js
:Nach app-Neustart, konnte ich
$
.UPDATE für Phoenix 1.4
Phoenix 1.4 wechselte von Brunch bis Webpack.
assets/Paket.json
assets/webpack.config.js
assets/js/app.js (dies ist optional, aber erforderlich ist, um $ erhältlich in Chrom-Konsole)
Laufen
und Neustart Phoenix-Anwendung.
$: 'jQuery', jQuery: 'jQuery'
statt.Abhängigkeiten in Phoenix gelang durch Brunch.io.
Standardmäßig kopiert es alles von
/web/static/assets/
Verzeichnis/priv/static
.So können Sie einfach erstellen Sie ein Verzeichnis wie
plugins
innen/web/static/assets/
und kopierenjquery.min.js
es.Habe ich nicht genug Ruf, um einen Kommentar zu der Antwort von @denis.peplin (in dem der link ist veraltet). Aber es scheint, dies ist der offizielle post verwiesen wird (es gibt wieder einen Javascript-Bibliotheken Abschnitt)...
phoenixframework-blog-static-assets
In meinem Fall die folgenden gearbeitet:
Hinzufügen der Abhängigkeit zu
package.json
Dann in
assets/js/app.js
fügen Sie die folgende Zeile...