فصل پیوست ۴: آشنایی با Environment Variables

Introduction to Environment Variables

یکی از چیزهایی که در برنامه های بزرگ به آن نیاز داریم، environment variables (متغیرهای محیطی) است. این متغیرها به نوعی متغیرهای پیکربندی یا مقادیری سراسری هستند که توسط شما به برنامه هایتان تزریق می شوند و در محیط production (استفاده رسمی از سایت) و development (توسعه و کدنویسی سایت) با هم فرق می کنند. اگر بخواهم یک مثال برایتان بزنم، URL ها گزینه مناسبی هستند؛ مثلا اگر برنامه ما API خاصی داشته باشد، در هنگام توسعه درخواست های خود را به آن ارسال می کنیم و معمولا همیشه آن را باز می گذاریم تا کار کردن با آن راحت باشد اما در محیط production نباید از آن استفاده کنیم و به همه کاربران دسترسی بدهیم. در حالت عادی باید کدهای خود را نوشته و environment variables را به صورت دستی تغییر دهیم اما خیلی بهتر است که همه این مقادیر را یکجا داشته باشیم و زمانی که می خواهیم به محیط production منتقل شویم، با یک دستور و به صورت خودکار تمام این URL ها و API ها و غیره را تغییر دهیم.

خوشبختانه VUE CLI جدید از این قابلیت پشتیبانی می کند. من نمی خواهم در این جلسه API طراحی کنیم بلکه طور دیگری با این قابلیت آشنا می شویم. ما می توانیم یک URL را به صورت ساده در برنامه خود چاپ کنیم (در هر کامپوننتی که می خواهید):

<p>https://dev.api.com</p>

ما اگر برنامه را با دستور npm run serve باز کنیم، این URL فرضی را در قالب یک تگ <p> می بینیم. فرض ما این است که این URL یک Endpoint برای development API برنامه (همان API ای که در هنگام کدنویسی از آن استفاده می کنیم) می باشد و باید فقط زمان Development نمایش داده شود. برای این کار به جای آنکه این URL را به صورت مستقیم در فایل خود بنویسیم در یک فایل جداگانه قرار می دهیم. برای این کار یک فایل جدید به نام env. (در پوشه پروژه خودتان که برای من VUE-CLI-NEW است) ایجاد کنید. این نام یک نام خاص است و توسط CLI شناخته می شود بنابراین نمی توانید نام آن را تغییر بدهید.

شما می توانید در این فایل، مقادیری را تعریف کرده و در پروژه خود از این مقادیر مستقیما استفاده کنید. البته نحوه تعریف مقادیر حتما باید بر اساس الگوی زیر باشد:

VUE_APP_NAME = value

یادتان باشد که فایل env. اصلا جاوا اسکریپت نیست بنابراین نیازی به const یا let یا علامت ; در انتهای خط ندارد و باید به جای NAME از نام دلخواه خودتان استفاده کنید. همچنین استفاده از VUE_APP در ابتدای نام برای تزریق شدن در برنامه شما الزامی است. اگر نام خود را با ساختار دیگری غیر از این بنویسید، دیگر نمی توانید در کامپوننت های خود از آن استفاده کنید. با این حساب می توان گفت:

VUE_APP_URL = https://dev.api.com

از این به بعد من می توانم از VUE_APP_URL در هر قسمتی از پروژه خودم استفاده کنم. حتی در شیء VUE یا store خود که با vuex ساخته اید یا router و هر جایی که فکرش را بکنید. البته یک استثناء فنی وجود دارد. ما نمی توانیم کد خود را به شکل زیر بنویسیم:

<p>{{ VUE_APP_URL }}</p>

چرا؟ به دلیل اینکه String interpolation برای خصوصیات موجود در data کار می کند و با اینکه مقدار VUE_APP_URL در همه جا هست، اما به عنوان یک خصوصیت در Data برنامه وجود ندارد. بنابراین باید ابتدا آن را به عنوان یک خصوصیت در data تعریف کنیم:

<script>
export default {
  data() {
    return {
      url: process.env.VUE_APP_URL
    };
  }
};
</script>

برای دسترسی به مقادیر فایل Env همیشه باید ابتدا به process.env دسترسی داشته باشید. حالا می توانیم در قسمت Template از کامپوننت خودمان بگوییم:

<p>{{ url }}</p>

البته برای اینکه این کد کار کند باید یک بار dev server (همان دستور npm run serve) را غیر فعال کرده (کلید های Ctrl + C) و سپس دوباره npm run serve را اجرا کنید. حالا اگر مقدار را در فایل env تغییر دهید، در همه جای برنامه شما تغییر خواهد کرد.

مسئله جالب تر این است که ما در اصل چندین فایل env داریم!

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

بنابراین اگر کد زیر را درون env.development. تعریف کنیم، فقط هنگامی که از npm run serve استفاده کنیم، از مقادیر درون آن استفاده خواهد شد. همچنین برای env.production. فقط هنگام npm run build و برای env.test. فقط هنگام npm run test استفاده می شود.

سوال: اگر فایل env. را تعریف کرده و در کنارش فقط فایل env.development. را داشته باشیم، هنگام اجرای npm run serve از کدام فایل استفاده خواهد شد؟

پاسخ: در چنین حالتی اولویت با فایلی است که دقیقا مشخص کند مربوط به چه بخشی است بنابراین با اجرای npm run serve از فایل env.development. استفاده می شود. فایل env. خالی نیز به برای حالت production استفاده خواهد شد.

این یکی از قابلیت های بسیار کاربردی در نسخه جدید Vue CLI است که اگر به صورت هوشمند از آن استفاده کنید، به شدت به نفع شما خواهد بود. البته لازم به ذکر است که برنامه های کوچک به ندرت از آن استفاده می کنند و معمولا قابلیتی برای برنامه های متوسط به بالا محسوب می شود، گرچه که الزامی در استفاده از آن نیست.