DefinePlugin

يستبدل DefinePlugin المتغيرات الموجودة في كودك بقيم أو تعابير أخرى وقت التجميع. يفيد هذا عندما تريد سلوكًا مختلفًا بين builds الخاصة بالتطوير وbuilds الخاصة بالإنتاج. مثلًا، إذا كنت تريد تشغيل logging أثناء التطوير فقط، يمكنك استخدام constant عام يحدد هل يتم تسجيل الرسائل أم لا. هنا يظهر دور DefinePlugin: تعرّف القيمة مرة واحدة، ثم يستخدمها webpack أثناء بناء نسخ التطوير أو الإنتاج.

new webpack.DefinePlugin({
  // Definitions...
});

الاستخدام

كل key تمرره إلى DefinePlugin يكون identifier واحدًا أو عدة identifiers مفصولة بـ ..

• إذا كانت القيمة string، فستُستخدم كمقطع كود.
• إذا لم تكن القيمة string، فسيتم تحويلها إلى string، ويشمل ذلك functions.
• إذا كانت القيمة object، فسيتم تعريف كل المفاتيح داخله بالطريقة نفسها.
• إذا أضفت typeof قبل key، فسيُعرّف فقط عند استخدام typeof.

تُحقن القيم مباشرة داخل الكود، وهذا يسمح لخطوة التصغير بإزالة الشروط غير المفيدة.

new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify("5fa3b9"),
  BROWSER_SUPPORTS_HTML5: true,
  TWO: "1+1",
  "typeof window": JSON.stringify("object"),
  "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
});

console.log(`Running App version ${VERSION}`);
if (!BROWSER_SUPPORTS_HTML5) require("html5shiv");

if (!PRODUCTION) {
  console.log("Debug info");
}

if (PRODUCTION) {
  console.log("Production log");
}

بعد المرور عبر webpack بدون تصغير، يصبح الناتج:

if (!true) {
  console.log("Debug info");
}
if (true) {
  console.log("Production log");
}

وبعد خطوة التصغير يصبح الناتج:

console.log("Production log");

Feature Flags

يمكنك تفعيل أو تعطيل ميزات في build الإنتاج أو التطوير باستخدام feature flags.

new webpack.DefinePlugin({
  NICE_FEATURE: JSON.stringify(true),
  EXPERIMENTAL_FEATURE: JSON.stringify(false),
});

Service URLs

يمكنك استخدام عنوان خدمة مختلف في builds الخاصة بالإنتاج أو التطوير:

new webpack.DefinePlugin({
  SERVICE_URL: JSON.stringify("https://dev.example.com"),
});

قيم وقت التشغيل عبر runtimeValue

function (getterFunction, [string] | true | object) => getterFunction()

يمكنك تعريف متغيرات تعتمد قيمها على ملفات معيّنة، وتُعاد قراءة هذه القيم عندما تتغير تلك الملفات في نظام الملفات. هذا يعني أن webpack سيعيد البناء عندما تتغير الملفات التي يراقبها.

توجد وسيطتان لدالة webpack.DefinePlugin.runtimeValue:

• الوسيطة الأولى هي دالة function(module, key, version) يجب أن ترجع القيمة التي ستُسند إلى التعريف.
• الوسيطة الثانية يمكن أن تكون array لمسارات الملفات التي يجب مراقبتها، أو true لوضع علامة أن module غير قابل للتخزين في cache. ومنذ 5.26.0، يمكن أن تكون object يحتوي الخصائص التالية:
  • fileDependencies?: string[]: قائمة الملفات التي تعتمد عليها الدالة.
  • contextDependencies?: string[]: قائمة المجلدات التي تعتمد عليها الدالة.
  • missingDependencies?: string[]: قائمة ملفات غير موجودة تعتمد عليها الدالة.
  • buildDependencies?: string[]: قائمة build dependencies التي تعتمد عليها الدالة.
  • version?: string | () => string: إصدار الدالة.

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const fileDep = path.resolve(__dirname, "sample.txt");

new webpack.DefinePlugin({
  BUILT_AT: webpack.DefinePlugin.runtimeValue(Date.now, {
    fileDependencies: [fileDep],
  }),
});

ستكون قيمة BUILT_AT هي وقت آخر تحديث للملف 'sample.txt' في نظام الملفات، مثل 1597953013291.