यह एक सामान्य पैचिंग का दिन था। मैंने कोड में बदलाव किए बिना अपनी एनपीएम निर्भरता को पैच और अपग्रेड किया, और अचानक, मेरे कुछ यूनिट परीक्षण विफल हो गए।

Wtf!

मेरे परीक्षण विफल हो गए क्योंकि जेस्ट को एक अप्रत्याशित टोकन का सामना करना पड़ा; वे विफल हो गए क्योंकि जेस्ट बॉक्स से बाहर केवल ईएसएम पैकेज को संभाल नहीं सकता है। वास्तव में, जेस्ट CommonJS में लिखा गया है।
लेकिन इसका क्या मतलब है? ऐसा करने के लिए, हमें यह समझने की आवश्यकता है कि कॉमनजेएस और ईएसएम क्यों मौजूद हैं।

हमें मॉड्यूल सिस्टम की आवश्यकता क्यों है?

वेब विकास के शुरुआती दिनों में, जावास्क्रिप्ट का उपयोग मुख्य रूप से jQuery जैसे पुस्तकालयों के साथ दस्तावेज़ ऑब्जेक्ट मॉडल (डीओएम) में हेरफेर करने के लिए किया जाता था। हालाँकि, Node.js की शुरूआत के कारण सर्वर-साइड प्रोग्रामिंग के लिए जावास्क्रिप्ट का भी उपयोग किया जाने लगा। इस बदलाव से जावास्क्रिप्ट कोडबेस की जटिलता और आकार में वृद्धि हुई। परिणामस्वरूप, जावास्क्रिप्ट कोड को व्यवस्थित और प्रबंधित करने के लिए एक संरचित विधि की आवश्यकता उत्पन्न हुई। इस आवश्यकता को पूरा करने के लिए मॉड्यूल सिस्टम पेश किए गए, जिससे डेवलपर्स को अपने कोड को प्रबंधनीय, पुन: प्रयोज्य इकाइयों में विभाजित करने में सक्षम बनाया गया¹।

कॉमनजेएस का उद्भव

CommonJS की स्थापना 2009 में हुई थी, जिसका मूल नाम ServerJS² था। इसे सर्वर-साइड जावास्क्रिप्ट के लिए डिज़ाइन किया गया था, जो मॉड्यूल को परिभाषित करने के लिए कन्वेंशन प्रदान करता है। Node.js ने CommonJS को अपने डिफ़ॉल्ट मॉड्यूल सिस्टम के रूप में अपनाया, जिससे यह बैकएंड जावास्क्रिप्ट डेवलपर्स के बीच प्रचलित हो गया। CommonJS मॉड्यूल निर्यात करने के लिए आयात और मॉड्यूल.एक्सपोर्ट की आवश्यकता का उपयोग करता है। CommonJS में सभी ऑपरेशन सिंक्रोनस हैं, जिसका अर्थ है कि प्रत्येक मॉड्यूल व्यक्तिगत रूप से लोड किया गया है।

ईएसएम का उदय (ईसीएमएस्क्रिप्ट मॉड्यूल)

2015 में, ईसीएमएस्क्रिप्ट ने ईसीएमएस्क्रिप्ट मॉड्यूल्स (ईएसएम) नामक एक नया मॉड्यूल सिस्टम पेश किया, जो मुख्य रूप से क्लाइंट-साइड विकास को लक्षित करता है। ईएसएम आयात और निर्यात विवरणों का उपयोग करता है, और इसके संचालन अतुल्यकालिक हैं, जिससे मॉड्यूल को समानांतर ³ में लोड किया जा सकता है। प्रारंभ में, ESM ब्राउज़रों के लिए था, जबकि CommonJS सर्वरों के लिए डिज़ाइन किया गया था। यह जेएस पारिस्थितिकी तंत्र के लिए और अधिक मानक बन गया। आजकल, आधुनिक जावास्क्रिप्ट रनटाइम दोनों मॉड्यूल सिस्टम का समर्थन करते हैं। ब्राउज़रों ने 2017 में मूल रूप से ईएसएम का समर्थन करना शुरू किया। यहां तक ​​कि टाइपस्क्रिप्ट ने भी ईएसएम सिंटैक्स को अनुकूलित किया, और जब भी आप इसे सीखते हैं, तो आप अवचेतन रूप से ईएसएम भी सीखते हैं।

CommonJS यहाँ रहने के लिए है

सच्चाई यह है कि ईएसएम-केवल पैकेजों की तुलना में कई अधिक कॉमनजेएस (सीजेएस)-केवल पैकेज हैं⁴।

