หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>โค้ดแหล่งที่มา AI
ดาวน์โหลด

Impulse: เครื่องมือ dev ที่เป็นไปไม่ได้สำหรับการตอบสนองและ tailwind

สร้างเว็บไซต์ที่ทันสมัยในเบราว์เซอร์ของคุณโดยไม่ต้องเลิกใช้รหัส

Impulse.dev | ความไม่ลงรอยกัน

ผลิตโดย @KroGovoy และ @ivolchenskov

Impulse ถูกสร้างขึ้นเพื่อทำงานร่วมกับเว็บไซต์ React ในโหมด Dev (หมายถึงการทำงานบนพื้นที่ท้องถิ่นของคุณ)

ช่วยให้คุณสามารถแก้ไข UI ของคุณได้ในเบราว์เซอร์ในขณะที่เปลี่ยนรหัสของคุณโดยอัตโนมัติในแบบที่คุณจะทำด้วยตนเอง มันเหมือนส่วนขยายของตัวแก้ไขรหัสที่นอกเหนือไปจากตัวแก้ไขรหัส

  • สร้างขึ้นในแอพของคุณ: ไม่จำเป็นต้องติดตั้งส่วนขยายหรือแอพเดสก์ท็อปใด ๆ
  • ไม่มีบริการภายนอกทำงานโดยตรงกับรหัส
  • ทำขึ้นเฉพาะสำหรับนักพัฒนาไม่ใช่นักออกแบบ
  • Addon ไม่ใช่การเปลี่ยน: ให้เครื่องมือใหม่แก่คุณในขณะที่ไม่เพิ่มขอบเขตใด ๆ

- ดูการสาธิตที่ impulse.dev

เมื่อเทียบกับการเขียนรหัสด้วยตนเอง:

  • เร็วขึ้น
  • สนุกมากขึ้น
  • รหัสเดียวกันที่ผลิต

ความต้องการ

ภาษา:

  • ✅ JavaScript
  • ✅ typescript (พิมพ์ในตัว)

การแสดงผลห้องสมุด:

  • ✅ตอบสนอง 17+
  • ⬜ Vue (อาจเป็นไปได้ในอนาคต)
  • Svelte (ไม่มีแผนการสนับสนุน)
  • Angular (ไม่มีแผนการสนับสนุน)

Frameworks และ Bundlers ตอบสนอง:

  • ✅ next.js
  • ✅สร้างแอป React
  • ✅ Vite
  • ✅ esbuild
  • ⬜รีมิกซ์
  • ⬜พัสดุ
  • ✅ระบบที่กำหนดเองใด ๆ ที่สร้างขึ้นบน Babel/Webpack/Rollup

กรอบ CSS:

  • ✅ tailwind
  • ไม่มีแผนที่จะสนับสนุนเฟรมเวิร์ก CSS อื่น ๆ ในตอนนี้

เบราว์เซอร์:

  • ✅อิงโครเมียม
  • Firefox
  • ซาฟารี

(Impulse ขึ้นอยู่กับ API Access System System ซึ่งทำงานได้ดีในเบราว์เซอร์ที่ใช้โครเมียมเท่านั้น)

การรวมบรรณาธิการ:

  • ✅ vs รหัส
  • ⬜มาอีก

ติดตั้ง

มีสามวิธีในการลองแรงกระตุ้น

ตัวเลือกที่ 1: ลองเลย

คัดลอกและวางรหัสด้านล่างลงในคอนโซลของเบราว์เซอร์ 

 d = document ; s = d . createElement ( 'script' ) ; s . src = `https://cdn.jsdelivr.net/npm/@impulse.dev/runtime@latest/inject.js` ; d . body . appendChild ( s )

วิธีง่ายๆในการเล่นกับเครื่องมือโดยไม่ต้องติดตั้งอะไรเลย แต่มันจะหายไปเมื่อคุณรีเฟรชหน้า

ตัวเลือกที่ 2: NPM (แนะนำ)

การตั้งค่าหนึ่งครั้งและสำหรับทั้งหมดสำหรับทีมงานทั้งหมด 

npm i -D @impulse.dev/runtime@latest

วางลงในไฟล์ใด ๆ ที่ได้รับการนำเข้าเสมอ โดยปกติแล้วจะเป็นไฟล์ตอบสนอง "หลัก" เช่น _app.jsx ใน Next.js 

 if ( process . env . NODE_ENV === 'development' ) {
  import ( '@impulse.dev/runtime' ) . then ( ( impulse ) => impulse . run ( ) )
}

ตัวเลือก 3: แท็ก <script>

วางแท็กสคริปต์นี้ในตอนท้ายของ <body> 

 {
  process . env . NODE_ENV === 'development' && (
    < script src = "https://cdn.jsdelivr.net/npm/@impulse.dev/runtime@latest/inject.js" > </ script >
  )
}

อย่าส่งแรงกระตุ้นให้เกิดการผลิต

สำคัญ: ตรวจสอบให้แน่ใจว่าคุณไม่ได้จัดส่งแรงกระตุ้นในการสร้างการผลิตของคุณ! มันจะขยายขนาดชุดของคุณ!

Bundlers ส่วนใหญ่ตัดรหัสทั้งหมดภายใน if (process.env.NODE_ENV === 'development') { ... } แต่ขอแนะนำให้สร้างการผลิตและเปรียบเทียบขนาดของมัดกับสิ่งที่เคยเป็นมาก่อน

