Pure ESM workflow, is it possible?

Some time ago, I wrote a simple NPM package for browsers. I decided that I want to use only the Typescript compiler and nothing else. No bundlers, no transpilers, no third-party libraries for handling JavaScript modules, etc. Is it possible? Yes.

First of all, let's remind you why bundling, transpiling processes were necessary. JavaScript got built-in and standardized modules in ES2015 standard or ES6 standard. It depends on which naming convention you prefer. Some time had to pass till all browsers and Node ecosystem started to support most of the standards. What's more important, they stayed up to date, and it all looks good now.
Previously we had a couple of solutions for handling modules in JavaScript. We had AMD in browsers, mainly using RequireJS. In Node, till now, CommonJS is very popular. These solutions were required, but the time has come to start looking into the language itself, and maybe in some projects, it won't be needed to use bundlers and transpilers.

Ok, please show me some examples.

My simple project is a library for browsers, a simple tool. But the main goal when building it was to prepare the NPM package using only Typescript and modern JavaScript language. You will find it here: smooth-scroll-top.

Let's take a closer look at what you would need to configure to build it as an NPM package in your project.

First of all, we want Typescript, so a tsc compiler is required. We also need specific tsconfig.json.

Next, you would need to configure your package.json file. You need "type": "module", entry to indicate that this package should be treated as ES Module. You need an entry file for your module, so you need an exports entry there. These are most important. As you can see, I left browser because I treat it as a fallback for React-based applications. It isn't required when you use the package as ESM because browsers will also import it correctly. We will see it in a moment.

Such a simple setup, without any tools like Rollup, Parcel, or Babel, allows to import the library from the file system as is, but what's even better you can use modern CDN service like Skypack and import it from there. Let's see how.

You can go to: smooth scroll top on Skypack and just copy and paste the code:

<script type="module">
  import ScrollTop from 'https://cdn.skypack.dev/smooth-scroll-top';
  const scrollTop = new ScrollTop();
  scrollTop.init();
</script>

That's it you imported and used my library. It is optimized, and you can even use it in Deno land if needed. Skypack simplifies that.

If you are interested in which projects it is a no-brainer and which ones could be problematic, you can read my article here: Building NPM package in 2021.

I also encourage you to check opinions from guys much smarter than me. For example:

If you like what you see and you want to see more tools and articles, follow me on Github and Twitter.