การใช้ Webpacker ในแอปพลิเคชัน Ruby on Rails ของคุณ — การดำน้ำลึก

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

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

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

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

หลังจากอ่านบทความนี้ คุณจะรู้ว่า Webpack และ Webpacker คืออะไร และเหตุใดเราจึงต้องการมันในแอปพลิเคชัน Rails ของเรา การเจาะลึกข้อมูลภายในของ Webpacker จะช่วยให้คุณเข้าใจว่าเครื่องมือเชื่อมต่อกับ Webpack อย่างไรและสื่อสารกับแอปพลิเคชัน Rails อย่างไร

ก่อนดำน้ำ

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

เว็บแพ็ค

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

บันเดิลคือไฟล์ที่มีการวางโมดูลหลายโมดูลไว้อย่างชาญฉลาด โดยคำนึงถึงกราฟการพึ่งพาที่สร้างขึ้นครั้งแรก ด้วยกระบวนการนี้ เราจึงมั่นใจได้ว่าโค้ดของเราจะทำงานตามที่คาดไว้ และก่อนที่เราจะเรียกใช้โค้ดของไลบรารีที่กำหนด โค้ดจะถูกโหลดแล้ว

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

เว็บแพ็คเกอร์

Webpacker เป็นเครื่องมือที่รวม Webpack เข้ากับแอปพลิเคชัน Rails ทำให้ง่ายต่อการกำหนดค่าและพัฒนาแอปพลิเคชันที่เหมือน JavaScript และปรับให้เหมาะสมสำหรับสภาพแวดล้อมการผลิต

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

ความลุ่มลึก

เมื่อคุณรู้แล้วว่าเหตุใด Webpack จึงถูกสร้างขึ้นและบทบาทของ Wepacker ในแอปพลิเคชัน Rails เราสามารถมุ่งเน้นไปที่ภายในของ Webpacker เพื่อดูว่ามันจัดระเบียบไฟล์อย่างไร เร่งกระบวนการพัฒนา และปรับไฟล์ให้เหมาะสมสำหรับสภาพแวดล้อมการใช้งานจริง

Webpacker พร้อมใช้งานทันทีใน Rails เวอร์ชันใหม่ล่าสุด ก่อนสร้างโปรเจ็กต์ใหม่ ตรวจสอบให้แน่ใจว่าเวอร์ชันโหนดมากกว่าหรือเท่ากับ 10.17.0 เป็น webpacker:install คำสั่งจะถูกเรียกใช้โดยอัตโนมัติด้วยคำสั่งใหม่ของ rails

โครงสร้างไฟล์ของ Webpacker

หลังจากรันคำสั่ง install ไฟล์ต่อไปนี้จะถูกสร้างขึ้น:

• config/webpacker.yml — ไฟล์การกำหนดค่าหลักที่มีการกำหนดค่าเริ่มต้นและการกำหนดค่าสำหรับสภาพแวดล้อมเฉพาะ
• config/webpacker/ — ไดเร็กทอรีที่สร้างไฟล์การกำหนดค่า JavaScript สำหรับสภาพแวดล้อมเฉพาะ
• bin/webpack — ไฟล์ปฏิบัติการที่เรียกใช้ webpack เพื่อสร้างบันเดิล
• bin/webpack-dev-server — ไฟล์ปฏิบัติการที่เริ่มต้นเซิร์ฟเวอร์การพัฒนา ซึ่งจะโหลด webpack ใหม่ทุกครั้งที่คุณทำการเปลี่ยนแปลงภายในไฟล์ JavaScript ที่รวมอยู่ในบันเดิล

กายวิภาคของไฟล์กำหนดค่า

ไฟล์คอนฟิกูเรชันหลักสำหรับ Webpacker จะอยู่ใต้ไดเร็กทอรี config และชื่อ webpacker.yml . ต่างจาก Webpacker การกำหนดค่าสำหรับ Webpack จะถูกจัดเก็บแยกต่างหากสำหรับแต่ละสภาพแวดล้อมภายใต้ config/webpack ไดเรกทอรี

เว็บแพ็คเกอร์

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

• source_path — แหล่งที่มาหลักของไฟล์จาวาสคริปต์ในแอปพลิเคชันของคุณ ตั้งค่าเป็น app/javascript โดยค่าเริ่มต้น และโดยปกติ ไม่จำเป็นต้องเปลี่ยนค่านี้
• source_entry_path — ชื่อของไดเร็กทอรีภายใต้ source_path ที่คุณเก็บไฟล์แพ็คไว้ หรือที่เรียกว่าจุดเข้าใช้งาน โดยค่าเริ่มต้น การตั้งค่านี้ถูกกำหนดเป็นไดเรกทอรีของแพ็ค
• public_root_path — เส้นทางไปยังไดเร็กทอรีในแอปพลิเคชันของคุณที่สามารถเข้าถึงได้จากเบราว์เซอร์ ในแอปพลิเคชัน Rails ทั่วไป จะเป็นไดเรกทอรีสาธารณะ
• public_output_path — เมื่อ Webpacker คอมไพล์ไฟล์ของคุณ Webpacker จะวางไฟล์ที่คอมไพล์ทั้งหมดไว้ในไดเร็กทอรีนี้ภายใต้ public_root_path . โดยค่าเริ่มต้น ไดเร็กทอรีจะตั้งชื่อเป็นแพ็ค แต่คุณสามารถเรียกมันว่าอะไรก็ได้ที่คุณต้องการ
• webpack_compile_output — หากตั้งค่าสถานะเป็น true ข้อความที่ส่งออกจะแสดงเมื่อรวบรวมไฟล์ มีประโยชน์เมื่อการคอมไพล์ล้มเหลว เนื่องจากคุณจะทราบและสามารถดำเนินการได้

