عمال الويب

ابتداءً من webpack 5، يمكنك استخدام Web Workers دون worker-loader.

الصيغة

new Worker(new URL("./worker.js", import.meta.url));

// أو خصّص اسم الجزء باستخدام التعليقات السحرية
// راجع https://webpack.js.org/api/module-methods/#magic-comments
new Worker(
  /* webpackChunkName: "foo-worker" */ new URL("./worker.js", import.meta.url),
);

تم اختيار هذه الصيغة للسماح بتشغيل الكود دون bundler، وهي متاحة أيضًا في وحدات ECMAScript الأصلية داخل المتصفح.

لاحظ أنه رغم أن واجهة Worker API تشير إلى أن باني Worker يمكنه قبول سلسلة نصية تمثل عنوان URL للسكريبت، فإن webpack 5 لا يدعم هنا إلا استخدام URL بدلًا من ذلك.

عند استخدام new Worker()، يستطيع webpack حل وحدات worker باستخدام أسماء شروط التصدير المعرفة في حقل exports الخاص بالحزمة. يتيح ذلك للحزم توفير نسخ مخصصة للـ worker من الوحدات تلقائيًا.

package.json (داخل حزمة تبعية):

{
  "name": "my-package",
  "exports": {
    ".": {
      "worker": "./index.worker.js",
      "default": "./index.js"
    }
  }
}

عند استيراد هذه الحزمة داخل سياق worker:

// داخل ملف worker
import { someFunction } from "my-package";

سيقوم Webpack تلقائيًا بحل الوحدة إلى index.worker.js عند استخدامها داخل سياق worker، دون الحاجة إلى أي إعدادات إضافية.

مثال

src/index.js

const worker = new Worker(new URL("./deep-thought.js", import.meta.url));
worker.postMessage({
  question:
    "The Answer to the Ultimate Question of Life, The Universe, and Everything.",
});
worker.onmessage = ({ data: { answer } }) => {
  console.log(answer);
};

src/deep-thought.js

globalThis.onmessage = ({ data: { question } }) => {
  self.postMessage({
    answer: 42,
  });
};

تعيين public path من متغير

عندما تعيّن __webpack_public_path__ من متغير وتستخدم publicPath بقيمة auto، ستحصل أجزاء worker على وقت تشغيل منفصل، وسيعيّن وقت تشغيل Webpack قيمة publicPath إلى مسار عام محسوب تلقائيًا، وهذا على الأرجح ليس ما تتوقعه.

لتجاوز هذه المشكلة، تحتاج إلى تعيين __webpack_public_path__ من داخل كود worker. إليك مثالًا:

worker.js

globalThis.onmessage = ({ data: { publicPath, ...otherData } }) => {
  if (publicPath) {
    __webpack_public_path__ = publicPath;
  }

  // بقية كود worker
};

app.js

const worker = new Worker(new URL("./worker.js", import.meta.url));

worker.postMessage({ publicPath: globalThis.__MY_GLOBAL_PUBLIC_PATH_VAR__ });

متى تستخدم هذا النمط:

هذا النمط مطلوب فقط عندما يحتاج worker إلى تحميل أجزاء إضافية ويكون عنوان URL الأساسي للملفات محددًا أثناء وقت التشغيل (مثلًا عند استخدام CDN أو نشر متعدد النطاقات).

نظرًا لأن workers تعمل داخل نطاق عام معزول، فقد يختلف المسار العام المكتشف تلقائيًا عن المسار المستخدم من الخيط الرئيسي. في مثل هذه الحالات، يجب تمرير المسار العام (__webpack_public_path__) صراحةً إلى worker وتعيينه داخل وقت تشغيل worker.

ملاحظة: هذه حالة استخدام متقدمة. إذا كان worker لا يحمّل أجزاء إضافية، أو كانت ملفاتك تُخدم من مسار ثابت من نفس الأصل، فعادةً لا تحتاج إلى تعيين __webpack_public_path__ يدويًا.

Node.js

يشرح هذا القسم استخدام Web Workers داخل بيئة Node.js عبر وحدة worker_threads.

تُدعم صيغة مشابهة في Node.js (>= 12.17.0):

import { Worker } from "node:worker_threads";

new Worker(new URL("./worker.js", import.meta.url));

لاحظ أن هذا متاح فقط في ESM. صيغة Worker داخل CommonJS غير مدعومة لا من webpack ولا من Node.js.