It was always a little bit hard to prepare JS code to be reusable through the NPM registry.
Over time we had a lot of different approaches. We had many different ways to use modular-like code in JavaScript.
Before 2015 we didn't even have official built-in modules standard in JavaScript. So we had to use third-party tools like AMD with, for example, RequireJS or - in Node ecosystem - CommonJS.
With ES6 or ES2015, we've got modules support in JavaScript. Of course, it was a time when all the development progress within browsers or Node was slow. Lately, we've gained momentum, and we are getting updates quite often. It's good. But what does that mean for NPM packages creators?
Let's imagine an example. I started to think why I even need tools like Babel or Parcel nowadays to create my NPM package when all of the modern browsers and Node supports the newest ES2020 standard. Suppose I want my code to be reusable across many different websites. At the same time, I don't want to use any third-party modules, and I don't care about any additional optimization because the lib is relatively tiny. What should I do in that case?
First thought - do I even need the NPM registry? Shouldn't it be just a simple JS script? It probably could. But why not the NPM registry? It is convenient, and all modern tools integrate with it.
Let's take Skypack as an example. It is a modern CDN that will take your well-prepared package and optimize for very different use cases. For instance, you could do something like:
<html>
<body>
<script type="module">
import smoothScrollTop from 'https://cdn.skypack.dev/smooth-scroll-top';
// do something with it here
</script>
</body>
</html>
As you can see, this is as simple as that. You write your code in clean, modern JavaScript, you publish it in the NPM registry, and then you can import it in the browser or if this is also a backend package in Node.
Ok, so what would you need to prepare such a package?
I think the best would be to look into the code and see what is where? Go to my GitHub and find the Smooth Scroll Top library. It isn't something extraordinary, but it is an excellent example of preparing the package with a modern approach. I had to agree on some compromises because I wanted to support the React apps scaffolded by Create React App. But these are small overheads. You'll find all the details in the README.md file.
Important config steps:
- Check how the package.json file should look like
- Check how tsconfig.json file should look like
- Check how the build script should look like
There are still many drawbacks in more significant projects, like handling third-party packages, optimization, tree shaking, etc. Of course, if you need to write the whole front-end app, you should probably still use bundlers and transpilers. But I can bet that we will float slowly towards architectures similar to Deno land, where we can import all as modules and put together our whole app. Like for example, using Web Components, etc.
I wrote an article about this topic on my blog. If you are interested, I would be more than happy to invite you to read more about complicated setups and issues. Please go and check it here: Building NPM package in 2021.
Top comments (0)