Modularizing your code (ESM versus CJS)

For many years JavaScript was limited to the browser, and the only way to organize our code was using script files that were loaded in the correct order in a HTML page. This was done by including specific references in the HTML files, such as the following:

<!-- External Sources -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<!-- Other files -->
<script src="script1.js"></script>
<!-- Direct Scripts -->
<script>
console.log("Hello world");
</script>

This approach was not scalable, and it was very easy to pollute the global scope. To solve this problem, historically we used the IIFE pattern and the module pattern. As the adoption of JavaScript started to grow and the amount of JavaScript required for a modern website was dramatically rising, the community began to create libraries and frameworks to solve these aforementioned problems...