Thoughts on importing npm modules to the web as JavaScript modules

This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan

<p>I've got thoughts on the post I did yesterday about ES Modules</p> <blockquote> <p>I needed a quick way import a simple module get-urls into my project. The module is well tested and it does what I needed … ignore the fact that it’s pretty easy to implement in a couple of lines of JavaScript. The problem I had is that my project is built in ES6, uses modules and I didn’t want to have to bundle up using CommonJS (require).</p> <p>I couldn’t find a lot of guidance on what to do here, so I went to experiement and this solution is the solution I came across:</p> <ol> <li>Create a file that imports the npm module I needed. module.exports = require('get-urls'); This module will be what’s converted to ES6 style.</li> <li>Create a rollup config that <ol> <li>Imports the node globals, and builtins.</li> <li>Resolves all npm modules required for my usage of this module.</li> <li>Pass the results through the commonjs plugin so that it’s now in JavaScript module format.</li> <li>Compress the output, because it’s huge :</li> </ol> </li> <li>Include the bundled file in your project and rejoice.</li> </ol> </blockquote> <p><a href="https://paul.kinlan.me/importing-npm-modules-to-the-web-as-es6-modules/">Read full post</a>.</p> <p>One of the things that I wanted to try and articulate in the original article but I decided to pull out is that there is a huge amount of code in the Node ecosystem that is not really that specific to Node per se but has been tightly coupled with Node via Common JS and other very specific Node API's (Buffer, old URL etc etc) that it's going to take a lot of effort to pull ourselves up and thus the change be required to make ES Modules ubiquitous will be potentially quite painful, and until the ecosystem changes we are going to need to use a lot of conversion tools and bundlers to be able to cleanly share code across multiple platforms (web/server).</p> <p>We are where we are, there wasn't an importing story on the web, we didn't have a heap of the primitives that Node introduced and are now what many would now consider de-facto platform requirements, so I hope that this is more of an acknowledgement of the situation than a criticism.</p> <p>There is also a move to use '.mjs' as a file extension that is standard across both node and the web. I feel totally comfortable with this, however .msj is not a file that any infrastructure yet recognises as 'text/javascript' and I'm looking forward to this just being sorted so that it's automatically inferred by every web server on the planet, so I don't have to deploy yet more configuration changes to my serving infrastructure.</p> <p>Lots of fun times ahead, I for one am looking forward to being able to bring a lot more functionality to the web.</p>

This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan