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=mysecretkeynew 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)
});


