Hello.

In this post, I explore importing npm modules into web projects using ES6 modules. I needed a quick way to use the 'get-urls' npm module in my ES6 project without resorting to CommonJS bundling. My solution involves creating a wrapper file to import the module, using Rollup to handle Node globals and builtins, converting to ES modules via the CommonJS plugin, and finally, including the bundled file. This highlights a larger issue: much of the Node ecosystem, though not inherently Node-specific, is tightly coupled with it through CommonJS and APIs like 'Buffer' and the old 'URL.' Transitioning to ubiquitous ES modules will require effort and potentially be painful. Until the ecosystem adapts, we'll rely on conversion tools and bundlers for cross-platform code sharing. While using '.mjs' as a standard extension is promising, the lack of infrastructure recognizing it as 'text/javascript' necessitates further server-side configuration, which adds complexity.

In this post, I share a Rollup configuration I created to easily import npm modules into a front-end project using ES6 modules. I needed a way to use the 'get-urls' npm package in my ES6 project without resorting to CommonJS. My solution involves creating a wrapper file, using Rollup to bundle it with necessary plugins (node-resolve, commonjs, node-builtins, node-globals, closure-compiler-js), and then importing the resulting bundle into my HTML using a <script type="module"> tag. While the resulting bundle size is larger than ideal, this method allows me to use npm modules directly within my ES6 code.