متغيرات Module

يغطي هذا القسم كل المتغيرات المتاحة داخل الكود الذي تم تجميعه بواسطة webpack. تستطيع modules الوصول إلى بعض بيانات عملية compilation عبر module ومتغيرات أخرى.

module.loaded (NodeJS)

تكون قيمته false إذا كان module يُنفّذ حاليًا، وتكون true إذا اكتمل التنفيذ المتزامن.

module.hot (خاص بـ webpack)

يوضح ما إذا كانت Hot Module Replacement مفعّلة أم لا، ويوفر واجهة للتعامل معها. راجع صفحة HMR API للتفاصيل.

module.id (CommonJS)

معرّف module الحالي.

console.log(import.meta.url);

export default

يحدد القيمة التي سترجع عندما يستورد مستخدم آخر هذا module باستخدام import. القيمة الافتراضية تكون كائنًا جديدًا.

export default function doSomething() {
  // افعل شيئًا...
}

exports (CommonJS)

تسمح named exports بتصدير عدة متغيرات أو دوال أو كائنات من module واحد. بخلاف default export، يجب استخدام الاسم نفسه تمامًا عند استيراد هذه القيم.

export const someValue = 42;
export const anObject = {
  x: 123,
};
export function doSomething() {
  // افعل شيئًا
}

global (NodeJS)

راجع global في node.js.

لأسباب توافقية، يضيف webpack polyfill للمتغير global افتراضيًا.

__dirname (NodeJS)

بحسب خيار الإعداد node.__dirname:

• false: غير معرّف.
• mock: يساوي '/'.
• true: __dirname في node.js.

إذا استُخدم داخل expression تتم قراءته بواسطة Parser، فسيتم التعامل مع خيار الإعداد كأنه true.

import.meta

يعرض import.meta بيانات وصفية مرتبطة بسياق JavaScript module، مثل URL الخاص بالـ module. وهو متاح فقط في ESM.

انتبه إلى أن webpack لا يدعم الوصول المباشر إلى import.meta. بدلًا من ذلك، استخدم خصائصه أو استخدم destructuring assignment. مثلًا:

// سيعرض webpack تحذيرًا لهذا الاستخدام
Object.keys(import.meta);

// هذا الاستخدام صحيح
console.log(import.meta.url);
const { url } = import.meta;

import.meta.url

ترجع URL مطلقًا بصيغة file: للـ module.

src/index.js

console.log(import.meta.url); // يخرج شيئًا مثل `file:///path/to/your/project/src/index.js`

import.meta.webpack

ترجع إصدار webpack.

src/index.js

console.log(import.meta.webpack); // يخرج `5` في webpack 5

import.meta.webpackHot

خاص بـ webpack. هو alias لـ module.hot، لكن يمكن استخدام import.meta.webpackHot داخل strict ESM، بينما لا يمكن استخدام module.hot هناك.

import.meta.webpackContext

ترجع القيمة نفسها التي ترجعها require.context، لكنها تعمل فقط مع javascript/auto وjavascript/esm.

• النوع:

  Copy

  (
    request: string,
    options?: {
      recursive?: boolean;
      regExp?: RegExp;
      include?: RegExp;
      exclude?: RegExp;
      preload?: boolean | number;
      prefetch?: boolean | number;
      chunkName?: string;
      exports?: string | string[][];
      mode?: "sync" | "eager" | "weak" | "lazy" | "lazy-once";
    },
  ) => webpack.Context;

• متاح منذ: 5.70.0+

• مثال:

  Copy

  const contextRequire = import.meta.webpackContext(".", {
    recursive: false,
    regExp: /two/,
    mode: "weak",
    exclude: /three/,
  });

import.meta.main

ترجع boolean يوضح ما إذا كان module الحالي هو entry point.

src/index.js (نقطة entry)

console.log(import.meta.main); // true

src/utils.js (ليس نقطة entry)

console.log(import.meta.main); // false

هذا مفيد للمنطق الشرطي الذي يجب أن يعمل فقط داخل entry modules، بطريقة تشبه فحص require.main === module في Node.js.

