آشنایی با npm و کامپایل شدن کدهای Frontend

در قسمت قبل با استفاده از دو دستور composer require laravel/ui و php artisan ui vue --auth توانستیم یک سیستم احراز هویت را به صورت لحظه ای پیاده سازی کنیم بدون اینکه کدی بنویسیم! این قدرت لاراول را به شما نشان می دهد. در این جلسه می خواهم شما را با مفهوم npm آشنا کنم و سپس شروع به نوشتن برخی از view ها کنیم تا صفحه ای شبیه به اینستاگرام ایجاد کنیم.

باید بدانید که لاراول یک full development framework یا یک فریم ورک کامل برای backend و frontend شما است. همچنین لاراول یک فریم ورک opinionated محسوب می شود یعنی نظر خود در مورد frontend و backend را تا حدی به پروژه شما تحمیل می کند. مثلا در لاراول از blade به عنوان template engine استفاده می کنیم چرا که این نظر لاراول است و به ما تحمیل شده است. معنی «تحمیل شدن» در اینجا از نظر برنامه نویسی است نه اینکه واقعا ظالمانه باشد یا به نفع ما نباشد. لاراول سعی کرده است بهترین تکنولوژی های سطح وب را جمع آوری کرده و برای استفاده به ما بدهد تا ما را از سردرگمی انتخاب خلاص کند. این مفهوم opinionated بودن است.

اگر یادتان باشد گفتم که composer برای مدیریت پکیج های PHP است اما npm برای مدیریت پکیج های جاوا اسکریپتی (مانند فریم ورک vue یا کتابخانه jquery یا کتابخانه lodash و غیره) است. ما می توانیم در این پروژه composer را مدیریت کننده پکیج های سرور یا backend و npm را مدیریت کننده پکیج های frontend (مرورگر و هر چیزی که درون آن دیده می شود) در نظر بگیریم.

نکته: اگر می خواهید به جای Vue از فریم ورکی مانند React استفاده کنید یا اصلا از هیچ فریم ورکی استفاده نکنید هم راه های مختلفی وجود دارد.

اگر یادتان باشد در جلسه قبل دو دستور زیر را اجرا کردیم:

composer require laravel/ui

php artisan ui vue --auth

دستور اول را همه باید اجرا کنند تا بتوانند از سیستم خودکار احراز هویت استفاده کنند اما دستور دوم دلخواه است و Vue را برایتان نصب می کند. مثلا اگر بخواهید از React استفاده کنید باید دستورات زیر را اجرا کنید:

 composer require laravel/ui

php artisan ui react --auth

همچنین اگر می خواهید فقط از بوت استرپ استفاده کنید (نه Vue داشته باشید و نه react) باید دو دستور زیر را اجرا کنید:

composer require laravel/ui

php artisan ui bootstrap --auth

همچنین اگر نمی خواهید سیستم احراز هویت را داشته باشید بلکه فقط می خواهید از vue یا react یا بوت استرپ استفاده کنید باید قسمت auth-- را بردارید. مثلا:

php artisan ui bootstrap

php artisan ui vue

php artisan ui react

در ساده ترین حالت نیز می توانید دو دستور زیر را اجرا کنید تا فقط بوت استرپ و سیستم احراز هویت را داشته باشید (بدون هیچ پکیج اضافی):

composer require laravel/ui

php artisan ui:auth

ما در این پروژه از vue استفاده خواهیم کرد بنابراین همان دستورات جلسه قبل را اجرا کردیم. با اجرای آن دستورات فایل package.json که مخصوص npm است به شکل زیر تغییر خواهد کرد:

"devDependencies": {
    "axios": "^0.19",
    "bootstrap": "^4.0.0",
    "cross-env": "^7.0",
    "jquery": "^3.2",
    "laravel-mix": "^5.0.1",
    "lodash": "^4.17.13",
    "popper.js": "^1.12",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.20.1",
    "sass-loader": "^8.0.0",
    "vue": "^2.5.17",
    "vue-template-compiler": "^2.6.10"
}

یعنی پکیج هایی مانند vue و غیره به آن اضافه می شوند. شما می توانید به سلیقه خود برخی از این پکیج ها را از این فایل حذف کنید اما باید هشدار بدهم که برای این کار به دانش نسبتا خوبی نیاز است و باید قبل از انجام آن تحقیقات خود را انجام بدهید. به طور مثال برای حذف jquery باید sass-loader و پکیج های وابسته به آن را نیز حذف کنید چرا که تمام این پکیج ها با هم کار می کنند بنابراین برای جلوگیری از پیچیده شدن این دوره من به چیزی دست نمی زنم. در ضمن این ها پکیج های devDependencies هستند که یعنی اکثر آن ها در سورس کد نهایی پروژه حضور نخواهند داشت بلکه فقط در هنگام توسعه به ما کمک می کنند.

اطلاعات بیشتر:

https://laravel.com/docs/7.x/frontend

این پکیج ها فقط لیست شده اند و هنوز نصب نشده اند بنابراین باید دستور زیر را اجرا کنیم تا دانلود شوند:

npm install

اجرای این دستور و دانلود تمام پکیج ها بسته به سرعت اینترنت شما بین 2 تا 6 دقیقه طول می کشد. پس از اتمام عملیات، تمام پکیج های خود را دانلود کرده و آماده به کار هستیم. یادتان باشد که frontend (چیزی که کاربر در مرورگر می بیند) برآیندی از تعامل تمام این پکیج ها است بنابراین همانطور که برای سرور خود دستور php artisan serve را داشتیم برای frontend خود نیز دستور زیر را داریم:

npm run dev

با اجرای این دستور که چند ثانیه طول خواهد کشید، تمام پکیج های frontend ما در چند فایل ساده کامپایل می شوند. همانطور که می بینید لاراول از webpack برای کامپایل کردن فایل های ما استفاده می کند چرا که webpack می تواند کدهای ما را تا حد ممکن خلاصه و minify کند که حجم برنامه ما را کاهش می دهد. پس از اتمام اجرای این دستور نتیجه ای شبیه به نتیجه زیر برایتان نمایش داده می شود:

/css/app.css  178 KiB  /js/app  [emitted]  /js/app
  /js/app.js  1.4 MiB  /js/app  [emitted]  /js/app

یعنی تمام استایل های CSS ما درون فایل App.css و تمام کدهای جاوا اسکریپتی ما درون فایلی به نام app.js قرار گرفته است. برای مشاهده این فایل ها باید به پوشه public بروید. در این پوشه پوشه های js و css را می بینید که حاوی این دو فایل کامپایل شده هستند و ما هیچ وقت به آن ها دست نمی زنیم. من فقط می خواستم که شما بدانید فایل های کامپایل شده همیشه در پوشه public قرار خواهند گرفت. این فایل ها همان فایل هایی هستند که در مرورگر نمایش داده می شوند بنابراین هر زمان که کدهای frontend مانند جاوا اسکریپت یا CSS را تغییر دادید باید دستور npm run dev را اجرا کنید (منظورم خود کتابخانه ها است نه تغییر کدهای داخل HTML و غیره) تا فایل هایتان دوباره کامپایل شوند و تغییرات جدید اعمال شود و گرنه همان صفحه قدیمی را می بینید.

روش بهتر این است که به جای npm run dev از دستور زیر استفاده کنید:

npm run watch

با این کار هر زمان که کدها و فایل های frontend تغییر کنند، عملیات کامپایل شدن به صورت خودکار انجام خواهد شد و نیازی به اجرای دستور npm run dev نداریم.