راه‌اندازی محیط توسعه برای پروژه CRUD با ماژول‌های ES2015

در این پروژه قرار است یک اپلیکیشن کامل CRUD با استفاده از ماژول‌های ES2015 ساخته شود. مرورگرهای امروزی به‌صورت بومی (native) از import و export پشتیبانی می‌کنند، بنابراین می‌توانیم کد را مستقیم در مرورگر اجرا کنیم.

---

پیش‌نیازها

برای این آموزش، تنها به موارد زیر نیاز دارید:

• یک ویرایشگر کد، مثل Visual Studio Code
• یک مرورگر مدرن (نسخهٔ به‌روز Chrome، Firefox، Edge یا Safari)
• یک سرور محلی سبک برای اجرای فایل‌ها (در ادامه توضیح داده می‌شود)

نکتهٔ مهم: به دلیل قوانین امنیتی مرورگر (CORS)، فایل‌هایی که با type="module" اجرا می‌شوند را نمی‌توان مستقیم با دوبار کلیک کردن روی index.html (یعنی با پروتکل file://) باز کرد. حتماً باید از یک سرور محلی استفاده کنید.

---

ساخت پوشهٔ پروژه

یک پوشه برای پروژه بسازید. در این آموزش نام پروژه micro-post در نظر گرفته شده است.

ساختار پیشنهادی پروژه به این شکل است:

micro-post/
├── index.html
└── src/
    └── app.js

---

نوشتن فایل index.html

در فایل index.html، فایل جاوااسکریپت اصلی را با ویژگی type="module" بارگذاری کنید:

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8" />
  <title>Micro Post</title>
</head>
<body>
  <script type="module" src="src/app.js"></script>
</body>
</html>

ویژگی type="module" به مرورگر می‌گوید که این فایل از ماژول‌های ES2015 استفاده می‌کند و اجازهٔ استفاده از import/export را می‌دهد.

---

نوشتن فایل src/app.js

فایل اصلی اپلیکیشن را در پوشهٔ src بسازید:

const greeting = 'Hello World';

console.log(greeting);

این فایل بدون هیچ تبدیل یا پردازش اضافه‌ای، همان‌طور که نوشته شده، توسط مرورگر اجرا می‌شود.

---

باز کردن پروژه در Visual Studio Code

اگر از VS Code استفاده می‌کنید، می‌توانید پروژه را مستقیم از ترمینال باز کنید:

code .

---

اجرای پروژه با یک سرور محلی

چون فایل‌های ماژولار را نمی‌توان مستقیم با file:// باز کرد، یکی از روش‌های زیر را برای اجرای یک سرور محلی سبک انتخاب کنید:

روش ۱: افزونهٔ Live Server در VS Code

1. افزونهٔ Live Server را از بخش Extensions نصب کنید.
2. روی فایل index.html کلیک راست کرده و گزینهٔ Open with Live Server را انتخاب کنید.
3. پروژه در مرورگر، معمولاً روی آدرسی مانند http://127.0.0.1:5500 باز می‌شود.

روش ۲: استفاده از دستور npx serve

npx serve .

روش ۳: سرور داخلی پایتون (در صورت نصب بودن Python)

python3 -m http.server

هر کدام از این روش‌ها که استفاده کنید، پروژه روی یک آدرس محلی (localhost) در دسترس قرار می‌گیرد.

---

بررسی اجرای پروژه در مرورگر

بعد از اجرای سرور محلی، آدرس داده‌شده را در مرورگر باز کنید. سپس کنسول مرورگر (DevTools) را باز کنید (کلید F12 یا Ctrl+Shift+I)؛ باید عبارت Hello World را در کنسول مشاهده کنید.

---

جمع‌بندی

در این بخش، محیط توسعهٔ لازم برای پروژهٔ ماژولار جاوااسکریپت راه‌اندازی شد. مهم‌ترین کارهایی که انجام شدند عبارت‌اند از:

• ساخت ساختار سادهٔ پروژه (index.html و src/app.js)
• استفاده از <script type="module"> برای فعال کردن import/export در مرورگر
• اجرای پروژه با یک سرور محلی سبک

با این تنظیمات، پروژه آماده است تا در بخش بعدی، کار با ماژول‌های ES2015 و import/export واقعی بین چند فایل را شروع کنیم.