हालाँकि, एक स्पष्ट रुझान है। केवल-ईएसएम या दोहरे मॉड्यूल पैकेजों की संख्या बढ़ रही है, जबकि कम सीजेएस-केवल पैकेज बनाए जा रहे हैं। यह प्रवृत्ति ईएसएम के लिए बढ़ती प्राथमिकता को रेखांकित करती है और यह सवाल उठाती है कि कितने सीजेएस-केवल पैकेज सक्रिय रूप से बनाए रखे जाते हैं।

तुलना

कॉमनजेएस और ईएसएम के बीच एक दिलचस्प तुलना में प्रदर्शन बेंचमार्क शामिल हैं। अपनी तुल्यकालिक प्रकृति के कारण, सीधे आवश्यकता और आयात कथन का उपयोग करने पर 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-क्लाइंट का उपयोग किया क्योंकि इसमें दोहरी मॉड्यूल समर्थन है। यहां हम क्लाइंट को तुरंत चालू करते हैं और फिर इसे नोड के साथ निष्पादित करते हैं:

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 तेजी से चलते हैं।
मैं बन्स ब्लॉगपोस्ट से प्रेरित हुआ।

हालाँकि, जब आप अपनी 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 से तेज़ है। ईएसएम फ़ाइल अब अनबंडल्ड कॉमनजेएस फ़ाइल से भी तेज़ है क्योंकि कुशल ट्री-शेकिंग के कारण इसका फ़ाइल आकार छोटा होता है और लोड समय तेज़ होता है - एक ऐसी प्रक्रिया जो अप्रयुक्त कोड को हटा देती है।

ईएसएम को गले लगाओ!

जावास्क्रिप्ट मॉड्यूल का भविष्य निस्संदेह ईएसएम की ओर झुक रहा है। यह एक नया NodeJS प्रोजेक्ट या यहां तक ​​कि एक रिएक्ट प्रोजेक्ट बनाते समय शुरू होता है। प्रत्येक ट्यूटोरियल और आलेख आयात-कथन का उपयोग करता है, जो इस प्रकार ईएसएम है। कई मौजूदा कॉमनजेएस पैकेजों के बावजूद, प्रवृत्ति बदल रही है क्योंकि अधिक डेवलपर्स और अनुरक्षक ईएसएम को इसके प्रदर्शन लाभों और आधुनिक सिंटैक्स के लिए अपना रहे हैं। एक अन्य प्रश्न यह भी है कि इनमें से कितनी सीजेएस-केवल परियोजनाएं अभी भी कायम हैं।

ईएसएम एक मानक है जो किसी भी रनटाइम में काम करता है, जैसे कि नोडजेएस, बन, या डेनो, और ब्राउज़र में सर्वर पर चले बिना। बैबेल के माध्यम से कॉमनजेएस में कनवर्ट करना अनावश्यक है क्योंकि ब्राउज़र ईएसएम को समझता है। आप अभी भी किसी भिन्न ECMAScript संस्करण में कनवर्ट करने के लिए बैबल का उपयोग कर सकते हैं, लेकिन आपको CJS में कनवर्ट नहीं करना चाहिए।

आपको केवल ईएसएम में विकास करना चाहिए क्योंकि अब प्रत्येक रनटाइम और 2017 से नया ब्राउज़र ईएसएम को समझता है।

यदि आपका कोड टूट जाता है, तो आपको विरासत संबंधी समस्याएं हो सकती हैं। विभिन्न टूलींग या पैकेज का उपयोग करने पर विचार करें। उदाहरण के लिए, आप जेस्ट से विटेस्ट या एक्सप्रेसजेएस से एच3 पर माइग्रेट कर सकते हैं। वाक्यविन्यास वही रहता है; एकमात्र अंतर आयात विवरण का है।

चाबी छीनना:

• छोटे बंडल: ईएसएम ट्री-शेकिंग के माध्यम से छोटे बंडलों का उत्पादन करता है, जिससे लोड समय तेज होता है।
• यूनिवर्सल सपोर्ट: ईएसएम मूल रूप से ब्राउज़र और जावास्क्रिप्ट रनटाइम (नोड.जेएस, बन, डेनो) द्वारा समर्थित है।
• भविष्य-प्रमाण: निरंतर अपनाने के साथ, ईएसएम को आधुनिक जावास्क्रिप्ट मॉड्यूल के लिए मानक के रूप में तैनात किया गया है।

आरंभ करने के लिए, आप इस सार का अनुसरण कर सकते हैं या यहां एक प्रेरणादायक सीख प्राप्त कर सकते हैं।

बेहतर जावास्क्रिप्ट भविष्य के लिए, ईएसएम को अपनाएं!

प्रस्तुति

और अधिक संसाधनों

• 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 ↩