วิธีการใช้งาน laravel mix ร่วมกับ npm package ของ nodejs เช่น Jquery-validation

ถ้าเราใช้งาน Laravel เป็นประจำอยู่แล้ว จะเห็นได้ว่าตัว laravel นั้นสร้าง package ที่ทำงานร่วมกับ npm (node package managment) อยู่ตัวหนึ่งคือ  laravel-mix แต่แปลกที่เราไม่ค่อยได้ใช้ความสามารถส่วนนี้ของมันมากนัก อาจจะเป็นเพราะ Document ที่อยู่บน Official ของ laravel เองเขียนเรื่อง laravel-mix น้อยมาก ผมก็งงเหมือนกันว่าหากจะต้องการเอา package จาก https://www.npmjs.com มาติดตั้งต้องทำไง เอาละเราก็พอจะรู้ว่าการติดตั้ง package นั้นมันไม่ยาก เพียงแค่ใช้คำสั่ง npm -i {package name} ก็สามารถติดตั้งได้แล้ว แต่ปัญหาคือติดตั้งแล้วจะใช้ร่วมกันกับ laravel ยังไง ? ต่างหากนั้นคือปัญหา

สมัยก่อนสมมุติถ้าหากต้องการใช้งาน Jquery ก็แค่ไปดาวโหลด หรือใช้ link ที่มันเป็น cnd ของมันเลยก็จบ นั่นคือวิธีบ้าน ๆ ที่ทำกัน หารู้ไม่ Javascript 3 ตัวที่ใช้กันเป็นปรกติมัน Bundle มากับ laravel อยู่แล้ว ! พี่น้อง เช่น Jquery , Bootstrap , PopperJs นี่ไม่นับรวม font ของ google nunito มันมาให้แล้วแต่ทำไมถึงไม่ใช้กัน เขียนไปก็ขำตัวเองไปจริง ๆ อาจจะเป็นเพราะความไม่รู้นี่แหละว่ามันใช้ยังไง และไม่ได้ศึกษาต่อด้วย แต่ลึก ๆ ก็แอบอยากรู้เหมือนกันนะว่ามันทำงานยังไง เลยลองมาหาคำตอบในช่วงเวลาที่ผ่านมา จึงได้พบว่าอ๋อ มันใช้งานอย่างนี้นี่เอง

ก่อนที่จะไปใช้ laravel-mix ต้องมีความเข้าใจพื้นฐานเกี่ยวกับ webpack เสียก่อนอย่างหลีกเลี่ยงไม่ได้ สำหรับตัว webpack นั้นทำงานอยู่ 3 หน้าที่ด้วยกันคือ combine , convert และ compress  combine คือการมัดรวม package เข้าด้วยกัน convert คือการแปลง code style ให้เป็น javascript ที่รันได้เกือบทุก browser เช่น convert จาก arrow function เป็น function ธรรมดาหรือ convert พวก scss เป็นต้น และ compress คือการบีบไฟล์ใน mini เล็กลงนั้นเอง ความสามารถอื่น ๆ มันก็มีนะเช่นคัดลอก เป็นต้น ซึ่ง laravel-mix เองก็มีคุณสมบัติดังกล่าว ลองไป custom เพิ่มเติมได้ที่ไฟล์​ webpack.mix.js ซึ่งอยู่ที่ root path ของโปรเจ็ค laravel


สำหรับบทความนี้ผมจะทดลองติดตั้ง package jquery-validation ซึ่ง developer ส่วนใหญ่ใช้งานกันอยู่บ่อย ๆ คิดว่าน่าจะเป็นตัวอย่างที่สามารถนำไปใช้งานจริงได้ เพื่อใช้งานกับ laravel-mix โดยมีขั้นตอนดังนี้ ปล. ส่ิงที่คุณจะต้องมีก่อนคือ npm + laravel project ก่อน

1. ติดตั้ง packge jquery validation โดยไปที่ terminal ของที่อยู่ project แล้วทำการรันคำสั่ง
• npm i jquery-validation
2. เพิ่ม package เพื่อนำไปใช้งานใน project โดยแก้ไขไฟล์ 
• resource/js/app.js โดยเพิ่มคำโค๊ต
• window.validate = require('jquery-validation')
3. Run laravel-mix เพื่อ build code ด้วยคำสั่ง
• npm run dev 
4. เพิ่ม {{mix('app.js') }}เข้าไปในไฟล์ blade ที่ต้องการใช้งาน

เพียง 4 ขั้นตอนเราก็สามารถใช้งาน package ที่มาจาก https://www.npmjs.com แต่ laravel-mix ยังสามารถ import js ได้หลายรูปแบบ แต่ปัญหาจริง ๆ คือต้องเลือกวิธีที่เหมาะไม่งั้นมันจะไม่สามารถทำงานได้ คำถามคือเราจะรู้ได้ไงว่ามันเหมาะสม สำหรับผมคือผมก็ทดลองทำทั้งสองแบบคือ แบบ require และแบบ import แบบ import จะแตกต่างไปนิดหน่อยโดยมี code ตัวอย่าง 2 บรรทัดดังนี้ (ที่ไฟล์เดิม app.js)

1. window.validate = require('jquery-validation')
2. $.fn.validate = validate

สิ่งที่ต้องรู้เพิ่มเติมคือหากเรา build npm run dev ผ่าน terminal หากสำเร็จจะแจ้งเตือนว่า build success เสมอ และจะได้ไฟล์ app.js พร้อมกับไฟล์​ mix-minifest.json เพื่อเป็นตัวทำงานและตัว mapping และสำหรับ css นั้นสามารถ import ได้ที่ไฟล์​ resource/scss/app.scss โดยมี code ดังนี้

1. @import "~font-awesome";

สำหรับบทความนี้ก็เป็น Trick เล็ก ๆ น้อย ๆ ที่จะช่วยให้เราลดภาระในการโหลดของหน้าเว็บ ที่ทำให้เกิด Blocking loading พวกไฟล์​ js ทั้งหลาย และยังช่วยเพิ่มประสิทธิภาพของเว็บให้ดียิ่งขึ้น และข้อดีอีกอย่างคือถ้าเราใช้ laravel-mix วิธีการเขียนโค๊ตการวางไฟล์ของเราจะเปลี่ยนไป แต่ก่อนคือ ทั้ง js + css เราจะไปเขียนลงที่ blade ไฟล์ แต่ถ้าใช้ laravel-mix จำเป็นต้องย้ายไฟล์ js + css ออกมาไว้ที่ resource ทำให้การจัดการง่ายขึ้น  มันอาจจะดูยุ่งยากในช่วงแรกแต่ก็อยากให้ลองทำดู

Share on Google Plus

About maxcom

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.