ในระบบ 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 ของคุณได้แล้วครับ
อ่านเพิ่มเติม