MATIN MOLKARA
SERIES: JavaScript — PART 100 OF 108

100- آموزش جاوااسکریپت | پروژه عملی قسمت 1 از 8:راه‌اندازی محیط توسعه برای ساخت اپلیکیشن CRUD با ES2015 Modules

در این بخش، محیط توسعه لازم برای ساخت یک اپلیکیشن CRUD با ماژول‌های ES2015 راه‌اندازی می‌شود. همچنین با نقش Babel، Webpack، npm و Webpack Dev Server در اجرای کدهای ماژولار در مرورگر آشنا می‌شوید.

در این پروژه قرار است یک اپلیکیشن کامل CRUD با استفاده از ماژول‌های ES2015 ساخته شود.
تا اینجا بیشتر مثال‌ها مستقیماً در مرورگر اجرا می‌شدند و نیازی به فرایند build یا compile نداشتند، اما برای استفاده از ماژول‌ها به یک محیط توسعه مناسب نیاز داریم.

برای این کار از یک استارتر مبتنی بر Babel و Webpack استفاده می‌کنیم. این ابزارها کمک می‌کنند کدهای جدید جاوااسکریپت به نسخه‌ای تبدیل شوند که مرورگر بتواند آن را اجرا کند.

چرا به Babel و Webpack نیاز داریم؟

ماژول‌های ES2015 در این پروژه به‌صورت مستقیم اجرا نمی‌شوند، بنابراین باید از ابزارهایی برای آماده‌سازی کد استفاده کنیم.

نقش Babel

Babel کدهای ES2015+ را به جاوااسکریپت سازگارتر، مانند ES5، تبدیل می‌کند.

نقش Webpack

Webpack فایل‌های پروژه را مدیریت و bundle می‌کند و یک گردش کار مناسب برای توسعه در اختیار قرار می‌دهد.

نقش Webpack Dev Server

این ابزار یک سرور توسعه در اختیار ما قرار می‌دهد تا پروژه را در مرورگر اجرا کنیم و در زمان توسعه، تغییرات را سریع‌تر بررسی کنیم.

پیش‌نیازهای پروژه

برای استفاده از این محیط توسعه، باید Node.js روی سیستم نصب باشد. با نصب Node.js، ابزار npm نیز در دسترس قرار می‌گیرد.

اگر از macOS یا Linux استفاده می‌کنید

معمولاً ترمینال پیش‌فرض سیستم کافی است.

اگر از Windows استفاده می‌کنید

بهتر است به‌جای CMD از Git Bash استفاده کنید، چون برای کارهای توسعه‌ای محیط مناسب‌تری فراهم می‌کند.

دریافت فایل‌های استارتر پروژه

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

سپس فایل‌های استارتر را از مخزن GitHub دریافت کنید. این کار را می‌توانید با git clone یا دانلود فایل ZIP انجام دهید.

دریافت پروژه با Git

git clone https://github.com/bradtraversy/babel_webpack_starter.git

یا دانلود فایل ZIP

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

نصب وابستگی‌ها با npm

بعد از انتقال فایل‌ها به پوشه پروژه، باید وابستگی‌ها را نصب کنید.
این وابستگی‌ها در فایل package.json تعریف شده‌اند.

اجرای نصب

npm install

با اجرای این دستور:

  • پوشه node_modules ساخته می‌شود
  • تمام پکیج‌های موردنیاز نصب می‌شوند
  • ابزارهایی مثل Webpack، Babel و Webpack Dev Server آماده استفاده می‌شوند

معمولاً نیازی نیست فایل‌های داخل node_modules را به‌صورت مستقیم ویرایش کنید.

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

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

code .

این دستور پوشه فعلی را در Visual Studio Code باز می‌کند.

استفاده از ترمینال داخلی VS Code

در VS Code می‌توانید از ترمینال داخلی نیز استفاده کنید.
این ترمینال از مسیر زیر در دسترس است:

  • View > Integrated Terminal

یا با میانبر:

