في سيناريو تقوم فيه بتشغيل تطبيق vite باستخدام قالب رد فعل لمشروع ما ومحاولة جلب متغير البيئة من ملف .env. نظرًا لأن الطريقة الشائعة لجلب متغيرات البيئة من .env هي استخدامprocess.env.SOMETHING للمتغير كـ:

SOMETHING=SECRETSAUCE

عند هذه النقطة سيبدو ملف vite.config.ts بالشكل التالي:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

لكن جلب المتغير لا يعمل على الفور، وهناك الكثير من الطرق لحل المشكلة. لقد جربت معظمها وشعرت بالالتزام بالطريقة البسيطة والمباشرة.

ربما مع التعريف أعلاه ومنطق الجلب الافتراضي باستخدامprocess.env.*، كنت ستحصل على خطأ Uncaught ReferenceError: لم يتم تعريف العمومي.

أجد الكثير من المراجع في Stackoverflow وأشعر بالارتباك.

إصلاح الخطأ هو تعريف العمومي في التكوين على النحو التالي.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  define: {
    global: {},
  },
})

الآن، من المحتمل أن يؤدي هذا إلى خطأ آخر أكثر شيوعًا Uncaught ReferenceError: لم يتم تعريف العملية.

مرة أخرى، هناك العديد من الحلول على الويب وبعضها قديم. أجد أن الحل الأكثر ملاءمة وسهولة في التنفيذ هو استيراد LoadEnv من مكتبة vite وبناء المنطق المخصص على النحو التالي.

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    define: {
      global: {},
      'process.env': env
    },
    plugins: [react()],
  }
})

ويحدث السحر على الفور !!

نذكر أيضًا أننا لا نحتاج إلى استخدام تبعية dotenv حيث أن جلب متغير البيئة في التعليمات البرمجية باستخدام Process.env.* يعمل بشكل جيد بدونها.

تعليمات سعيدة!