Wie benutze ich den Spieß-Modus?

19

Ich habe derzeit Probleme, den Spieß-Modus in Emacs zu verwenden.

Ich habe den Spieß-Modus über MELPA heruntergeladen und installiert, daher sollten alle Abhängigkeiten vorhanden sein.

Zu Testzwecken habe ich sogar die boidsjs Demo heruntergeladen .

Ich öffne, tippe boids.jsdann M-xrun-skewer(öffnet den Browser mit URL http://127.0.0.1:8080/skewer/demo) und starte dann endlich M-xskewer-mode(-> Spieß-Modus aktiviert).

Aber im Browser passiert nichts .

Was mache ich falsch?

package skewer-mode javascript JacksGT
quelle
Wie ich es verstehe, Spieß eine Schnittstelle zur Auswertung von JavaScript bietet ... Haben Sie eigentlich bewerten den Inhalt des boids.jsPuffers?
T. Verron
Ich lade den aktuellen Puffer mit <kbd> Cx Ck </ kbd> ("boid.js loaded") und versuche, mit <kbd> Cx Ce </ kbd> auszuwerten. Aber es gibt mir einen Fehler, dass es das "$" - Zeichen nicht analysieren konnte. Dies liegt daran, dass die jQuery nicht aus der entsprechenden HTML-Datei (example.html)
geladen wurde
2
Sie müssen die HTML-Datei im Spieß-HTML-Modus auswerten.
Jordon Biondo
Wie? C-x C-kfunktioniert nicht inskewer-html-mode
JacksGT

Antworten:

16

TLDR; Sie müssen den http-Server ( simple-http ) starten und Ihre HTML-Dateien laden.

Angenommen, Sie haben eine HTML-Datei mit dem Namen hello.htmlund eine JS-Skriptdatei mit dem Namen script.jsim /home/user/Documents/javascriptOrdner.

hallo.html :

<!doctype html>
<html>
<head>
    <!-- Include skewer.js as a script -->
    <script src="http://localhost:8080/skewer"></script>
    <!-- Include my script.js file -->
    <script src="script.js"></script>
</head>
<body>
    <p>Hello world</p>
</body>
</html>

script.js :

alert('hey!');

Init.el (oder .emacs ):

(require 'simple-httpd)
;; set root folder for httpd server
(setq httpd-root "/home/user/Documents/javascript")

Es ist Zeit, den Server zu starten M-x httpd-startund die index.htmlDatei im Browser zu öffnen , indem Sie http://localhost:8080/hello.html. Sie sollten die Warnung im Browser erhalten und jetzt anrufen skwer-repl.

Sie können mit dem Browser über die Replik weiter interagieren. Daher wird alles, was Sie in der Replik auswerten, an den Browser übertragen. Wenn Sie beispielsweise console.log('hey!')die Antwort eingeben, wird diese Meldung in der Konsole des Browsers angezeigt.

Wenn Sie HTML interaktiv ändern möchten (z. B. HTML-Tags von Emacs live aktualisieren), fügen Sie Ihrer init.el (oder .emacs ) Folgendes hinzu :

(add-hook 'html-mode-hook 'skewer-html-mode)

Wenn Sie sich jetzt in Ihrer HTML- Datei befinden, können Sie Tags mit C-M-x( skewer-html-eval-tag) auswerten. Diese werden sofort in Ihrem Browser aktualisiert.

Beachten Sie, dass dies umgekehrt auch für CSS und CSS-Dateien gilt.

caisah
quelle
1
Das ist wirklich eine großartige Antwort, danke für das Posten. Wahrscheinlich ist auch nichts wert, dass Sie, wenn Sie das httpd-rootin Ihrer Konfiguration nicht fest codieren möchten , jederzeit M-x eval-expression (setq httpd-root "/path/to/files")aus Emacs heraus ausführen können .
Cody Reichert
Nutzloses '\' in HTML-Beispiel <script src="http://localhost:8080/skewer"></script>\ (kann nicht bearbeitet werden - Änderungen müssen> = 6 Zeichen sein)
Kai-dj
8

Anstatt die Demo auszuführen, führen Sie einfach diese minimalen Schritte aus, um sicherzustellen, dass alles korrekt funktioniert.

  1. Öffnen Sie einen neuen Puffer mit dem Namen myskewer.js
  2. JS2-Modus aktivieren (eine Abhängigkeit von Spieß)
  3. Aktivieren Sie den Spieß-Modus
  4. M-xrun-skewer (Ein Browser wird geöffnet. Gehen Sie zurück zu myskewer.js.)
  5. Tippe alert("hello");und tippe C-xC-eam Ende dieser Zeile
  6. Gehen Sie zurück zum Browser.

Auf der Seite sollte ein Warnfeld angezeigt werden.

Gambo
quelle
Vielen Dank für Ihre Antwort! Leider habe ich den Fehler "Kein zusammenklappbares Element an Punkt gefunden"
JacksGT
Entschuldigung, mein Fehler. C-x C-eist die eigentliche Taste zum Drücken. bearbeite meine Antwort
Gambo
Das hat funktioniert! Allerdings: Wie kann ich Skewer anweisen, auch den HTML-Code zu laden? (Wie in der Demo gezeigt)
JacksGT
1
@JacksGT Platzieren Sie Ihre heruntergeladenen Dateien in ~/public_htmlund folgen Sie den Anweisungen für "Manuelle Version" unter diesem Link. Sobald dies geschehen ist Besuch localhost: 8080 in Ihrem Browser.
Gambo
1

Falls Port 8080 bereits verwendet wird :

Sie können skewer / simple-httpd so konfigurieren, dass ein anderer Port verwendet wird, indem Sie die httpd-portVariable anpassen . ( M-x customize-variable<ret>httpd-port)

serv-inc
quelle