Ctrl + `

اگر در ویندوز هستید، ممکن است ترمینال پیش‌فرض PowerShell باشد. اگر می‌خواهید از Git Bash استفاده کنید، باید آن را در تنظیمات VS Code به‌عنوان shell پیش‌فرض تعریف کنید.

بررسی اسکریپت‌های package.json

در فایل package.json معمولاً بخشی به نام scripts وجود دارد که دستورات اصلی پروژه را مشخص می‌کند.

در این پروژه دو دستور مهم داریم:

  • npm run build
  • npm start

اجرای فرایند Build

دستور زیر کدهای پروژه را build می‌کند:

npm run build

این دستور:

  • کدهای موجود در پوشه src را پردازش می‌کند
  • آن‌ها را به نسخه سازگارتر تبدیل می‌کند
  • خروجی نهایی را در پوشه build قرار می‌دهد

ساختار فایل ورودی پروژه

فایل اصلی اپلیکیشن در پوشه src قرار می‌گیرد.
در این مثال، فایل اصلی app.js است.

نمونه کد داخل src/app.js

const greeting = 'Hello World';

console.log(greeting);

این فایل مستقیماً در HTML قرار نمی‌گیرد، بلکه ابتدا توسط Webpack و Babel پردازش می‌شود و خروجی bundle شده آن در پوشه build ساخته می‌شود.

نتیجه Build

پس از اجرای دستور build، یک فایل bundle در پوشه build ایجاد می‌شود.
این فایل نسخه کامپایل‌شده کد شماست و همان فایلی است که باید در HTML بارگذاری شود.

برای مثال، اگر در کد اصلی از const استفاده کرده باشید، ممکن است در خروجی نهایی به var تبدیل شود، چون ES5 از const پشتیبانی نمی‌کند.

اتصال فایل Build شده به HTML

در فایل index.html باید فایل bundle شده را به صفحه متصل کنید، نه فایل اصلی app.js.

نمونه اتصال فایل bundle

<script src="build/app.bundle.js"></script>

این فایل همان خروجی پردازش‌شده‌ای است که مرورگر اجرا می‌کند.

اجرای سرور توسعه

برای اجرای پروژه در محیط توسعه، از دستور زیر استفاده کنید:

npm start

این دستور سرور توسعه را اجرا می‌کند و پروژه را روی localhost در اختیار شما قرار می‌دهد.

ممکن است پروژه روی پورت‌های مختلفی مانند 8080، 8081 یا 8082 اجرا شود. این موضوع به پورت‌های آزاد سیستم شما بستگی دارد.

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

بعد از اجرای سرور توسعه، می‌توانید پروژه را در مرورگر باز کنید.
اگر کد نمونه Hello World را در app.js قرار داده باشید، باید خروجی آن را در کنسول مرورگر مشاهده کنید.

نمونه کد جاوااسکریپت

const greeting = 'Hello World';

console.log(greeting);

تفاوت npm run build و npm start

این دو دستور کاربردهای متفاوتی دارند:

npm run build

npm run build
  • خروجی نهایی پروژه را تولید می‌کند
  • فایل‌های bundle شده را در پوشه build می‌سازد

npm start

npm start
  • سرور توسعه را اجرا می‌کند
  • پروژه را در مرورگر نمایش می‌دهد
  • برای توسعه روزمره مناسب است

نکته کاربردی درباره ترمینال

اگر سرور توسعه را در ترمینال داخلی VS Code اجرا کنید، ممکن است آن ترمینال برای اجرای دستورات دیگر درگیر شود.
به همین دلیل بهتر است سرور را در یک ترمینال جداگانه، مثل Git Bash، اجرا کنید تا ترمینال داخلی VS Code برای سایر کارها آزاد بماند.

توقف سرور در ترمینال

Ctrl + C

جمع‌بندی

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

  • نصب Node.js و npm
  • استفاده از استارتر مبتنی بر Babel و Webpack
  • نصب وابستگی‌ها با npm install
  • اجرای build با npm run build
  • اجرای سرور توسعه با npm start
  • آشنایی با ساختار فایل‌های src و build

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

// 0 comments
#JavaScript#آموزش جاوااسکریپت#VS Code#CRUD App#Node.js#Webpack Dev Server#npm#Webpack#Babel#ES2015 Modules

نظرات (0)

نظر خود را بنویسید