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 and , 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. Rollup Babel , 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? With ES2015 standard (or ES6) 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" smoothScrollTop ; import 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 - , - required for proper interpretation of .js files - , - tels which file is our main export, we should use it instead or - , - this will allow checking proper versions of Node, which supports ES2015 modules "type": "module" "exports": "./build/index.js" main browser "engines": { "node": "^12.20.0 || ^14.13.1 || >=16.0.0"} Your build script could be as simple as with configuration similar to . "build": "tsc" tsconfig.json 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 . You'll also find some more information about more complicated setups and packages. article You can also check the GitHub repository of library. You can treat it as an example. Smooth Scroll Top Follow me on and . Twitter GitHub
