บทความนี้จะอธิบายรายละเอียดถึงสาเหตุที่เกิดข้อผิดพลาดนี้และวิธีที่เราจะแก้ไขได้
วิธีแก้ไขข้อผิดพลาด “ต้องการไม่ได้กำหนด” ใน JavaScript/Node.js
ข้อผิดพลาดในการอ้างอิง “ไม่พบความต้องการ” เกิดขึ้นเมื่อพบฟังก์ชัน need() ในไฟล์ JavaScript ซึ่งควรจะดำเนินการในเว็บเบราว์เซอร์แทนที่จะเป็นสภาพแวดล้อม Node.js
ฟังก์ชัน need() คืออะไร?
ฟังก์ชัน need() มีขอบเขตทั่วโลกและกำหนดโดย Node.js มันโหลดและรันโมดูลในแอปพลิเคชัน Node.js เบราว์เซอร์จำนวนมากไม่สนับสนุน Node.js ดังนั้นจึงไม่มีฟังก์ชัน need() พร้อมใช้งาน
ข้อผิดพลาดนี้เกิดขึ้นเมื่อใด?
ข้อผิดพลาดนี้มักเกิดขึ้นเมื่อใช้ JavaScript ในเบราว์เซอร์ทั้งสองพร้อมกับ Node.js ข้อผิดพลาดสามารถเกิดขึ้นได้สามวิธี:
- เมื่อใช้ฟังก์ชัน need() ในสภาพแวดล้อมของเบราว์เซอร์
- เมื่อใช้ฟังก์ชัน need() ใน Node.js และไฟล์ package.json ประเภทจะถูกตั้งค่าเป็น “โมดูล”
- เมื่อใช้ฟังก์ชัน need() ใน Node.js ไฟล์จะมีนามสกุลเป็น .mjs
การใช้ไวยากรณ์ const “ myFile = ต้องการ ('./my-file') ” ในสภาพแวดล้อมบนเว็บจะทำให้เกิดข้อผิดพลาดที่มีลักษณะดังนี้:
ให้เราหารือเกี่ยวกับวิธีแก้ไขปัญหาต่างๆ เพื่อแก้ไขข้อผิดพลาดนี้
กรณีที่ 1: ข้อผิดพลาดในสภาพแวดล้อมเบราว์เซอร์
ฟังก์ชัน need() ใช้งานได้เฉพาะใน Node.js เบราว์เซอร์ส่วนใหญ่เข้ากันได้กับ Node.js ดังนั้นจึงไม่รองรับฟังก์ชัน need() โมดูล ES6 นำเข้าส่งออกแก้ไขข้อผิดพลาด 'ReferenceError ต้องการไม่ได้กำหนด' นี่คือตัวอย่างโค้ดที่แสดงวิธีการดำเนินการ:
DOCTYPE html >< ร่างกาย >
< ประเภทสคริปต์ = 'โมดูล' src = 'index.js' > สคริปต์ >
< ประเภทสคริปต์ = 'โมดูล' src = 'ไฟล์.js' > สคริปต์ >
ร่างกาย >
html >
Index.js จะถูกโหลดก่อนเพื่อให้สามารถใช้งานฟังก์ชันต่างๆ ใน file.js ได้
ไฟล์ดัชนี.js
index.js กำหนดผลิตภัณฑ์ฟังก์ชันและตัวแปร x และ y:
สินค้าฟังก์ชั่นการส่งออก ( ก, ข ) {กลับ ก * ข ;
}
ส่งออก ค่าคงที่ = 10 ;
ส่งออก ค่าคงที่ และ = 'เทย์เลอร์'
ไฟล์.js
ฟังก์ชันการทำงานจากไฟล์ index.js สามารถใช้ในไฟล์ js อื่นที่ชื่อ file.js File.js ดูเหมือนว่า:
นำเข้า { สินค้า, x, y } จาก './index.js' ;คอนโซล บันทึก ( ผลิตภัณฑ์ ( 10 , 5 ) ) ; // จะแสดง 50
คอนโซล บันทึก ( x ) ; // จะแสดง 10
คอนโซล บันทึก ( และ ) ; // จะแสดงคำว่า 'เทย์เลอร์'
เอาท์พุต
ผลลัพธ์ต่อไปนี้แสดงวิธีการลบข้อผิดพลาด 'ต้องการไม่ได้กำหนด' ในสภาพแวดล้อมของเบราว์เซอร์โดยใช้โมดูลส่งออกการนำเข้า ES6:
กรณีที่ 2: เกิดข้อผิดพลาดขณะทำงานใน Node.js
ในไฟล์ package.json การตั้งค่าคุณสมบัติประเภทด้วยโมดูลค่าทำให้เกิดข้อผิดพลาดนี้ นอกจากนี้ยังสามารถเกิดขึ้นได้หากใช้ฟังก์ชัน need() ในไฟล์ที่มีนามสกุล .mjs
ข้อผิดพลาดนี้สามารถลบออกได้เมื่อคุณลบคุณสมบัติประเภทที่ตั้งค่าให้กับโมดูลและไฟล์ใด ๆ ที่มีนามสกุล .mjs จะถูกเปลี่ยนชื่อเป็น .js
//package.json{
// ลบคุณสมบัติประเภทที่กำหนดให้กับโมดูลเพื่อใช้ need()
'พิมพ์' : : 'โมดูล' ,
}
ไฟล์ดัชนี.js
ไฟล์ index.js กำหนดฟังก์ชัน “product” และตัวแปร x และ y ด้วยขอบเขตของตัวแปร ไฟล์ index.js จะมีลักษณะดังนี้:
ผลิตภัณฑ์ฟังก์ชั่น ( ก, ข ) {กลับ ก * ข ;
}
ทั่วโลก. x = 13 ;
ทั่วโลก. และ = 'รวดเร็ว' ;
โมดูล. การส่งออก = {
ผลิตภัณฑ์,
} ;
ไฟล์.js
รับฟังก์ชันผลิตภัณฑ์จากไฟล์ JS index.js โดยใช้คีย์เวิร์ด need() ไฟล์ file.js จะมีลักษณะดังนี้:
ค่าคงที่ { ผลิตภัณฑ์ } = จำเป็นต้อง ( './index.js' ) ;คอนโซล บันทึก ( ผลิตภัณฑ์ ( 10 , 9 ) ) ; // จะแสดง 90
คอนโซล บันทึก ( x ) ; // จะแสดง 13
คอนโซล บันทึก ( และ ) ; // จะแสดงคำว่า 'รวดเร็ว'
เอาท์พุต
ผลลัพธ์จะแสดงวิธีการแก้ไขข้อผิดพลาด “ไม่พบความต้องการ” โดยการลบคุณสมบัติประเภทที่ตั้งค่าเป็นโมดูลออกจากไฟล์ package.json:
สิ่งที่ต้องจำ
- ไวยากรณ์ของโมดูล ES6 ในการนำเข้าโมดูลจำเป็นต้องมีความเฉพาะเจาะจงเกี่ยวกับนามสกุลของไฟล์โมดูล JavaScript ควรทราบประเภทไฟล์เพื่อการประมวลผลที่เหมาะสม
- โมดูล ES6 ไม่สามารถใช้พร้อมกันกับฟังก์ชัน need()
บทสรุป
การใช้ไวยากรณ์ของโมดูล ES6 ในเบราว์เซอร์ช่วยแก้ไขปัญหา “ไม่ได้กำหนดความต้องการ” หรือมิฉะนั้นข้อมูลโค้ดจะต้องทำงานใน Node.js ข้อผิดพลาดเกิดขึ้นเมื่อใช้ฟังก์ชัน need() ในเบราว์เซอร์ บทความนี้กล่าวถึงวิธีการแก้ไขปัญหา “ความต้องการไม่ได้กำหนด” ด้วยตัวอย่าง