react env

React Env - تكوين بيئة وقت التشغيل

يملأ بيئتك من ملفات .env في وقت التشغيل بدلاً من وقت البناء .

• Isomorphic - خادم ومستعرض متوافق.
• يدعم توليد الموقع الثابت.
• يدعم العديد من ملفات .env .

ReadMe

• أمثلة
• ابدء
• أولوية الملف
• حالات الاستخدام الشائعة
  • تهيئة محددة للبيئة
  • تحديد ملف ENV
  • باستخدام نقطة دخول Docker
• الحجج والمعلمات

أمثلة

• مثال باستخدام next.js (انظر readme.md)
• مثال باستخدام إنشاء تطبيق React (انظر README.MD)

ابدء

تقوم هذه الحزمة بإنشاء ملف __ENV.js من ملفات .env متعددة تحتوي على متغيرات بيئة مدرجة في القائمة البيضاء تحتوي على بادئة REACT_APP_ .

 < script src =" /public/__ENV.js " />

في المتصفح ، ستكون متغيراتك متوفرة في window.__ENV.REACT_APP_FOO وعلى process.env.REACT_APP_FOO الخادم. لقد قمنا بتضمين وظيفة مساعد لجعل استرداد القيمة أسهل:

 # .env
REACT_APP_NEXT= " Next.js "
REACT_APP_CRA= " Create React App "
REACT_APP_NOT_SECRET_CODE= " 1234 "

يصبح ...

 import env from "@beam-australia/react-env" ;

export default ( props ) => (
  < div >
    < small >
      Works in the browser: < b > { env ( "CRA" ) } </ b > .
    </ small >
    < small >
      Also works for server side rendering: < b > { env ( "NEXT" ) } </ b > .
    </ small >
    < form >
      < input type = "hidden" defaultValue = { env ( "NOT_SECRET_CODE" ) } />
    </ form >
    < small >
      Entire safe environment:
      < pre >
        < code > { { JSON . stringify ( env ( ) ) } } </ code >
      </ pre >
    </ small >
  </ div >
) ;

.ENV طلب ملف الأولوية

لقد قمنا بتنفيذ بعض التخلف عن السداد التي لها ترتيب الأولوية التالي:

1. {path-to-file} // from the --path, -p argument
2. .env.{key} // from the --env, -e argument
3. .env.local
4. .env

التكوين الخاص بك متاح في المتصفح و process.env على الخادم. نقترح عليك إضافة .env.local إلى .gitignore .

حالات الاستخدام الشائعة

تهيئة محددة للبيئة

تسمح الأطر مثل التالية ببعض الإعدادات الافتراضية اللطيفة مثل .env.local, .env.production, .env . يحتوي هذا على القيود التي قد ترغب في تشغيل تطبيقك في بيئات مختلفة مثل "التدريج والتكامل و QA" ولكن لا يزال يبني تطبيق "إنتاج" مع NODE_ENV=production . مع React-ENV هذا ممكن:

 # .env.staging
REACT_APP_API_HOST= " api.staging.com "
# .env.production
REACT_APP_API_HOST= " api.production.com "
# .env.qa
REACT_APP_API_HOST= " api.qa.com "
# .env.integration
REACT_APP_API_HOST= " api.integration.com "
# .env.local
REACT_APP_API_HOST= " api.example.dev "
# .env
REACT_APP_API_HOST= " localhost "

من أجل التدريج ، يمكنك ببساطة تعيين APP_ENV=staging حيث تقوم بتشغيل تطبيقك:

 {
  ...
  "scripts": {
    "start": "react-env --env APP_ENV -- next start" // where .env.${APP_ENV}
  }
  ...
}

وبالتالي REACT_APP_API_HOST=api.staging.com في بيئة التدريج الخاصة بك.

يرجى مراعاة أنه يتعين عليك تمرير اسم متغير البيئة إلى --env قيمة له.

• ✔ الاستخدام الصحيح (MacOS): APP_ENV=staging react-env --env APP_ENV -- next start
• خطأ شائع: react-env --env staging -- next start

تحديد ملف ENV

يمكنك أيضًا تحديد المسار إلى ملف ENV محدد:

 {
  ...
  "scripts": {
    "start": "react-env --path config/.env.defaults -- next start"
  }
  ...
}

