ในระบบ Vite และ ES Modules ตัวแปรที่คุณ import เข้ามาจะถูกจำกัดขอบเขต อยู่แค่ภายในไฟล์นั้น ๆ ทำให้คำสั่งอย่าง $ หรือ jQuery ไม่เป็น Global โดยอัตโนมัติ ถ้าหากคุณต้องการประกาศให้มันเป็น Global Scope
วิธีที่ 1: ประกาศผ่าน window ในไฟล์ main.ts
วิธีนี้คือการใส่ตัวแปรเข้าไปใน Object window โดยตรงหลังจากที่ import เข้ามาแล้วครับ
import $ from 'jquery';
// ประกาศให้เป็น Global Scope
(window as any).$ = $;
(window as any).jQuery = $;
// ทดสอบเรียกใช้
$(() => {
console.log("jQuery is now global!");
});
วิธีที่ 2: ตั้งค่าผ่าน vite.config.ts
ถ้าคุณไม่อยากมานั่งเขียน window.$ = $ ในทุกโปรเจกต์ หรือต้องการให้ Vite ช่วยจัดการเรื่องการฉีดตัวแปร ให้โดยอัตโนมัติ ให้ใช้การตั้งค่าในไฟล์ Config ครับ
// vite.config.ts
import { defineConfig } from 'vite';
export default defineConfig({
define: {
// วิธีนี้จะทำให้ $ และ jQuery ใช้งานได้ทั่วทั้งโปรเจกต์
'window.$': 'jquery',
'window.jQuery': 'jquery',
}
});
ข้อควรระวังเมื่อใช้ TypeScript
เนื่องจาก TypeScript จะคอยตรวจสอบว่า window มี Property ชื่อ $ หรือไม่ หากคุณไปเรียกใช้ในไฟล์อื่นแล้วเจอ Error ว่า Property ‘$’ does not exist on type ‘Window’ คุณต้องสร้างไฟล์เพื่อขยาย Type ดังนี้ครับ
สร้างไฟล์: src/env.d.ts
interface Window {
$: any;
jQuery: any;
}
💡 ทำไม jQuery 4.0 ถึงไม่แนะนำให้ทำ Global?
ใน jQuery 4.0 ทีมพัฒนาพยายามผลักดันให้ใช้ ES Modules อย่างเต็มตัว การไม่ใช้ Global Scope มีข้อดีคือ
- No Conflicts: ป้องกันปัญหาชื่อตัวแปรซ้ำกับ Library อื่น
- Better Minification: เครื่องมืออย่าง Vite/Rollup สามารถบีบอัดโค้ดได้ดีกว่า
- Security: ช่วยลดช่องโหว่จากการที่ Script แปลกปลอมมาเรียกใช้ jQuery ของเราผ่าน Global scope
ตอนนี้คุณสามารถเรียกใช้ $ ในหน้า Browser Console เพื่อทดสอบตาราง DataTables ของคุณได้แล้วครับ
อ่านเพิ่มเติม