فصل پیوست ۴: خروجی گرفتن از برنامه نهایی

Getting Output from the Final Program

در قسمت قبل با environment variable ها آشنا شدیم و فایل env را بررسی کردیم. اگر یادتان باشد در همان جلسه توضیح دادم که این فایل سه mode مختلف دارد که با نامگذاری های مختلف مشخص می شوند:

فایل env.development. فقط در هنگام توسعه استفاده می شود.
فایل env.production. فقط در هنگام build نهایی و در پروژه واقعی استفاده می شود.
فایل env.test. برای testing (تست های مختلف کد مانند unit testing) استفاده می شود.

در حالت عادی زمانی که از دستور npm run serve استفاده می کنیم، فایل پروژه ما در مموری سیستم (نه روی دیسک) بارگذاری و اجرا می شود و از این طریق بدون اینکه فایل جدیدی را ایجاد کنیم، برنامه خود را درون مرورگر مشاهده می کنیم. در این حالت ابزارهای debugging و هشدارهای Vue و غیره نیز قابل مشاهده است بنابراین حجم فایل بارگذاری شده در مموری بالا است. حالا اگر از دستور npm run build استفاده کنیم، فایل نهایی ما (معمولا به آن bundle می گویند) روی دیسک ذخیره می شود تا شما بتوانید آن را روی یک سرور آپلود کنید. این فایل بهینه سازی شده و انواع مسائل دیگر را نیز در نظر می گیرد تا حجم فایل شما به کوچک ترین حد خود برسد.

احتمالا با خودتان بگویید اگر بخواهیم فایل نهایی را روی دیسک دریافت کنیم چه کاری باید انجام بدهیم؟ اگر یادتان باشد در فایل package.json به اسکریپت های این پروژه دسترسی داشتیم:

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
},

این اسکریپت ها برای همان سه حالت یا mode ای است که بالاتر توضیح دادم. اگر با npm کار کرده باشید می دانید که این کد چیز جدیدی نیست اما در CLI جدید تفاوت جالبی وجود دارد. در کد بالا مشخص است که ما هنگام اجرای دستورات serve یا build یا lint از پکیجی به نام vue-cli-service استفاده می کنیم که در همان فایل package.json در قسمت devDependencies قابل مشاهده است:

  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.3.0",
    "@vue/cli-plugin-eslint": "~4.3.0",
    "@vue/cli-plugin-pwa": "~4.3.0",
    "@vue/cli-plugin-router": "~4.3.0",
    "@vue/cli-plugin-vuex": "~4.3.0",
    "@vue/cli-service": "~4.3.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.19.0",
    "sass-loader": "^8.0.0",
    "vue-cli-plugin-vuetify": "~2.0.5",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.3.0"
  }

ما این پکیج را نصب نکرده ایم، این پکیج یکی از پکیج های پیش فرض Vue CLI است و مسئولیت کامپایل کردن کدهای ما را دارد (webpack درون این پکیج است). اگر با npm آشنا باشید، می دانید که ما می توانیم اسکریپت های خودمان را اضافه کنیم و حالا که پکیج اصلی را نیز در اختیار داریم می گوییم:

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "build:development": "vue-cli-service build --mode development"
},

در واقع کد بالا همان دستور build است اما با flag ای به نام mode-- به Vue گفته ایم که build نهایی را در قالب Development (توسعه و کدنویسی) تولید کند. حالا اگر دستور npm run build:development را اجرا کنیم، یک پوشه جدید به نام dist ایجاد می شود که حاوی پروژه نهایی ما است. آیا متوجه تفاوت دستورهای npm run build:development و npm run build هستید؟ پروژه نهایی که توسط npm run build:development ساخته می شود، اصلا بهینه سازی نمی شود و پیام های خطا، هشدارها، کامنت ها و تمام موارد اضافه Vue را در خود دارد تا به شما در توسعه کمک کند اما پروژه نهایی که با npm run build ساخته می شود کاملا بهینه سازی خواهد شد و کد تا حد ممکن minify می شود.

نکته جالب تر اینجاست که شما می توانید mode های خودتان را بسازید. مثلا می توان گفت:

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "build:development": "vue-cli-service build --mode staging"
},

staging از mode های شناخته شده در Vue نیست و اصلا وجود ندارد بنابراین من باید آن را تعریف کنم. چطور می توانیم یک mode را تعریف کنیم؟ در تئوری و روی کاغذ، پاسخ مثبت است. برای پاسخ به این سوال ابتدا باید با مفهوم mode آشنا شویم. تفاوت فایلی که در حالت های serve و build تحویل می گیریم در چه چیزی است؟ آیا غیر از این است که جزئیات و پیکربندی آن ها تفاوت دارد؟ بنابراین mode همان پیکربندی و نحوه خروجی گرفتن از فایل ها است و ما می توانیم با استفاده از یک فایل env. یک mode شخصی تعریف کنیم. برای این کار یک فایل env. به همین نام (staging) ایجاد می کنم، یعنی env.staging. و درون آن environment variable های خود را تعریف کنیم. من برای تست این فایل را تعریف کرده اما خالی می گذارم چرا که فعلا environment variable ای ندارم. حالا اگر دستور npm run build:development را اجرا کنم همه چیز بدون خطا کامپایل شده و پروژه نهایی را می گیریم. مسئله اینجاست که mode های تعریف شده شخصی شما در حالت development تولید می شوند مگر اینکه تنظیمات webpack را کاملا تغییر دهید که کار طاقت فرسایی است و اگر بخواهیم واقع بینانه به مسئله نگاه کنیم واقعا نیاز به چنین کاری نیست.

مبحث نهایی ما قابلیت instant prototyping است. همانطور که می دانید vue-cli-service یک پکیج محلی است و به صورت سراسری در سیستم ما در دسترس نمی باشد اما ما می توانیم آن را به صورت سراسری در بیاوریم. برای این کار دستور زیر را اجرا کنید:

npm install -g @vue/cli-service-global

حالا که این پکیج به صورت سراسری نصب شد، تصور کنید که یک فایل جداگانه از پروژه خود داشته باشید (خارج از پوشه src) که نامش Hello.vue باشد و تنها یک template ساده با یک تگ h1 باشد که می گوید Hello:

<template>
  <h1>Hello</h1>
</template>

اگر شما بخواهید فقط این فایل را Serve کنید تا آن را ببینید، می توانید دستور زیر را اجرا کنید:

vue serve Hello.vue

با این کار dev server اجرا شده و کامپوننت شما در مرورگر باز می شود. یادتان باشد که این فایل با vue create ایجاد نشده است و اصلا درون پروژه خاصی نیست بلکه فقط یک فایل خالی است! معمولا از این دستور برای کار روی یک کامپوننت خاص و مستقل استفاده می شود تا بعدا درون برنامه قرار بگیرد.