يمكنك استخدام أي مجموعة من هاتين الوسيطتين جنبا إلى جنب مع الافتراضي .env, .env.local لبناء تكوين وقت التشغيل الخاص بك.

تحديد بادئة لمتغيرات البيئة المدرجة في القائمة البيضاء

يمكنك أيضًا تحديد بادئة متغيرات البيئة المدرجة في القائمة البيضاء:

 {
  ...
  "scripts": {
    "start": "react-env --prefix NEXT_APP -- next start"
  }
  ...
}

 # .env
NEXT_APP_NEXT= " Next.js "
NEXT_APP_CRA= " Create React App "
NEXT_APP_NOT_SECRET_CODE= " 1234 " 

باستخدام البادئة مع Jest

تحتاج إلى إضافة متغير REACT_ENV_PREFIX env قبل الأمر Jest إذا كنت تستخدم env() أثناء الاختبارات الخاصة بك:

 {
  ...
  "scripts": {
    "test": "REACT_ENV_PREFIX=NEXT_APP jest --maxWorkers=3"
  }
  ...
}

باستخدام نقطة دخول Docker

من الممكن استخدام هذه الحزمة كنص ENTRYPOINT داخل Dockerfile. سيؤدي ذلك إلى إنشاء ملف التكوين __ENV.js عند حذاء الحاوية والسماح لتبقى البرامج النصية لـ package.json دون تغيير. بالطبع يجب أن تكون node الثنائية موجودة في الحاوية الخاصة بك.

 FROM node:alpine

ENTRYPOINT yarn react-env --env APP_ENV

CMD yarn start

الحجج والمعلمات

$ react-env < args > -- < command >

• <command>

يمكنك تمرير أمر ، مثل ملف إدخال NodeJS إلى أداة react-env CLI. على سبيل المثال react-scripts ، next dev ، next start

• --env ، -e (الافتراضي: فارغ)

حدد اسم متغير البيئة الحالي ، الذي تكون قيمته اسم البيئة التي تريدها ، لجعل React-env تحليل بيئة محددة. على سبيل المثال ، يمكنك تعيين APP_ENV=staging أولاً ثم تطبيق علامة --env APP_ENV . سيكون React-ENV تحميل .env.staging, .env.local, .env بهذا الترتيب مع أخذ الأخير الأولوية.

• --path ، -p (افتراضي: فارغ)

حدد ملف env محدد لتحميل eg react-env --path .env.testing سوف يتم تحميل .env.testing, .env.local, .env بهذا الترتيب مع أخذ الأولوية الأخيرة. مزيج من --env APP_ENV --path testing حيث APP_ENV=staging .env.testing, .env.staging, .env.local, .env كترتيب الأولوية.

• --dest ، -d (الافتراضي: ./public)

قم بتغيير الوجهة الافتراضية لإنشاء ملف __ENV.js .

• --prefix (افتراضي: React_app)

قم بتغيير البادئة الافتراضية لمتغيرات ENV ذات القائمة البيضاء. بالنسبة إلى exemple react-env --prefix CUSTOM_PREFIX فإن متغيرات قائمة بيضاء مثل: CUSTOM_PREFIX_PUBLIC_KEY=my-public-key

• --debug (افتراضي: خطأ)

تمكين تصحيح التصحيح للرد. سيؤدي ذلك إلى تسجيل متغيرات بيئة المستعرض المحملة في وحدة التحكم الخاصة بك عند تشغيل react-env --debug

3.xx كسر التغييرات

---

كتغيير كبير في كسر ، لقد أسقطنا القدرة على تحديد ملفات محددة عبر الوسيطة --env . تحدد هذه الوسيطة الآن ملف البيئة ليتم تحليلها اعتمادًا على البيئة الجارية. على سبيل المثال --env APP_ENV أو -e APP_ENV حيث APP_ENV=staging يقرأ في .env.staging . من الشائع جدًا أن يكون للمنصات البيئات staging, qa, integration التي لا تزال مدمجة في وضع "الإنتاج" مع NODE_ENV=production . هذا يسمح لهذا Usecase وغيرها الكثير.

-لا تزال قادرًا على تحديد الملفات عبر الوسيطة --path, -p .

---

لقد أسقطنا أيضًا إضافة NODE_ENV بشكل افتراضي لأن هذا كان مخاطرة أمنية.

---

تم تسمية الملف الآن __ENV.js

---

أمر DePandand الآن بالتنسيق react-env <args> -- <command>