استفاده از متغیرهای فایل env در webpack و اپلیکیشن

اگر React رو با create-react-app کدنویسی کرده باشید حتما در Documentation اش دیدید که گفته شده برای اضافه کردن متغیرهای سراسری در برنامه میشه از فایل هایی با اسم env. استفاده کرد و مثلا آدرس اصلی API یا بقیه اطلاعات مهم و مشترک رو داخل فایل ذخیره و بعدا بهش دسترسی داشت.

اگر دارید webpack رو خودتون تنظیم می کنید و پروژه رو از صفر می نویسید باید با یک پکیج این قابلیت رو به اپلیکیشن خودتون اضافه کنید و اصلا هم هیچ کار سختی نیست !!!

استفاده از پکیج dotenv-webpack

ابتدا در root پروژه این پکیج رو نصب کنید:

npm install --save-dev dotenv-webpack

خوب حالا این پکیج به پروژه اضافه شد و حالا باید به webpack خودتون اضافه اش کنید. در بالای فایل config اینجوری بنویسید:

const Dotenv = require('dotenv-webpack');

و در آرایه Plugins هم اینجوری بعنوان پلاگین لودش کنید:

module.exports = {  
        plugins: [    new Dotenv()  ]
};

به همین راحتی به پروژه اضافه شد. حالا به root پروژه برید و یک فایل به نام env. بسازید. داخلش می تونید به این شکل هر چقدر که خواستید متغیرهارو اضافه کنید:

DB_HOST=127.0.0.1
DB_USER=root
DB_PASS=123456

و اینجوری میشه از متغیرها استفاده کرد:

console.log(process.env.DB_PASS );

البته می تونید اطلاعات بیشتر در مورد این package رو در لینک زیر مطالعه کنید:

https://www.npmjs.com/package/dotenv-webpack

سوالی بود در بخش نظرات مطرح بفرمایید

موفق باشید