Bagaimana cara menggunakan sate-mode?

19

Saat ini saya berjuang untuk menggunakan mode tusuk sate di Emacs.

Saya mengunduh dan menginstal mode tusuk sate melalui MELPA, jadi semua dependensi harus ada.

Untuk keperluan pengujian saya bahkan mengunduh boidsjs demo .

Saya akan membuka boids.js, lalu mengetik M-xrun-skewer(membuka browser dengan URL http://127.0.0.1:8080/skewer/demo) dan akhirnya menjalankan M-xskewer-mode(-> tusuk-mode diaktifkan).

Tetapi di browser tidak ada yang terjadi.

Apa yang saya lakukan salah?

package skewer-mode javascript JacksGT
sumber
Seperti yang saya pahami, tusuk sate menyediakan antarmuka untuk evaluasi javascript ... Apakah Anda benar-benar mengevaluasi konten boids.jsbuffer?
T. Verron
Saya memuat buffer saat ini dengan <kbd> Cx Ck </kbd> ("boid.js dimuat") dan mencoba untuk mengevaluasi dengan <kbd> Cx Ce </kbd>. Tetapi itu memberi saya kesalahan karena tidak dapat menguraikan tanda "$" -. Itu karena ia tidak memuat jQuery dari file HTML yang sesuai (example.html)
JacksGT
2
Anda perlu mengevaluasi file html dalam mode tusuk-html.
Jordon Biondo
Bagaimana? C-x C-ktidak bekerja diskewer-html-mode
JacksGT

Jawaban:

16

TLDR; Anda harus memulai server http ( simple-http ) dan memuat file HTML Anda melalui itu.

Sebagai contoh, katakanlah Anda memiliki nama file HTML hello.htmldan file skrip JS bernama script.jsdalam /home/user/Documents/javascriptfolder.

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

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

Saatnya untuk memulai server:, M-x httpd-startdan buka index.htmlfile di browser, dengan mengunjungi http://localhost:8080/hello.html. Anda harus mendapatkan peringatan di browser dan sekarang menelepon skwer-repl.

Anda dapat lebih jauh berinteraksi dengan browser melalui repl. Jadi, semua yang Anda evaluasi di repl akan dikirimkan ke browser. Misalnya jika Anda mengetikkan console.log('hey!')balasan, Anda akan mendapatkan pesan ini di konsol peramban.

Jika Anda ingin memodifikasi HTML secara interaktif (mis. Pembaruan langsung tag HTML dari emacs), tambahkan ke init.el Anda (atau .emacs ):

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

Sekarang ketika Anda berada di file .html Anda, Anda dapat mengevaluasi tag dengan C-M-x( skewer-html-eval-tag), dan ini akan segera diperbarui di browser Anda.

Perlu diingat bahwa sebaliknya, ini juga berlaku untuk file CSS dan CSS.

caisah
sumber
1
Ini jawaban yang sangat bagus, terima kasih telah mempostingnya. Mungkin juga tidak bernilai apa-apa bahwa jika Anda tidak ingin hardcode httpd-rootdalam konfigurasi Anda, Anda dapat lari M-x eval-expression (setq httpd-root "/path/to/files")dari dalam emacs kapan saja.
Cody Reichert
tidak berguna '\' dalam contoh html <script src="http://localhost:8080/skewer"></script>\ (tidak dapat diedit - suntingan harus> = 6 karakter)
kai-dj
8

Alih-alih menjalankan demo, lakukan saja langkah-langkah minimal ini untuk memastikan semuanya bekerja dengan benar.

  1. Buka buffer baru dengan nama myskewer.js
  2. Aktifkan mode JS2 (ketergantungan tusuk sate)
  3. Aktifkan mode tusuk sate
  4. M-xrun-skewer (browser terbuka, kembali ke myskewer.js)
  5. Ketik alert("hello");dan tekan C-xC-edi akhir baris itu
  6. Kembali ke browser.

Anda akan melihat kotak peringatan di halaman.

Gambo
sumber
Terima kasih atas jawaban Anda! Sayangnya, saya diminta kesalahan "Tidak ada elemen yang dapat runtuh ditemukan pada titik"
JacksGT
Maaf, kesalahan saya. C-x C-eadalah kunci yang sebenarnya untuk ditekan. akan mengedit jawaban saya
Gambo
Itu berhasil! Namun: Bagaimana cara saya memberitahu Skewer untuk memuat HTML juga? (Seperti yang ditunjukkan dalam demo)
JacksGT
1
@JacksGT Tempatkan file-file Anda yang diunduh ~/public_htmlkemudian ikuti instruksi untuk "Versi manual" di tautan ini . Setelah selesai kunjungi localhost: 8080 di browser Anda.
Gambo
1

Dalam kasus port 8080 sudah digunakan :

Anda dapat mengonfigurasi tusuk / simple-httpd untuk menggunakan port lain dengan menyesuaikan httpd-portvariabel. ( M-x customize-variable<ret>httpd-port)

serv-inc
sumber