0Pricing
Frontend Academy · บทเรียน

โมดูล: import และ export

แยกโค้ดเป็น ES modules ด้วย named export และ default export นำเข้าเฉพาะส่วนที่ต้องการ และทำความเข้าใจว่าตัวรวมโมดูลแก้กราฟการพึ่งพาอย่างไร

โมดูล: import และ export เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงใช้โมดูล

ก่อนมีโมดูล JavaScript ทั้งหมดจะทำงานในขอบเขตส่วนกลาง ตัวแปรจึงชนกัน ลำดับโค้ดมีผล และไฟล์ต้องโหลดตามลำดับ โมดูล ES ทำให้แต่ละไฟล์มีขอบเขตของตัวเอง มีการนำเข้าที่ระบุไว้อย่างชัดเจน และมีการส่งออกที่สามารถตัดส่วนไม่ใช้ออกได้

การส่งออกแบบมีชื่อ

ส่งออกค่าเฉพาะด้วยคีย์เวิร์ด export ไฟล์หนึ่งสามารถมีการส่งออกแบบมีชื่อได้หลายรายการ ผู้ใช้โมดูลจะนำเข้าเฉพาะสิ่งที่ต้องการ

// utils.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export class Vector {
  constructor(x, y) { this.x = x; this.y = y; }
}

การนำเข้าแบบมีชื่อ

นำเข้าการส่งออกแบบมีชื่อด้วยวงเล็บปีกกา คุณสามารถนำเข้าการส่งออกหลายรายการจากโมดูลเดียวกันภายในคำสั่งเดียว

import { PI, add, Vector } from './utils.js';

console.log(PI);        // 3.14159
console.log(add(2, 3)); // 5

การส่งออกค่าเริ่มต้น

แต่ละโมดูลสามารถมีการส่งออกค่าเริ่มต้นได้หนึ่งรายการ ซึ่งโดยทั่วไปคือสิ่งสำคัญหลักที่โมดูลจัดเตรียมไว้ นำเข้าโดยไม่ใช้วงเล็บปีกกา และตั้งชื่อใดก็ได้

// Button.js
export default function Button({ label }) {
  return `<button>${label}</button>`;
}

// Importing:
import Button from './Button.js';
import MyButton from './Button.js'; // any name works

การส่งออกซ้ำ

โมดูลสามารถส่งออกสิ่งต่าง ๆ จากโมดูลอื่นซ้ำ เพื่อสร้างไฟล์ศูนย์รวม ซึ่งเป็นจุดเข้าใช้งานเดียวที่ส่งออกหลายสิ่งซ้ำ

// components/index.js
export { default as Button } from './Button.js';
export { default as Input } from './Input.js';
export { default as Modal } from './Modal.js';

// Consumer:
import { Button, Input, Modal } from './components';

การนำเข้าเนมสเปซ

นำเข้าทุกอย่างจากโมดูลมาไว้ในออบเจ็กต์เนมสเปซด้วย import * as name มีประโยชน์เมื่อต้องใช้การส่งออกหลายรายการ หรือต้องการระบุแหล่งที่มาอย่างชัดเจน

import * as utils from './utils.js';

console.log(utils.PI);        // 3.14159
console.log(utils.add(1, 2)); // 3

การนำเข้าเพื่อผลข้างเคียงเท่านั้น

บางโมดูลถูกนำเข้าเพียงเพื่อผลข้างเคียง เช่น โพลีฟิลล์หรือการลงทะเบียนตัวจัดการเหตุการณ์ ให้นำเข้าโมดูลเหล่านี้โดยไม่ผูกชื่อ

import './polyfills.js'; // runs the code, imports nothing

การนำเข้าแบบไดนามิก import() — การแบ่งโค้ด

ฟังก์ชัน import() แบบไดนามิกจะส่งคืนพรอมิส ใช้เพื่อโหลดโมดูลเมื่อจำเป็นเท่านั้น เครื่องมือรวมไฟล์จะสร้างชิ้นส่วนแยกต่างหากให้อัตโนมัติสำหรับโมดูลที่นำเข้าแบบไดนามิก

// Load a heavy module only when the button is clicked:
button.addEventListener('click', async () => {
  const { processFile } = await import('./fileProcessor.js');
  processFile(data);
});

import.meta

import.meta คือออบเจ็กต์พิเศษที่ใช้ได้ภายในโมดูล import.meta.url คือที่อยู่ของโมดูล เครื่องมือไวต์ใช้ import.meta.env สำหรับตัวแปรสภาพแวดล้อม

// Vite environment variables:
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.MODE); // 'development' or 'production'

การค้นหาโมดูล

เครื่องมือรวมไฟล์อย่างไวต์จะค้นหาโมดูลจากระบบไฟล์ (เส้นทางสัมพัทธ์อย่าง './utils') จาก node_modules ('lodash') หรือจากนามแฝงเส้นทาง ('@/components' ที่กำหนดค่าไว้ใน vite.config.js)

CommonJS เทียบกับโมดูล ES

เดิมที Node.js ใช้ CommonJS (require / module.exports) ส่วนเบราว์เซอร์ใช้โมดูล ES (import / export) ปัจจุบัน Node.js รองรับโมดูล ES เช่นกัน โดยกำหนด type: "module" ใน package.json

// CommonJS (Node.js, older tooling):
const fs = require('fs');
module.exports = { myFunc };

// ES Modules (modern):
import fs from 'fs';
export { myFunc };

ตรวจสอบความเข้าใจ

ข้อได้เปรียบหลักของการใช้ dynamic import() แทนการนำเข้าแบบคงที่คืออะไร

ทบทวน: โมดูล ES

การส่งออกและนำเข้าแบบมีชื่อใช้สำหรับหลายค่า การส่งออกและนำเข้าค่าเริ่มต้นใช้สำหรับสิ่งสำคัญหลัก การส่งออกซ้ำช่วยสร้างไฟล์ศูนย์รวม import() แบบไดนามิกช่วยให้โหลดเมื่อจำเป็นและแบ่งโค้ดได้ import.meta ให้ข้อมูลเมตาของโมดูล เครื่องมือรวมไฟล์ค้นหานามแฝง node_modules และเส้นทางสัมพัทธ์

คำถามที่พบบ่อย

บทเรียน “โมดูล: import และ export” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “โมดูล: import และ export” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “โมดูล: import และ export”

แยกโค้ดเป็น ES modules ด้วย named export และ default export นำเข้าเฉพาะส่วนที่ต้องการ และทำความเข้าใจว่าตัวรวมโมดูลแก้กราฟการพึ่งพาอย่างไร คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “โมดูล: import และ export” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. เมธอด Array: map, filter, reduce และ find
  2. การแยกโครงสร้างออบเจ็กต์และ Spread
  3. Template Literals และ Optional Chaining
  4. โมดูล: import และ export
← กลับไปที่ Frontend Academy