What is ESM (JavaScript Modules)?

Why Use ESM?

JavaScript modules have been around for a while, but prior to the introduction of ESM, developers relied on other module systems, such as CommonJS or AMD (Asynchronous Module Definition). While these module systems served their purpose, they had their limitations. ESM aims to provide a more modern and standardized approach to modular JavaScript development.
One of the main advantages of ESM is its support for static imports and exports. This means that dependencies are resolved at compile-time, allowing for better optimization and tree-shaking. ESM also offers a more declarative syntax for importing and exporting modules, making it easier to understand and reason about your code.

ESM vs CommonJS

CommonJS is the module system used by Node.js and many other JavaScript environments. While CommonJS has been widely adopted and served the JavaScript community well, it has some key differences compared to ESM.
One notable difference is the way modules are loaded. In CommonJS, modules are loaded synchronously, meaning that a module has to be fully loaded and executed before the next module can be loaded. This synchronous nature can lead to slower startup times, especially in large codebases.
ESM, on the other hand, supports asynchronous loading. This means that modules can be loaded in parallel, resulting in faster startup times and improved performance. The asynchronous nature of ESM also makes it easier to work with dynamic imports, allowing you to load modules on-demand.
Another difference between ESM and CommonJS is the syntax for importing and exporting modules. In CommonJS, you use the require function to import modules and module.exports or exports to export values. ESM introduces a more elegant and consistent syntax with the import and export keywords, providing a cleaner and more intuitive way to work with modules.

Using ESM in JavaScript Projects

To use ESM in your JavaScript projects, you'll need a compatible runtime or bundler that supports ESM. Some popular choices include Node.js 12+, browsers with ES module support, and bundlers like webpack or Rollup.
In Node.js, you can use ESM by changing the file extension to .mjs or by using the --experimental-modules flag. This enables the built-in ES module loader, allowing you to use the import and export keywords in your code.
When working with browsers, most modern browsers now have native support for ESM. You can simply use the import and export keywords in your JavaScript code and include the files using the <script type="module"> tag. This tells the browser to treat the file as an ECMAScript module.
If you're using a bundler like webpack or Rollup, you can configure it to handle ESM imports and exports. These bundlers will automatically transform your code to a format that is compatible with older browsers or CommonJS environments.

Conclusion

ESM, or ECMAScript Modules, offer a modern and standardized approach to modular JavaScript development. It provides better optimization, faster startup times, and a cleaner syntax for importing and exporting modules. Whether you're working with Node.js, a browser, or a bundler, there are various ways to use ESM in your JavaScript projects. By embracing ESM, you can improve the maintainability and scalability of your codebase, making it easier to collaborate and build robust applications.