Como usar o modo espeto?

19

Atualmente, estou lutando para usar o modo espeto no Emacs.

Eu baixei e instalei o modo espeto via MELPA, portanto todas as dependências devem estar no local.

Para fins de teste, eu até baixei a boidsjs demo .

Vou abrir boids.js, digitar M-xrun-skewer(abre o navegador com URL http://127.0.0.1:8080/skewer/demo) e, finalmente, executar M-xskewer-mode(-> modo espeto ativado).

Mas no navegador nada acontece.

O que estou fazendo errado?

package skewer-mode javascript JacksGT
fonte
Pelo que entendi, o skewer fornece uma interface para avaliação de javascript ... Você realmente avalia o conteúdo do boids.jsbuffer?
22714 Ver todas as
Estou carregando o buffer atual com <kbd> Cx Ck </kbd> ("boid.js carregado") e tentando avaliar com <kbd> Cx Ce </kbd>. Mas me dá um erro que não foi possível analisar o sinal "$". Isso é porque ele não carregar o jQuery do arquivo correspondente HTML (example.html)
JacksGT
2
Você precisa avaliar o arquivo html no modo skewer-html-mode.
Jordon Biondo 20/10
Quão? C-x C-knão funciona dentroskewer-html-mode
JacksGT

Respostas:

16

TLDR; Você precisa iniciar o servidor http (http simples ) e carregar seus arquivos HTML através dele.

Por exemplo, digamos que você tenha um arquivo HTML nomeado hello.htmle um arquivo de script JS nomeado script.jsna /home/user/Documents/javascriptpasta

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

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

É hora de iniciar o servidor:, M-x httpd-starte abrir o index.htmlarquivo no navegador, visitando http://localhost:8080/hello.html. Você deve receber o alerta no navegador e agora ligarskwer-repl .

Você pode interagir ainda mais com o navegador através da substituição. Portanto, tudo que você avaliar na repl será transmitido para o navegador. Por exemplo, se você digitarconsole.log('hey!') o repl, receberá esta mensagem no console do navegador.

Se você deseja modificar interativamente o HTML (por exemplo, tags HTML de atualização ao vivo do emacs), adicione ao seu init.el (ou .emacs ):

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

Agora, quando você está no seu arquivo .html, poderá avaliar as tags com C-M-x( skewer-html-eval-tag), que serão atualizadas imediatamente no seu navegador.

Lembre-se de que, inversamente, isso também se aplica a arquivos CSS e CSS.

caisah
fonte
1
Esta é realmente uma ótima resposta, obrigado por publicá-la. Provavelmente também não vale nada, pois se você não quiser codificar o código httpd-rootna sua configuração, poderá executar a M-x eval-expression (setq httpd-root "/path/to/files")partir do emacs a qualquer momento.
Cody Reichert
inúteis '\' no exemplo html <script src="http://localhost:8080/skewer"></script>\ (não pode editar - edições deve ser> = 6 caracteres)
kai-dj
8

Em vez de executar a demonstração, execute estas etapas mínimas para garantir que tudo esteja funcionando corretamente.

  1. Abra um novo buffer com o nome myskewer.js
  2. Ativar o modo JS2 (uma dependência do espeto)
  3. Ativar modo espeto
  4. M-xrun-skewer (um navegador abrir, volte para myskewer.js)
  5. Digite alert("hello");e cliqueC-xC-e no final dessa linha
  6. Volte para o navegador.

Você deve ver uma caixa de alerta na página.

Gambo
fonte
Obrigado pela sua resposta! Infelizmente, eu recebi o erro "Nenhum elemento
recolhível
Desculpe meu erro. C-x C-esão as teclas reais a serem pressionadas. editará minha resposta
Gambo
Isso funcionou! No entanto: como eu digo ao Skewer para carregar o HTML também? (Como mostrado na demo)
JacksGT
1
@JacksGT Coloque os arquivos baixados ~/public_htmle siga as instruções para "Versão manual" neste link. Feito isso, visite localhost: 8080 no seu navegador.
Gambo
1

Caso a porta 8080 já esteja em uso :

você pode configurar o skewer / simple-httpd para usar outra porta, personalizando a httpd-portvariável. ( M-x customize-variable<ret>httpd-port)

serv-inc
fonte