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

ES Modules: import, export และ dynamic import

ใช้ named export, default export และการนำเข้าเนมสเปซ รวมถึงโหลดโค้ดแบบประเมินภายหลังด้วย dynamic import() เพื่อเพิ่มประสิทธิภาพ

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

ทบทวน: พื้นฐานโมดูล ES

โมดูล ES ทำให้ทุกไฟล์มี scope ของตัวเอง การส่งออกแบบระบุชื่อจะแชร์ค่าเฉพาะ ส่วนการส่งออกเริ่มต้นจะแชร์ค่าหลัก ตัวรวมชุดโค้ดหรือเบราว์เซอร์จะตรวจสอบและแก้ไขการนำเข้าในเวลาโหลด

// Named exports
export const API_BASE = '/api/v1';
export function formatDate(d) { return d.toISOString().slice(0, 10); }

// Default export
export default class ApiClient {
  constructor(base = API_BASE) { this.base = base; }
}

การตัดโค้ดที่ไม่ใช้ — เหตุใดการส่งออกแบบระบุชื่อจึงสำคัญ

ตัวรวมชุดโค้ด เช่น Rollup, esbuild และ Vite จะกำจัดการส่งออกที่ไม่ได้ใช้ หากนำเข้าเฉพาะ { formatDate } ตัวรวมชุดโค้ดจะนำทุกอย่างที่เหลือออกจากชุดโค้ด การส่งออกแบบระบุชื่อช่วยให้ตัดโค้ดที่ไม่ใช้ออกได้ ส่วน import * as utils อาจทำให้ทำเช่นนั้นไม่ได้

// consumers/report.js — only needs formatDate
import { formatDate } from './utils.js';
// Bundler omits API_BASE and ApiClient from this chunk

การนำเข้าแบบไดนามิก import() — การโหลดเมื่อจำเป็น

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

// Only load the heavy charting library when needed:
const showChart = async () => {
  const { Chart } = await import('./Chart.js');
  new Chart(canvas, config);
};

btn.addEventListener('click', showChart);

การนำเข้าแบบไดนามิกพร้อมการจัดการข้อผิดพลาด

ครอบการนำเข้าแบบไดนามิกด้วย try/catch เพื่อจัดการความล้มเหลวของเครือข่ายหรือโมดูลที่หายไปอย่างเหมาะสม

try {
  const module = await import('./optional-feature.js');
  module.activate();
} catch (err) {
  console.warn('Optional feature unavailable:', err.message);
}

import.meta

import.meta มีข้อมูลเมตาเกี่ยวกับโมดูลปัจจุบัน คุณสมบัติสำคัญ ได้แก่ import.meta.url (URL แบบสัมบูรณ์), import.meta.env (ตัวแปรสภาพแวดล้อมของ Vite) และ import.meta.resolve()

// Get the directory of this module:
const dir = new URL('.', import.meta.url).pathname;

// Vite env vars:
const API_URL = import.meta.env.VITE_API_URL;
const isProd = import.meta.env.PROD;

การทำงานของโมดูล — เพียงครั้งเดียว

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

// store.js — evaluated once
const state = { count: 0 };
export const increment = () => state.count++;
export const getCount = () => state.count;

// Any file that imports from store.js gets the same state instance

การพึ่งพาแบบวนรอบ

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

การนำเข้าเฉพาะชนิดใน TypeScript

ใช้ import type { ... } เพื่อนำเข้าเฉพาะชนิด ข้อมูลเหล่านี้จะถูกลบออกในเวลาคอมไพล์และจะไม่ปรากฏในชุดโค้ดผลลัพธ์ ใช้แนวทางนี้เพื่อหลีกเลี่ยงการพึ่งพาแบบวนรอบที่เกิดจากการอ้างอิงเฉพาะชนิด

import type { User } from './types.js';

function greet(user: User): string {
  return `Hello, ${user.name}`;
}

การส่งออกซ้ำและไฟล์บาร์เรล

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

// components/index.ts
export { Button } from './Button';
export { Input } from './Input';
export type { ButtonProps } from './Button';

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

สคริปต์ type=module ในเบราว์เซอร์

เพิ่ม type="module" ให้แท็กสคริปต์ เพื่อเปิดใช้ไวยากรณ์โมดูล ES โดยตรงในเบราว์เซอร์โดยไม่ต้องใช้ตัวรวมชุดโค้ด โมดูลจะถูกหน่วงการทำงานไว้เป็นค่าเริ่มต้นและมี scope ของตัวเอง

<script type="module">
  import { greet } from './utils.js';
  greet('World');
</script>

การทำงานร่วมกันระหว่าง CommonJS กับ ESM

Node.js รองรับทั้งสองแบบ ไฟล์ ESM ใช้ .mjs หรือตั้งค่า "type": "module" ใน package.json เมื่อนำเข้าแพ็กเกจ CommonJS จาก ESM การส่งออกเริ่มต้นจะเป็นค่าของ module.exports ตัวรวมชุดโค้ดจะจัดการเรื่องนี้ให้โดยอัตโนมัติ

ตรวจสอบอย่างรวดเร็ว

ประโยชน์ด้านประสิทธิภาพหลักของการใช้การส่งออกแบบระบุชื่อแทนวัตถุส่งออกเริ่มต้นเพียงรายการเดียวคืออะไร

ทบทวน: เจาะลึกโมดูล ES

โมดูลทำงานเพียงครั้งเดียว และผู้นำเข้าทั้งหมดจะใช้ instance เดียวกัน การตัดโค้ดที่ไม่ใช้จะกำจัดการส่งออกแบบระบุชื่อที่ไม่ได้ใช้ การนำเข้าแบบไดนามิกช่วยให้โหลดเมื่อจำเป็นและแบ่งโค้ดได้ import.meta ให้บริบทของโมดูล ไฟล์บาร์เรลสะดวก แต่สามารถลดประสิทธิภาพของการตัดโค้ดที่ไม่ใช้ การนำเข้าเฉพาะชนิดใน TypeScript จะไม่สร้างผลลัพธ์ใด ๆ

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

บทเรียน “ES Modules: import, export และ dynamic import” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ES Modules: import, export และ dynamic import”

ใช้ named export, default export และการนำเข้าเนมสเปซ รวมถึงโหลดโค้ดแบบประเมินภายหลังด้วย dynamic import() เพื่อเพิ่มประสิทธิภาพ คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “ES Modules: import, export และ dynamic import” ใช้เวลานานแค่ไหน

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

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

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

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

  1. ES Modules: import, export และ dynamic import
  2. npm และ package.json: dependencies และ scripts
  3. Vite: เซิร์ฟเวอร์พัฒนาและการบิลด์
  4. แนวคิดการรวมโค้ด: tree shaking และ code splitting
← กลับไปที่ Frontend Academy