javascript - ES6: "import $from 'jquery'" หมายถึงอะไรจริงๆ?
ตอนแรกฉันคิดว่ามันหมายถึงเพียงแค่ โหลดโมดูล jQuery และกำหนดค่าเริ่มต้นในตัวแปรที่เรียกว่า $
แต่แล้ว โดยการใช้ Atom กับ atom-typescript ผมได้พบข้อผิดพลาดบอกว่า "ไม่พบโมดูล 'jquery'" แม้ว่ารหัสทั้งหมดจะทำงานในเบราว์เซอร์ แต่ดูเหมือนว่า atom-typescript จะไม่สามารถแก้ไขอะไรที่ดูเหมือน import x จาก y ได้
ตอนนี้ เมื่อดูที่เอกสาร ES6 ผมพบว่าคุณสามารถนำเข้าคลาส/ฟังก์ชันจากโมดูล ความหมายจะแตกต่างกันอย่างสิ้นเชิง และมันสมเหตุสมผล เช่น ตัวอย่างนี้:
import { Component } from 'angular2/core';
แต่แล้วนั่นหมายความว่าอะไรในกรณีของ jQuery?
ฉันอาจจะกำลังผสมปัญหาต่าง ๆ เข้าด้วยกันในเรื่องเดียว แต่คำอธิบายใด ๆ ก็จะช่วยเคลียร์ความสับสนนี้ ดังนั้นขอบคุณมากล่วงหน้าค่ะ :)
คำตอบ #1
คำสั่ง import $ from jquery นั้นถือว่าเป็นการฉีดพึ่งพาอย่างหนึ่ง เช่นเดียวกับการที่เราจะเขียน import React from 'react' เพื่อให้สามารถเข้าถึงไลบรารี React ภายในไฟล์นั้น ๆ ได้ เราก็สามารถเขียน import $ from jquery ได้เช่นกัน (ในกรณีที่ทำให้สับสน เครื่องหมายดอลลาร์ถูกใช้เนื่องจาก jQuery และเมธอดของมันถูกเข้าถึงโดยใช้ตัวดำเนินการดอลลาร์ หรือที่เรียกว่า jQuery)
สำหรับข้อผิดพลาดที่เกิดขึ้น อาจเป็นได้หลายอย่าง:
หากคุณติดตั้ง jQuery แยกต่างหากเป็น dependency ในไฟล์ package.json ของคุณ และรวมถึงการใช้แท็ก
<script>จาก jQuery CDN ด้วย ข้อผิดพลาดนี้จะเกิดขึ้น หากคุณใช้ jQuery ผ่าน NPM แล้วไวยากรณ์import $ from jqueryถือว่าถูกต้อง/จำเป็น หากคุณตั้งใจจะใช้ jQuery ผ่าน CDN (ซึ่งผมแนะนำ) การใช้คำสั่งimportไม่จำเป็น (เนื่องจากคุณได้รวมแท็กสคริปต์นั้นใน index.html คุณสามารถเข้าถึง jQuery และไลบรารีของมันได้ทั่วทั้งขอบเขตของแอปพลิเคชัน) อย่างไรก็ตาม อย่าทำทั้งสองอย่างพร้อมกันโปรดทราบด้วยว่าในกรณีของคำสั่ง
import { Component } from 'angular2/core';จะมีบางอย่างที่แตกต่างออกไปเล็กน้อย กล่าวคือ เรากำลังนำเข้า named export Component ตามข้อกำหนดของ (AMD specification) คุณสามารถคิดในกรณีนี้ได้ว่าเป็นการนำเข้าเพียงส่วนหนึ่งของไลบรารี Angular2 core ขนาดใหญ่ทั้งไลบรารีเมื่อไม่จำเป็นต้องใช้ทั้งหมด
เพื่อตรวจสอบให้แน่ใจ ให้ตรวจสอบว่าคุณได้ให้ตัวเองเข้าถึง jQuery ผ่านทาง CDN หรือโดยการติดตั้งเป็น dependencies ของ NPM จริง ๆ