Как использовать skewer-mode?

19

В настоящее время я изо всех сил пытаюсь использовать режим шампуров в Emacs.

Я скачал и установил режим шампура через MELPA, поэтому все зависимости должны быть на месте.

Для тестирования я даже скачал boidsjs демо .

Я открою boids.js, затем наберу M-xrun-skewer(открывает браузер с URL-адресом http://127.0.0.1:8080/skewer/demo) и, наконец, запустлю M-xskewer-mode(-> режим шампура включен).

Но в браузере ничего не происходит.

Что я делаю неправильно?

package skewer-mode javascript JacksGT
источник
Насколько я понимаю, шампур предоставляет интерфейс для оценки javascript ... Вы на самом деле оцениваете содержимое boids.jsбуфера?
Т. Веррон
Я загружаю текущий буфер с помощью <kbd> Cx Ck </ kbd> («boid.js загружен») и пытаюсь оценить с помощью <kbd> Cx Ce </ kbd>. Но это дает мне ошибку, что он не может разобрать знак "$". Это потому, что он не загрузил jQuery из соответствующего HTML-файла (example.html)
JacksGT
2
Вам нужно проверить html-файл в режиме skewer-html.
Джордон Биондо,
Как? C-x C-kне работает вskewer-html-mode
JacksGT

Ответы:

16

TLDR; Вы должны запустить http-сервер ( simple-http ) и загрузить через него HTML-файлы.

Например, допустим, у вас есть файл HTML с именем hello.htmlи файл сценария JS с именем script.jsв /home/user/Documents/javascriptпапке.

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>

script.js :

alert('hey!');

init.el (или .emacs ):

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

Пришло время запустить сервер: M-x httpd-startи открыть index.htmlфайл в браузере, посетив страницу http://localhost:8080/hello.html. Вы должны получить предупреждение в браузере и теперь звоните skwer-repl.

Вы можете в дальнейшем взаимодействовать с браузером через репл. Таким образом, все, что вы оцениваете в репле, будет передано в браузер. Например, если вы console.log('hey!')введете repl, вы получите это сообщение в консоли браузера.

Если вы хотите интерактивно изменять HTML (например, обновлять HTML-теги из emacs в режиме реального времени ), добавьте в свой init.el (или .emacs ):

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

Теперь, когда вы находитесь в своем .html файле, вы можете оценивать теги с помощью C-M-x( skewer-html-eval-tag), и они будут немедленно обновлены в вашем браузере.

Имейте в виду, что, наоборот, это также относится к файлам CSS и CSS.

caisah
источник
1
Это действительно отличный ответ, спасибо за публикацию. Вероятно, также ничего не стоит, что если вы не хотите жестко задавать код httpd-rootв своей конфигурации, вы можете запускать M-x eval-expression (setq httpd-root "/path/to/files")из emacs в любое время.
Коди Райхерт
бесполезный '\' в примере html <script src="http://localhost:8080/skewer"></script>\ (не может редактироваться - изменения должны быть> = 6 символов)
kai-dj
8

Вместо запуска демо, просто выполните эти минимальные шаги, чтобы убедиться, что все работает правильно.

  1. Откройте новый буфер с именем myskewer.js
  2. Включить JS2-режим (зависимость от вертела)
  3. Включить режим шампура
  4. M-xrun-skewer (откроется браузер, вернитесь к myskewer.js)
  5. Введите alert("hello");и нажмите C-xC-eв конце этой строки
  6. Вернитесь в браузер.

Вы должны увидеть окно предупреждения на странице.

Гамбо
источник
Спасибо за ваш ответ! К сожалению, мне
выдается сообщение
Извините моя ошибка. C-x C-eэто реальные клавиши для нажатия. отредактирую мой ответ
Gambo
Это сработало! Однако: Как я могу сказать Skewer, чтобы загрузить HTML тоже? (Как показано в демоверсии)
JacksGT
1
@JacksGT Поместите свои загруженные файлы в и ~/public_htmlследуйте инструкциям для «Ручной версии» по этой ссылке. Как только это будет сделано, посетите localhost: 8080 в вашем браузере.
Гамбо
1

Если порт 8080 уже используется :

Вы можете настроить skewer / simple-httpd для использования другого порта, настроив httpd-portпеременную. ( M-x customize-variable<ret>httpd-port)

Serv-вкл
источник