منسّخ ومصغّر JavaScript

ما هو منسِّق JavaScript؟#

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

تقوم هذه الصفحة بالوظيفتين، وهي صادقة حول كيفية عمل كلّ منهما. تنسيق يقوده الإصدار المستقل من Prettier باستخدام محلِّل Babel — المحرّك نفسه الذي تشغّله فرق كثير في محرّرها عند الحفظ، فيطابق المخرج هنا ما يُنتجه مشروعك. أمّا ضغط فمحافظ عمدًا: يُجرّد التعليقات ويطوي المسافات البيضاء مع إبقاء كلّ سطر جديد، فلا يكسر الإدراج التلقائي للفاصلة المنقوطة (ASI). إنه ليس مُصغِّرًا على مستوى الرموز مثل esbuild أو terser — لا يُعيد تسمية المتغيّرات، ولا يُسقط الكود الميّت، ولا يُشوّه أسماء الخصائص. وهذا يجعله آمنًا لتغذية النتيجة مباشرةً إلى محرّك JS، لكنه الأداة الخطأ لتقليص حزمة إنتاج. ومعرفة الفرق هو جوهر استخدامها جيّدًا.

كيفية الاستخدام#

1. الصق JavaScript في لوحة JavaScript على اليسار، أو انقر مثال لتحميل مثال قصير.
2. اختر نمط المسافة البادئة من شريط الأدوات: 2، أو 4، أو علامة جدولة. المسافتان هما الافتراضي شبه العالمي في المشاريع الحديثة؛ واختر علامة الجدولة فقط إن كنت بصدد اللصق في محرّر معدّ لها.
3. انقر فعلًا:
   • تنسيق — يُعيد طباعة الكود عبر Prettier بالإزاحة المختارة. وتُصدر الفواصل المنقوطة افتراضيًّا، مطابقةً سلوك Prettier القياسي.
   • ضغط — يُزيل تعليقات // السطرية وتعليقات /* */ الكتلية، ويطوي سلاسل المسافات وعلامات الجدولة، ويسقط المسافات البيضاء اللاحقة في كلّ سطر. وتُحفظ الأسطر الجديدة عمدًا.
4. اقرأ النتيجة في لوحة الإخراج على اليمين. واستخدم نسخ في ترويسة المخرج لأخذها. ومسح تُفرغ اللوحتين.

إن لم يستطع تنسيق تحليل مدخلك (قوس شارد، أو قالب حرفي غير منتهٍ)، يُظهر شريط الحالة رسالة خطأ Prettier بدلًا من إنتاج مخرج مكسور — فتُصلح المشكلة الحقيقية بدلًا من ملاحقة إعادة تنسيق مضلِّلة.

الميزات الرئيسية#

• محرّك Prettier حقيقي. تشغِّل تنسيق بنية Prettier المستقلة مع إضافات Babel + estree، لا مُجمِّل مصنوع يدويًّا. ما تحصل عليه هنا هو ما يُنتجه prettier --write.
• ضغط آمن لـ ASI. تُحفظ الأسطر الجديدة أثناء التصغير، فيبقى سطر اعتمد على الإدراج التلقائي للفاصلة المنقوطة يعمل. وإزالة الأسطر بعشوائية هي بالضبط كيف تُدخل أدوات «التصغير» العابرة العلل.
• يَعي السلاسل والـ regex والقوالب. يعرف مُجرّد التعليقات الفرق بين // داخل سلسلة وتعليق سطري حقيقي، وبين / بوصفها قسمة وبداية قالب regex حرفي — فلا يقرض كودك أبدًا.
• لوحتان، جاهز للنسخ. الإدخال والمخرج جنبًا إلى جنب؛ المخرج للقراءة فقط مع نسخة بنقرة واحدة.
• يعمل بالكامل في متصفحك. لا خادم خلفي ولا رفع. Prettier مُدمَج في الصفحة ويُحمَّل عند الطلب، فلا يزال النصّ البرمجي يُرضي سياسة أمان محتوى صارمة self فقط.

مثال عملي#

دالة نُسخت من قديم gist، مع تعليقات وإزاحة غير متناسقة:

المدخل:

function fetchUser(id){/*legacy: returns null when missing*/
  const url="https://example.com/users/"+id
    const opts={method:"GET",cache:"no-store"}
return fetch(url,opts).then(r=>r.json())}

انقر تنسيق بـ 2 مسافة:

function fetchUser(id) {
  /*legacy: returns null when missing*/
  const url = "https://example.com/users/" + id;
  const opts = { method: "GET", cache: "no-store" };
  return fetch(url, opts).then((r) => r.json());
}

يُصلح Prettier الإزاحة المُعوجة، ويُباعد المعامِلات بتناسق، ويُضيف الفواصل المنقوطة — لكنه يترك تعليق الكتلة حيث كان بالضبط. والآن انقر ضغط على المدخل الأصلي بدلًا من ذلك:

function fetchUser(id){
const url="https://example.com/users/"+id
const opts={method:"GET",cache:"no-store"}
return fetch(url,opts).then(r=>r.json())}

التعليق اختفى، والإزاحة الشاردة اختفت، لكنّ كلّ عبارة لا تزال تجلس على سطرها الخاص. ولاحظ ما لم يحدث: لم يُقصَر fetchUser، ولم يُحوَّل "GET"، وحافظت الدالة السهمية على قائمة معاملاتها. هذا ضغط مقروء، آمن للّصق مجدّدًا في وسم نصّ برمجي — لا التشويه العدواني الذي يفعله باندلر وقت البناء.

الأسئلة الشائعة#

لماذا لا يُعيد ضغط تسمية المتغيّرات أو يُصغِّر حزمتي؟#

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

هل يُجرّد المُصغِّر التعليقات داخل السلاسل؟#

لا. يمشي الماسح على المصدر محرفًا بمحرف ويتتبّع إن كان داخل سلسلة بعلامة مفردة، أو سلسلة بعلامة مزدوجة، أو قالب حرفي، أو قالب regex. فالـ // الذي يظهر داخل أيّ منها يُعامَل بوصفه نصًّا ويُترك؛ ولا تُزال سوى التعليقات الحقيقية.

هل يتعامل مع TypeScript أو JSX؟#

يستخدم مسار تنسيق محلِّل Babel، الذي يقبل JSX. أمّا تعليقات أنواع TypeScript والصياغة الخاصة بـ .ts/.tsx فغير مُفعَّلة هنا — إن احتجتها، ستُبلغ هذه الأداة عن خطأ تحليل بدلًا من إنتاج مخرج خاطئ بصمت. أبقِ هذه الصفحة لـ JavaScript الخالص.

هل كودي مرفوع إلى أيّ مكان؟#

لا. كلّ شيء يجري في التبويب الذي تنظر إليه. Prettier مُدمَج مع الصفحة ومُستورَد عند الطلب؛ ويُحلَّل نصّك المصدري في الذاكرة ولا يُرسل عبر الشبكة أبدًا.