إدارة التبعيات

التعبيرات الديناميكية في import() أو require()

يتم إنشاء سياق (context) إذا كان الطلب يحتوي على تعبيرات، لأن الوحدة الدقيقة لا تكون معروفة أثناء وقت التجميع.

على سبيل المثال، لنفترض أن لدينا بنية المجلدات التالية التي تتضمن ملفات .ejs:

example_directory
└── template/
    ├── table.ejs
    ├── table-row.ejs
    └── directory/
        └── another.ejs

عند تقييم استدعاء import() أو require() التالي:

import(`./template/${name}.ejs`);
require(`./template/${name}.ejs`);

يقوم Webpack بتحليل استدعاء import() أو require() واستخراج بعض المعلومات:

Directory: ./template
Regular expression: /^.*\.ejs$/

context module

يتم إنشاء وحدة سياق (context module). تحتوي هذه الوحدة على مراجع إلى كل الوحدات داخل ذلك المجلد التي يمكن طلبها بطلب يطابق التعبير النمطي. تحتوي وحدة السياق على خريطة تحوّل الطلبات إلى معرفات الوحدات.

مثال على الخريطة:

{
  "./table.ejs": 42,
  "./table-row.ejs": 43,
  "./directory/another.ejs": 44
}

تحتوي وحدة السياق أيضًا على بعض منطق وقت التشغيل للوصول إلى الخريطة.

هذا يعني أن الاستدعاءات الديناميكية مدعومة، لكنها ستؤدي إلى تضمين كل الوحدات المطابقة داخل الحزمة.

import.meta.webpackContext

المكافئ في ESM لـ require.context هو import.meta.webpackContext.

import.meta.webpackContext(directory, {
  recursive: true,
  regExp: /^\.\/.*$/,
  mode: "sync",
});

require.context

يمكنك إنشاء سياق خاص بك باستخدام الدالة require.context().

تتيح لك تمرير مجلد للبحث فيه، وعلامة تحدد ما إذا كان ينبغي البحث في المجلدات الفرعية أيضًا، وتعبيرًا نمطيًا لمطابقة الملفات.

يبحث Webpack عن require.context() داخل الكود أثناء عملية البناء.

الصيغة كما يلي:

require.context(
  directory,
  (useSubdirectories = true),
  (regExp = /^\.\/.*$/),
  (mode = "sync"),
);

أمثلة:

require.context("./test", false, /\.test\.js$/);
// سياق يحتوي على ملفات من مجلد test يمكن طلبها بطلب ينتهي بـ `.test.js`.

require.context("../", true, /\.stories\.js$/);
// سياق يحتوي على كل الملفات في المجلد الأب والمجلدات المتفرعة عنه التي تنتهي بـ `.stories.js`.

واجهة API الخاصة بوحدة السياق

تصدّر وحدة السياق دالة (require) تأخذ وسيطًا واحدًا: الطلب.

تحتوي الدالة المصدّرة على ثلاث خصائص: resolve و keys و id.

• resolve هي دالة تُرجع معرف الوحدة للطلب الذي تم تحليله.
• keys هي دالة تُرجع مصفوفة بكل الطلبات الممكنة التي تستطيع وحدة السياق التعامل معها.

قد يكون هذا مفيدًا إذا أردت طلب كل الملفات داخل مجلد أو كل الملفات المطابقة لنمط معين، مثال:

function importAll(r) {
  r.keys().forEach(r);
}

importAll(
  import.meta.webpackContext("../components/", {
    recursive: true,
    regExp: /\.js$/,
  }),
);

const cache = {};

function importAll(r) {
  for (const key of r.keys()) cache[key] = r(key);
}

importAll(
  import.meta.webpackContext("../components/", {
    recursive: true,
    regExp: /\.js$/,
  }),
);
// أثناء وقت البناء سيتم ملء cache بكل الوحدات المطلوبة.

• id هو معرف الوحدة الخاص بوحدة السياق. قد يكون هذا مفيدًا مع import.meta.webpackHot.accept أو module.hot.accept.