Şiş modu nasıl kullanılır?


19

Şu anda Emacs'ta şiş modunu kullanmak için mücadele ediyorum.

Şiş modunu MELPA aracılığıyla indirip kurdum, bu yüzden tüm bağımlılıklar yerinde olmalı.

Test amacıyla boidsjs demoyu bile indirdim .

Açacağım boids.js, sonra yazacağım M-xrun-skewer(tarayıcıyı URL ile açar http://127.0.0.1:8080/skewer/demo) ve son olarak çalıştıracağım M-xskewer-mode(-> şiş modu etkin).

Ancak tarayıcıda hiçbir şey olmaz.

Neyi yanlış yapıyorum?


Anladığım kadarıyla, şiş javascript değerlendirmesi için bir arayüz sağlıyor ... Aslında arabellek içeriğini değerlendiriyor musunuz boids.js?
T. Verron

Şu anki tamponu <kbd> Cx Ck </kbd> ("boid.js yüklü") ile yüklüyorum ve <kbd> Cx Ce </kbd> ile değerlendirmeye çalışıyorum. Ama bana "$" işaretini ayrıştıramadığı bir hata veriyor. Bunun nedeni,
jQuery'yi

2
Html dosyasını skewer-html-modunda değerlendirmeniz gerekir.
Jordon Biondo

Nasıl? C-x C-kçalışmıyorskewer-html-mode
JacksGT

Yanıtlar:


16

TLDR; Http sunucusunu ( simple-http ) başlatmalı ve HTML dosyalarınızı bu sunucuya yüklemelisiniz.

Örneğin, adlı bir HTML dosyası var diyelim hello.htmlve adında bir JS komut dosyası script.jsiçinde /home/user/Documents/javascriptklasöründe.

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

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

Sunucuyu başlatma zamanı: M-x httpd-startve index.htmldosyayı ziyaret ederek tarayıcıda açmanın zamanı geldi http://localhost:8080/hello.html. Uyarıyı tarayıcıda almalı ve şimdi aramalısınız skwer-repl.

Tarayıcı ile daha fazla etkileşimde bulunabilirsiniz. Böylece, repl içinde değerlendirdiğiniz her şey tarayıcıya iletilecektir. Örneğin console.log('hey!'), repl'i yazarsanız, bu mesajı tarayıcının konsolunda alırsınız.

HTML'yi etkileşimli olarak değiştirmek istiyorsanız (örn. Emac'lardan canlı güncelleme HTML etiketleri), init.el (veya .emacs ) öğenize ekleyin :

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

Şimdi .html dosyanızdayken etiketleri C-M-x( skewer-html-eval-tag) ile değerlendirebilirsiniz ve bunlar tarayıcınızda hemen güncellenir.

Bunun tersine, bunun CSS ve CSS dosyaları için de geçerli olduğunu unutmayın.


1
Bu gerçekten harika bir cevap, gönderdiğiniz için teşekkürler. Muhtemelen httpd-root, yapılandırmanızda sabit kodlamak istemiyorsanız , M-x eval-expression (setq httpd-root "/path/to/files")emacs içinden istediğiniz zaman çalıştırabileceğiniz hiçbir şeye değmez .
Cody Reichert

html'de işe yaramaz '\' <script src="http://localhost:8080/skewer"></script>\ (düzenlenemez - düzenlemeler> = 6 karakter olmalıdır)
kai-dj

8

Demoyu çalıştırmak yerine, her şeyin düzgün çalıştığından emin olmak için bu minimum adımları uygulayın.

  1. Myskewer.js adıyla yeni bir arabellek açın
  2. JS2 modunu etkinleştir (şiş bağımlılığı)
  3. Şiş modunu etkinleştir
  4. M-xrun-skewer (bir tarayıcı açılır, myskewer.js'ye geri dön)
  5. Tip alert("hello");ve isabet C-xC-eo satırın sonunda
  6. Tarayıcıya geri dönün.

Sayfada bir uyarı kutusu görmelisiniz.


Cevabınız için teşekkür ederim! Ne yazık ki, "
Noktada daraltılabilir

Üzgünüm, benim hatam. C-x C-egerçek tuşlar. cevabımı düzenleyecek
Gambo

İşe yaradı! Ancak: Skewer'a HTML'yi de yüklemesini nasıl söyleyebilirim? (Demoda gösterildiği gibi)
JacksGT

1
@JacksGT İndirdiğiniz dosyaları içine yerleştirin ~/public_htmlve bu bağlantıdaki "Manuel sürüm" ile ilgili talimatları izleyin . Bu yapıldıktan sonra tarayıcınızda localhost: 8080 adresini ziyaret edin .
Gambo

1

8080 numaralı bağlantı noktasının zaten kullanımda olması durumunda :

şiş / simple-httpd httpd-portdeğişkenini özelleştirerek başka bir bağlantı noktası kullanacak şekilde yapılandırabilirsiniz . ( M-x customize-variable<ret>httpd-port)

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.