เลือกเครื่องมือสร้างที่ดีที่สุดสำหรับโปรเจ็กต์ด้วย Tooling.report

เลือกและกำหนดค่าเครื่องมือสร้างตามแนวทางปฏิบัติแนะนำ

วันนี้ web.dev กำลังจะเปิดตัวโครงการริเริ่มใหม่ที่ชื่อว่า tooling.report ซึ่งเป็นเว็บไซต์ที่ให้นักพัฒนาเว็บเห็นภาพรวมของฟีเจอร์ที่รองรับในเครื่องมือบิลด์ยอดนิยมต่างๆ เราสร้างเว็บไซต์นี้เพื่อช่วยให้คุณเลือกเครื่องมือสร้างที่เหมาะสมสำหรับโครงการถัดไป ตัดสินใจว่าการย้ายข้อมูลจากเครื่องมือหนึ่งไปยังอีกเครื่องมือหนึ่งคุ้มค่าหรือไม่ หรือเรียนรู้วิธีรวมแนวทางปฏิบัติที่ดีที่สุดไว้ในการกำหนดค่าเครื่องมือและฐานของโค้ด เครื่องมือจะมีด้านที่มุ่งเน้นและรองรับความต้องการได้ต่างกัน ซึ่งหมายความว่าการเลือกและกำหนดค่าเครื่องมือต้องอาศัยข้อดีและข้อเสียต่างๆ สำหรับ Tooling.report เรามีเป้าหมายที่จะอธิบายข้อดีและข้อเสียเหล่านี้ รวมทั้งบันทึกวิธีปฏิบัติตามแนวทางปฏิบัติแนะนำด้วยเครื่องมือสร้างที่ระบุ

ฟังดูน่าตื่นเต้นไหม ไปที่ Tooling.report เพื่อเริ่มสำรวจ หรืออ่านต่อเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับเหตุผลและวิธีที่เราพัฒนาเว็บไซต์นี้

เครื่องมือสร้างมักเข้ามาขัดขวางเรา

ที่ GoogleChromeLabs เราได้สร้างเว็บแอป เช่น Squoosh และ Proxx รวมถึงเว็บไซต์ต่างๆ ที่คล้ายกันสำหรับ Chrome Dev Summit 2019 ด้วย เช่นเดียวกับโครงการพัฒนาเว็บทั่วไป โดยทั่วไปเราจะเริ่มด้วยการพูดคุยเรื่องโครงสร้างพื้นฐานของโปรเจ็กต์ เช่น สภาพแวดล้อมโฮสติ้ง เฟรมเวิร์ก และการตั้งค่าเครื่องมือสร้างของเรา โครงสร้างพื้นฐานดังกล่าวจะอัปเดตตามความคืบหน้าไปเรื่อยๆ เช่น จะมีการเพิ่มปลั๊กอินใหม่ๆ เพื่อรองรับเฟรมเวิร์กหรือเทคนิคที่เราใช้ หรือวิธีที่เราเขียนโค้ดมีการเปลี่ยนแปลง เพื่อให้เครื่องมือการสร้างเข้าใจในสิ่งที่เรากำลังพยายามทำอยู่ได้ดีขึ้น ตลอดกระบวนการนี้ เรามักพบว่าเครื่องมือที่เราเลือกมาขัดขวางการใช้งานของเรา

ทีมของเรามุ่งเน้นการนำเสนอประสบการณ์เว็บที่ดีที่สุดแก่ผู้ใช้ ซึ่งมักส่งผลให้เกิดการปรับแต่งวิธีรวบรวมและนำส่งเนื้อหาฟรอนท์เอนด์ของเรา เช่น หากสคริปต์ของเทรดหลักและสคริปต์ผู้ปฏิบัติงานเว็บมีทรัพยากร Dependency ร่วมกัน เราต้องการดาวน์โหลดทรัพยากร Dependency เพียงครั้งเดียวแทนที่จะรวมกลุ่ม 2 ครั้งสําหรับแต่ละสคริปต์ เครื่องมือบางอย่างรองรับการใช้งานตั้งแต่เริ่มต้น เครื่องมือบางอย่างต้องใช้ความพยายามในการปรับแต่งอย่างมากเพื่อเปลี่ยนลักษณะการทำงานเริ่มต้น ในขณะที่เครื่องมืออื่นๆ ก็คงเป็นไปไม่ได้เลย

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