import.meta.env

تسمح بالوصول إلى environment variables من مصادر متعددة. import.meta.env هو object يتصرف بطريقة قريبة من process.env، مما يتيح لك الوصول إلى متغيرات البيئة المعرّفة عبر plugins وإعدادات webpack المختلفة.

webpack.config.js

import webpack from "webpack";

export default {
  mode: "production", // يتم ضبط NODE_ENV تلقائيًا إلى "production"
  dotenv: {
    prefix: "WEBPACK_", // اكشف فقط المتغيرات التي تبدأ بالبادئة WEBPACK_
  },
  plugins: [
    // يكشف EnvironmentPlugin المتغيرات من process.env
    new webpack.EnvironmentPlugin({
      API_URL: "https://api.example.com",
    }),
    // يسمح DefinePlugin بتعريفات مخصصة
    new webpack.DefinePlugin({
      "import.meta.env.CUSTOM_VAR": JSON.stringify("custom_value"),
    }),
  ],
};

src/index.js

// الوصول إلى environment variables
console.log(import.meta.env.NODE_ENV); // "production" من mode
console.log(import.meta.env.API_URL); // قيمة من EnvironmentPlugin أو process.env
console.log(import.meta.env.CUSTOM_VAR); // "custom_value" من DefinePlugin

// فحص النوع
console.log(typeof import.meta.env); // "object"

// فحص truthy
if (import.meta.env) {
  // import.meta.env قيمته truthy
}

// الوصول إلى خصائص غير موجودة يرجع undefined
if (!import.meta.env.NOT_EXIST) {
  // NOT_EXIST تساوي undefined/falsy
}

// destructuring assignment
const { NODE_ENV, API_URL } = import.meta.env;

مصادر environment variables:

1. خيار mode: يضبط import.meta.env.NODE_ENV تلقائيًا بناءً على وضع webpack، مثل development أو production أو none.

2. EnvironmentPlugin: يكشف المتغيرات من process.env أو يوفر قيمًا افتراضية.

3. DotenvPlugin: يحمّل المتغيرات من ملفات .env. لا تُكشف إلا المتغيرات التي تملك البادئة المحددة، والقيمة الافتراضية هي WEBPACK_.

4. DefinePlugin: يسمح بتعريفات مخصصة باستخدام النمط "import.meta.env.*".

__filename (NodeJS)

بحسب خيار الإعداد node.__filename:

• false: غير معرّف.
• mock: يساوي '/index.js'.
• true: __filename في node.js.

إذا استُخدم داخل expression تتم قراءته بواسطة Parser، فسيتم التعامل مع خيار الإعداد كأنه true.

__resourceQuery (خاص بـ webpack)

يمثل resource query الخاص بالـ module الحالي. إذا كان لديك الاستدعاء التالي، فستكون query string متاحة داخل file.js.

import "file.js?test";

file.js

__resourceQuery === "?test";

__webpack_public_path__ (خاص بـ webpack)

يساوي خيار الإعداد output.publicPath.

__webpack_require__ (خاص بـ webpack)

دالة require الخام. لا يقرأ Parser هذا التعبير لاستخراج dependencies.

__webpack_chunk_load__ (خاص بـ webpack)

دالة تحميل chunk الداخلية. تأخذ argument واحدًا:

• chunkId معرّف chunk المطلوب تحميله.

مثال لتحميل chunks من public path بديل عند فشل أحد المسارات:

const originalLoad = __webpack_chunk_load__;
const publicPaths = ["a", "b", "c"];
__webpack_chunk_load__ = async (id) => {
  let error;
  for (const path of publicPaths) {
    __webpack_public_path__ = path;
    try {
      return await originalLoad(id);
    } catch (err) {
      error = err;
    }
  }
  throw error;
};
import("./module-a").then((moduleA) => {
  // الآن سيستخدم webpack دالة __webpack_chunk_load__ المخصصة لتحميل chunk
});

__webpack_module__ (خاص بـ webpack)