กำหนดค่า

เมื่อติดตั้งแล้ว Impulse ก็พร้อมสำหรับการทำงาน ด้านล่างนี้เป็นบางสิ่งที่คุณอาจต้องการตั้งค่าสำหรับ Impulse เพื่อให้ทำงานได้ดีที่สุดสำหรับคุณ

เบราว์เซอร์

หากคุณใช้ Brave เปิดใช้งาน API System Access:

  1. ไปที่ Brave: // Flags
  2. ค้นหา file system access api
  3. เปลี่ยนเป็น "เปิดใช้งาน"

Impulse ใช้งานได้เฉพาะเมื่อคุณเรียกใช้สภาพแวดล้อมการพัฒนาบนคอมพิวเตอร์เครื่องเดียวกับที่คุณใช้เบราว์เซอร์ Impulse ไม่ทำงานกับสภาพแวดล้อมระยะไกลเพราะไม่สามารถแก้ไขไฟล์บนคอมพิวเตอร์เครื่องอื่นได้

ด้วยเหตุผลด้านความปลอดภัย API การเข้าถึงระบบไฟล์ใช้งานได้เฉพาะกับ localhost เมื่อใช้ http: // หากคุณใช้ชื่อโฮสต์ที่แตกต่างกันแม้ว่าสภาพแวดล้อมจะอยู่ในท้องถิ่นคุณควร:

  1. ไปที่ Chrome: // Flags
  2. ค้นหา Insecure origins treated as secure
  3. เพิ่มที่มาของคุณ (เช่น http: // my_origin) ในรายการ

การกำหนดค่าที่สวยงาม

แรงกระตุ้นแก้ไขรหัสของคุณ โดยค่าเริ่มต้นมันพยายามอย่างเต็มที่ที่จะทำการเปลี่ยนแปลงเหล่านั้นน้อยที่สุดเท่าที่จะทำได้

อย่างไรก็ตามมันไม่ทราบวิธีการจัดรูปแบบรหัสของคุณ

หากคุณต้องการให้ใช้สวยกว่าการเปลี่ยนรหัสแต่ละครั้ง (แนะนำ) ให้ผ่านการกำหนดค่าของคุณไปที่ run() : 

if (process.env.NODE_ENV === 'development') {
-  import('@impulse.dev/runtime').then((impulse) => impulse.run())
+  import('@impulse.dev/runtime').then((impulse) => impulse.run({
+    prettierConfig: require('./path_to/.prettierrc.js')
+  }))
}

config tailwind

หากคุณขยายธีมมาตรฐานใน Tailwind ให้ส่ง tailwind.config.js ของคุณเพื่อ run() : 

if (process.env.NODE_ENV === 'development') {
-  import('@impulse.dev/runtime').then((impulse) => impulse.run())
+  import('@impulse.dev/runtime').then((impulse) => impulse.run({
+     tailwindConfig: require('./path_to/tailwind.config.js'),
+  }))
}

ใช้

  • ตัวเลือก/alt+คลิกเพื่อเลือกองค์ประกอบใด ๆ ในหน้า
  • ESC เพื่อลบการเลือกและออกจากแรงกระตุ้น
  • ปุ่มลูกศรหรือ H, J, K, L สำหรับการนำทางแป้นพิมพ์
  • ใช้ตัวแก้ไขคลาสทางด้านขวาเพื่อเพิ่มเปลี่ยนหรือลบคลาส Tailwind
  • พื้นที่หรือป้อนเพื่อเปิดแถบคำสั่ง
  • ใช้แถบคำสั่งหรือปุ่มลัด (ระบุทางด้านขวาสำหรับการกระทำแต่ละครั้ง) เพื่อดำเนินการ

แถบบัญชาการ

คุณสามารถทำอะไรได้:

  • ข้ามไปที่รหัสขององค์ประกอบที่เลือก
  • ข้ามไปยังตำแหน่งที่องค์ประกอบปฏิกิริยาขององค์ประกอบที่เลือกเรียกว่า
  • เพิ่มหรือลบคลาส (จนถึงตอนนี้จะใช้ได้เฉพาะในกรณีที่รายการคลาสในรหัสเป็น hardcoded โดยไม่มีเงื่อนไข)
  • ลบองค์ประกอบ
  • แทรก <div></div> ใหม่
  • เปลี่ยนแท็กขององค์ประกอบ (เช่น div -> p)
  • แทรกข้อความใหม่
  • ย้ายองค์ประกอบ (สลับกับพี่น้องก่อนหน้า/ถัดไป)
  • ยกเลิกการเปลี่ยนแปลงล่าสุด

รับความช่วยเหลือหรือแบ่งปันข้อเสนอแนะ

  • เซิร์ฟเวอร์ Discord
  • การอภิปรายเกี่ยวกับ GitHub

มีส่วนช่วย

ความต้องการ:

  • โหนด 16+
  • NPM 8.9.0+

โคลน repo: 

git clone [email protected]:impulse-oss/impulse.git && cd impulse

ติดตั้งการพึ่งพา: 

npm install

เรียกใช้เซิร์ฟเวอร์ dev: 

npm run dev

เปิด http: // localhost: 3005/ นี่คือสนามเด็กเล่นสำหรับการพัฒนาและทดสอบแอพ

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด