Як користуватися режимом шпажки?


19

Наразі я намагаюся використовувати режим шпаклювання в Emacs.

Я завантажив і встановив режим шпаклювання через MELPA, тому всі залежності повинні бути на місці.

Для тестування я навіть завантажив boidsjs демонстрацію .

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

Але в браузері нічого не відбувається.

Що я роблю неправильно?


Наскільки я розумію, сканер надає інтерфейс для оцінки 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-сервер ( простий-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.


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. Поверніться до браузера.

Ви повинні побачити вікно попередження на сторінці.


Спасибі за вашу відповідь! На жаль, мені запропонували помилку "У точці не знайдено жодного збірного елемента"
— JacksGT

Вибачте, моя помилка. C-x C-e- це фактичні клавіші для натискання. відредагую мою відповідь
— Гамбо

Це спрацювало! Однак: як я можу скажу Skewer також завантажувати HTML? (Як показано на демонстрації)
— JacksGT

1
@JacksGT Розмістіть завантажені файли ~/public_htmlта виконайте вказівки "Ручна версія" за цим посиланням. Після цього відвідайте localhost: 8080 у вашому браузері.
— Гамбо

1

Якщо порт 8080 вже використовується :

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.