แนวทางของเรา

เราจะประเมินและเปรียบเทียบเครื่องมือสร้างต่างๆ ในที่เดียวได้อย่างไร เราทดสอบด้วยการเขียน กรอบการทดสอบ

ทีมของเราได้พูดคุยและออกแบบเกณฑ์การทดสอบที่เราเชื่อว่าเป็นแนวทางปฏิบัติแนะนำสำหรับการพัฒนาเว็บ เรามุ่งเน้นวิธีการมอบประสบการณ์ของผู้ใช้ที่รวดเร็ว ตอบสนอง และราบรื่น โดยเจตนายกเว้นการทดสอบที่เกี่ยวข้องกับประสบการณ์ของนักพัฒนาแอปเพื่อหลีกเลี่ยงการวัดผลลัพธ์ 2 อย่างที่เปรียบเทียบกันได้

เมื่อสร้างรายการทดสอบแล้ว เราจะเขียนสคริปต์บิวด์สำหรับแต่ละเครื่องมือเพื่อตรวจสอบว่าเครื่องมือเป็นไปตามเกณฑ์ความสำเร็จของการทดสอบหรือไม่ เริ่มแรก เราตัดสินใจตรวจสอบ Webpack v4, Rollup v2 และ Parcel v2 นอกจากนี้ เรายังได้ทดสอบ Browserify + Gulp เนื่องจากมีโปรเจ็กต์จำนวนมากที่ยังใช้การตั้งค่านี้อยู่ เพื่อให้ผ่านการทดสอบ ใช้ได้เฉพาะฟีเจอร์ของเครื่องมือหรือปลั๊กอินสำหรับเครื่องมือที่บันทึกไว้แบบสาธารณะ หลังจากเขียนชุดการทดสอบเริ่มต้นแล้ว เราทำงานร่วมกับผู้เขียนเครื่องมือสร้างเพื่อให้แน่ใจว่าเราใช้เครื่องมือของเขาอย่างถูกต้องและนำเสนอเครื่องมือเหล่านั้นอย่างเป็นธรรม

ภาพหน้าจอของ Tooling.report

เราใช้เพียง ${tool_name} ได้ไหม ฉันยังสนใจไหม

ในหลายๆ ทีม มีผู้รับผิดชอบด้านการดูแลรักษาโครงสร้างพื้นฐานของบิลด์ และสมาชิกคนอื่นๆ ในทีมอาจจะไม่มีทางตัดสินใจเรื่องการสร้างเครื่องมือได้เลย เราหวังว่าเว็บไซต์นี้ ยังคงเป็นประโยชน์สำหรับคุณเช่นกัน เนื่องจากเป็นวิธีการกำหนดความคาดหวังสำหรับเครื่องมือที่คุณต้องใช้ เราได้รวมคำอธิบายว่าเหตุใดการทดสอบจึงสำคัญพร้อมกับแหล่งข้อมูลเพิ่มเติมสำหรับการทดสอบแต่ละครั้ง และหากต้องการใช้แนวทางปฏิบัติแนะนำกับเครื่องมือที่ต้องการ การตั้งค่าการทดสอบในที่เก็บของเราจะมีไฟล์การกำหนดค่าที่จำเป็นต่อการดำเนินการ

ฉันจะร่วมให้ข้อมูลในเว็บไซต์ได้ไหม

หากคุณคิดว่าควรมีการทดสอบบางฟีเจอร์ซึ่งยังไม่มีให้บริการ โปรดเสนอในปัญหาเกี่ยวกับ GitHub เพื่อเริ่มหารือ เรามุ่งมั่นที่จะรวบรวมกรณีการใช้งานในชีวิตจริงและยินดีรับการทดสอบเพิ่มเติมที่ช่วยให้ประเมินผลลัพธ์เหล่านี้ได้ดีขึ้น

หากคุณต้องการเขียนการทดสอบสำหรับเครื่องมือที่เราไม่ได้รวมไว้ในชุดเริ่มต้น เราก็ยินดีรับฟังเช่นกัน โปรดดูข้อมูลเพิ่มเติมที่ CONTRIBUTING.md