javascript - Bundle and publish client-side web code on NPM

Question

I made a Javascript file. Let's say the contents of it are this:

let myCoolAlert = (str) => {
    alert(str)
}

// in a different js file (SO doesn't allow you to cross-file as far as I know
myCoolAlert('Hello World!')

question from:https://stackoverflow.com/questions/65836589/bundle-and-publish-client-side-web-code-on-npm

Answer 1

To bundle client-side code and publish it through NPM you'll need to do a couple things: learn how to package and publish modules, and write some code that can be consumed. This means using module.exports or export to expose your library, depending on whether you want to use CJS or ESM. The consumer of your library can usually be assumed to be using Webpack, Fuse, Rollup, or some other bundler which knows how to deal with modules.

You can also use a tool like Rollup yourself to build and bundle up your library for different targets and apply various transformations to it (example from my own library boilerplate). Using a bundler like this makes more and more sense as your library inevitably grows larger.

Using modules like this rather than distributing through a CDN or in some other way that puts your library code on the global/window object is generally better for consumption in complex apps, large apps, and/or apps already being built with tools like Webpack (so, anything written in React, Angular, Vue, etc.). But having a CDN distribution is still a good idea for something like your library, since it may well be used by people building sites with jQuery and vanilla JS.