เป็นมูลค่าการกล่าวขวัญว่าส่วนการพัฒนายังมีการกำหนดค่าสำหรับเซิร์ฟเวอร์ dev ที่ใช้ในการคอมไพล์ไฟล์ในสภาพแวดล้อมการพัฒนาโดยไม่ต้องรีสตาร์ทเซิร์ฟเวอร์

หากคุณต้องการเข้าถึงการกำหนดค่าจากคอนโซล rails หรือระดับโค้ด คุณสามารถเรียก Webpacker.manifest.config ซึ่งจะคืนค่าอินสแตนซ์คลาสการกำหนดค่า

เว็บแพ็ค

แต่ละสภาพแวดล้อมมีไฟล์การกำหนดค่า แต่ในทุกไฟล์ ไฟล์สภาพแวดล้อมหลักจะถูกนำเข้า:config/webpack/environment.js . ในไฟล์การกำหนดค่าสภาพแวดล้อม มีที่สำหรับโหลดปลั๊กอินแบบกำหนดเองที่จะแก้ไขการทำงานเริ่มต้นของ Webpack เรายังเพิ่มกฎที่กำหนดเองสำหรับการรวบรวมไฟล์ของเราได้อีกด้วย

กายวิภาคของไฟล์แพ็ค

แพ็กจะอยู่ใต้ app/javascript/packs ไดเรกทอรี ไฟล์แพ็คแต่ละไฟล์ได้รับการปฏิบัติโดย Webpacker เป็นจุดเริ่มต้นเมื่อกระบวนการคอมไพล์เริ่มต้นขึ้น

ไฟล์แพ็คเริ่มต้น

เมื่อคุณสร้างโปรเจ็กต์ Rails ใหม่ ไฟล์แพ็คเริ่มต้นชื่อ application.js จะถูกสร้างขึ้นโดยมีเนื้อหาดังต่อไปนี้:

import Rails from "@rails/ujs";
import Turbolinks from "turbolinks";
import * as ActiveStorage from "@rails/activestorage";
import "channels";
 
Rails.start();
Turbolinks.start();
ActiveStorage.start();

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

แนวทางปฏิบัติที่ดีสำหรับไฟล์แพ็ค

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

รวมไฟล์แพ็คในแอปพลิเคชัน

ไฟล์แพ็คจะไม่รวมอยู่ในแหล่งที่มาของเว็บไซต์โดยอัตโนมัติ เช่นเดียวกับกรณีไปป์ไลน์สินทรัพย์ เราต้องใช้แท็กพิเศษในมุมมองของเรา:

<%= javascript_packs_with_chunks_tag 'application' %>

วิธีการนี้ทำงานอย่างไร? ภายใต้ประทุน จะเรียกการกำหนดค่า Webpacker ที่เก็บข้อมูลที่คุณใส่ใน config/webpacker.yml ไฟล์. ค้นหาไฟล์ application.js ภายในไดเรกทอรีจุดเข้าใช้งาน ซึ่งในกรณีของเราคือ app/javascript/packs . คุณสามารถยืนยันได้โดยโทรไปที่รหัสต่อไปนี้:

Webpacker.manifest.config.source_entry_path

เมื่อพบรายการ Webpacker จะเรียก javascript_include_tag เมธอด ตัวช่วยจาก ActionView ห้องสมุดพร้อมใช้งานโดยค่าเริ่มต้นใน Rails เมธอดนี้ยอมรับแหล่งที่มาอย่างน้อยหนึ่งแหล่งและส่งคืนแท็กสคริปต์ที่คุณนำไปใช้กับมุมมองของคุณได้โดยตรง

เซิร์ฟเวอร์การพัฒนา

จุดเริ่มต้นเซิร์ฟเวอร์การพัฒนา Webpacker คือไฟล์ปฏิบัติการที่วางอยู่ภายใน bin โฟลเดอร์และชื่อ webpack-dev-server . กระบวนการรันเซิร์ฟเวอร์ประกอบด้วยห้าขั้นตอน:

