375 reads

How to Write a Simple NPM Package

by Julian.ioJuly 1st, 2021

Too Long; Didn't Read

With ES2015 standard (or ES6), we got built-in modules in JavaScript. Previously it was supported by third-party tooling like RequireJS, for example. You can now use modern CDN services like Skypack and then import your tool in the browser. Using Typescript and export definitions, you can even use your package in Deno land. Skypack will allow your package to be published in the NPM registry without any transpiling. You can also use your code in modern JavaScript code without any additional processes.

Company Mentioned

featured image - How to Write a Simple NPM Package

Lately, I had to write an NPM package for browsers. So I sat down and start thinking about how one should do this in 2021.

We usually use bundlers and transpilers like Rollup and Babel, and these are great tools. Especially when you need to write something more significant, more complicated, which uses third-party modules and with performance in mind from the beginning. However, is this required when you need a simple tool published in the NPM registry? No, it isn't in 2021. Let's see why.

With ES2015 standard (or ES6), we got built-in modules in JavaScript. Previously it was supported by third-party tooling like RequireJS, for example. In Node, we still use CommonJS in many cases. ES2015 brought a standardization for JavaScript modules. A couple of years later, we have got full support for them on the browser's side and in Node. That's great. But what does it mean?

Imagine that you only need a Typescript compiler to prepare your NPM package written in ES2020 standard. Of course, if you want to write in Typescript. Otherwise, it is also optional. But I think using it is quite reasonable. Anyway, yes, it is possible to use just the language itself without additional processes. What's even better you can now use modern CDN services like Skypack and then import your tool in the browser:

<html>
  <body>
    <script type="module">
      import smoothScrollTop from 'https://cdn.skypack.dev/smooth-scroll-top';
    // do something with it here
    </script>
  </body>
</html>

Ok, so how to do that?

First of all, you need a couple of changes in your package.json file.

Here is what we need (example of mine):

"type": "module"

, - required for proper interpretation of .js files
-

"exports": "./build/index.js"

, - tels which file is our main export, we should use it instead

main

browser

"engines": { "node": "^12.20.0 || ^14.13.1 || >=16.0.0"}

, - this will allow checking proper versions of Node, which supports ES2015 modules

Your build script could be as simple as

"build": "tsc"

with

tsconfig.json

configuration similar to this one.

All you need to do next is to publish your code to the NPM registry. Without any transpiling. Just modern JavaScript code.

If you use Typescript and export definitions, you can even use your package in Deno land. Skypack will allow that. Read more here.

It is straightforward nowadays. If you want to read more details, please check my article. You'll also find some more information about more complicated setups and packages.

You can also check the GitHub repository of Smooth Scroll Top library. You can treat it as an example.

Follow me on Twitter and GitHub.