JavaScript มีอยู่ทุกที่เมื่อพูดถึงการพัฒนาซอฟต์แวร์ สามารถใช้สำหรับสร้างแอป เว็บเพจ บนเซิร์ฟเวอร์ หรือในโรบ็อตตัวน้อย 🤖! เราจะแน่ใจได้อย่างไรว่า JavaScript ของคุณสามารถทำงานได้ทุกที่ที่คุณต้องการตามที่เราต้องการ

นั่นคือสิ่งที่ "ES Check" ทำ! เป็นยูทิลิตี้ที่เขียนขึ้นเพื่อให้แน่ใจว่าเวอร์ชันของ JavaScript ที่จะนำไปใช้จริงตรงกับเวอร์ชัน JavaScript ที่คาดหวังสำหรับการผลิต

ES Check ใช้เวลา 2 ขั้นตอนในการตั้งค่า!

การตั้งค่า ES Check สามารถทำได้โดยการติดตั้งและเพิ่มสคริปต์ 1 บรรทัด

  1. เพิ่ม ตรวจสอบ ES
npm install es-check --save-dev

2. จากนั้นเพิ่มสคริปต์ตามตัวอย่างด้านล่าง

"test:es-check": "es-check es5 'dist/*.js'"

จากตัวอย่างข้างต้น คุณสามารถทดสอบ JavaScript ให้ตรงกับเวอร์ชัน JavaScript ที่ระบุได้โดยการรันnpm run test:es-check ในบรรทัดคำสั่ง แค่นั้นแหละ! 🎉

เหตุใดการรู้ว่า JavaScript ตรงกับเวอร์ชันใดเวอร์ชันหนึ่งจึงมีความสำคัญ

หาก JavaScript ที่คอมไพล์แล้วไม่ตรงกับเวอร์ชัน JavaScript ที่รองรับของสภาพแวดล้อมที่มีอยู่ ก็จะใช้งานไม่ได้ นี้ไม่ดี! การให้หน้าเว็บ แอป บริการ หรือโรบ็อตด้วย JavaScript เวอร์ชันที่ไม่รองรับอาจทำให้ทำงานบางส่วนหรือล้มเหลวได้ 🙀

ปัญหาเวอร์ชัน JavaScript ไม่ตรงกันเกิดขึ้นได้อย่างไร

“คุณควรตรวจสอบโค้ดที่คอมไพล์แล้วก่อนที่จะเริ่มใช้งานจริง!” คุณพูดอย่างนั้นเหรอ? ฉันทำ! ฉันทำ! ฉันสาบาน!

ปัญหาความไม่ตรงกันของเวอร์ชัน JavaScript อาจเกิดขึ้นโดยไม่คาดคิดกับโครงสร้างพื้นฐานการนำออกใช้โค้ดสมัยใหม่ ในสองสามย่อหน้าด้านล่างนี้ ฉันจะอธิบายให้คุณฟังว่าการแสดงนี้เกิดขึ้นได้อย่างไร จำไว้ว่าฉันเป็นคนน่าทึ่ง! 🙋🏽‍

Pre-s**t แสดงการรับรู้ที่จำเป็น

นี่เป็นตัวอย่างโค้ดสั้นๆ ของ package.json ปลอมที่มี 2 *devDependencies[1],foo และ bar

"devDependencies": {
"foo": "^1.2.4",
"bar": "^6.0.1",
}

สังเกต ^? นั่นคือ ^ บอกว่า "npm" หากมี foo หรือ bar เวอร์ชันที่ใหม่กว่าเล็กน้อย ให้ติดตั้งเวอร์ชันนั้น ดังนั้นแม้ว่า foo จะแนะนำว่ากำลังใช้ 1.2.4 แต่จริงๆ แล้วอาจกำลังใช้ 1.2.6 อยู่

