Comment utiliser le mode brochette?

19

J'ai actuellement du mal à utiliser le mode brochette dans Emacs.

J'ai téléchargé et installé le mode brochette via MELPA, donc toutes les dépendances doivent être en place.

À des fins de test, j'ai même téléchargé la boidsjs démo .

Je vais ouvrir boids.js, puis taper M-xrun-skewer(ouvre le navigateur avec l'URL http://127.0.0.1:8080/skewer/demo) et enfin exécuter M-xskewer-mode(-> mode brochette activé).

Mais dans le navigateur, rien ne se passe.

Qu'est-ce que je fais mal?

package skewer-mode javascript JacksGT
la source
Si je comprends bien, Brochette fournit une interface pour l' évaluation de javascript ... Avez - vous réellement évaluer le contenu du boids.jstampon?
T. Verron
Je charge le tampon actuel avec <kbd> Cx Ck </kbd> ("boid.js chargé") et j'essaie d'évaluer avec <kbd> Cx Ce </kbd>. Mais cela me donne une erreur de ne pas pouvoir analyser le signe «$». C'est parce qu'il n'a pas chargé le jQuery à partir du fichier HTML correspondant (example.html)
JacksGT
2
Vous devez évaluer le fichier html en mode brochette-html.
Jordon Biondo
Comment? C-x C-kne fonctionne passkewer-html-mode
JacksGT

Réponses:

16

TLDR; Vous devez démarrer le serveur http ( simple-http ) et charger vos fichiers HTML à travers lui.

Par exemple, supposons que vous ayez un fichier HTML nommé hello.htmlet un fichier de script JS nommé script.jsdans le /home/user/Documents/javascriptdossier.

bonjour.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 (ou .emacs ):

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

Il est temps de démarrer le serveur:, M-x httpd-startet d'ouvrir le index.htmlfichier dans le navigateur, en visitant http://localhost:8080/hello.html. Vous devriez recevoir l'alerte dans le navigateur et appeler maintenant skwer-repl.

Vous pouvez en outre interagir avec le navigateur via le repl. Ainsi, tout ce que vous évaluez dans la réponse sera transmis au navigateur. Par exemple, si vous tapez console.log('hey!')la réponse, vous obtiendrez ce message dans la console du navigateur.

Si vous souhaitez modifier le HTML de manière interactive (par exemple, les balises HTML de mise à jour en direct d'emacs), ajoutez à votre init.el (ou .emacs ):

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

Maintenant, lorsque vous êtes dans votre fichier .html , vous pouvez évaluer les balises avec C-M-x( skewer-html-eval-tag), et celles-ci seront immédiatement mises à jour dans votre navigateur.

Gardez à l'esprit que, inversement, cela s'applique également aux fichiers CSS et CSS.

caisah
la source
1
C'est vraiment une excellente réponse, merci de l'avoir publiée. Cela ne vaut probablement rien non plus si vous ne voulez pas coder en dur httpd-rootdans votre configuration, vous pouvez exécuter à M-x eval-expression (setq httpd-root "/path/to/files")partir d'emacs à tout moment.
Cody Reichert
'\' inutile dans l'exemple html <script src="http://localhost:8080/skewer"></script>\ (impossible de modifier - les modifications doivent être> = 6 caractères)
kai-dj
8

Au lieu d'exécuter la démo, effectuez simplement ces étapes minimales pour vous assurer que tout fonctionne correctement.

  1. Ouvrez un nouveau tampon avec le nom myskewer.js
  2. Activer le mode JS2 (une dépendance de la brochette)
  3. Activer le mode brochette
  4. M-xrun-skewer (un navigateur s'ouvre, retournez sur myskewer.js)
  5. Tapez alert("hello");et appuyez C-xC-eà la fin de cette ligne
  6. Revenez au navigateur.

Vous devriez voir une boîte d'alerte sur la page.

Gambo
la source
Merci pour votre réponse! Malheureusement, je suis invité à l'erreur "Aucun élément
pliable
Désolé, mon erreur. C-x C-eest les touches réelles à pousser. modifiera ma réponse
Gambo
Ça a marché! Cependant: comment dire à Skewer de charger le HTML aussi? (Comme indiqué dans la démo)
JacksGT
1
@JacksGT Placez vos fichiers téléchargés dans ~/public_htmlpuis suivez les instructions pour "Version manuelle" sur ce lien. Une fois cela fait, visitez localhost: 8080 dans votre navigateur.
Gambo
1

Dans le cas où le port 8080 est déjà utilisé :

vous pouvez configurer skewer / simple-httpd pour utiliser un autre port en personnalisant la httpd-portvariable. ( M-x customize-variable<ret>httpd-port)

serv-inc
la source