¿Cómo usar el modo pincho?

19

Actualmente estoy luchando por usar el modo de brocheta en Emacs.

Descargué e instalé el modo pincho a través de MELPA, por lo que todas las dependencias deberían estar en su lugar.

Para fines de prueba, incluso descargué la boidsjs demo .

Me abriré boids.js, luego escribiré M-xrun-skewer(abre el navegador con URL http://127.0.0.1:8080/skewer/demo) y finalmente ejecutaré M-xskewer-mode(-> modo de brocheta habilitado).

Pero en el navegador no pasa nada .

¿Qué estoy haciendo mal?

package skewer-mode javascript JacksGT
fuente
Según tengo entendido, skewer proporciona una interfaz para la evaluación de javascript ... ¿Realmente evalúa el contenido del boids.jsbúfer?
T. Verron
Estoy cargando el búfer actual con <kbd> Cx Ck </kbd> ("boid.js loaded") y estoy intentando evaluar con <kbd> Cx Ce </kbd>. Pero me da un error que no pudo analizar el signo "$". Esto se debe a que no cargó jQuery desde el archivo HTML correspondiente (ejemplo.html)
JacksGT
2
Debe evaluar el archivo html en skewer-html-mode.
Jordon Biondo
¿Cómo? C-x C-kno funciona enskewer-html-mode
JacksGT

Respuestas:

16

TLDR; Debe iniciar el servidor http ( simple-http ) y cargar sus archivos HTML a través de él.

Por ejemplo, supongamos que tiene un archivo HTML llamado hello.htmly un archivo de secuencia de comandos JS llamado script.jsen la /home/user/Documents/javascriptcarpeta.

hola.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 (o .emacs ):

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

Es hora de iniciar el servidor: M-x httpd-starty abra el index.htmlarchivo en el navegador visitando http://localhost:8080/hello.html. Debería recibir la alerta en el navegador y ahora llamar skwer-repl.

Puede interactuar aún más con el navegador a través de la respuesta. Por lo tanto, todo lo que evalúe en la respuesta se transmitirá al navegador. Por ejemplo, si escribe console.log('hey!')la respuesta, recibirá este mensaje en la consola del navegador.

Si desea modificar HTML de forma interactiva (por ejemplo, actualizar las etiquetas HTML de emacs), agregue a su init.el (o .emacs ):

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

Ahora, cuando esté en su archivo .html , puede evaluar las etiquetas con C-M-x( skewer-html-eval-tag), y éstas se actualizarán inmediatamente en su navegador.

Tenga en cuenta que, por el contrario, esto también se aplica a los archivos CSS y CSS.

caisah
fuente
1
Esta es una gran respuesta, gracias por publicarla. Probablemente tampoco valga la pena que si no desea codificar httpd-rooten su configuración, puede ejecutar M-x eval-expression (setq httpd-root "/path/to/files")desde emacs en cualquier momento.
Cody Reichert
inútil '\' en html de ejemplo <script src="http://localhost:8080/skewer"></script>\ (no se puede editar - las ediciones deben ser> = 6 caracteres)
kai-dj
8

En lugar de ejecutar la demostración, solo realice estos pasos mínimos para asegurarse de que todo funcione correctamente.

  1. Abra un nuevo búfer con el nombre myskewer.js
  2. Habilitar el modo JS2 (una dependencia de la brocheta)
  3. Habilitar el modo de brocheta
  4. M-xrun-skewer (se abre un navegador, regrese a myskewer.js)
  5. Escribe alert("hello");y presiona C-xC-eal final de esa línea
  6. Regrese al navegador.

Debería ver un cuadro de alerta en la página.

Gambo
fuente
¡Gracias por su respuesta! Desafortunadamente, me aparece el error "No se ha encontrado ningún elemento
plegable
Perdón mi error. C-x C-eson las claves reales para empujar. editará mi respuesta
Gambo
¡Eso funciono! Sin embargo: ¿Cómo le digo a Skewer que cargue también el HTML? (Como se muestra en la demostración)
JacksGT
1
@JacksGT Coloque sus archivos descargados y ~/public_htmlluego siga las instrucciones para la "Versión manual" en este enlace. Una vez hecho esto, visite localhost: 8080 en su navegador.
Gambo
1

En caso de que el puerto 8080 ya esté en uso :

puede configurar skewer / simple-httpd para usar otro puerto personalizando la httpd-portvariable. ( M-x customize-variable<ret>httpd-port)

serv-inc
fuente