لقد كان يومًا عاديًا للترقيع. لقد قمت بتصحيح وترقية تبعيات npm الخاصة بي دون إجراء تغييرات على التعليمات البرمجية، وفجأة، فشلت بعض اختبارات الوحدة الخاصة بي.

ماهذا الهراء!

فشلت اختباراتي لأن Jest واجه رمزًا مميزًا غير متوقع؛ لقد فشلوا لأن Jest لا يمكنه التعامل مع حزم ESM فقط خارج الصندوق. في الحقيقة، Jest مكتوب بلغة CommonJS.
لكن ماذا يعني هذا؟ للقيام بذلك، نحن بحاجة إلى فهم سبب وجود CommonJS وESM.

لماذا نحتاج إلى أنظمة الوحدات؟

في الأيام الأولى لتطوير الويب، تم استخدام JavaScript بشكل أساسي لمعالجة نموذج كائن المستند (DOM) مع مكتبات مثل jQuery. ومع ذلك، أدى تقديم Node.js أيضًا إلى استخدام JavaScript في البرمجة من جانب الخادم. أدى هذا التحول إلى زيادة تعقيد وحجم قواعد تعليمات JavaScript. ونتيجة لذلك، ظهرت الحاجة إلى طريقة منظمة لتنظيم وإدارة تعليمات JavaScript البرمجية. تم تقديم أنظمة الوحدات لتلبية هذه الحاجة، مما يتيح للمطورين تقسيم التعليمات البرمجية الخاصة بهم إلى وحدات قابلة للإدارة وقابلة لإعادة الاستخدام¹.

ظهور CommonJS

تأسست CommonJS في عام 2009، وكان اسمها في الأصل ServerJS². لقد تم تصميمه لجافا سكريبت من جانب الخادم، مما يوفر اصطلاحات لتعريف الوحدات. اعتمد Node.js على CommonJS كنظام الوحدة الافتراضي الخاص به، مما يجعله سائدًا بين مطوري JavaScript الخلفيين. تتطلب استخدامات CommonJS الاستيراد وmodule.exports لتصدير الوحدات. جميع العمليات في CommonJS متزامنة، مما يعني أنه يتم تحميل كل وحدة بشكل فردي.

صعود ESM (وحدات ECMAScript)

في عام 2015، قدمت ECMAScript نظامًا جديدًا للوحدات يسمى وحدات ECMAScript (ESM)، والتي تستهدف في المقام الأول التطوير من جانب العميل. يستخدم ESM عبارات الاستيراد والتصدير، وعملياته غير متزامنة، مما يسمح بتحميل الوحدات بشكل متوازٍ³. في البداية، كان ESM مخصصًا للمتصفحات، بينما تم تصميم CommonJS للخوادم. لقد أصبح أكثر فأكثر معيارًا لنظام JS البيئي. في الوقت الحاضر، تدعم أوقات تشغيل JavaScript الحديثة كلا النظامين. بدأت المتصفحات في دعم ESM محليًا في عام 2017. حتى أن Typescript قامت بتعديل صيغة ESM، وكلما تعلمتها، فإنك تتعلم أيضًا ESM دون وعي.

CommonJS موجود لتبقى

الحقيقة هي أن هناك العديد من حزم CommonJS (CJS) - فقط أكثر من حزم ESM فقط⁴.

ومع ذلك، هناك اتجاه واضح. عدد حزم الوحدة النمطية ESM فقط أو المزدوجة آخذ في الارتفاع، بينما يتم إنشاء عدد أقل من حزم CJS فقط. ويؤكد هذا الاتجاه على التفضيل المتزايد للإدارة السليمة بيئياً ويثير التساؤل حول عدد حزم CJS فقط التي يتم صيانتها بشكل نشط.

مقارنة

تتضمن المقارنة المثيرة للاهتمام بين CommonJS وESM معايير الأداء. نظرًا لطبيعته المتزامنة، يكون CommonJS أسرع عند الاستخدام المباشر لبيانات الطلب والاستيراد. لنتأمل المثال التالي:

// CommonJS -> s3-get-files.cjs
const s3 = require('@aws-sdk/client-s3');
new s3.S3Client({ region: 'eu-central-1' });

// ESM -> s3-get-files.mjs
import { S3Client } from '@aws-sdk/client-s3';

new S3Client({ region: 'eu-central-1' });

لقد استخدمت aws-sdk S3-Client لأنه يدعم الوحدة المزدوجة. نقوم هنا بإنشاء مثيل للعميل ثم تنفيذه باستخدام العقدة:

hyperfine --warmup 10 --style color 'node s3-get-files.cjs' 'node s3-get-files.mjs'

Benchmark 1: node s3-get-files.cjs
Time (mean ± σ): 82.6 ms ± 3.7 ms [User: 78.5 ms, System: 16.7 ms]
Range (min … max): 78.0 ms … 93.6 ms 37 runs
Benchmark 2: node s3-get-files.mjs
Time (mean ± σ): 93.9 ms ± 4.0 ms [User: 98.3 ms, System: 18.1 ms]
Range (min … max): 88.1 ms … 104.8 ms 32 runs

