جافاسكريبت - متغيرات البيئة في babel.config.js

نحن بحاجة إلى تعديل بعض الإعدادات/المتغيرات في تطبيق React Native الخاص بنا (المبني باستخدام Expo) اعتمادًا على البيئة (محلية/تطوير/مرحلية/إنتاج). لقد نظرت في عدد من المكتبات المخصصة لهذا الغرض لكن يبدو أن جميعها تحتوي على خلل يتسبب في الفشل في حالة الاستخدام الخاصة بنا:

• dotenv (يتوقف عن العمل لأنه يحاول الوصول إلى 'fs' أثناء وقت التشغيل، عندما لم يعد متاحًا لأنه ليس حزمة جافا سكريبت نقية ولا يمكن تجميعه بواسطة Expo)
• react-native-config (لا يمكن استخدامه مع Expo لأنه يحتاج إلى رمز أصلي كجزء من الإضافة)
• react-native-dotenv (يعمل إلى حد ما لكنه يخزن الإعدادات داخليًا ويتجاهل أي تغييرات على .env حتى يتم تعديل الملف الذي يستورد المتغير)

كخيار أنظف لا يتطلب ملحقات طرف ثالث، أفكر في استخدام خيار env الخاص بـ babel وقائمة جميع البيئات ككائنات JSON منفصلة داخل babel.config.js. ومع ذلك، لا أرى الكثير من الوثائق أو الأمثلة على هذا. هل أضيف فقط حقل env على نفس مستوى presets وplugins الذي يحتوي على الحقول production وdevelopment، إلخ، كما في المثال أدناه:

module.exports = (api) => {
    api.cache(true);
    return {
        presets: [...],
        env: {
            development: {
                CONFIG_VAR: 'foo'
            },
            production: {
                CONFIG_VAR: 'bar'
            }
        }
    }
}

هل سينجح ذلك؟ وكيف سأتمكن من الوصول إلى هذا CONFIG_VAR لاحقًا في الكود؟

الإجابة رقم 1

لقد واجهت نفس المشاكل عندما حاولت إعداد متغيرات البيئة في مشروع Expo الخاص بي. لقد استخدمت babel-plugin-inline-dotenv لذلك.

1. قم بتثبيت الإضافة

    npm install babel-plugin-inline-dotenv
   

2. قم بتضمين المكون الإضافي ومسار ملف .env في ملف babel.config.js الخاص بك

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    env: {
      production: {
        plugins: [["inline-dotenv",{
          path: '.env.production'
        }]]
      },
      development: {
        plugins: [["inline-dotenv",{
          path: '.env.development'
        }]]
      }
    }
  };
};

3. في ملفات .env.production أو .env.development الخاصة بك، أضف متغيرات البيئة مثل هذا:

    API_KEY='<YOUR_API_KEY>'
   

4. لاحقًا في الكود الخاص بك، يمكنك الوصول إلى المتغير أعلاه هكذا:

    process.env.API_KEY
   

للوصول إلى متغيرات البيئة الخاصة بك داخل ملف babel.config.js، استخدم حزمة dotenv بهذا الشكل:

   require('dotenv').config({ path: './.env.development' })
   console.log('API_KEY: ' + process.env.API_KEY)

   module.exports = function() {
   // ...
   }