برنامه Microposts: استفاده از Babel و Webpack

به قسمت اول از پروژه جدید ما خوش آمدید! در این پروژه می خواهیم یک برنامه CRUD را از پایه بسازیم و در طول دوره از Module های نسخه ES 2015 (معادل ES6) جاوا اسکریپت استفاده کنیم. پروژه های قبلی ما همگی مستقیما در خود مرورگر اجرا می شدند و نیازی به چیز دیگری نداشتند و نیازی به کامپایل کردن هیچ کدی نداشتیم اما همانطور که گفتم در این دوره می خواهیم از Module ها استفاده کنیم و از طرفی Module ها هنوز به طور کامل در مرورگرها پشتیبانی نمی شوند (پشتیبانی می شوند اما مردم کمتر مرورگرهایشان را به روز رسانی می کنند) به همین دلیل نیاز به ابزاری داریم تا کدهای ما را به ES5 کامپایل کند تا در مرورگرها به خوبی اجرا شود.

این ابزار Babel نام دارد و می تواند کدهای ES6 و بالاتر را به کدهای ES5 کامپایل کند. با اینکه با ظهور تایپ اسکریپت این نوع ابزار ها کم کم در حال از دست دادن شهرت خود هستند اما تصمیم گرفتیم که در این پروژه از آن استفاده کنیم تا افرادی که تمایل دارند با آن آشنا شوند. همچنین از webpack نیز استفاده خواهیم کرد بنابراین آشنایی با این دو مورد از پیش نیاز های این پروژه است. ما می خواهیم از یک پروژه آماده گیت هاب استفاده کنیم که Babel و webpack را در اختیار ما می گذارد. ما در این دوره از npm هم استفاده خواهیم کرد بنابراین باید nodejs را روی سیستم خود نصب داشته باشید. همچنین پیشنهاد می کنم به جای استفاده از command prompt از گزینه های مناسب تری مانند git bash استفاده کنید.

در این قسمت شروع به ایجاد محیط کار می کنیم و از قسمت های بعدی کدنویسی را شروع خواهیم کرد. ابتدا یک پوشه به نام microposts ایجاد کنید. سپس به لینک گیت هابی که به شما دادم بروید و کل پروژه را دانلود کنید. در پوشه اصلی تمام فایل ها را کپی کرده و درون پوشه microposts قرار دهید. بین این فایل ها، فایلی به نام package.json وجود دارد که وابستگی های پروژه را در خود نگه داشته است. پس از کپی کردن تمام این فایل ها باید command prompt خود را در این پوشه باز کنید (بهتر است از git bash استفاده کنید). پس از باز کردن command prompt دستور زیر را در آن اجرا کنید:

npm install

با انجام این کار تمام وابستگی های موجود در package.json اجرا خواهد شد:

  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-0": "^6.24.1",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  }

این وابستگی ها شامل مواردی هستند که ما در پروژه به آن ها نیاز داریم (چیز هایی مثل Babel و تنظیمات آن و webpack و یک سرور مجازی به نام webpack-dev-server و غیره). با اجرای دستور npm install یک پوشه به نام node modules در پوشه microposts ایجاد می شود که حاوی همین وابستگی ها است و ما تقریبا هیچ وقت به آن دست نمی زنیم بنابراین جای نگرانی نیست. حالا می توانید پوشه microposts را در Visual Studio Code باز کنید.

توجه کنید که خود visual studio code نیز دارای یک ترمینال است که در حالت پیش فرض روی command prompt تنظیم شده است (برای باز کردن آن از منوی view گزینه terminal را انتخاب کنید) اما اگر می خواهید روی git bash تنظیم شود باید از منوی file گزینه preferences و سپس settings را انتخاب کنید. سپس اگر terminal.integrated.shell.windows را جست و جو کنید به گزینه مورد نظرش می رسید. راحت ترین راه انتخاب گزینه edit in settings.json و سپس قرار دادن کد زیر در آن است:

"terminal.integrated.shell.windows": "C:\\program Files\\Git\\bin\\bash.exe"

البته در صورتی که مسیر نصب git برای شما متفاوت است باید مسیر بالا را عوض کنید. حالا می توانید به صورت پیش فرض درون ترمینال vscode از gitbash استفاده کنید.

برای آشنایی با محیط پروژه به فایل package.json بروید. در این فایل و در قسمت scripts دو اسکریپت یا دستور مختلف داریم که برای کار های خاصی از آن ها استفاده می کنیم:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --output-public-path=/build/"
  }

دستور اول که test می باشد و فقط برای تست کردن محیط کاری است و به درد ما نمی خورد. توجه ما روی build و start است که ابتدا با build شروع می کنم. برای اجرای build باید دستور زیر را اجرا کنیم:

npm run build

این کد webpack را اجرا کرده و کد ما را به ES5 کامپایل می کند. فایل اصلی برنامه ما که از قبل آماده شده است درون پوشه src قرار دارد و فعلا درون آن چیزی به جز کد ساده زیر موجود نیست:

const greeting = 'Hello World';
console.log(greeting);

زمانی که این کد را کامپایل کنید، نسخه کامپایل شده درون پوشه جدیدی به نام build قرار خواهد گرفت. برای تست کردن این موضوع کد npm run build را اجرا کنید. با اجرای این دستور یک پوشه جدید به نام build ساخته شده و درون آن فایلی به نام app.bundle.js قرار خواهد داشت. اگر این فایل را باز کنید می بینید که کدهای زیادی به فایل ما اضافه شده است! البته جای نگرانی نیست و تمام این کدها مربوط به webpack و babel است و در روند اجرای برنامه ما دخالتی ندارند. در انتهای این فایل می توانید کدهای خود را به صورت کامپایل شده پیدا کنید. ما درون فایل index.html از همین فایل (app.bundle.js) استفاده می کنیم چرا که فایل نهایی ما این فایل خواهد بود.

کد بعدی ما در قسمت Scripts، دستور start است که سرور محلی ما را راه اندازی می کند. اگر npm start را بزنید یک url می گیرید که فایل های شما در آن اجرا خواهد شد. این دستور معادل استفاده از WAMP یا XAMPP یا موارد مشابه آن است. حالا که محیط کاری را آماده داریم به پایان این قسمت رسیده و در قسمت بعدی در مورد ES Module ها صحبت خواهیم کرد.