{"id":24837,"date":"2024-03-29T08:47:19","date_gmt":"2024-03-29T07:47:19","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/entendiendo-es-module-y-commonjs-diferencias-clave-y-compatibilidad\/"},"modified":"2024-06-03T18:44:12","modified_gmt":"2024-06-03T17:44:12","slug":"entendiendo-es-module-y-commonjs-diferencias-clave-y-compatibilidad","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/understanding-es-module-and-commonjs-key-differences-and-compatibility\/","title":{"rendered":"Understanding ES Module and CommonJS: Key Differences and Compatibility"},"content":{"rendered":"<p>Module systems are essential in software development, as they allow code to be divided into reusable and maintainable components. In the world of JavaScript, two of the most popular module systems are ES Module (ESM) and CommonJS (CJS). Although both have the same goal of modularization, there are important differences between them and the way they interact can be a cause of confusion for developers. Let&#039;s break down these differences and compatibilities by offering practical examples and meaningful considerations.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/understanding-es-module-and-commonjs-key-differences-and-compatibility\/#%C2%BFQue_es_CommonJS\" >What is CommonJS?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/understanding-es-module-and-commonjs-key-differences-and-compatibility\/#%C2%BFQue_es_ES_Module\" >What is ES Module?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/understanding-es-module-and-commonjs-key-differences-and-compatibility\/#Diferencias_Clave_entre_ES_Module_y_CommonJS\" >Key Differences between ES Module and CommonJS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/understanding-es-module-and-commonjs-key-differences-and-compatibility\/#Sintaxis\" >Syntax<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/understanding-es-module-and-commonjs-key-differences-and-compatibility\/#Carga_de_Modulos\" >Module Loading<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/understanding-es-module-and-commonjs-key-differences-and-compatibility\/#Estatica_vs_Dinamica\" >Static vs. Dynamic<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/understanding-es-module-and-commonjs-key-differences-and-compatibility\/#Interoperabilidad_entre_Modulos\" >Interoperability between Modules<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/understanding-es-module-and-commonjs-key-differences-and-compatibility\/#Compatibilidad_y_la_Transicion_de_CommonJS_a_ES_Module\" >Compatibility and the Transition from CommonJS to ES Module<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/understanding-es-module-and-commonjs-key-differences-and-compatibility\/#Interoperabilidad_en_Nodejs\" >Interoperability in Node.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nelkodev.com\/en\/blog\/understanding-es-module-and-commonjs-key-differences-and-compatibility\/#Herramientas_de_Construccion_y_Transpilacion\" >Construction and Transpilation Tools<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nelkodev.com\/en\/blog\/understanding-es-module-and-commonjs-key-differences-and-compatibility\/#Consideraciones_Finales_para_Desarrolladores\" >Final Considerations for Developers<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_CommonJS\"><\/span>What is CommonJS?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>CommonJS emerged as a convention for modularizing code in non-browser environments such as the server, particularly used in Node.js. It became known for its syntax <code>require<\/code> to import modules and <code>module.exports<\/code> to export them. For example:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">\/\/ Exporting a module with CommonJS module.exports = { add: function(a, b) { return a + b; } }; \/\/ Importing the module into another file const { add } = require(&#039;.\/math&#039;); console.log(sum(2, 3)); \/\/ Output: 5<\/code><\/pre>\n<p>CommonJS loads modules synchronously and is well suited for server-side applications where modules are available locally.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_ES_Module\"><\/span>What is ES Module?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>ES Module is the standard module system in ECMAScript 6 (ES6) and later, implemented in both modern browsers and the Node.js platform (as of version 13.2 as stable). ESM uses the syntax <code>import<\/code> y <code>export<\/code>. Let&#039;s see an example:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">\/\/ Exporting a module with ES Module export function add(a, b) { return a + b; } \/\/ Importing the module into another file import { add } from &#039;.\/math.js&#039;; console.log(sum(2, 3)); \/\/ Output: 5<\/code><\/pre>\n<p>ES Module is designed for asynchronous loading of modules, which is a great advantage for in-browser applications, allowing for faster and more efficient startup of code.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Diferencias_Clave_entre_ES_Module_y_CommonJS\"><\/span>Key Differences between ES Module and CommonJS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Sintaxis\"><\/span>Syntax<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The first big difference is the syntax. While CommonJS uses <code>require<\/code> y <code>module.exports<\/code>, ESM uses <code>import<\/code> y <code>export<\/code>. This is a clear distinction that can affect how code is structured and read.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Carga_de_Modulos\"><\/span>Module Loading<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>ES Module loads modules asynchronously, allowing script execution to not block while waiting for imports, while CommonJS performs synchronous loading which can slow down code execution until all modules have been loaded.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Estatica_vs_Dinamica\"><\/span>Static vs. Dynamic<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>ES Module is static, meaning that imports and exports must be at the top level of your JavaScript file and cannot be changed at runtime. In contrast, CommonJS is dynamic and allows modules to be imported anywhere in the code.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Interoperabilidad_entre_Modulos\"><\/span>Interoperability between Modules<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>While ESM is a more modern specification and has features that favor it for web use, the reality is that many existing libraries and code are still written in CommonJS. This has generated the need for interoperability mechanisms between both module systems.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Compatibilidad_y_la_Transicion_de_CommonJS_a_ES_Module\"><\/span>Compatibility and the Transition from CommonJS to ES Module<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Interoperabilidad_en_Nodejs\"><\/span>Interoperability in Node.js<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Node.js introduced support for ESM since version 8.5.0 with the possibility of working with ESM-type modules, but it was in the most recent versions where better interoperability was established. An important point to note is that Node.js distinguishes ESM module files with the extension <code>.mjs<\/code> or with configuration <code>&quot;type&quot;: &quot;module&quot;<\/code> in it <code>package.json<\/code> for <code>.js<\/code>.<\/p>\n<p>We can import CommonJS modules into ESM, but we cannot use <code>import<\/code> in CommonJS files. Likewise, the export of modules between both systems follows certain rules. For example, to use the functions of a CommonJS module in ESM:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">\/\/ Importing a CommonJS module into an ES file Module import math from &#039;.\/math.cjs&#039;; console.log(math.sum(4, 5)); \/\/ Output: 9<\/code><\/pre>\n<p>and to use an ESM module in CommonJS, use is made <code>import()<\/code>:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">\/\/ Importing an ES Module into a CommonJS file const math = import(&#039;.\/math.mjs&#039;); math.then(module =&gt; { console.log(module.sum(4, 5)); \/\/ Output: 9 });<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Herramientas_de_Construccion_y_Transpilacion\"><\/span>Construction and Transpilation Tools<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>For projects that need to support both modules, tools such as Babel or Webpack can be used that transpile the ES Module code to a CommonJS-compatible format for environments that do not natively support ESM. Additionally, these tools often provide additional features such as minification and support for newer JavaScript features.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Consideraciones_Finales_para_Desarrolladores\"><\/span>Final Considerations for Developers<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When working with modules in JavaScript, developers should be aware of the differences between ESM and CommonJS, as well as the particularities of the environment in which they are working. It is essential to have a clear understanding of how both specifications handle the import and export of modules, and how additional tools can be used to ensure compatibility between them.<\/p>\n<p>For more technical details and assistance on your projects involving ES Module and CommonJS, feel free to visit <a href=\"https:\/\/nelkodev.com\/en\/\">nelkodev.com<\/a> and if you require specific advice or have any questions, contact us through <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">nelkodev.com\/contact<\/a>.<\/p>\n<p>Over time, ESM is expected to become the default module system in JavaScript, but until then, understanding these differences and interoperability will play a crucial role in developing robust, modern applications.<\/p>","protected":false},"excerpt":{"rendered":"<p>Module systems are essential in software development, as they allow you to break down your code into reusable and maintainable components. In the world of JavaScript, two of the most popular module systems are ES Module (ESM) and CommonJS (CJS). While both have the same goal of modularization, there are important differences between them [\u2026]<\/p>","protected":false},"author":1,"featured_media":24838,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,2207],"tags":[205,360,898,1220,1089,954,1085,2208],"class_list":["post-24837","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-nodejs","tag-blog","tag-clave","tag-commonjs","tag-compatibilidad","tag-diferencias","tag-entendiendo","tag-module","tag-nodejs"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/24837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=24837"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/24837\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/24838"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=24837"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=24837"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=24837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}