Jak korzystać z trybu szpikulca?

19

Obecnie mam problemy z użyciem trybu szpikulca w Emacsie.

Pobrałem i zainstalowałem tryb szpikulca za pośrednictwem MELPA, więc wszystkie zależności powinny być na miejscu.

Do celów testowych nawet pobrałem boidsjs wersję demo .

Otworzę boids.js, napiszę M-xrun-skewer(otwiera przeglądarkę z adresem URL http://127.0.0.1:8080/skewer/demo), a następnie w końcu uruchomię M-xskewer-mode(-> włączony tryb szpikulca).

Ale w przeglądarce nic się nie dzieje.

Co ja robię źle?

package skewer-mode javascript JacksGT
źródło
Jak rozumiem, szpikulec zapewnia interfejs dla oceny javascript ... Czy rzeczywiście oceniać zawartość boids.jsbufora?
T. Verron,
Ładuję bieżący bufor za pomocą <kbd> Cx Ck </kbd> („załadowano boid.js”) i próbuję ocenić za pomocą <kbd> Cx Ce </kbd>. Ale daje mi błąd, że nie mógł przeanalizować znaku „$”. Jest tak, ponieważ nie załadował jQuery z odpowiedniego pliku HTML (przyklad.html)
JacksGT
2
Musisz ewaluować plik html w trybie skewer-html.
Jordon Biondo,
W jaki sposób? C-x C-knie działa wskewer-html-mode
JacksGT

Odpowiedzi:

16

TLDR; Musisz uruchomić serwer http ( simple-http ) i załadować przez niego swoje pliki HTML.

Załóżmy na przykład, że masz plik HTML o nazwie hello.htmli plik skryptu JS o nazwie script.jsw /home/user/Documents/javascriptfolderze.

hello.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>

skrypt.js :

alert('hey!');

init.el (lub .emacs ):

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

Czas uruchomić serwer: M-x httpd-starti otworzyć index.htmlplik w przeglądarce, odwiedzając stronę http://localhost:8080/hello.html. Powinieneś dostać alert w przeglądarce i teraz zadzwonić skwer-repl.

Możesz dalej wchodzić w interakcje z przeglądarką za pośrednictwem repliki. Wszystko, co oceniasz w replice, zostanie przesłane do przeglądarki. Na przykład, jeśli wpiszesz console.log('hey!')odpowiedź, otrzymasz tę wiadomość w konsoli przeglądarki.

Jeśli chcesz interaktywnie modyfikować HTML (np. Tagi HTML na żywo z emacsa), dodaj do pliku init.el (lub .emacs ):

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

Teraz, gdy jesteś w pliku .html , możesz oceniać tagi za pomocą C-M-x( skewer-html-eval-tag), które zostaną natychmiast zaktualizowane w przeglądarce.

Pamiętaj, że odwrotnie, dotyczy to również plików CSS i CSS.

caisah
źródło
1
To naprawdę świetna odpowiedź, dziękuję za opublikowanie. Prawdopodobnie nic też nie jest warte tego, że jeśli nie chcesz na stałe kodować httpd-rootw swojej konfiguracji, możesz uruchomić M-x eval-expression (setq httpd-root "/path/to/files")w dowolnym momencie z poziomu emacsa.
Cody Reichert,
bezużyteczne „\” w przykładowym html <script src="http://localhost:8080/skewer"></script>\ (nie można edytować - edycja musi zawierać> = 6 znaków)
kai-dj
8

Zamiast uruchamiać wersję demo, po prostu wykonaj te minimalne kroki, aby upewnić się, że wszystko działa poprawnie.

  1. Otwórz nowy bufor o nazwie myskewer.js
  2. Włącz tryb JS2 (zależność szpikulca)
  3. Włącz tryb szpikulca
  4. M-xrun-skewer (otwiera się przeglądarka, wróć do myskewer.js)
  5. Wpisz alert("hello");i naciśnij C-xC-ena końcu tego wiersza
  6. Wróć do przeglądarki.

Powinieneś zobaczyć pole ostrzeżenia na stronie.

Gambo
źródło
Dziękuję za Twoją odpowiedź! Niestety
pojawia się
Przepraszam, mój błąd. C-x C-eto rzeczywiste klawisze do wciśnięcia. zedytuje moją odpowiedź
Gambo,
To się udało! Jak mam jednak powiedzieć Skewerowi, aby załadował również HTML? (Jak pokazano w demie)
JacksGT
1
@JacksGT Umieść pobrane pliki, ~/public_htmla następnie postępuj zgodnie z instrukcjami dla „Wersji ręcznej” pod tym linkiem. Gdy to zrobisz, odwiedź localhost: 8080 w przeglądarce.
Gambo,
1

W przypadku, gdy port 8080 jest już w użyciu :

możesz skonfigurować skewer / simple-httpd, aby używał innego portu, dostosowując httpd-portzmienną. ( M-x customize-variable<ret>httpd-port)

serv-inc
źródło