ການໃຊ້ງານ .env (Environment Variables) ໃນ ViteJS

ການໃຊ້ງານ .env (Environment Variables) ໃນ ViteJS

ມື້ນີ້ຊິມາແນະນຳການໃຊ້ງານ file .env ໃນໂປຼເຈັກ ViteJS. ຖ້າວ່າເຮົາມີການໃຊ້ external APIs ເພື່ອເຊື່ອມຕໍ່ກັບແອັບພິເຄຊັນເຊັ່ນໃຊ້ Firebase ເຮົາກໍຄວນທີ່ຈະເກັບ API Key ເຊິ່ງເປັນຂໍ້ມູນທີ່ສຳຄັນໄວ້ໃນ .env ເຊິ່ງການຈັດເກັບແບບນີ້ຊ່ວຍໃຫ້ເຮົາເອີ້ນໃຊ້ຂໍ້ມູນທີ່ຕ້ອງການໄດ້ທຸກ file ຂອງ ໂປຼເຈັກ ເມື່ອຕ້ອງການປ່ຽນແປງຂໍ້ມູນກໍງ່າຍບໍ່ຈຳເປັນຕ້ອງໄປໄລ່ປ່ຽນທຸກບ່ອນ ແປງຢູ່ .env ບາດດຽວຈົບ.

file .env ຍັງຊ່ວຍເລື່ອງຄວາມປອດໄພເພາະເວລາເຮົາຊິຈັດເກັບ source code ໄວ້ໃນ github ຫຼື gitlab ຂໍ້ມູນຈຳພວກ API key ແມ່ນບໍ່ຄວນ push ຂຶ້ນ repo ເມື່ອຕ້ອງການປ່ອຍ production ກໍໄປກຳນົດ environment variables ໃນ hosting platform ເຊັ່ນ Heroku, Netlify ເອົາອີກເທື່ອໜຶ່ງ.

ເກິນມາຫຼາຍແລ້ວໄປເບິ່ງວິທີການ config ກັນເລີຍ

👉 ຂັ້ນຕອນທີ I

ທຳອິດໃຫ້ເຮົາຕິດຕັ້ງ package dotenv

# npm
npm install dotenv --save
# yarn
yarn add dotenv --save

👉 ຂັ້ນຕອນທີ II

ສ້າງ file .env ໃນ vitejs project ຂອງເຮົາ

your_project/.env

👉 ຂັ້ນຕອນທີ III

ກຳນົດໂຕແປເພື່ອເກັບ API key

VITE_API_KEY=(Your_API_key)
# example
VITE_API_KEY=f05e416a8e38190b404c61a40f340578

👉 ຂັ້ນຕອນທີ IV

ວິທີການເອີ້ນໃຊ້ງານໃນ file ທີ່ຕ້ອງການເລີ່ມຕົ້ນດ້ວຍ globalThis._importMeta_.env. ແລ້ວຕາມດ້ວຍຊື່ໂຕແປທີ່ເຮົາໄດ້ສ້າງໃນຂັ້ນຕອນກ່ອນໜ້ານີ້.

ຕົວຢ່າງ: ຕ້ອງການເອີ້ນໃຊ້ໃນ Firebase-config file

const firebaseConfig = {
  apiKey: globalThis._importMeta_.env.VITE_API_KEY,
  authDomain: "...",
  projectId: "...",
  ...
};

ຫຼັງຈາກນັ້ນໃຫ້ run project ໃໝ່ໂດຍໃຊ້ຄຳສັ່ງ

npm run dev

ມາຮອດນີ້ກໍຖືວ່າສຳເລັດແລ້ວອິອິ ນີ້ເປັນບົດຄວາມທຳອິດຂອງເຮົາຜິດພາດປະການໃດກໍຂໍໂທດຂໍອະໄພມານະທີ່ນີ້ດ້ວຍ ຂໍຂອບໃຈ 😊.