Summary
node s3-get-files.cjs ran
  1.14 ± 0.07 times faster than node s3-get-files.mjs

كما ترون، فإن s3-get-files.cjs، وبالتالي، CommonJS يعمل بشكل أسرع.
لقد ألهمتني مدونة Buns Blogpost.

ومع ذلك، عندما تريد إنتاج مكتبة JS الخاصة بك، فأنت بحاجة إلى تجميعها. وإلا، فسوف تقوم بشحن كافة وحدات العقدة. يتم استخدامه esbuild لأنه قادر على التجميع مع CJS وESM. الآن، لنقم بتشغيل نفس المعيار مع الإصدار المجمع.

hyperfine --warmup 10 --style color 'node s3-bundle.cjs' 'node s3-bundle.mjs'

Benchmark 1: node s3-bundle.cjs
Time (mean ± σ): 62.1 ms ± 2.5 ms [User: 53.8 ms, System: 6.7 ms]
Range (min … max): 59.5 ms … 74.5 ms 45 runs

Warning: Statistical outliers were detected. Consider re-running this benchmark on a quiet system without any interferences from other programs. It might help to use the '--warmup' or '--prepare' options.

Benchmark 2: node s3-bundle.mjs
Time (mean ± σ): 45.3 ms ± 2.2 ms [User: 38.1 ms, System: 5.6 ms]
Range (min … max): 43.0 ms … 59.2 ms 62 runs

Warning: Statistical outliers were detected. Consider re-running this benchmark on a quiet system without any interferences from other programs. It might help to use the '--warmup' or '--prepare' options.

Summary

  node s3-bundle.mjs ran
    1.37 ± 0.09 times faster than node s3-bundle.cjs

كما ترون، أصبح s3-bundle.mjs الآن أسرع من s3-bundle.cjs. أصبح ملف ESM الآن أسرع من ملف CommonJS غير المجمع لأنه ينتج عنه أحجام ملفات أصغر وأوقات تحميل أسرع بسبب اهتزاز الشجرة بكفاءة، وهي عملية تزيل التعليمات البرمجية غير المستخدمة.

احتضان ESM!

لا شك أن مستقبل وحدات JavaScript يميل نحو الإدارة السليمة بيئيًا. يبدأ هذا عند إنشاء مشروع NodeJS جديد أو حتى مشروع React. يستخدم كل برنامج تعليمي ومقالة بيان الاستيراد، وهو بالتالي ESM. على الرغم من وجود العديد من حزم CommonJS الحالية، إلا أن الاتجاه يتغير مع اعتماد المزيد من المطورين والمشرفين على ESM لفوائد الأداء والتركيب الحديث. سؤال آخر هو أيضًا كم عدد مشاريع CJS فقط التي لا تزال قيد الصيانة.

ESM هو معيار يعمل في أي وقت تشغيل، مثل NodeJS أو Bun أو Deno، وفي المتصفح دون التشغيل على خادم. ليس من الضروري التحويل عبر Babel إلى CommonJS لأن المتصفح يفهم ESM. لا يزال بإمكانك استخدام Babel للتحويل إلى إصدار ECMAScript مختلف، لكن لا ينبغي عليك التحويل إلى CJS.

يجب عليك التطوير في ESM فقط لأن كل وقت تشغيل الآن والمتصفح الأحدث من 2017 يفهم ESM.

إذا تعطلت التعليمات البرمجية الخاصة بك، فقد تكون لديك مشكلات قديمة. فكر في استخدام أدوات أو حزم مختلفة. على سبيل المثال، يمكنك الترحيل من Jest إلى vitest أو من ExpressJS إلى h3. يبقى بناء الجملة كما هو؛ والفرق الوحيد هو بيان الاستيراد.

الماخذ الرئيسية:

• الحزم الصغيرة: تنتج ESM حزمًا أصغر من خلال اهتزاز الشجرة، مما يؤدي إلى أوقات تحميل أسرع.
• الدعم الشامل: يتم دعم ESM محليًا بواسطة المتصفحات وأوقات تشغيل JavaScript (Node.js، Bun، Deno).
• مقاومة للمستقبل: مع الاعتماد المستمر، تم وضع ESM كمعيار لوحدات JavaScript الحديثة.

للبدء، يمكنك متابعة هذا Gist أو الحصول على تعليم ملهم هنا.

من أجل مستقبل أفضل لجافا سكريبت، احتضن ESM!

العرض

المزيد من الموارد

• https://dev.to/logto/migrate-a-60k-loc-typescript-nodejs-repo-to-esm-and-testing-become-4x-faster-22-4a4k
• https://jakearchibald.com/2017/es-modules-in-browsers/
• https://Gist.github.com/joepie91/bca2fda868c1e8b2c2caf76af7dfcad3
• https://Gist.github.com/joepie91/bca2fda868c1e8b2c2caf76af7dfcad3

1. https://www.freecodecamp.org/news/javascript-es-modules-and-module-bundlers/#why-use-modules ↩

2. https://deno.com/blog/commonjs-is-hurting-javascript ↩

3. https://tc39.es/ecma262/#sec-overview ↩

4. https://twitter.com/wooorm/status/1759918205928194443 ↩