أداة تصور تبعيات حزمة JS

ما الذي تجده هذه الأداة

تُرسل المواقع الحديثة ملف JavaScript واحدًا مبنيًا من مئات الملفات المصدرية. تنظر هذه الأداة داخل ذلك الملف وتحاول استعادة حدود الوحدات الأصلية — بغضّ النظر عن أداة التجميع، معتمدة على شكل شجرة AST الحقيقي بدل مطابقة النص، التي تنهار فور تصغير الشيفرة.

تحاول بهذا الترتيب:

1. شكل function-map في webpack — دالة تُستدعى فورًا (IIFE) وسيطُها كائن أو مصفوفة، كل عنصر فيها دالة بالشكل (module, exports, require). يكتشف هذا أيضًا الغلاف الكلاسيكي webpackUniversalModuleDefinition مهما كان عمق موضع النداء الحقيقي لخريطة الوحدات.
2. شكل chunk-push في webpack — (self.webpackChunkXxx = self.webpackChunkXxx || []).push([ids, {modules}, runtime])، وهو الشكل الذي ينتجه تقسيم الشيفرة في webpack 5.
3. تعليقات Rollup / esbuild / Vite — تحتفظ بعض البنى غير المصغّرة من هذه العائلة بتعليق سطري بالشكل // المسار/إلى/الملف.js قبل شيفرة كل وحدة. عند وجودها تصبح حدود الوحدات.
4. البديل الصادق — إن لم يُعثر على أي مما سبق (وغالبًا لأن الحزمة بناء مصغّر ومسطّح النطاق من Rollup/esbuild/Vite بلا أي علامات حدود)، تعلن الأداة ذلك وتسرد الإعلانات ذات المستوى الأعلى في الملف بدل اختلاق قائمة وحدات.

كيفية قراءة النتيجة

عند العثور على وحدات، تسرد كل واحدة ما تستدعيه عبر require() بمعرّف وحدة حرفي، وبالقدر نفسه من الفائدة، أي الوحدات الأخرى تعتمد عليها — لتتبع "ماذا سينكسر لو أزلت هذه" في أي اتجاه دون تنفيذ أي شيء.

الصدق في التصميم

لا يمكن حل استدعاءات require الديناميكية (require(متغير)) ولا import() بشكل ثابت، لذا تُترك ببساطة خارج قائمة التبعيات — وقد يقلل هذا من عدد التبعيات لكنه لن يختلق واحدة أبدًا. وبالمثل، معرّف وحدة يشير إليه استدعاء require() وليس موجودًا في الخريطة المكتشفة يظل يظهر كهدف لحافة رغم عدم وجود بطاقة خاصة به؛ وهذا يعني عادة أنه يعيش في جزء آخر لم يُلصق هنا.

الخصوصية

كل شيء يعمل في متصفحك عبر محلّل JavaScript حقيقي (acorn). الحزمة التي تلصقها أو ترفعها لا تُرسل إلى أي مكان أبدًا.