EnvironmentPlugin

يُعد EnvironmentPlugin اختصارًا لاستخدام DefinePlugin مع مفاتيح process.env.

الاستخدام

يقبل EnvironmentPlugin إما array من المفاتيح، أو object يربط كل مفتاح بقيمته الافتراضية.

new webpack.EnvironmentPlugin(["NODE_ENV", "DEBUG"]);

هذا يعادل استخدام DefinePlugin بالشكل التالي:

new webpack.DefinePlugin({
  "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
  "process.env.DEBUG": JSON.stringify(process.env.DEBUG),
});

الاستخدام مع القيم الافتراضية

يمكنك أيضًا تمرير object إلى EnvironmentPlugin يربط المفاتيح بقيمها الافتراضية. تُستخدم القيمة الافتراضية إذا كان المفتاح غير موجود في process.env.

new webpack.EnvironmentPlugin({
  NODE_ENV: "development", // use 'development' unless process.env.NODE_ENV is defined
  DEBUG: false,
});

مثال:

لنرَ ماذا يحدث عند تشغيل إعداد EnvironmentPlugin السابق على ملف اختبار اسمه entry.js:

if (process.env.NODE_ENV === "production") {
  console.log("Welcome to production");
}
if (process.env.DEBUG) {
  console.log("Debugging output");
}

عند تنفيذ NODE_ENV=production webpack في الطرفية للبناء، يتحول entry.js إلى الشكل التالي:

if ("production" === "production") {
  // <-- 'production' from NODE_ENV is taken
  console.log("Welcome to production");
}
if (false) {
  // <-- default value is taken
  console.log("Debugging output");
}

أما تشغيل DEBUG=false webpack فينتج عنه:

if ("development" === "production") {
  // <-- default value is taken
  console.log("Welcome to production");
}
if ("false") {
  // <-- 'false' from DEBUG is taken
  console.log("Debugging output");
}

حالة استخدام: إصدار Git

يوفّر إعداد EnvironmentPlugin التالي القيمتين process.env.GIT_VERSION، مثل "v5.4.0-2-g25139f57f"، وprocess.env.GIT_AUTHOR_DATE، مثل "2020-11-04T12:25:16+01:00"، بناءً على آخر commit في مستودع Git:

import childProcess from "node:child_process";

function git(command) {
  return childProcess.execSync(`git ${command}`, { encoding: "utf8" }).trim();
}

new webpack.EnvironmentPlugin({
  GIT_VERSION: git("describe --always"),
  GIT_AUTHOR_DATE: git("log -1 --format=%aI"),
});

DotenvPlugin

يسمح plugin خارجي وهو DotenvPlugin (dotenv-webpack) بكشف جزء من متغيرات dotenv أو كلها:

// .env
DB_HOST=127.0.0.1
DB_PASS=foobar
S3_API=mysecretkey
new Dotenv({
  path: "./.env", // Path to .env file (this is the default)
  safe: true, // load .env.example (defaults to "false" which does not use dotenv-safe)
});
·تعديل هذه الصفحة
السابق ›
DllPlugin

1 مساهم

RlxChap2