นี่คือวิธีที่การแสดงอึเกิดขึ้น

  • สมมติว่ามีการอัปเดตบางอย่างใน foo foo มีการอัปเดต devDependencies บางส่วนของตนเองและแก้ไขข้อบกพร่องแล้ว จากนั้น foo เวอร์ชัน 1.2.7 ก็จะถูกปล่อยออกมา
  • ฉันกำลังทดสอบโค้ดบางส่วนของฉันอยู่ ฉันใช้foo 1.2.6 และใช้งานได้สำหรับฉันในสภาพแวดล้อมการทดสอบของฉัน
  • ทุกอย่างดูดีดังนั้นฉันจึงผลักดันโค้ดของฉันไปสู่การใช้งานจริง
  • ในกระบวนการสร้างโค้ดสำหรับใช้งานจริง งานสร้างใหม่ของฉันได้รับ foo 1.2.7 ซึ่งเพิ่งเปิดตัวเพราะเหตุนั้น ^
  • เนื่องจากการอัปเดต devDependency ของ foo ซึ่งเพิ่มเข้ามาด้วยการแก้ไขข้อบกพร่อง โครงสร้างจึงมีการเปลี่ยนแปลงโดยไม่คาดคิด
  • การเปลี่ยนแปลงบิลด์ *แพทช์[2] เวอร์ชัน 1.2.7 ของ foo ทำให้ชุด JavaScript ของบิลด์ที่ใช้งานจริงของฉันคอมไพล์ด้วย foo ที่มีเวอร์ชัน JavaScript ที่ฉันไม่คาดคิด
  • สภาพแวดล้อมที่ฉันเพิ่งส่งโค้ด JavaScript ไปไม่รองรับเวอร์ชันของ JavaScript ใน foo ที่ฉันเพิ่งส่งไปและทำให้ตัวเองพังทันที
  • สมาชิกในทีมหรือแย่กว่านั้น ลูกค้าบอกฉันว่าโค้ดของฉันที่นำไปใช้จริงนั้นห่วยมาก ฉันร้องไห้และเข้าใจจุดบกพร่องแล้วพยายามส่งเงินให้ foo แต่ไม่มีใครสนใจเพราะฉันอยู่ตรงนั้น พร้อมรับคำตำหนิทั้งหมด
  • ฉันปักหมุด foo ถึง 1.2.4
  • ฉันผลักดันไปสู่การผลิต ทุกอย่างได้รับการแก้ไขแล้ว ยกเว้นฉัน 😿

อภิธานศัพท์

  • devDependencies: โค้ด JavaScript ตัวช่วยที่คนอื่นเขียนว่าฉันใช้เพื่อให้งานเสร็จเร็วขึ้น 💨
  • แพทช์: การเปลี่ยนแปลงเวอร์ชันที่คาดว่าจะแก้ไขปัญหาได้ แต่ไม่ทำให้ฟังก์ชันการทำงานที่มีอยู่ของแพ็คเกจเสียหาย

ห่อมันขึ้นมา

หลังจากที่ฉันอธิบายได้มากพอแล้วว่าความล้มเหลวแต่ละอย่างเกิดขึ้นได้อย่างไร ฉันจึงตัดสินใจคิดปัญหาใหม่ ฉันสร้าง ES Check เพื่อแก้ไขปัญหานั้น ES Check ใช้ตัวแยกวิเคราะห์ JavaScript Acorns ที่ตรวจสอบเวอร์ชัน JavaScript

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

ฉันได้รับความช่วยเหลือมากมายจากทีมวิศวกรของ Dollar Shave Club ที่เขียน ES-Check บทความนี้ และในชีวิตจริง—มันเป็นเรื่องยาก ทีมงานที่ Dollar Shave Club นั้นยอดเยี่ยมมาก เราเชื่อในผลิตภัณฑ์ที่เรากำลังสร้าง หากคุณต้องการเข้าร่วมคลับ ไป ที่นี่ หากคุณต้องการเขียนโค้ดกับเรา ไป ที่นี่ หากคุณต้องการร่วมงานกับเรา กรุณาไป ที่นี่ ติดตามเราได้ที่ ทวิตเตอร์

บทความและปลั๊กอินที่เกี่ยวข้อง

บางที ES Check อาจไม่ใช่ถ้วยชาของคุณเพราะคุณชอบกาแฟ ไม่เป็นไร. ต่อไปนี้คือบทความและโครงการบางส่วนที่สร้างแรงบันดาลใจให้กับฉัน รวมถึงเครื่องมืออื่นๆ ที่คล้ายกัน ✌🏽