วิธีการใช้งานโหมดเสียบ?

19

ฉันกำลังดิ้นรนที่จะใช้โหมดเสียบใน Emacs

ฉันดาวน์โหลดและติดตั้งโหมดเสียบผ่าน MELPA ดังนั้นการอ้างอิงทั้งหมดควรเข้าแทนที่

สำหรับวัตถุประสงค์ในการทดสอบผมก็ดาวน์โหลดมาสาธิตboidsjs

ฉันจะเปิดขึ้นboids.jsจากนั้นพิมพ์M-xrun-skewer(เปิดเบราว์เซอร์ด้วย URL http://127.0.0.1:8080/skewer/demo) จากนั้นเรียกใช้ในที่สุดM-xskewer-mode(-> เปิดใช้งานโหมดเสียบ)

แต่ในเบราว์เซอร์ไม่มีอะไรเกิดขึ้น

ผมทำอะไรผิดหรือเปล่า?

package skewer-mode javascript

— JacksGT
แหล่งที่มา

ตามที่ฉันเข้าใจแล้วเสียบจะมีอินเตอร์เฟสสำหรับการประเมินผลของจาวาสคริปต์ ... คุณประเมินเนื้อหาของboids.jsบัฟเฟอร์จริงหรือไม่?

— T. Verron

ฉันกำลังโหลดบัฟเฟอร์ปัจจุบันด้วย <kbd> Cx Ck </kbd> ("boid.js โหลด") และความพยายามในการประเมินด้วย <kbd> Cx Ce </kbd> แต่มันทำให้ฉันมีข้อผิดพลาดที่ไม่สามารถแยกเครื่องหมาย "$" - เครื่องหมาย นั่นเป็นเพราะมันไม่ได้โหลด jQuery จากไฟล์ HTML ที่สอดคล้องกัน (example.html)

— JacksGT

2

คุณจำเป็นต้องประเมินไฟล์ html ในโหมด skewer-html-mode

— Jordon Biondo

อย่างไร? C-x C-kไม่ทำงานในskewer-html-mode

— JacksGT

16

TLDR; คุณต้องเริ่มต้นเซิร์ฟเวอร์ http ( Simple-http ) และโหลดไฟล์ HTML ของคุณผ่านมัน

ตัวอย่างเช่นสมมติว่าคุณมีชื่อไฟล์ HTML hello.htmlและไฟล์สคริปต์ JS ชื่อscript.jsใน/home/user/Documents/javascriptโฟลเดอร์

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 (หรือ. emacs ):

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

ถึงเวลาที่จะเริ่มต้นเซิร์ฟเวอร์: M-x httpd-startและเปิดแฟ้มในเบราว์เซอร์โดยการเยี่ยมชมindex.html คุณควรจะได้รับการแจ้งเตือนในเบราว์เซอร์และตอนนี้เรียกhttp://localhost:8080/hello.htmlskwer-repl

คุณสามารถโต้ตอบกับเบราว์เซอร์เพิ่มเติมผ่านตัวแทน ดังนั้นทุกสิ่งที่คุณประเมินในแบบจำลองจะถูกส่งไปยังเบราว์เซอร์ ตัวอย่างเช่นถ้าคุณพิมพ์console.log('hey!')ใน repl คุณจะได้รับข้อความนี้ในคอนโซลของเบราว์เซอร์

หากคุณต้องการแก้ไข HTML แบบโต้ตอบ (เช่นการอัปเดตแท็ก HTML แบบสดจาก emacs) ให้เพิ่ม init.el (หรือ. emacs ) ของคุณ:

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

ตอนนี้เมื่อคุณอยู่ในไฟล์. htmlของคุณคุณสามารถประเมินแท็กด้วยC-M-x( skewer-html-eval-tag) และสิ่งเหล่านี้จะได้รับการอัปเดตทันทีในเบราว์เซอร์ของคุณ

โปรดทราบว่าในทางกลับกันสิ่งนี้ยังใช้กับไฟล์ CSS และ CSS

— caisah
แหล่งที่มา

1

นี่เป็นคำตอบที่ดีมากขอบคุณสำหรับการโพสต์ อาจไม่มีค่าอะไรที่ถ้าคุณไม่ต้องการ hardcode httpd-rootในการกำหนดค่าของคุณคุณสามารถเรียกใช้M-x eval-expression (setq httpd-root "/path/to/files")จากภายใน emacs ได้ตลอดเวลา

— Cody Reichert

ตัวอย่าง 'html ไร้ประโยชน์' <script src="http://localhost:8080/skewer"></script>\ (ไม่สามารถแก้ไขได้ - การแก้ไขต้อง> = 6 ตัวอักษร)

— kai-dj

8

แทนที่จะเรียกใช้การสาธิตเพียงทำตามขั้นตอนน้อยที่สุดเพื่อให้แน่ใจว่าทุกอย่างทำงานได้อย่างถูกต้อง

เปิดบัฟเฟอร์ใหม่ด้วยชื่อ myskewer.js
เปิดใช้งานโหมด JS2 (การพึ่งพาตัวเสียบ)
เปิดใช้งานโหมดเสียบ
M-xrun-skewer (เบราว์เซอร์เปิดขึ้นกลับไปที่ myskewer.js)
พิมพ์alert("hello");และกดC-xC-eที่ท้ายบรรทัดนั้น
กลับไปที่เบราว์เซอร์

คุณควรเห็นกล่องเตือนบนหน้า

— Gambo
แหล่งที่มา

ขอบคุณสำหรับคำตอบ! น่าเสียดายที่ฉันได้รับแจ้งข้อผิดพลาด "ไม่พบองค์ประกอบที่ยุบได้"

— JacksGT

ขอโทษที่ฉันทำผิด C-x C-eเป็นปุ่มจริงที่จะผลักดัน จะแก้ไขคำตอบของฉัน

— Gambo

นั่นได้ผล! อย่างไรก็ตาม: ฉันจะบอก Skewer ให้โหลด HTML ได้อย่างไร (ดังแสดงในตัวอย่าง)

— JacksGT

1

@JacksGT วางไฟล์ที่ดาวน์โหลดของคุณลง~/public_htmlจากนั้นทำตามคำแนะนำในการ "รุ่น Manual" ที่นี้การเชื่อมโยง เมื่อเสร็จแล้วให้ไปที่localhost: 8080ในเบราว์เซอร์ของคุณ

— Gambo

1

ในกรณีที่พอร์ต 8080 ถูกใช้งานแล้ว :

คุณสามารถกำหนดค่า skewer / simple-httpd เพื่อใช้พอร์ตอื่นโดยปรับแต่งhttpd-portตัวแปร ( M-x customize-variable<ret>httpd-port)

— Serv-Inc
แหล่งที่มา