• การตั้งค่าสภาพแวดล้อม — ตั้งชื่อสภาพแวดล้อมสำหรับ Node and Rails เมื่อไม่ได้ระบุสภาพแวดล้อม โปรแกรมจะถือว่าเซิร์ฟเวอร์ทำงานในสภาพแวดล้อมการพัฒนา
• กำลังโหลดการกำหนดค่า — ไฟล์ config/webpacker.yml เต็มไปด้วยการตั้งค่าสำหรับสภาพแวดล้อมที่ตั้งไว้ในขั้นตอนก่อนหน้า
• กำลังตรวจสอบตัวเลือกคำสั่ง — โปรแกรมจะตรวจสอบว่าเราส่งตัวเลือกที่เหมาะสมไปยังคำสั่งเซิร์ฟเวอร์หรือไม่ ตัวอย่างเช่น มันจะส่งข้อผิดพลาดเมื่อ --https มีให้ แต่เราไม่ได้ระบุไว้ใน config/webpacker.yml ไฟล์.
• การตรวจสอบความพร้อมใช้งานของพอร์ต — โปรแกรมจะตรวจสอบว่าพอร์ตที่ระบุพร้อมใช้งานหรือไม่ หากโปรแกรมอื่นใช้งานอยู่แล้ว จะเกิดข้อผิดพลาดขึ้นเพื่อแจ้งให้คุณทราบว่าคุณต้องอัปเดตการกำหนดค่าเซิร์ฟเวอร์ webpack ภายใน config/webpacker.yml ไฟล์.
• กำลังดำเนินการคำสั่งให้บริการ webpack — เมื่อมีไดเร็กทอรีโหนดโมดูลอยู่ โปรแกรมรันคำสั่งภายในไดเร็กทอรี มิฉะนั้น รันมันด้วยไหมพรม โปรแกรมส่งผ่านตัวเลือกการกำหนดค่าไปยังคำสั่งที่ชี้ไปยังไฟล์ใดไฟล์หนึ่งที่อยู่ใน config/webpack/ ไดเรกทอรี

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

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

การรวบรวมไฟล์สำหรับสภาพแวดล้อมการผลิต

สมมติว่าคุณต้องการปรับใช้แอปพลิเคชันที่ใช้ webpacker ในกรณีนั้น คุณสามารถเรียกใช้ assets:precompile งานเป็น Webpacker เชื่อมโยงงานโดยอัตโนมัติ webpacker:compile ไปเลย

webpacker:compile . เป็นอย่างไร งานภายใต้ประทุน? ลองขุดลงไปดู มันทำสิ่งต่อไปนี้:

• มันห่อการโทรหลักออกเป็นสองช่วงตึกเพื่อให้แน่ใจว่า NODE มีการตั้งค่าสภาพแวดล้อมและบันทึก Webpacker จะถูกส่งออกไปยังมาตรฐาน
• เรียก Webpack แล้วแยกวิเคราะห์บันทึกเพื่อพิจารณาว่าการดำเนินการสำเร็จหรือไม่

ตอนนี้คุณสามารถไปที่ public/packs/js ไดเร็กทอรีเพื่อดูไฟล์ที่คอมไพล์ ควรปรับใช้กับเซิร์ฟเวอร์

สรุป

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

เพื่อสรุปบทความทั้งหมด เรามาทบทวนองค์ประกอบหลักของ Webpacker อีกครั้ง:

• การกำหนดค่า — วางไว้ใน config/webpacker.yml และอนุญาตให้คุณชี้ Webpacker ไปยังไดเร็กทอรีที่คุณเก็บไฟล์จาวาสคริปต์และแพ็คของคุณไว้
• Pack — เป็นจุดเริ่มต้นเดียวที่ Webpacker เริ่มรวบรวม แต่ละไลบรารีที่นำเข้าและเริ่มต้นในไฟล์นั้นจะถูกคอมไพล์โดยอัตโนมัติ
• เซิร์ฟเวอร์สำหรับการพัฒนา — สคริปต์ง่ายๆ ที่ให้คุณคอมไพล์ไฟล์ได้ทันที คุณจึงไม่ต้องรีสตาร์ทเซิร์ฟเวอร์ทุกครั้งที่แก้ไขไฟล์ JavaScript
• งานคอมไพล์ — งาน rake ธรรมดาที่เรียกใช้ Webpack และคอมไพล์ไฟล์ภายใต้ไดเร็กทอรีสาธารณะ เพื่อให้คุณสามารถปรับใช้กับเซิร์ฟเวอร์ที่ใช้งานจริงและทำให้พร้อมใช้งานสำหรับผู้ใช้ปลายทาง
• ตัวช่วยดู — ตัวช่วยที่ให้คุณรวมไฟล์ที่คอมไพล์แล้วในมุมมอง

สำหรับนักพัฒนาจำนวนมากที่ไม่มีประสบการณ์มากนัก Wepacker ดูเหมือนจะมีมนต์ขลังเล็กน้อย แต่จริงๆ แล้วมันเป็นไลบรารีที่เรียบง่ายที่ช่วยให้เราใช้ Webpack ในลักษณะ Ruby

ป.ล. หากคุณต้องการอ่านโพสต์ Ruby Magic ทันทีที่ออกจากสื่อ สมัครรับจดหมายข่าว Ruby Magic ของเราและไม่พลาดแม้แต่โพสต์เดียว!