يوفر وصولًا إلى module الحالي. لا يكون module متاحًا داخل strict ESM.

__webpack_module__.id (خاص بـ webpack)

يوفر وصولًا إلى ID الخاص بالـ module الحالي، أي module.id. لا يكون module متاحًا داخل strict ESM.

__webpack_modules__ (خاص بـ webpack)

يوفر وصولًا إلى الكائن الداخلي الذي يحتوي على كل modules.

__webpack_hash__ (خاص بـ webpack)

يوفر وصولًا إلى hash الخاص بالـ compilation.

__webpack_get_script_filename__ (خاص بـ webpack)

function (chunkId)

يوفر اسم ملف chunk من خلال id الخاص به.

يمكن إعادة تعيينه، وهذا يسمح بتغيير اسم الملف الذي يستخدمه runtime. مثلًا، يمكن استخدامه لتحديد المسار النهائي عند تحميل chunks.

const oldFn = __webpack_get_script_filename__;

__webpack_get_script_filename__ = (chunkId) => {
  const filename = oldFn(chunkId);
  return `${filename}.changed`;
};

__non_webpack_require__ (خاص بـ webpack)

ينشئ دالة require لا يقرأها webpack. يمكن استخدامها لعمل أشياء متقدمة مع دالة require عامة إذا كانت متاحة.

__webpack_global__ (خاص بـ webpack)

هو alias لـ __webpack_require__. عندما تُحزّم bundles الخاصة بـ webpack مرة أخرى، مثل استخدام output محزّم سابقًا كـ input، سيعيد CompatibilityPlugin تسمية __webpack_require__ القادم من bundle السابق لتجنب التعارضات. يضمن __webpack_global__ الوصول دائمًا إلى دالة __webpack_require__ الخاصة بالـ compilation الحالي.

src/module.js

__webpack_global__.myProperty = "value";

__webpack_exports_info__ (خاص بـ webpack)

داخل modules، يكون __webpack_exports_info__ متاحًا للسماح بفحص معلومات exports:

• __webpack_exports_info__ يساوي دائمًا true.

• __webpack_exports_info__.<exportName>.used تكون false عندما يكون export معروفًا أنه غير مستخدم، وتكون true في غير ذلك.

• __webpack_exports_info__.<exportName>.useInfo تكون:

  • false عندما يكون export معروفًا أنه غير مستخدم.
  • true عندما يكون export معروفًا أنه مستخدم.
  • null عندما قد يعتمد استخدام export على شروط runtime.
  • undefined عندما لا تتوفر معلومات.

• __webpack_exports_info__.<exportName>.provideInfo تكون:

  • false عندما يكون export معروفًا أنه غير مقدّم.
  • true عندما يكون export معروفًا أنه مقدّم.
  • null عندما قد يعتمد تقديم export على شروط runtime.
  • undefined عندما لا تتوفر معلومات.

• يمكن الوصول إلى معلومات nested exports، مثل: __webpack_exports_info__.<exportName>.<exportName>.<exportName>.used.

• افحص ما إذا كان يمكن تغيير أسماء exports باستخدام __webpack_exports_info__.<name>.canMangle.

__webpack_is_included__ (خاص بـ webpack)

يفحص ما إذا كان module المحدد مضمنًا في bundle بواسطة webpack أم لا.

if (__webpack_is_included__("./module-a.js")) {
  // افعل شيئًا
}

__webpack_base_uri__ (خاص بـ webpack)

يغيّر base URI وقت التشغيل.

• النوع: string

• متاح منذ: 5.21.0+

• مثال:

  Copy

  __webpack_base_uri__ = "https://example.com";

__webpack_runtime_id__

يوفر وصولًا إلى id الخاص بـ runtime للـ entry الحالي.

هذه ميزة خاصة بـ webpack، وهي متاحة منذ webpack 5.25.0.

src/index.js

console.log(__webpack_runtime_id__ === "main");

DEBUG (خاص بـ webpack)

يساوي خيار الإعداد debug.